【BONO】グラフィック入門 前編
UI/UXデザインコミュニティBONOの「グラフィック入門」という課題を終了した。結構ヘビーだった。
制作過程を前編・後編にわたってお送りします。
一デザイナーの脳内を知りたい方はぜひお読みになって頂きたい。
後半はこちら。
0.はじめに
BONOのグラフィック入門では、その名の通りグラフィックにフォーカスしており、見た目を作っていくプロセスをトレースする方法でUIデザインを学ぶ設計になっている。
一通りグラフィックデザインを学んだ人なら、従来のプロセスを知っていると思うが、独学で学んできた身として体系的な学習を欲していたので、とてもよい題材だと思った。
お題は「診断サイトのアイキャッチを作る」こと。
私は英語力診断サイトのアイキャッチを作ることにした。
UIデザインのグラフィックに関する内容は、下記のリンクを参照されたい。
0-1.制作物
作成した英語診断サイトのアイキャッチはこちら。
■アイキャッチのポイント
シンプルな構成で見やすく
仰々しくなく、さり気ない感じで診断を始められる
「もう一度つなげよう、あなたと英語」で学び直しを提案
青色の配色で、爽やかさ、スタイリッシュ、信頼感を与える
ヒト型のモチーフを採用し、人とのつながり、グローバルを意識
二重分割補色を採用し、配色で賑やかさを演出
背景にアルファベットのモチーフを適用し、さりげない賑やかさを演出
文言は大・中・小で構成
0-2.なぜグラフィックを鍛えるのか？
UIデザインと聞くと、見た目が整った機能美が称賛されるデザインだと思われがちだが、グラフィックの力は想像以上に強力でUIデザインにも影響を与える。
グラフィックの役割は、適切にコンテンツの内容を伝えること、ユーザーの第一印象を決定づけることであり、UIデザインにおいてもその重要性は論を待たない。
0-3.デザイナーに求められるもの
伝えたいこと（本質）を適切に伝えられる力である。
どんなに伝えたいことも、ちゃんと説明できなければ伝わらなかったのと同義で、きれいに整えたり見た目をより良くするだけがデザイナーの役目ではない。
0-4.デザインプロセス
今回のグラフィック入門の手順である。必ずしも順調にできたわけではなく、行ったり来たりを繰り返しながらデザインプロセスを行った。
目的を決める
参考を集める
グラフィック方針を言語化する
ムードボードを作成する
レイアウト／構造のパターン出し
スタイリングパターンをデザイン
配色
詳細を詰める
デモサイトを作る
1.目的を決める
所要時間：３〜４時間
まず、診断サイトが何のために作られるのかを定義した。
作成する診断サイトには、以下の役割を与えるつもりである。
診断を受けた人の英語力を理解してもらう
診断を受けた人の長所／短所を把握してもらう
診断を受けた人にあった学習法を提案する
これらを前提として、5Wに渡ってサイトの目的を深掘りした。
1-1.どんな人が対象か？(who)
ユーザーの悩み…英語を学び直したい、英語が苦手な人
ユーザーの目標…どんな勉強をすればいいのか分かるようになる
ユーザーの現状…自分の英語力が分からなくて、どこから手を付ければい良いのかわからない
1-2.何を伝えたいのか？(what)
英語の長所／短所を知ってもらうこと
英語で何をしたいか、ゴールを決めてもらうこと
1-3.なぜ伝えたいのか？(why)
ブランクがあり、英語を使いこなせるか不安な状態を解消してもらうため
英語力を可視化して、勉強の指標を作りたいため
1-4.どのタイミングで伝えたい？(when/where)
海外に向けて発信したいとき（SNS、ブログ等）
英語の情報に触れているとき（本、SNS、ニュース等）
2.参考を集める
所要時間：２時間
作る目的を決めたら、次は診断サイトをどんな風に作成するか、参考（リファレンス）をかき集めてパターン作成に使ったり、比較検討した。
グラフィックを作る際に重要なのは「全て自分で考えず、既存のデザインから知識を得る」ことである。集めた参考によって、成果物の8割ぐらい完成するんじゃないかと思うので、気の抜けない作業である。
数はなるべく多く、考えられる要素を引っ張り出してくるのが理想である。しかし、参考を集めるのは結構しんどく骨が折れるし、感覚が麻痺しないように時間を分散して集めるのがベストだと思う。
Googleの検索エンジン、pinterest、キュレーションサイトを駆使して画像をスクリーンショットし、Figmaにどんどん貼り付けた。
2-1.どうして参考を集めるのか？
完成形を知ることが最も有効な手段だから。
自分にないものからアイデアを出すのは、見当違いになりやすく最適なグラフィックが見つけ出せない可能性がある。
■参考を集めるメリット
ビジュアルのアイデアを出す…引き出しが増える
見た目の方向性を定義しやすくなる
制作物のブレをなくす
2-2.どんな風に参考を集めたか？
■同じ機能を提供している媒体
ウェブサイトを作るならウェブサイト、スマホを作るならスマホ、本を作るなら本、というように同じ媒体のビジュアルを参考にする。
■カテゴリーが同じもの
今回は診断サイトなので「診断」というカテゴリーで参考を集める。
診断サイト（英語版）
診断サイト（その他）
■似た感情や結果を生み出そうとしているもの
診断サイトによって、ユーザーにどんな感情を抱いて欲しいのか、どんな結果を与えたいのかを考える。
爽やか…悩みを解決して欲しい、診断後にすっきりとした気持ちになってほしい
みんなで！にぎやかに！…一緒に学ぶ仲間がいると思ってもらいたい、楽しく学習に移行して欲しい
真面目、スタイリッシュ…真面目に取り組めるような誠実さが欲しい、勉強を継続できるような軽快さを感じて欲しい
3.グラフィック方針を言語化する
参考を集めたところで一度、表現の方向性を言語化した。
グラフィックを作成する上で、見た人に何を感じて欲しいかを考えることはとても重要である。診断サイトを見る前後でユーザーの気持ちが変わっていれば、グラフィックの効果はあったと言えるだろう。
診断サイトを見る前と後のユーザーの心理状態を図にして考えてみた。
■サイトを見る前
どうやって英語を勉強すればいいのか分からない。
自分の英語力がどの程度か分からなくて不安だ。
■サイトを見た直後
なんだかやってみようかな（爽やかさ）
ちょっと親近感があるな（ポップさ）
ちゃんと診断してくれそうだな（信頼感）
■診断後
自分の英語の実力が分かった！
どうやって勉強すればいいか分かった！
英語の勉強にチャレンジしたくなった！
3-1.キーワードを用意する
方針を言語化する前にキーワードを準備することにした。キーワードから方針を作成しようと思ったからだ。以下に、診断サイトを利用する人の情報から連想できるキーワードを考えてみた。
その１：親しみやすい
利用する人の英語レベルターゲットが「初級〜中級」
→威圧感がない、プロフェッショナルでない
その２：スタイリッシュ
利用する人の年齢層が「高校〜大学生」「社会人」
→子供っぽくない、洗練された（シンプルな）、爽快感
その３：にぎやか、コミュニティ
いいスタートを切りたい、盛り上がりたい
→一緒に学んでいる感覚をもたせる、賑やかし、複数人
その４：ポップ
英語のとっつきにくさを取っ払いたい
→見た目のわかりやすさ、個性的な印象
3-2.キーワードをまとめる＝言語化
キーワードをまとめ、印象の変化に適切な言葉を当てはめた。
印象の変化に際して「どんな気持ちになって欲しいか？（Impression）」と「そのために必要な見た目（Visual）」という効果を考えることにした。
■どんな気持ちになって欲しいか？（Impression）
分かりやすそう…複雑そうに見えると、診断の妨げになってしまうかも知れない
みんなもやっている…英語で悩んでいるのは一人だけじゃないと思わせたい
チャレンジしてみたい…英語って難しくない、英語が上達できるようなシンプルな構成があてはまりそう
■そのために必要な見た目（Visual）
賑やかさ、みんなと一緒…大勢で取り組んでいるように見せる
真面目さ、真剣さ…英語を勉強する→キャリアアップ、グローバル
適度なポップ感…イラスト、簡単な構成で親近感
4.ムードボードを作る
所要時間：１時間
グラフィック方針の言語化を行ったので、次は「ムードボード」を作成して視覚的な方針を固めることにした。参考集めは初期段階のアイデア出しに使用されるのに対し、ムードボードの作成はより具体的なビジュアル方針のイメージラフとなる。
ムードボードを作成するメリットとして、以下が挙げられる。
デザイン作業の効率化
コミュニケーションツールになる
制作のズレをなくし、修正を最小限にする
ムードボードの使い方は以下の通りである。
集める目的を決める
集める狙いを定める
指針になりそうなものを定める
以下はムードボード作成の詳細リンクである。
4-1.ムードボードの作り方
ムードボードは以下のように作っていった。
参考（リファレンス）から引用する
自分の身の回りのもの、なんでも良い（雑誌、web、カタログ、写真）
２軸で印象を切ってみる
イメージと近いものをガッと集め、その中で分類・取捨選択していく
気付いたものをメモしておく（感想みたいな）
次のデザインを作るときに使える、作りやすくなる
次のフェーズ（ムードボードを参考にパターンを作る）で使用する
■ムードボードのルール
横軸：グラフィックにおける「ポップ」⇔「真面目さ」
縦軸：グラフィックにおける「にぎやか」⇔「シンプル」
■ムードボードの傾向
真面目＝白、青などの寒色系、真剣なキャッチコピー、写真、抽象的なイラスト
ポップ＝黄色などの暖色系、わかりやすいキャッチコピー、シンプルな構造、ヒトの表情が見えるイラスト
グラフィックにおける賑やか度は、真面目、ポップ間で大きな違いはない
UI構造の複雑性は、真面目な雰囲気のウェブサイトに多く見られた
4-2.ムードボードを作って変わったこと
実際にムードボードを作成してみると、自分のイメージとは違うものが表層化してきた。それは…「真面目さ」って必要じゃないか？ということ。
「毎日10分学ぶぐらいでオーケー！」というのもアリだが、「進学のとき、仕事のとき、コミュニケーションのとき、英語が必要だ！」と思う人は現実的に英語と向き合っている。今回の英語力診断は「もう一度英語を学び直したい」人のためのサイトであり、真剣さを伴う。
ここで再度、言語化を見直すことにした。
楽しくやることも必要だが、真面目さ、爽やかさを含ませたデザインが信頼感を与え、正確に診断してもらえそうな雰囲気を出せる。
一つのアイコニックなイラストを入れたい。それで賑やかさを確保し、英語を診断する＝グローバルに活躍するというイメージを与えられる。
ポップさを取り入れることで親しみやすさ、取り組みやすさを与えられる。ここは特にブレない。シンプルさも類似している。
以上の見直しから「3.グラフィック方針を言語化する」で設定したキーワード、キーセンテンスを更新することにした。
■どんな気持ちになってほしいか？
真面目に取り組めそう…信頼感がある、ちゃんと診断してくれそう。「スタイリッシュ」「クールさ」
主張がイラストで分かる…英語を学ぶことでグローバルに人と繋がれる。
親しみやすそう…「ポップ」さを取り入れる。複雑すぎない、堅くならない構成。
■そのために必要なビジュアルテイスト（雰囲気）
真剣さ、爽やかさ…すっきりした、フォーカスしたビジュアル
アイコニックなイラスト…診断することで得られるイメージ
適度なポップ感…イラストや簡単な構成で親近感を与える
5.レイアウト/構造のパターン出し
所要時間：２時間
参考画像およびムードボードから、レイアウト／構造パターンを作成した。パターン出しをすることで、あらゆる可能性を潰すことができる。
パターンを検討するには、以下の点を比較することにした。
サイズ感、フォントの種類、余白等
方向性、イメージ
要件に合っているかどうか
■アイキャッチに必要な要素を抽出
レイアウトを決めるために、必要な情報（要素）を抽出した。これらの要素はアイキャッチづくりには必須であり、そのまま使用することになる。
表題…英語力診断、レベルチェック
キャッチコピー…もう一度英語を勉強しよう！など
詳細…診断を行うことで得られるメリット
必要なアクション…診断開始
必要な要素を抽出したら、それらを用いてレイアウトのパターン作成を行った。レイアウトは参考やムードボード、グラフィックの方針を元に作成した。レイアウトのパターン作成は以下のルールを設けた。
グレースケールで作成し、変数を下げておく
装飾は後にして、肝心な骨組みを検討してみる
パターンは３つ以上作る（場合に応じる）
レイアウト／構成の参考を探す
要件に見合っていそうなものを決める
■実際に作成したレイアウトパターン
中央／センター揃え、説明文なし
右／左カラムにメッセージ要素、右にモチーフorイメージ
中央／SignUpさせる
右／複数の選択肢を用意
次に、それぞれのレイアウトのメリット／デメリットを検証した。
上図の左上から１〜６という番号を振ったとして、
■メリット
中央揃えのため、安定感や信頼感を与えられる
中央揃えのため、安定感や信頼感を与えられる
文章を第一に読んでもらえる
モチーフを第一に見てもらえる
しっかりとしたサービスに思われる、確実性、信頼感を与える
目的別に取り組みやすい
■デメリット
少し仰々しく見える、堅苦しい
少し仰々しく見える、堅苦しい
モチーフを見てもらえない
文章を読んでもらえない
診断サイトにそこまで求めていない
選択肢が多いので、ユーザーに考えさせるフェーズが増えてしまう
パターンのメリット／デメリットを検証することで、要件に合ったグラフィックが作成できる。
6.スタイリングパターンの作成
所要時間：４時間
スタイリング（様式）は見た目を形成することで、視覚的情報を更に与える要素となる。今回は「モチーフ」を使って、グラフィックをよりリッチに仕上げることにした。
6-1.モチーフを作る
モチーフによって、意図を表現しつつグラフィックのアクセントになり、コンセプトとして展開するとグッとサービス内容が分かりやすくなる。
多くの人に愛されるサービスには抽象的なモチーフが数多く採用されており、ユーザーとサービスとの距離を縮める役割を担っているのではないか。
英語力診断サイトのコンセプトからどんなモチーフにするかを考えてみた。
■英語力診断サイトのモチーフ
英語＝言語＝人間が主役。ヒトをモチーフにする
幅広い年齢層＝抽象的、ジェンダーレス
英語の上達に対する効果＝コミュニケーション、グローバル化
会話＝モチーフのテイスト
ヒトとのつながりを示すイメージ
英語を学ぶことで得られる昇華のイメージ
6-2.モチーフを適用＝スタイリング
作成したモチーフを、作成したレイアウトパターンに適用する。モチーフにするメリットは以下の通りである。
ユーザーにブランドのイメージを与える
ユーザーにサービスの雰囲気を教える
ユーザーの印象を変化させることができる etc…
英語力診断サイトにおいて、英語をどう使うのかは診断後のユーザーに委ねさせたいので、英語の具体的なシーンや使用現場を想起させないモチーフを採用することにした。
モチーフをブラッシュアップし、レイアウトパターンに適用した。
後半へ続く。
●配色
●詳細を詰める
●デモサイトを作る
この記事が気に入ったらサポートをしてみませんか？