ウェブサイト作ったり通信制高校の先生やったりしている私ですが、今日から図解の勉強も始めました。
なぜ図解かというと・・
ウェブサイトの売り上げをもっと伸ばして、お金の心配をより小さくした状態で大学院に行きたいからです！
ウェブサイトの売り上げを伸ばすには、ランディングページ（LP)の精度をあげていく必要があります。
だから図解を勉強します！！
お金お金！！
なぜLPに図解が必要なのか
LPは視覚に訴える要素が大きいので、パッと見てよくわかることが大切です。
感情を揺さぶるような文章も大切なのですが、「つかみ」がないとせっかくの文章も読んでさえもらえない・・
なので、図解にできる部分は図解にするのが良いかなと、今更ながら思うわけです（←WEBデザイナー歴１０年）
図解があれば、より伝わると思うので、これから図解を勉強していきます。
遅くない？
何かを始めるのに「遅すぎた」は無い。by 誰かの名言。
図解の役割とは？
- 情報の整理
- 情報の理解
- 正しく共有する
まず図解があれば情報を整理できます。
また図解によって理解が深まります。
そして、ここ一番大事。
文章だけだと認識のミスマッチが起こる可能性もありますが、図解によって正しく情報を共有することができます。
図解はセンス？
図解を作ろう！と意気込んでみたものの、イラストやデザインのセンスがない私は何から書いていけばいいのかさっぱりわからず・・
図解に関する本を読んで勉強することにしました。
どの本にも共通して書かれていたのは、
- 図解は美術１でもいける
私は美術１ではなかったですが、高校では音楽を選択していたので、美術は義務教育止まりです。
では早速、図解について勉強したことをまとめていきます。
図解の作り方
図解とは、３つの要素でできている。
- 記号
- レイアウト
- 装飾
この３つのバランスが大事。
図解は手書きで始める
直感的に理解できる図解を作るためにまずやるべきことは、
- 手書きで始める
まぁそうですよね。
WEBデザイナーを始めた頃はワードプレスよりもHTMLで作るウェブサイトが主流で、レイアウトを考えるのはいつも手書きでした。
なのに、慣れてしまった今は手書きで始めることを疎かにしていましたね・・
図解は超初心者なので、手書きで始めていきます。
使えそうな図解を見つける
まずお手本となる図解を見つけます。
そこに自分の伝えたいことを乗せて、伝わるか？改善点はどこか？を確認します。
お手本の図解を改善する
伝えたいことが伝わるように改善点を修正していきます。
実際に図解を作っていくのですが、デザインにこだわりすぎないように、シンプルにするよう心がけます。
図解の出番
- システムの全体像を伝えるとき
- 比較するとき
- 文章だけにするとめっちゃ難解なものになるやつの説明
図解のコツ
- リストにする
- グラフにする
- チャートにする
- 樹形図にする」
- マトリックスにする
この前、自分の1日のスケジュールをブログで紹介したのですが、その時に使ったのが円グラフでした。
文字だけで説明するよりも円グラフにする方が読者の方にとってわかりやすかったからです。
ただ、その時に使った円グラフ生成ツールが無料のものだったので、色の配列が不自然で、ちょっと違和感を感じる感じになっています。
仕事で使うやつとかなら、配色にもこだわった方がいいですね。
図解のデザインでよく使いそうなもの
- 丸とか角丸とかの枠
- 矢印
- 直感的な印象を与える挿絵的なもの
図解のテクニック
- 余白は必須
- 行間は広く
- タテヨコ整列を意識
- まとまりを作って分類
- 注目させるポイントは１つにする（視線をちらしすぎない）
- 視線の動きはZ・Fを意識
フォントの違い
なんとなくの感覚でフォントを選んでいましたが、図解にはフォント選びにもポイントがありました。
図解でよく使うフォントは２つ。
- 明朝体
- ゴシック体
読むか見る、どちらの割合が多いかでフォントを決めます。
- 読む＝明朝
- 見る＝ゴシック
まずはたくさんの図解デザインを見まくって、必要な図解を作っていきたいと思います。