デザイン４原則：近接

学びのアウトプット

デザインの４原則の１つの「近接」
「近接はどれ？どこ？」と意識して設計していくことが、「なんとなくデザイナー」にならない重要なことだと感じたと同時に、その目を養い、鍛えるためにもっともっと沢山のデザインを意識して見ていこうと思いました。

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

まず最初は４原則の「デザイナーの目を鍛える」
例の方が、より正確に情報が伝わるのに役立っている違いを５つ以上あげる

• 意味のない枠を外した。

• それにより得られたスペースを活用し、タイトルをボールド体にし、強調（コントラストの原則）

• ３つのステップを太文字にした

• そのことで、数字が不要になり、削除し、頭をそろえて並ばせ、よりすっきりした印象。（近接の原則）（整列の原則）

• 内容の説明を細文字で真下につけ、グループ化。

• その３つを反復している。（反復の原則）
  
  
  
  「近接」の「デザイナーの目を鍛える」課題
  ２番目の例が、ほんの少しプロらしく見えるのに役立っている小さな違いを８つ以上見つける

P19 ２番目の例の方が、ほんの少しプロらしく見えるのに役立っている小さな違いを８つ以上見つける

• Phone consultation availableのavailableをなくしてる。（なくても伝わる情報だから）

• コンタクト情報と、サービス内容の情報を分けてグループ化している。

• サービス名の文字数をあげ、そのほかの文字は全体的に下げている。

• 文字サイズを変更したことにより、できたスペースを使い、大きなハートを１つだけ入れ、カラーのメイドを下げ、情報の邪魔になっていない。

• サービス名と、サービス内容の情報を分けてグループ化している。

• 改行のタイミングをかえ、文字が読みやすくなっている。

• ハート大きくなり、テキストと統合している。

• Eメール、アドレスの先頭を大文字にして、読みやすくなっている。

  

２番目の例がよりすっきりと見えて、情報がよく伝わるのに役立っている違いを５つ以上見つける

• ３つのイベントタイトルを太文字にした。

• それぞれのイベント内容の文字サイズを下げた。

• イベントタイトルと内容をグループ化した。

• 会場場所の詳細を、イベント内容と離した。

• 重要な会場情報を太文字にした。

• メインタイトルを大きくした。

• 細文字、グループ化によってできた余白が、全ての情報を読みやすく、見やすくしている。

• 見出しがコントラストの原則を使って、太文字になっている。

• 星れるの原則を使って、強い整列が与えられている。
  
  

  

２番目の例が、より明確に情報が伝わるのに役立っている他の違いを３つ以上見つける

• ４隅の角の丸みが小さくなっている

• イラストがスペースからはみ出すポジションになっている

• vol. とno.が省略化ではなく、書き出されている

• テキストのカラーが変更されている

• テキストのカラーが視線を妨げぬようにグレーになっている

• 視線の始まりの左上、次に左右にあったテキストを、タイトルの下に置くとこで、まずタイトルが目に目に飛び込んでくる

• タイトル以外の情報の内容を整理し、関係性があるものを組織化した

• タイトルが大きくなっている

• テキストが整列している
  
  

  

右の例が、より明確に情報が伝わるように役立っている小さな違いを、５つ以上見つける。

• SHAKESPEAREが小文字になり、読みやすくなり、大きく組むことも可能になっている。

• 中央寄せから、左寄せに変更。

• 背景の黄色のトーンが上がり、テキストとのコントラストがはっきりし、読みやすくなっている。

• 見出しのタイトルとそれに関する説明文をグループ化し、反復することで読みやすくなっている。

• 整理されて得られたスペースで、画像を大きくできたことで、情報が即座にわかるようになった。

• 連絡先情報と、見出し＋説明本文の余白を強調したため、情報の違いがより明確になった。

• Email、Web、Phoneの情報文字が削除され、すっきり読みやすくなっている。

• セミコロンとスラッシュも削除されて、すっきり読みやすくなっている。

このメニューを整理整頓するのに役立っている他の違いを、４つ以上あげる。

• 全て大文字だったのを小文字に変更し、余白を作った。

• タイトルのフォントを変更し、その他のメニューの情報と区別できるようになった。

• 全ての文字の整列の徹底。

• 見出しを太字にし、説明は細文字に変更し、コントラストをつけ見やすくする。

• StatersとEntreesをグループ化し明確にすることで、アンダーラインでの強調を削除にすっきりされた。

近接の原則だけを使ってこの作品の改善する方法を５つ以上あげる

• ボレットポイントをテキストにもう少し近づける。

• 本文と画像に余白を入れる。

• 画像と画像の間に余白を入れる。

• 住所と連絡先詳細を本文、画像と離す。

• テキスト情報を整理し、重複しているところはどちらかにする。

• テキスト情報の説明になっている画像を距離を近づけ、明確にする。
  
  

まとめのアウトプット

「活躍できるデザイナー」を目指すという目標は持ちながらも、学習の過程を楽しむことも忘れないでいようと心がけています。
NOTの１つのチャプターを、１冊の本のある一章を、じっくり味わって学習することが、なんだかとても新鮮で、楽しいです。アウトプットしながら、Figmaの操作も覚えながらまとめていることも、実はとても楽しい作業です。
達成することだけはなく、「挑戦していること」「やっていること」にも意味を見出せており、歳をとってから、何かを学ぶことも案外いいな、と思う今日この頃でした。
この学習もとても楽しかったです。