n2p blog
キャンペーンやSNSの
"ためになる"情報を
執筆しています。
プロがつくった図解をまとめてみた
更新日:2024.11.07 (公開日:2015/11/05)
前回は図解を作りながらポイントを確認し、図解を作る手順とポイントを追っていきました。今回は実際にウェブサイトで利用されている、プロが作った図解を見てみましょう。自分が作る立場になったとき、応用できる技術や工夫が隠れているはずです。
この記事には
•見やすい図解
•施されている工夫
•参考ウェブサイト
が載っています！
今回の課題
アパレルEC、証券、金融など幅広いウェブサイトから見やすい図解を抜粋し、その長所やデザイン上の工夫をメモしていく。
特に、「自分が図解を作るとしたら、どこを真似して作るか」を考えると良いとアドバイスをいただいたので、その視点からポイントを見てみました。
(1) アパレルEC編
①BUYMA
http://www.buyma.com/
一枚目は、YMAと購入者、パーソナルショッパーとの複雑な相関関係を、色分けと配置でコンパクトにまとめている。特に色は赤と青と黒の三色使いだが、青を他の色よりも薄めにすることで上に文字を載せることを可能に。かつ、黒はデザインにメリハリをつける差し色的役割に。
二枚目も同様、言葉で説明すると長くなってしまうところを表と矢印で表現。色は３色で見やすい、かつわかりやすい。関連会社の表示順と表示色にも工夫が見られ、連結している会社をトップに濃い色で、非連結の会社をその下に薄い色でグルーピングしてまとめています。
②D-holic
一枚目は全てのステップが縦画面に収まるデザインなのでスクロール不要。背景のイラストと同系色をテーマカラーとして項目背景の色にすることで、複数の色を使用しているのに統一感がある。
二枚目は４つの項番号が色分けされ、その色も赤→薄いピンク→薄い黄色→黄緑と同系色が用いられている。一方で本文部分は同じスタイルで統一されているためうるさくない。
③ZOZOTOWN
http://zozo.jp/
一枚目は一目でいくつのステップがあるのか（いかに手続きが簡単か）がイラストで視覚的に把握できるよう工夫されている。
二枚目は色の変化を活用してステップの流れを表現。
④リーフ
http://www.a-leaffactory.jp/
項目の背景を矢印モチーフにし、コンパクト化することで全体を一画面に圧縮することを可能にしている。基本色はイラストも文字も白地にグレーだが、目立たせたい部分だけ赤字にして強調している。
(2)証券•金融編
①NISA
http://www.jsda.or.jp/nisa/
誰が何をするのかという流れや役割を分かりやすくするため、それぞれの色に合わせてその行動を色分け表示している。かつ同じ種類の動き（分配金•償還金やお申込金）のものは統一されている。
②外貨オンライン
ページ上部に手続きの流れを表示し、かつ下部でユーザーの目的に合わせて進路を細分化。また、現在どのステップなのかが分かりやすく上部に表示されている。目立たせたい「無料」などのアピールポイントのみ赤字にして
強調している。
③三菱UFJモルガンスタンレー証券
全ステップを横一列で圧縮して一覧にしつつ、下に簡単な説明を加えることでより分かりやすくしている。選択ボタンの色をゴールドに白のシャドウを入れて光沢を表現し、図解でありながらも高級感のあるデザインに仕上げている。
④JCBカード
多数ある商品の中からユーザーが一目で自分の該当するものを把握できるよう、商品画像をそのまま採用している。入会時のカードとグレードアップしたカードを視覚的に分けるため背景色を変えたり、黒の文字を見えやすくするため、背景が白でない部分はフォント自体に白でふちどりを入れている。
(3)その他
①KIRIN mets cola
キャンペーンの流れだけではなく、実際店頭で消費者が商品を手に取ってからの案内が写真とともに描かれ、イメージしやすいものとなっている。デザインについては、キャップタグと吹き出し背景の色を黄色で合わせて統一感を出しつつ、背景色を緑にして鮮やかながら違和感のない配色になっている。
②放送大学
ステップの番号とキーワードだけを同じ色で目立たせ、整理されていて見やすい、シンプルでまとまりのあるデザイン。また、全て同じフォントだが太さや色を変えることで大切な部分を効率よくユーザーに把握してもらえるよう工夫されている。
