fbpx

フクザツな文章をサックリわかりやすくする図解のつくりかた

///フクザツな文章をサックリわかりやすくする図解のつくりかた

フクザツな文章をサックリわかりやすくする図解のつくりかた

長い説明文や手順書きを目にしたとき。これが一目でわかったらどんなに楽だろうって考えたことはありませんか。逆に、クレジットカードの申込書なんかで、一見複雑な手続きが3ステップの図で表されていたりするのを見たこともあるのでは。今回は、フクザツな内容をざっくりシンプルに説明してくれる図解の作り方について書いていきます。

 

この記事を読むと
•「図解」とは
•基本的手順
•わかりやすい図解を作るポイント
が分かります

 

 

今回の課題
•実際に図解を作ってみる
•「図解力アップドリル」を読んで自己添削してみる
•わかったことを整理する

製作後と製作前の「図解」のイメージ

実際に何も読まずに図解を作ってみたのですが、正直最初は「書いてあることを簡略化して縦に並べてけば出来る」なんて考えてました。ごめんなさい。もちろんそんなことはなくて、「誰が見るのか」「①→②→③は本当に連続したプロセスなのか」、そんなことを色々考えながら作っていかなくちゃいけないんですね。

 

 

 

基本的手順

①手書きのカンタンな図を書いてみる

今回はPhotoshopを使って作業したのですが、最初からPhotoshopに入るのではなくて、まずは図解化したい文章や箇条書きのメモを、手書きの図にしてみましょう。

 

②土台をつくる

ここからはPhotoshopを使った操作です。まずはフォント操作や配色、装飾を無視して、とにかく最初に描いた自分の図をpsdデータに変換するイメージで作っていきましょう(わたしは最初から色や文字サイズ、フォントを変更してゴールを見失いました)。プラスアルファはそのあとです。

 

③装飾する。一番大事な部分を見つけ、ハイライトを忘れずに。

図解化した手順の中で、最も大切な箇所はどれか、考えてみましょう。そこだけ色を変えたり、背景の色を変えたり、シェイプツールを使って目立たせる工夫をしましょう。ここで気をつけたいのは、デザイン性を重視しすぎて全体を装飾してしまわないようにすること。装飾しすぎると、何が一番大切なのか、一目で分からなくなってしまって本末転倒です。
一方で、配色の手順はデザイン力が活きます。明度や再度、補色や同系色の知識を使って、見やすい図解を作りましょう。

http://n2p.co.jp/blog/design/choosecolors/

分かりやすい図解を作るには
大事なのは、「ただ簡略化するのではなく、各プロセスの連続性を吟味しながら組み直していく」こと。文字を使った説明では一つの軸でしか説明が出来ませんが、図を使えば縦軸、横軸の説明が可能です。例えば、今回実際に私が作った図解を例にあげてみます。

 

キャンペーントップページ

マイページ登録(仮登録)

確認メール(本登録)

マイページログイン ←シリアル登録

コース選択

クイズやゲーム、くじ

その場で結果が分かる! →はずれ →SNSで拡散(オプション)

当たりの場合は、配送先登録

発送業務・デジタルインセンティブ配布

 

このプロセスを図解化したものが、

A

スクリーンショット 2015-10-30 16.00.13

B

スクリーンショット 2015-10-30 17.28.49

 

Aは全てのプロセスを縦に並べている一方で、Bは左の軸がサイト内で起きるアクション、右がアクションによる影響を表現しています。「画面一面を自由に使える」という、文章には無い特徴を活かした、分かりやすい図解を作れたらいいですね。

 

参考

「デザイン仕事に必ず役に立つ 図解力アップドリル」原田泰 WORKSCORPORATION

2017-02-09T14:44:39+09:00