新卒デザイナーが体験した実務でのデザインプロセス

みなさんこんにちは。UXデザイナーの小板です。今回は、これまでバナーやWebデザインの経験があまり無かった私が、初めて実務で製作したバナーとランディングページのデザインプロセスについてお話しします。エンジニアの方にも、デザイナーが普段どんな風にデザインをしているかの1例をお伝えできればと思います。

特設ページへのバナーのデザイン

最初は、バナーのデザインです。すでに公開されている特設ページへ遷移させる目的で、サイト上のある箇所に配置されます。今回は、PC版とスマートフォン版用に別のサイズのものを2種類製作しました。また、バナーデザインは遷移先のページに合わせたものにしました。遷移先の特設ページは、弊社が独自に紹介するプランのページです。すでにサイト内の別の箇所には、同じページへ遷移する別のバナーを掲載しており、そちらのデザインも参考にしています。

さて、実際のデザインプロセスです。 今回は、大まかに

  1. 目的や内容・決定事項を明記したIssueを立ててもらう
  2. 手書きのラフでイメージを固める
  3. ラフをもとにワイヤーフレームを作る
  4. ワイヤーをもとにデザインする

という流れで進めました。各ステップの詳細を説明していきます。

まずは、オーナーに、すでに決定している事項などを載せたIssueを立ててもらいます。そこで希望のリリース日も伺い、内容によっては変更を提案することもあります。このバナー制作作業では、載せる文言はあらかじめオーナーと口頭で擦り合わせて、そこで決まった文言をIssueに記録してもらいました。こうすることで、決定事項がわかるだけでなく、後から過去のプロセスを確認することができます。また、今回は自分で作業時間を見積もり、オーナーへリリース日の変更を提案しています。このようなコミュニケーションも、作業を円滑に進めるために欠かせない要素です!

次のステップとして、手書きのラフを描いてイメージを固めます。バナーは載せられる情報がとても少ないため、詰め込みすぎないようなレイアウトを考えます。なんとなくイメージができたら、次はSketch上でワイヤーフレームを作ります。ワイヤーフレームとは、情報の構成を示すための設計図のようなものです。色やフォントなどは考えずに、とにかく要素のレイアウトを考えていきます。また、この段階で使用する写真もおおよそ決めてしまいます。 今回はバナーのレイアウトなので、「どう注目させるか?」を考えて要素を配置しました。人間は、「つい人の顔に注目してしまう」と言われています。また、視線の流れは左上から右下へとZを描きながら動きます。そこで、驚いているような表情の女性を一番左に配置し、まずユーザーさんに注目してもらう構成にしました。

実際に残っていた手書きのラフの一部です。

そして、こちらはワイヤーです。

ワイヤーが固まったら、本格的なデザイン作業を進める前に、方向性を先輩デザイナーに確認してもらいます。特に問題無ければ、いよいよデザインに移っていきます。今回は遷移先のページで使用している色やフォントを用いて、遷移後の違和感が無いようにします。ある程度デザインが進んできたら、アートボード(デザインをする際、キャンバスのような役割をするもの)をコピーし細かい調整を繰り返し、複数のパターンを作成します。また、実際のページに埋め込んだ画像を作成することで、実装後のイメージも込みで検討を続けていきます。そして、自分の中での推しデザインと、第2候補まで絞れたら、どちらが良いかをオーナーに確認します。オーナーとどちらにするかを決定したら、今度はデザインレビューへと移ります。

こちらは実際にはめ込んだ画像です。「これ!!」と書いているのは、こちらにしよう!と決めた時のメモになります。また、オーナーに説明する前に自分の中でそれぞれのデザインについて考えていた懸念点などをメモしています。

デザインレビューは、今回は同じプロジェクト内の先輩デザイナー1人に見てもらいました。お願いする際は、バナー単体ではなく、実際のページにはめ込んでイメージを確認できる画像と、それをスマートフォンで確認できるようなProttのリンクも添えます。こうすることで、レビューしてくれる人の手間を省きます。デザインレビューでは、文字間についての指摘を受けたため、修正してもう一度確認をお願いします。これらの一連のやりとりは同一のIssue上で行います。微調整後は、改めてどこを変更したか?を記載します。これに対して先輩から「LGTM(良さそう)」をいただき、デザインはfixとなりました。

イベント告知ページのデザイン

次に、イベント告知ページのデザインです。初めて1枚ページのデザインをするので、少し緊張しました。オーナーはバナーと同じ方で、今回もIssueを作っていただいてデザインスタートです。

今回作る告知ページは、デザインだけでなく、企画の段階から関わっているため、経緯や意図などをしっかり把握できた上でのデザイン作業となりました。基本的に弊社のデザイナーは、プロジェクトの場合は企画の段階からしっかり関わっていけることが多い(こういう企画だからあとよろしく!みたいなのは無い)と思っていて、こういうところが事業会社の良さだと思います。

イベント告知ページの制作では、

  1. 企画のIssueを立ててもらう
  2. オーナーにワイヤーを作ってもらう
  3. オーナーのワイヤーをもとに手書きラフを作る
  4. 手書きラフをもとに改めてワイヤーを作る
  5. ワイヤーをもとにデザインを進める

といった流れで進めました。

