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

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

Transcript

1. Webデザイン基礎講義 currently v 1.1 「エディトリアルデザインの基本」
2. エディトリアルデザインとは 新聞・雑誌・書籍・カタ ログ・マニュアルなどの 出版物のデザイン。読み 手の視線、意図を考えて 視覚的に効果的な図や写 真等を整理・配列・編集 あるいは計画すること。 紙面構成。 この仕事をする職種をエ ディトリアルデザイナー と言うが、グラフィック デザイナーと兼ねる場合 が多く、その境界線はあ いまいである。
3. 3/19 コンポジション （構成・レイアウト） エディトリアルデザインの基本
4. 4/30 バランス 紙面の各要素のバランス が適切でないと、意図し たように⾒えない。 強調するところ＝大きく 脚注＝小さく 同じ要素＝ 同じ大きさで 同じグループ＝ まとめる タイトル 一番重要な要素 脚注 次に重要な 要素 参考文献 左 右 の つ な が り 薄 い の で 余 白 を 広 め に あ け る １ ２ ３
5. 5/30 要素 バランスをとるためには、 当然予め、どんな要素を、 どれくらいの分量必要な のか、洗い出しができて いなければならない。 •このページに必要な要素 １．一番重要な要素（400文字程度） ２．次に重要な要素（200文字程度、写真必要） ３．参考文献（分量未定） ４．１の脚注 ・ ・ ・
6. 6/19 ⽐率 エディトリアルデザインの基本
7. ⻩⾦⽐ 古代ギリシャで発⾒され、 人間にとって最も安定し、 美しい⽐率とされる美術 的要素の1つ。外中⽐。 中外⽐とも言われる。 近似値は1:1.618、約5:8。 世界で最も美しい縦横比 1 1.168
8. 白銀⽐ 数学定数（変数に対して、 値の変わらない数)の1つ。 直角二等辺三角形の短辺 と⻑辺の⽐。 近似値は1:ルート2。 別名「大和比」。日本古来の建築物や都市景観に活かされた。
9. 9/19 参考：その他の⽐率 画面アスペクト比（規格） ◆従来型テレビ（SDTV）の⽐率 「４：３」 ◆ハイビジョン（HDTV）の⽐率 「１９：９」 ◆コンピュータディスプレイの⽐率 「１６：１０」 映像（ディスプレイ）の世界にも独⾃比率がある。
10. ⽐率の具体的な使い⽅ ブラウザの画面は、ユー ザによって自由にサイズ を変えることができる。 制作者側でサイズを規定 しないと、どこまでも崩 れたレイアウトになって しまうので、最初にサイ ズとバランスを決める必 要がある。 さらにサイズはピクセル 単位で決められるので、 感覚でバランスをとろう とすると規定がないので 決めきれなくなってしま う可能性がある。 例：⻩⾦比で画面を分割する ヘッダとグロナビ メインビジュアル 13 8 5 W960 H226 H367 H593 PCの画面デザインだけの時代はよく使 いましたが、最近はスマートフォンな ど多デバイス対応（画面によってサイ ズや⽐率が変わるため）が前提なので 、あまり使わなくなってきています。
11. ⽐率の具体的な使い⽅ 例：⻩⾦比と⽩銀比を比較する
12. 具体的な使い⽅ ⻩⾦比と⽩銀比を比較する
13. 13/19 ルールを作る・守る エディトリアルデザインの基本 （整理整頓／キレイに、⾒やすく・読みやすく）
14. ルール１：揃える ⾒やすくするための一つ 目のコツは整理整頓。た いした労⼒がかからない わりに大きな効果を発揮 するのが「揃え」。 赤い点線をイメージしな がら、テキストと図をぴ ったり合わせるように配 置すれば、かなり整理さ れて⾒える。少しでもず れていると、印象がよく ない上、可読性も低下す る。 揃えられるものは、全て揃える 用語： インデント, 右揃 え, センター揃え （中央揃え）, 左 揃え 赤線のように揃っているよう に⾒えるが、実際には「右揃 え」である。
15. ルール２：細部も例外なく揃える 左の例のように、写真のタイトルが写真自体よりも文章に近づ いていると、タイトルであることが直感的にわからない。写真 とそのタイトルが一つのグループを成すように、相対的に近く に配置するとグループを認識しやすくなる。この時、左揃えを 使うと、グループの印象が強くなる。
16. ルール３：まとめる 内容に即してグループ化を⾏なうことで、全体の構成やロジッ クが理解しやすくなる。関連の強い文章と写真同⼠を近くに配 置（＝グループ化）すると内容を直感的に理解しやすくなる。 また逆に関連の弱いものは意図的に少し離して配置する（上下 でスペースを取る）ことで、よりグループ化が強調される。 関連の強いもの同士を相対的に近づける
17. ルール４：余白を使ってまとめる ２つ以上の項目が連続しているような場合、タイトルと文章の 間隔よりも、項目間の間隔が短いとグループを認識しづらく、 全体像を把握しにくくなる。右のように項目ごとにグループ化 すると、全体像を把握しやすく（⾒やすく）なる。
18. ルール５：強調する ⾒出しも文章も同じサイズで単調に書かれているとどこに注目 すれば良いか分からない。喋る時の抑揚と同じように、文字に も視覚的な強弱を付けると、⾒やすくすることができる。 文字の「太さ」や「サイズ」、「色」を変える、背景に色を付 けるなどの手段がある。 重要なところ・そうでないところの強弱を付ける
19. 参考：色を使ってまとめる ２つのコンテンツがあり、それに対応した２つの図がある時、 かつ色で分けた⽅が有効な場合「色により関連付ける」ことも できる。図に枠を付けその枠と小⾒出しを同じ色にしてみると、 テキストと図の関係がより密接なものになり、理解を助けてく れる。 ⾊によって関連付けを意識させる⽅法もある