ピックアップ

コンテンツデザインで注意するポイント

インフォグラフィックのデザインをはじめ、マイクロコンテンツ、動画などのコンテンツデザインで実績があるColumn Fiveが、コンテンツデザインで注意するポイントを8つ挙げています。
8 DESIGN MISTAKES THAT RUIN YOUR CONTENT (AND EASY FIXES)

その中から4つを僕の経験も交えて紹介します。

1.階層

コンテンツ デザイン 注意点 2
image by Column Five

僕の場合は、本格的なグラフィック作業に入る前に情報に明確な序列をつけます。その上で、序列の違いを「位置」「サイズ」「色」を使って表現しています。
その際、迷いはほとんどなく以下のルールが原則となります。

  • 位置:重要な情報を上に
  • サイズ:重要な情報を大きく
  • 色:重要な情報を目立つ色に

2.整列

コンテンツ デザイン 注意点 3
image by Column Five

オンライン向けのコンテンツで、まず試すのが左揃えです。というのも、ほとんどの画像コンテンツはテキストの途中に差し込まれます。テキストは左揃えの場合が多いので、それも含めてラインが揃うように画像内の情報も左揃えにすることを考えます。

ただし、オンラインの中でもモバイル向けに特化したコンテンツの場合は、センター揃えも使い方によっては有効です。デスクトップでは画面が大きく、一度に表示される領域が広いため前後のテキストの一体感が求められましたが、モバイルでは一度に目に入ってくる情報は限定されます。

そこで、前後の流れからリズムをがらっと変えてセンター揃えにして、印象を高めるという方法があります。

一番難しいのが右揃えで、積極的に取り入れることは少ないです。
いずれにせよ、デザインががたがたしていると、情報が頭に入ってこないため(稀に絶妙なバランスのものもありますが)、整列は基本です。

3.色数

コンテンツ デザイン 注意点 3
image by Column Five

デザインの終盤にうまくいっていないと感じるとき、その原因が色の使い過ぎという場合がよくあります。そんなときは色数を減らすようにします。目安はモノクロ + 2色。最終的にそれ以上使うにしても、いったん色数を絞ってから、慎重に増やすようにしています。

4.イラスト

コンテンツ デザイン 注意点 4
image by Column Five

コンテンツの内容に自信がないときにイラストを多用して誤魔化そうとしてしまいがちです。イラストを抜きにして、情報が成立しているかを吟味してからイラストをどの程度加えるか検討します。

その際、すべてを同じ濃度で仕上げると、見る側はお腹いっぱいになってしまいます。イラストにするところ、シンプルなアイコンにとどめるところ、テキストのみにするところを意図的に用意するようにします。

おわりに

普段、特に気をつけていることに重なるものを取り上げました。Column Fiveのサイトでは全部で8つのポイントが彼らの切り口で語られています。
8 DESIGN MISTAKES THAT RUIN YOUR CONTENT (AND EASY FIXES)

Column Five創業者たちによる著書『ビジュアル・ストーリーテリング』もおすすめ。

プロフィール

櫻田潤

櫻田 潤

プログラマー、システムエンジニア、ウェブデザイナーを経て、2010年よりビジュアルシンキング運営開始。2014年12月よりNewsPicks編集部でインフォグラフィックス・エディターとして記事執筆。研修・インベント講師や書籍執筆も行なっている。著書に『たのしいインフォグラフィック入門』ほか。

19 Sep, 2016