はじめに

今回は、BONO UIビジュアル入門コース、『グラフィック入門』に基づき、UIデザイン学習サイトを制作した過程をまとめます📝

目的

どうやってこの見た目に辿り着いたのか
どう載せる情報を決めているのか
色ってどう考えて決めているのか
このレイアウトにした理由は？決め方は？
→「診断サイトのアイキャッチ」をトレースしながら、理解を深めていく。

1.　方向性の定義

ユーザー視点
誰に→届ける情報、優先度、届ける方法
何をなぜ→何を優先度高く伝えるべきか？伝えてどういう結果・感情にしたいか？
いつどこで→どういうときに、どの手段でみる？
このような問いかけをしながら、表現の方向性を決めていく。

運営視点
サイトに訪れた人に何をしてほしい？
”知ってほしい”と”買ってほしい”は全く異なる。→表現の「優先度」がガラッと変わる。

参考を集める

→ビジュアルのアイデアを出す・見た目の方向性を想像して定義しやすくなる・制作するときのブレをなくす
｜３つの視点｜

• 同じ機能を提供している媒体

• カテゴリーが同じもの（今回は、診断サイトのため「診断」など）

• 似た結果や感情を生み出そうとしているもの（今回は、不安を取り除くためのサービス・キャリア系のデザイン・スキルを提供するサービスなど）

例）Pinterest 「診断 webサイト」で検索する
集めた後→分類をする。

2.　グラフィックの方針を言葉にする

診断サイトを見た人に与えたい印象を定義する

ムードボードを作って表現の方向性を決める

雰囲気などのニュアンスを正確に認知できる手法。相手とのコンセンサスをとるときにも用いる。①単に、”〇〇な感じ”ではなく、具体的にイメージすることができる。②他の人に対しても抱くイメージを統一できる。③”軸”を使い、自分の方向性を都度確認できる。

3.　白黒でレイアウトのパターンを作り方向性を決める

１つのデザインを決めるとき、１方向性のみを提示するのでなく、複数の方向性（少なくとも２つ）平均３つは、提示できるようにすること。まずは、色を抜くこと。検討するべきことが多くなり時間がかかってしまうため。まずは骨組み（レイアウト）の部分を徹底的に考える。パターンをつくるメリット→可能性をしらみつぶしで検討できる。

4.　表現のパターンを出してみる

5.　配色パターンを出してみる

ムードボードや、目的伝えたい結果や変化に立ち返り、参考を集める。

6.　見た目の質をあげる

まとめ

動画に沿ってただただトレースをするだけでなく、お題に合わせ、自分のオリジナル１つをブラッシュアップしていく過程を経験しました。仕事となると、もっと緻密に詰めていくことだとは思いますが、このシリーズを通して、見本の作品はなぜこのような見た目になったのか、レイアウトにたどり着いたのかを実際のデータファイルを覗きながら知ることができました。レイアウトパターンは、まだまだ自分の頭には、デザイン案の引き出しやストックはないので、参考をいろいろと探りまねをし、作成していきました。そういった積み重ねがあってこそ、多様なデザイン案のストックが貯まると思っています。引き続き、インプット・アウトプットの両方をバランスよく頑張っていきたいと思います。

Figmaデータ