分かりやすい図版を作るためのポイント

高島 藍子のプロフィール画像
デザイナー 高島 藍子

1,279 view

分かりやすい図版を作るのは難しい。

ただ情報をまとめるだけではなく、必要であれば情報を再構成して、よりわかりやすく纏め直し、その上でサイトとトンマナを合わせたデザインをしなくてはならない。新米デザイナーの多くの方は、この図版作成の難しさを実感しているのではないだろうか?かくいう私も、図版作成の難しさを痛感しているデザイナーの一人である。

ベイジでは、大抵の案件でデザインの中で図版を使用しているため、図版を作成する機会はたくさんある。そのため、苦戦しながらも何度か図版を作成をしていく中で、だんだんと、図版作成の時に意識するべきポイントが分かるようになってくる。今回は、そんな風に試行錯誤を繰り返したり、先輩デザイナーに指導してもらったりする中で学んだ、分かりやすい図版をデザインするポイントをまとめてみたいと思う。

関係性を整理する

図形の役割は説明文の補足だ。まずパッと見たときに、一目で何を表した図形なのか伝わるように作らなければならない。そのために必要なのが「関係性を整理する」ことだ。「関係性を整理する」というと難しく感じるが、具体的な例を挙げると

  • 一括りにまとめるべき情報は、同じ四角の中に入れたり、図形の形を揃えたりして、同じグループの情報だということが分かるように、見た目を統一する。
  • 例えば、ユーザーなどに「人」を表すアイコンなどの図形を使う場合、毎回同じアイコンを使用し、むやみやたらに、表現の幅を増やして、ユーザーを混乱させないようにする。

など、案外単純で基本的なことだったりする。複雑な図形の場合は、これに加えて情報の再構成などをする必要が出てくるが、基本的には、この「関係性を整理する」ことが意識で来ていればわかりやすい図版を作ることができるだろう。

デザインのルールを増やさない

これに関しては、図版だけに限らず、Webデザイン全般に言えることだが、Webサイトのデザインをしていく時は、基本的には、初めに決めたルールに則ってデザインを作成し、どうしても必要に迫られない限りは後半になってからルールを増やさないことが、整理された統一感のあるデザインをする上で大切な基本である。

この基本が、ページのデザインの時には守れているのに、図版作成になるとなぜか無視してしまい、デザインルールがバラバラで制作してしまうことがある。そうするとせっかく整理していた全体のデザインまでもが崩れてしまうので、サイトのトンマナに合った美しい図版を作成するためには「デザインのルールを増やさない」ことを意識することがとても大切だ。

ジャンプ率のバランス

情報は整理できているはずなのに、なんとなくやぼったいデザインになってしまうときは、この「ジャンプ率のバランス」がうまく調整できていないことが多い。

 ジャンプ率とは

デザインの中の文字や画像などの要素において、大きい要素と小さい要素の大きさの比率をのことを指す。基本的には、要素同士の大きさの比率が大きい状態をを「ジャンプ率が高い」、比率が小さい状態を「ジャンプ率が低い」と表現し、例えば、ジャンプ率が高いデザインは、訴求力が高くユーザーに一目で内容を伝えることができる。一方、ジャンプ率が低いデザインは、落ち着いた印象のデザインになり、文章をじっくり読ませたい場合に適している。

このように比率が高い場合と、低い場合で生まれる効果が違うので、この効果を正しく把握しておくことで、やぼったくない洗練されたデザインの図版を作成することができる。

ジャンプ率を極端につけすぎたり、逆につけなさすぎたりすると、一気にバランスが悪くなる。そのため、デザイン作成の時にはジャンプ率を適切なバランスに調整できるように意識することが大切だ。

最後に

 ここまで読んでくださった方は気づいたと思うが、図版作成で気をつけるべきポイントは、普段のデザインする時に意識しているような、基本的な原則と同じだ。つまりは「関係性を整理」も「デザインルールを増やさない」ことも「ジャンプ率のバランス」も全て、図版作成の時に限らず、どんなデザインにおいても、大切なポイントなのだ。

では、なぜこれらのポイントを、「分かりやすい図版を作るためのポイント」として紹介したのかというと、普段のデザインの時には意識できているこれらのポイントが、図版作成などのメインのデザインから外れたコンテンツになると、意識できなくなってしまうことが多いからである。

図版も、Webサイトのデザインも基本的なデザインのポイントは同じである。それを理解し、別物だという認識をやめて、同じサイト制作の延長線として認識する。そうすることで、今回まとめた3つのポイントを意識しつつ、サイトとトンマナが合った、わかりやすい図版をデザインすることができるようになると私は考えている。

関連する日報

    【書評】『いちばんよくわかるWebデザインの基本きちんと入門』~伝えたいことより伝わること

    561 view

    岡田大悟のプロフィール画像
    岡田大悟 デザイナー
    納得感のあるデザイン提案のポイント

    3,877 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    フリー素材のアイコン・イラストを流用する時のコツ

    3,346 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    経験やスキルがなくても、デザインのフィードバックはできる

    2,656 view

    原浦 智佳のプロフィール画像
    原浦 智佳 デザイナー
    「壁打ち相談」をうまく使って、情報設計を効率よく進めよう!

    1,912 view

    高島 藍子のプロフィール画像
    高島 藍子 デザイナー
上に戻る