Upgrade to Pro — share decks privately, control downloads, hide ads and more …

エディトリアルデザインの基礎

F1e359b5fb3358d9051bcfaf43a4e3af?s=47 Designsprint
December 15, 2016

 エディトリアルデザインの基礎

Webデザイン・UIデザインをこれから学びたい方、エンジニアの方、経営者の方向けの基礎知識をまとめました。

F1e359b5fb3358d9051bcfaf43a4e3af?s=128

Designsprint

December 15, 2016
Tweet

Transcript

  1. Webデザイン基礎講義 currently v 1.1 「エディトリアルデザインの基本」

  2. エディトリアルデザインとは 新聞・雑誌・書籍・カタ ログ・マニュアルなどの 出版物のデザイン。読み 手の視線、意図を考えて 視覚的に効果的な図や写 真等を整理・配列・編集 あるいは計画すること。 紙面構成。 この仕事をする職種をエ

    ディトリアルデザイナー と言うが、グラフィック デザイナーと兼ねる場合 が多く、その境界線はあ いまいである。
  3. 3/19 コンポジション (構成・レイアウト) エディトリアルデザインの基本

  4. 4/30 バランス 紙面の各要素のバランス が適切でないと、意図し たように⾒えない。 強調するところ=大きく 脚注=小さく 同じ要素= 同じ大きさで 同じグループ=

    まとめる タイトル 一番重要な要素 脚注 次に重要な 要素 参考文献 左 右 の つ な が り 薄 い の で 余 白 を 広 め に あ け る 1 2 3
  5. 5/30 要素 バランスをとるためには、 当然予め、どんな要素を、 どれくらいの分量必要な のか、洗い出しができて いなければならない。 •このページに必要な要素 1.一番重要な要素(400文字程度) 2.次に重要な要素(200文字程度、写真必要)

    3.参考文献(分量未定) 4.1の脚注 ・ ・ ・
  6. 6/19 ⽐率 エディトリアルデザインの基本

  7. ⻩⾦⽐ 古代ギリシャで発⾒され、 人間にとって最も安定し、 美しい⽐率とされる美術 的要素の1つ。外中⽐。 中外⽐とも言われる。 近似値は1:1.618、約5:8。 世界で最も美しい縦横比 1 1.168

  8. 白銀⽐ 数学定数(変数に対して、 値の変わらない数)の1つ。 直角二等辺三角形の短辺 と⻑辺の⽐。 近似値は1:ルート2。 別名「大和比」。日本古来の建築物や都市景観に活かされた。

  9. 9/19 参考:その他の⽐率 画面アスペクト比(規格) ◆従来型テレビ(SDTV)の⽐率 「4:3」 ◆ハイビジョン(HDTV)の⽐率 「19:9」 ◆コンピュータディスプレイの⽐率 「16:10」 映像(ディスプレイ)の世界にも独⾃比率がある。

  10. ⽐率の具体的な使い⽅ ブラウザの画面は、ユー ザによって自由にサイズ を変えることができる。 制作者側でサイズを規定 しないと、どこまでも崩 れたレイアウトになって しまうので、最初にサイ ズとバランスを決める必 要がある。

    さらにサイズはピクセル 単位で決められるので、 感覚でバランスをとろう とすると規定がないので 決めきれなくなってしま う可能性がある。 例:⻩⾦比で画面を分割する ヘッダとグロナビ メインビジュアル 13 8 5 W960 H226 H367 H593 PCの画面デザインだけの時代はよく使 いましたが、最近はスマートフォンな ど多デバイス対応(画面によってサイ ズや⽐率が変わるため)が前提なので 、あまり使わなくなってきています。
  11. ⽐率の具体的な使い⽅ 例:⻩⾦比と⽩銀比を比較する

  12. 具体的な使い⽅ ⻩⾦比と⽩銀比を比較する

  13. 13/19 ルールを作る・守る エディトリアルデザインの基本 (整理整頓/キレイに、⾒やすく・読みやすく)

  14. ルール1:揃える ⾒やすくするための一つ 目のコツは整理整頓。た いした労⼒がかからない わりに大きな効果を発揮 するのが「揃え」。 赤い点線をイメージしな がら、テキストと図をぴ ったり合わせるように配 置すれば、かなり整理さ

    れて⾒える。少しでもず れていると、印象がよく ない上、可読性も低下す る。 揃えられるものは、全て揃える 用語: インデント, 右揃 え, センター揃え (中央揃え), 左 揃え 赤線のように揃っているよう に⾒えるが、実際には「右揃 え」である。
  15. ルール2:細部も例外なく揃える 左の例のように、写真のタイトルが写真自体よりも文章に近づ いていると、タイトルであることが直感的にわからない。写真 とそのタイトルが一つのグループを成すように、相対的に近く に配置するとグループを認識しやすくなる。この時、左揃えを 使うと、グループの印象が強くなる。

  16. ルール3:まとめる 内容に即してグループ化を⾏なうことで、全体の構成やロジッ クが理解しやすくなる。関連の強い文章と写真同⼠を近くに配 置(=グループ化)すると内容を直感的に理解しやすくなる。 また逆に関連の弱いものは意図的に少し離して配置する(上下 でスペースを取る)ことで、よりグループ化が強調される。 関連の強いもの同士を相対的に近づける

  17. ルール4:余白を使ってまとめる 2つ以上の項目が連続しているような場合、タイトルと文章の 間隔よりも、項目間の間隔が短いとグループを認識しづらく、 全体像を把握しにくくなる。右のように項目ごとにグループ化 すると、全体像を把握しやすく(⾒やすく)なる。

  18. ルール5:強調する ⾒出しも文章も同じサイズで単調に書かれているとどこに注目 すれば良いか分からない。喋る時の抑揚と同じように、文字に も視覚的な強弱を付けると、⾒やすくすることができる。 文字の「太さ」や「サイズ」、「色」を変える、背景に色を付 けるなどの手段がある。 重要なところ・そうでないところの強弱を付ける

  19. 参考:色を使ってまとめる 2つのコンテンツがあり、それに対応した2つの図がある時、 かつ色で分けた⽅が有効な場合「色により関連付ける」ことも できる。図に枠を付けその枠と小⾒出しを同じ色にしてみると、 テキストと図の関係がより密接なものになり、理解を助けてく れる。 ⾊によって関連付けを意識させる⽅法もある