デザインに入るまでの私の7つの手順

この記事は、私がトップページを作る際に気をつけている7つをフロー化した記事です。webデザイナーの方向けです。

こんにちは。
トップページを作るときに、みなさんはどんな順序で作っていきますか？

やり方は個人・制作会社によって違うと思いますので、私がやっているフローを具体化してみました。
デザインといえど、意外と事務的な作業が、中盤まで続きます。ただ、それが結構大事だと思うんですよね。
つい、早くPhotoshopを触りたいと思ってしまうのですが「急がば回れ」がデザインにも大事な気がします。

では、早速いってみましょう！

1.サイトのゴールを設定

目的・目標を理解せずにデザインをするべからず

• 例1
  サイトから旅行のプランの成約！
• 例2
  サイトのデザインを他社と差別化しブランドイメージの向上。かつwebサイトからフォームにて家の資料請求を増やす！
• 例3
  webサイトのお問い合わせフォームから、問い合わせの数を月間50件まで増やす！

まずは、サイトで何を目標にするかを決めることが大切です。
ブランドイメージを向上するために、このサイトで何が必要なのか？
コンバージョンを高めるために、成約までの導線を適切に配置することや、説得力のあるコンテンツをしっかり作る事ができるか。など目的・目標にあったデザインが求められますね。

2.ペルソナの設定

1番狙いたいターゲットに狙いを定める！

• 例1
  20代前半の旅行に興味がある女性。ネットにも慣れていて、安くていい旅行プランを探している
• 例2
  30代後半のマイホームの購入を考えている男性。毎週ハウジングセンターを回りハウスメーカーに迷っている。趣味はDIY。
• 例3
  50代前半の女性。自分の親がお世話になる老人ホームを探している。インターネットは、あまり得意ではないが、情報が多いネットを活用したいと思っている。

サイトのゴールを設定したら、次は上記のような具体的なペルソナを定めます。
これは、営業マンやwebディレクターが上流でヒアリングすることが多いですが、デザイナーがヒアリングすることも全然あります。
また、定められたペルソナに対する具体的なデザインや技術的な提案と実装がデザイナーの仕事になります。
20代女性と50代女性では、フォントサイズやwebリテラシーの配慮が変わってくるなど、デザインやサイトに施す技術のレベルも変えることが必要になりますね。

3.デザインテイストの決定

テイストのずれがないように上流でクライアントと共有

デザインを作る前に、参考サイトの提示などである程度デザインテイストをクライアントと共有しておきましょう。
デザイナーの出した案が通るとも限らないので、上流でのずれを無くすことがプロジェクト全体の効率化につながります。
トップページが通らない（相手の期待値を上回れない）とクライアントもがっかりして信頼感を失うこともありますし、何といっても社内に重い空気が立ち込めます。まずは、認識を合わしていくためにも、上流でのすり合わせが大事ですね。
「これは、絶対ないですよね？」というテイストをクライアントから引き出せると、地雷を踏みにくいです。

4.ページの要素を掲載順に箇条書き

まずは重要な要素を優先順位付けしよう

まずは、トップページに書く出す要素を、ワイヤーに書く前に「箇条書き」しましょう。
箇条書きにも多少補足説明をつけておく。また、グローバルナビの並びもこの段階で決めます。
強みのコンテンツは何で、何個あるのか？
情報発信のコンテンツは、何があるか？
など、かなり具体的に洗い出していきます。
そしてそれを、どの順番で置くかまでをテキストでまとめて書き出します。

5.参考サイト探し（1,000サイト程、要素ごとに参考探し）

テイストや業種はずれていても構わない。部分的に探すのがコツ

私は、トップに掲載する要素ごとに参考サイトを探します。1,000サイトぐらい、ざっと見てみて、その中から20サイト位いいものが見つかるかなという感じです。
例えば、強みのコンテンツのレイアウトは、ここを参考に。とかフッターに置くサイトマップのレイアウトは、ここを参考にとか。
もちろん、自分が目指すデザインテイストのものも集めますが、業種が同じすぎると、デザイン的な差別化が難しくなるケースがあるので、異業種から探すことも大事です。
探し方として、まずはPinterestで探します。
「インテリア　webデザイン」とかで検索するとおしゃれなサイトが山ほどでますので、そこから部分的な参考や戦略的にいいものを見つけ出していく感じですね。
参考サイト探しの時間は、1時間程度ですかね。時間をかけすぎるのは、採算的にも、迷うという意味でもよくないです。

6.ワイヤーフレーム作成

手書きでもAdobeXDでもPhotoshopでも何でもいいです

ここは、ディレクターがやったりデザイナーがやったり会社によって違うところですね。
ただ、前述までの項目ができていると、それほど時間はかかりません。
クライアントに見栄えよく出すなら、手書きじゃない方がいいかもですが、ツールは何でもいいです。
大事なのは、何をどの優先順位で掲載するかが、クライアントに伝わるか？です。
よくワイヤーのレイアウトには凝っているが、コンテンツの内容が抽象的（テキストが入りますとか書いてある）な方がいますが、知りたいのはレイアウトの詳細ではないです。
知りたいのは、ユーザーやクライアントが望むものをどのように掲載するかです。

つまり、ワイヤーと全く同じレイアウトで作らなくても大丈夫ということにもなります。
「ワイヤーに色を付けただけで提案がないなぁ」と指摘を受けるデザイナーの方は、ワイヤーから読み取れる本質に目を向けてみてください。

7.デザイン作成開始（やっとデザインでPhotoshop使用）

ここからがやっとPhotoshopの出番です

前述のことが終わると、自分の中でもサイトに対するイメージや目的がかなり具体化しているはずです。
あとは、それをデザインに起こしていくだけになります。だけというほど簡単ではないですが、いきなりPhotoshopを触ってデザインを始めるよりは随分効率はいいはずです。

サイト構築に必要な項目例

「ターゲットの絞り込み」「デザインテイストの決定」「要素の選定」「要素の優先順位付け」「レイアウトの詳細を検討」「コンバージョンの精度アップの施策」

ベテランのデザイナーでも、デザインをやりながら上記の項目も同時にやれる方は、多くはありません。
ましてや、新人のデザイナーができるとも思えませんので、一つ一つの工程を掘り下げてデザイン前に整理する。
これが重要かなというのが、私の結論です。