デザインの提案ってどうすればいいの？独立したてのデザイナー必見なプレゼン術

フリーランスのデザイナーになったはいいものの、提案の仕方がわからない！という方へ。会社員時代はディレクターや営業がデザインの提案をしてくれていたから、自分がフロントにたつ場面が少なかったという人も多いはず。

今回はランディグページを題材に、提案時に気をつけたいポイントをケーススタディでご紹介します。

事例としてあげるクライアントは、デジタルコラボレーションプラットフォーム「Colony」のLPです。Collectively Intelligent Limitedという英国の会社で、Colonyを通じて世界中の人々がオンラインで会社を作ることができるサービスです。

Colonyでは、知らない人とオンライン上で協力しプロジェクトに参画します。資金管理や収益の共有も行うことができます。

クライアントの要望は、「シンプルで親しみやすく、Colonyの価値を伝えられるランディングページ」でした。Colonyは洗練されている且つ複雑なサービスです。訪れたユーザーに対して、「Colonyがどのようなものか、導入のメリットはなにか」を伝えることが今回の主な課題となりました。

1. 前提条件を確認しよう

求められる仕事の範囲や、クライアントの情報について確認しておきましょう。特にお金の話は、仕事をスタートさせる前に決めておかなければなりません。

仕事の範囲

依頼内容を明確にしましょう。「ランディングページのデザイン」といっても、イラストを含むのか、コーディングまでするのか、など、認識をすり合わせてください。

金額交渉

仕事が始まる前に、金額を細かに決めておきましょう。例えばイラストのデザインは何枚までするのか、何ページ作るのかによって金額は細やかに変わります。また、デザインの戻し回数があまりにも多い場合は追加でお金がかかる旨なども伝えておくべきです。

2. メインイメージの提案

効果的なランディングページはオファーをひとつに絞って設計されています。たとえば、最低限のビジュアルとフォーム、CTAボタンのみで構成されコンバージョンに焦点が当てられているような例です。

ランディングページが訴えたいことはなにか、効果的に伝えるにはどうすればいいのかを整理します。レイアウトの構成をセクションごとに整理して、UIの要素に優先順位を付けていきます。視覚的な階層を作り出すと、ユーザーは段階的に情報を受け取れるため、情報を理解してもらいやすくなります。

メインとなるイメージを決める際、よく用いるのは、製品の魅力と機能概要を伝えるイラストです。デザインのパターンを作り製品のイメージに適切なイラストのイメージを探すために、グラフィックデザイナーのアーサー・アバキアンとデニス・ボルディリエフはブレーンストーミングを行いながらイメージを模索していきます。結果は、「ユーザーが協力してスーパースペースミッションを達成する、宇宙の英雄」として表現することになりました。

この時提案された、3人のグラフィックデザイナーによるパターンの違いをご覧ください。

カラーやイラストを変え、さまざまなテイストを表現しつつもフレンドリーで親しみやすくユーザーへソリューションを提示したUIデザインです。このUIは、ハイパフォーマー共通の行動特性を活かした製品だとユーザーへ伝えています。イラストは「世界中の人々がコミュニケーションを取り、協力して助け合っている」さまを表現しています。

作業が進むに連れて、クライアントは明るい背景となめらかな線を取り入れたいとデザイナーに伝えました。リンク先のインターフェイスと合わせながら、イラストを変更した提案を4パターン提案します。

クライアントのフィードバックは、3パターンめと4パターンめを合わせたイラストがいいとのことでした。距離を伴いながらも共同作業を行うユーザーと、テーマイラストである地球の調和が取れたイラストに仕上げます。カラーは薄紫を基調にピンク、イエロー、ターコイズ、パープルをアクセントとして使用しました。

3. 下層ページの提案

ここからは、メインイメージと調和を取りながら、クライアントの要求に答えていきます。次からは、提案した下層ページのデザインフローを説明します。

機能をどのようにして伝えるか

まずはじめに取り組んだ課題は、機能をどのように伝えるかでした。
ここでは、UIに使用するグラフィックとタイポグラフィをデザインしていきます。

機能を伝えるためのセクションでは、全体的なイメージと合わせたスタイルとカラーを保ち、イラストのテイストをそろえます。ユーザーへ製品の本質が伝わるように、機能はシンプルかつ明確に伝えます。
基本的な特徴をわかりやすく伝えるために、マイクロコピーによって説明を補足しました。仕上がりをご覧ください。

見てわかるように白いスペースの範囲が多く、イラストやタイポグラフィーを繊細に表現しています。これは会社の洗礼された主義を表現しています。グラフィックに使用される繊細な色は、UIが親しみやすく魅力的なものとして調和を保っています。

一貫したデザインのテイストを守ることは、インターフェイスの一貫性を保ちます。こうした一貫性によって、製品のストーリーイメージのイラストを表現できました。
ストーリーはユーザーの気を引くフックとしてよく使用される手法で、製品のストーリーや概要、そして理由をシンプルに伝えます。さらに、洗礼されたグラフィックを使用することによって楽しい印象も与えます。

トークンのカウントダウンページ

Colonyは、独自のルールとお金が成り立つ独自のネットワークです。
全てのコロニーに、独自のトークンが発行され所有権を分配するための仕事をこなして、ユーザーはトークンを得ます。彼らの所有するトークンが増えれば増えるほど、彼らのコロニーの数が増えます。トークンはタスクを提案したり、支払いたい場合に支払うこともできます。

クライアントは、ユーザーの関心をひくために、トークンの売出しをカウントダウンするページを欲しがっていました。トークンの売出しをカウントダウンするページは、ランディングページと同じテイストにそろえ、ブランドの認知力向上を意図したデザインを行いました。

カウントダウンは、カラフルな円を使用して、残りの「日数」「時間」「分」「秒」を表現しました。

新しく独創的な製品をユーザーへ伝えるのは、デザイナーにとっても新たな挑戦です。それでも、ユーザーの関心を引きつけ製品の特徴や魅力を伝えるのがデザイナーの仕事です。よく考えて作られたランディングページは、製品の発売前であってもユーザーの関心を引きつけターゲットユーザーに刺さります。

詳しくはBehanceに、Colony Website Designとして記事内では公開していないデザインも公開しています。興味があればのぞいてみてください。

まとめ

今回はランディングページのデザインを通して、デザイン提案やフローを共有しまました。

適切にデザインされたランディングページは、機能的に働きキャンペーンの成功につながります。
ランディングページは訪問したユーザーが、必要な情報を見つけやすいように製品やサービスを提示する役割として使用されます。

ランディングページを効果的に機能させるには、ターゲットユーザーの好みに応じたデザインが必要です。ターゲットとなるユーザーに向けて設計することで、ターゲットユーザーに刺さり高いコンバージョンへとつながります。

Colonyのケーススタディをご参考に、実践してみてください。

もし、あなたがUIデザインに関心があるのであれば、こちらの記事も役に立つかもしれません。