デザイン４原則：整列

学びのアウトプット

デザインの４原則の２つ目の「整列」
「整列」はページの一体化と組織化。ページ上の全てのものを、根拠なく配置するのではなく、全ての要素が他の要素と視覚的繋がりを持たせることが大切。

中央揃えは、初心者に最も一般的な整列方法。フォーマル、静か、普通、という印象を与えますが、時には退屈に見えることもあるので、注意。
中央揃えは、明確に意図的な場合に最大に効果を発揮する。

そして、またも、もちさんもおすすめ本の１つである「ノンデザイナーズ・デザインブック　第４判」からの中にある「デザイナーの目を鍛える」課題をやってみることにしました。

「デザイナーの目を鍛える」課題

P３８
例の２、３、４が１よりも明確に情報を伝達し、おもしろいし視覚的表現になっていることに役立っている小さなデザイン的な違いを３つ以上あげる。

２：
行長を短くしたため、中央揃えがより明確になり、その効果が出ている。
行間を余白を統一 フォントに個性を出している

３：
フォントに個性を出している イラストも個性的で、中央揃えにし統一され、意図的。

４：
ボールドなフォントの起用 タイトルの後ろに帯を入れ、テキストは背景の色になっている。

P45
よりプロらしく明確に情報が伝わるようにしている違いを、12個以上あげる

• タイトルを大きくした ロゴを大きくした。

• 下にブルーの帯を入れた。

• コンタクト先の情報を大きくし、色も反転し、目立たせている。

• コンタク先のスペル内に、大文字を入れ読みやすくしている。

• ロゴと社名を、補足の情報と分離させ、それらの情報を整列させた。

• テキスト全てを、左寄せに徹底している。

• 電話番号をはじめに持ってきている。

• そのことによりいできた広告内容の下のスペースに、ロゴのモチーフの葉っぱを配置でき、一体感ができた。

• 電話番号のハイフンをピリオドに変更し、視覚的にすっきりさせている。

• 住所もピリオド、コンマから、中黒で統一し、視覚的にすっきりさせている。

• 「Apps」の省略をやめて、全てスペリングした。 広告内容の行間を統一。

P47
よりプロらしく見せるために役立っている他の小さな違いを３つ以上あげる

• 画像の輪郭が取り外されている。

• 画像が、文字ブロックのラインと整列している。

• 本文を均等揃えにし、すっきしした印象。

• それによりできたスペースを活用し、段落の存在を強調し、知らせている。

P49
よりプロらしく見せるために役立っている他の小さな違いを３つ以上あげる

• 見出しのフォントと、タイトルのフォントを統一した。

• また、色も統一した 徹底した左寄せ 見出しの色を変える。

• イラストのカラーのトーンを下げた。

• 目次の整列をするために、ピリオドの代わりに、タグとリード罫を使用。

P50
２つのスライドの違いを、さらに３つ以上あげる

• 画像の大きさを隣の情報の高さを合わせた。

• 6 stepsをSix Stepsとして、その後に続く文字をのリズム揃えた。

• タイトルを大きくした テキストと数字の近接を強めた。

P53
２つの広告、どちらとも、近接と整列にもう少し注意を払う必要があります。

１：この広告のバラついた項目をまとめることができる箇所は？

• メインの会社名の文字サイズが、画像に比べて小さいので、もう少し大きくする。

• 下のロゴを小さくして、上のロゴとの競合しないようにする。

• 副見出しを近づけて、グループ化を強化する。

• Webアドレスに大文字も使用し見やすくする。

２：何が最も重要なことなのか、見極めよう

１）すべての要素が必要か

• For more information….は、ここまでの文字数が必要か？

• Horseback Ridingは必要な説明か？

２）各要素が適切な階層構造に配置されているか

• 黒帯と太文字の配置場所の意図が不明（タイトル以外）

まとめのアウトプット

ページ上の項目が整列しているときは、たとえ要素と要素が離れて置かれていても、それらの要素を結びつける「透明な線」が視覚的にも心理的にも存在するということ。ページ上の全ての項目が、何か他のものと視覚的に関連していることの大切さを学びました。