まず、オーナーがIssueを用意してくれている間に、デザイナーとして「イベント告知ページ」とはどういうものなのか?を把握するために、様々なサイトを閲覧して回りました。これによって、ワイヤーはオーナーが製作してくれたものがありますが、その情報をどう見せるのが効果的か、またイベント告知ページは通常どんなことが載っていて、オーナーのワイヤーに不足しているものは無いか、などを調査します。この際、スマホビューで調査をするのがポイントです。なぜなら、弊サイトではスマホユーザーの割合が多いため、そちらにフォーカスしていくことになるからです。ちなみに、調査する対象のページは、イベントの内容や対象に合わせ、今回は女性向けのイベントなどを参照しました。

また、プロジェクトのミーティングで、ワイヤーについてメンバー間で意見を出し、アップデートしてもらいます。どうすればユーザーさんがわかりやすいか?何を伝えるべきか?を考えるのに、デザイナーやディレクターといった職能は関係無い、というのが所感です。何をアピールしたらユーザーさんが来てくれそうか?などをみんなで考え、デザイナーはそれをデザインに反映します。

イベント告知ページのデザインプロセスも、基本はバナーの時と変わりません。まずは手書きのスケッチからスタートです。自己流のやり方として、ノートの1ページを折り曲げ、半分を実際のデザインラフに、半分をメモスペースとして活用しています。こうすることで、実際のサイズでのデザインをイメージしながら手書きラフをどんどん書くことができます。ページのデザインは、バナーと違ってサイズが大きいです。そこで、ラフからソフトウェアへ、ソフトウェアからラフへというプロセスを繰り返しながら、徐々にレイアウトやデザインを詰めていきます。

こちらは実際の手書きラフになります。左がデザインで、右が自分で考えたことや、先輩にいただいたアドバイスなどのメモになります。

一旦ページ全体のデザインができたら、オーナーに見てもらいます。この時、ただ見せるのではなく「なぜこのデザインにしたか?」という意図や、まだ迷っているポイントなどを添えます。また、「何を確認して欲しいのか?」も特記すべきことがあれば該当箇所を取り上げてお伝えします。こうすることで、スムーズにフィードバックを受けることができます。

さて、今回は「もっと文字感を減らしたい」と、オーナーからフィードバックをもらいました。イベント告知ページなので、文字を読ませる構成になっていては楽しさなどが伝わりません。他にも様々なフィードバックを受け、デザインを作り直していきます。

また、メインビジュアルについては、特にページの第一印象やバナーに深く関わってくるため、早めに決定する必要がありました。そこで、他のコンテンツのデザインとは別に、メインビジュアルのみ複数の候補を並べてオーナーと相談して決めたりもしました。

こうしたやり取りを繰り返す中で、最初に自分で決めたデザインテーマが、変わってきたりします。しかし、その変更は流されるような変更ではなく、よりページの価値を高めるための変更となります。そのため、時には思い切った決断も必要になります。

ある程度進み、オーナーからOKが出たら、先輩デザイナーにデザインレビューをしてもらいます。納期まで短い作業だったため、時間を合わせて口頭で直接指摘をしてもらいます。その中で、よりデザインの参考にできそうなサイトや、先輩流のプロセスなども教えてもらいます。日々成長です。デザインを修正したら、オーナーにもう1度見てもらい、こうしてデザインはFIXとなります。実際に公開されているページはこちらになります。

このページに関しては、マークアップまでデザイナーが行いました。基本的に、静的なページなど、デザイナーだけで実装できるページはデザイナーが実装します。ただ、Ruby on Railsの設定など、どうしてもわからない範囲はエンジニアさんにお願いしたり、教えてもらうことがあります。

2つのデザインプロセスで失敗したこと・よかったこと

色の選択で失敗した

色の選択は、デザインプロセスのなかで私が苦手だと感じてる工程です。今回、イベント告知ページでは、まず秋に開催するイベントなので、秋の植物などをイメージした色を使用していました。しかし、あまり明確に色の役割などを決めずに、各要素に色を当てていったため、チグハグな色使いになってしまいました。また、後から色を変更することになって、「どこにどんな色が使われているか?」を自身で把握しきれておらず、大変な手間となりました。

縦に長いページのデザインが大変だった

Webページのデザインなので、縦に長いデータを編集することになります。また、告知ページなので、何度か同じページ内で登場するコンポーネントがあります。私はSketchを使用していたので、シンボル化すればより制作が捗ったのですが、シンボル化していなかったことにより同じパーツを何個も直す…といった手間がかかってしまいました。便利なツールはもっと使いこなせるようになりたいです。

実機で確認する癖がついた

弊社のプロダクトは、スマートフォンから閲覧しているユーザーが多いです。しかし、デザイン作業をパソコンで行うため、最初はスマホでの表示の確認を忘れたりしてしまいがちでした。しかし、今ではProttなどを駆使して「とりあえず手元で確認しよう」という癖がつき、デザイン作業の中でも実機確認を頻繁に行うようになりました。ページのデザインだけでなく、バナーもはめ込み画像を実機で確認することで、よりユーザーさんと同じ体験をしながらデザインについて考えることができます。今後も続けていきたいです。

終わりに

今回は、バナーと1枚ページのデザインプロセスについて紹介しました。今後は、デザイナー流マークアップのプロセスや、別のデザイナーがデザインしたコンポーネントを実装した流れなどを紹介できたらと思います。