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

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

Designsprint
December 15, 2016

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

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

Designsprint

December 15, 2016
Tweet

More Decks by Designsprint

Other Decks in Design

Transcript

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

    View full-size slide

  2. エディトリアルデザインとは
    新聞・雑誌・書籍・カタ
    ログ・マニュアルなどの
    出版物のデザイン。読み
    手の視線、意図を考えて
    視覚的に効果的な図や写
    真等を整理・配列・編集
    あるいは計画すること。
    紙面構成。
    この仕事をする職種をエ
    ディトリアルデザイナー
    と言うが、グラフィック
    デザイナーと兼ねる場合
    が多く、その境界線はあ
    いまいである。

    View full-size slide

  3. 3/19
    コンポジション
    (構成・レイアウト)
    エディトリアルデザインの基本

    View full-size slide

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




















    1 2

    View full-size slide

  5. 5/30
    要素
    バランスをとるためには、
    当然予め、どんな要素を、
    どれくらいの分量必要な
    のか、洗い出しができて
    いなければならない。
    ●このページに必要な要素
    1.一番重要な要素(400文字程度)
    2.次に重要な要素(200文字程度、写真必要)
    3.参考文献(分量未定)
    4.1の脚注



    View full-size slide

  6. 6/19
    ⽐率
    エディトリアルデザインの基本

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. ⽐率の具体的な使い⽅
    例:⻩⾦比と⽩銀比を比較する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. ルール1:揃える
    ⾒やすくするための一つ
    目のコツは整理整頓。た
    いした労⼒がかからない
    わりに大きな効果を発揮
    するのが「揃え」。
    赤い点線をイメージしな
    がら、テキストと図をぴ
    ったり合わせるように配
    置すれば、かなり整理さ
    れて⾒える。少しでもず
    れていると、印象がよく
    ない上、可読性も低下す
    る。
    揃えられるものは、全て揃える
    用語:
    インデント, 右揃
    え, センター揃え
    (中央揃え), 左
    揃え
    赤線のように揃っているよう
    に⾒えるが、実際には「右揃
    え」である。

    View full-size slide

  15. ルール2:細部も例外なく揃える
    左の例のように、写真のタイトルが写真自体よりも文章に近づ
    いていると、タイトルであることが直感的にわからない。写真
    とそのタイトルが一つのグループを成すように、相対的に近く
    に配置するとグループを認識しやすくなる。この時、左揃えを
    使うと、グループの印象が強くなる。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide