Imageフクザツな文章をサックリわかりやすくする図解のつくりかた長い説明文や手順書きを目にしたとき。これが一目でわかったらどんなに楽だろうって考えたことはありませんか。逆に、クレジットカードの申込書なんかで、一見複雑な手続きが3ステップの図で表されていたりするのを見たこともあるのでは。今回は、フクザツな内容をざっくりシンプルに説明してくれる図解の作り方について書いていきます。•実際に図解を作ってみる•「図解力アップドリル」を読んで自己添削してみる•わかったことを整理する製作後と製作前の「図解」のイメージ実際に何も読まずに図解を作ってみたのですが、正直最初は「書いてあることを簡略化して縦に並べてけば出来る」なんて考えてました。そんなことはなくて、「誰が見るのか」「1→2→3は本当に連続したプロセスなのか」、そんなことを色々考えながら作っていかなくちゃいけないんですね。基本的手順1手書きのカンタンな図を書いてみる今回はPhotoshopを使って作業したのですが、最初からPhotoshopに入るのではなくて、まずは図解化したい文章や箇条書きのメモを、手書きの図にしてみましょう。2土台をつくるここからはPhotoshopを使った操作です。フォント操作や配色、装飾を無視して、とにかく最初に描いた自分の図をpsdデータに変換するイメージで作っていきましょう(わたしは最初から色や文字サイズ、フォントを変更してゴールを見失いました)。プラスアルファはそのあとです。大事な部分を見つけ、ハイライトを忘れずに。図解化した手順の中で、最も大切な箇所はどれか、考えてみましょう。そこだけ色を変えたり、背景の色を変えたり、シェイプツールを使って目立たせる工夫をしましょう。ここで気をつけたいのは、デザイン性を重視しすぎて全体を装飾してしまわないようにすること。装飾しすぎると、何が一番大切なのか、一目で分からなくなってしまって本末転倒です。一方で、配色の手順はデザイン力が活きます。明度や再度、補色や同系色の知識を使って、見やすい図解を作りましょう。http://n2p.co.jp/blog/design/choosecolors/分かりやすい図解を作るには大事なのは、「ただ簡略化するのではなく、各プロセスの連続性を吟味しながら組み直していく」こと。文字を使った説明では一つの軸でしか説明が出来ませんが、図を使えば縦軸、横軸の説明が可能です。今回実際に私が作った図解を例にあげてみます。デジタルインセンティブ配布このプロセスを図解化したものが、ABAは全てのプロセスを縦に並べている一方で、Bは左の軸がサイト内で起きるアクション、右がアクションによる影響を表現しています。「画面一面を自由に使える」という、文章には無い特徴を活かした、分かりやすい図解を作れたらいいですね。Postsレイアウトの決まりごと。Comments良いレスポンシブデザインはメインヴィジュアルで決まる。参考にしたいテクニックまとめ。SNSキャンペーン方法論と実践」を開催しました。