Paranaviトップ お仕事 資格/勉強 センスいいねって褒められる! 今日から使えるデザイン術 #03 レイアウト編

センスいいねって褒められる! 今日から使えるデザイン術 #03 レイアウト編

SHARE

Xでシェア Facebookでシェア LINEでシェア

「新型コロナウイルス」の影響で在宅勤務が推奨されている方も多くなってきたのではないでしょうか? オンライン会議やチャット上では、テキストでのコミュニケーションをとることや資料を作る機会も増えたかと思います。対面ではない環境で資料のみで伝えるというのは、なかなか難しいですよね。今回は、そんな資料づくりに役立つ「情報を適切にまとめる」ためのコツをお伝えします。

デザインってなんだろう?

これまで、#01 配色編#02 フォント編では見た目の装飾で、情報が伝わりやすくまとまるコツをお伝えしましたが、改めてデザインに関してお伝えしたいと思います。

デザインというとファッションや建築、家電製品など、いろいろなプロダクトに対して使われる言葉で、単なる「装飾」という意味で捉えている人も多いと思います。ですが、デザインの本質的な目的としては「設計」という言い方のほうが、より適切かもしれません。いずれのプロダクトに関しても、見た目の美しさを飾るだけでなく、いかに「人が使いやすいようにするか」が考えられているのがデザインです。

今回は、資料作成の時に意識するべき「情報の設計」に使えるデザインのコツをご紹介します。

デザインの基本!「レイアウトの4原則」

デザインには「4つのルール」があります。

・近接
・整列
・反復
・強弱

以上の4つが「レイアウトの4原則」、「デザイン4原則」と呼ばれるものです。この原則を守るだけでレイアウトを美しく、より情報が伝わるようにまとめることができるようになります。1つずつ見ていきましょう。

近接とは?

人は、「位置が近く配置されたもの」を「関連がある」と判断します。「近接」とは、関連する情報をグループ化することで情報をまとまりとして認識しやすくすることです。また、適切な余白を設定することで関連項目と別の項目とを明確に分けることができます。このレイアウト方法を使用することで位置関係を整理し、情報を理解しやすくしてあげることができます。

近接01

このようなメニューだと情報が整理されておらず、パッと見たときにパスタの金額が、写真の上についているように見えてしまう可能性があります。また、ごちゃごちゃしていてそもそもが見づらいですよね。

近接02

こちらのように、しっかり情報設計してあげると、だいぶ情報が整理されて見やすくなったのではないでしょうか?
余白を、関連する情報同士の余白は狭くすること関連しない情報同士の余白は広めすることで、視覚的に分けてあげることがポイントです。資料作成の際には、グラフと説明文やタイトルなどの構成で余白の取り方を工夫してみるとよいでしょう。

整列とは?

「整列」とは、文章や図を意識的に整列させて配置することで、ユーザーが情報を認識しやすいように見た目を整えることです。近接と合わせて使うことで、より情報の視認性を上げることができます。

整列01

名刺を例に見てみると肩書と氏名、社名と所在地のグループを作り、整列配置することでわかりやすくすっきりしたレイアウトにすることができます。近接と合わせて取り入れることで、より整理することができます。

整列02

反復とは?

サイト内で特徴的なアイコンやモチーフ、配色やレイアウトパターンなどを繰り返すことで全体的に統一感や一貫性を持たせることを「反復」といいます。1つのサイトの中で同じデザインを繰り返すことにより、ページが変わっても同じサイトであることをユーザーに伝えます。また、画面の中でリズムが生まれ、わかりやすくすることができます。資料などでは各ページのタイトルのあしらいなどを統一してあげるとよいでしょう。

反復01

このパラナビのサイトでも、同じタイトルの装飾を繰り返すことで統一感を出しています。

反復02

強弱とは?

「強弱」とは、大切な要素を大きく、補足は小さくなど情報の優先度を明確にしてあげることです。しっかり強弱をつけることで直感的に伝えることができるようになります。

強弱

すべて同じ大きさの文字や色も同じになってしまうと、何が重要なのか明確に伝わらなくなってしまったり、ユーザーがどこを見ればいいのかわからなくなってしまうので、強弱をつけ大切な情報がしっかり伝わりやすくしましょう。

まとめ

「センスがないから〜」と諦めてしまう人もいるかもしれませんが、デザインの一つ一つは、実はこういった「情報の設計」で成り立っています。こうして見ると、どれも少し意識すればすぐに使えることばかりではないでしょうか? リモートワークのコミュニケーションでは、「伝え方」がよりいっそう大事になってきます。これを機に、伝えやすい資料作りのスキルを磨いて、お仕事に役立ててみてください!

SHARE

Xでシェア Facebookでシェア LINEでシェア

Keyword

菅家 郁美
Writer 菅家 郁美

VIEW MORE

Page Top