海外の事例から学ぶ！デザインでユーザーを惹きつける7つの施策
ユーザーを惹きつけるWebサイトを作るためにはデザインが非常に重要です。そして良いデザインだと思ってもらうためには良いストーリーを作らなければなりません。この記事では7つのストーリーを作る方法について紹介しています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。
本記事は、ライターのCarrie Cousins氏によって投稿されました。
Webサイトは、アプリやポートフォリオ、プロダクトよりも情報を多く伝えることができる場です。そして、ユーザを惹きつけたり魅了するためにストーリーを伝えるべき場でもあります。
良いストーリーがペンや紙の上のアイデアで始まり、デザインによってさらに盛り上がるでしょう。
1. 画像で惹き付ける
デザインはユーザーを視覚的に惹きつけるものです。きれいで鮮明なビジュアルとともに始めます。優れた写真や興味深いイラスト、動画などは注意を惹きつけたり、良い第一印象を作るのに適しています。
ストーリーは、デザイン技術を使って視覚的に、そして画面上では言葉を使い、画像でいっぱいにすると良いでしょう。デザインの中でユーザーにしてもらいたい動作に導く要素を作っていきます。
2. キャラクターを進化させる
Webサイトのデザインでは、ユーザーの特徴（ペルソナ）についてたくさん記載します。開発過程でキーとなる部分だからです。ユーザーが共感したり、親しみを持ったりできるようなストーリーになるようにしましょう。
キャラクターはずっと画面上に現れたまま、画面の中でまるで声が聞こえるかのように認識されます。
キャラクターを用いた素晴らしい一例として、eメールのプラットフォームである「MailChimp」があります。フレディという会社のアニメマスコットとロゴが、ブログや販売促進画面で常にポップアップで表示されています。そのキャラクターは会社の一部なのです。
- はじめに、キャラクターは会社の名前をしっかりと伝えます。広告が拡散されるとき、「MailChimp」について詳細が分からなくなることがあるでしょう。そのときは言葉の隣にいるチンパンジーを見ることで明確になります。
- キャラクターは会社の雰囲気をファンにアピールするのに適しています。口調やビジュアルは明るく、シンプルです。
- フレディは販売促進について話すことがないとき、ストーリーで会社に貢献します。チンパンジーはどうやってくるの？彼の名前の由来はなに？などです。キャラクターは会社のストーリーを新鮮にし、将来に繋がるものとして役立ちます。
3. 参加者を招待する
相互要素を共通の行動と組み合わせてデザインに価値を付加します。アニメーションのタッチを、ユーザーが気がつく必要のあるボタンに加えるか、「斜め」の矢やイメージのような方向を示すことで、特定の要素に向かわせます。
ストーリーにおいて、ユーザーをずっと惹き付けておくには他の効果を考えます。例えば、画面上で移動させるように促す、非常に魅力的な方法に視野移動があります。この技術はとても人気があります。
良いストーリーは複雑ではありません。人は会社ではなく、その人々に出会える写真と共に、シンプルに移動するアニメーションストーリーを進めます。（面白いポーズや表情の印象はチームメンバーの個性を光らせます。）
4. ゲームをデザインする
ストーリーを伝える上で最も難しい部分の一つは、実際に開発をすることです。
デザインにゲーム性を加えるコツはシンプルで短さを保つこと、クーポンコードや目に見えるバッジのように報酬に近い効果があるものを数種類提供することです。
あなたが思いつくであろうポケモンのようなゲームになる必要はありません。Dropboxを考えてみてください。クラウドストレージのアカウントの空き容量を得ることは多くのユーザーにとって必須です。
Dropboxを他の人に紹介したり、多くのデバイスからログインしたり、Eメールアカウントに接続したりすることは、ユーザーがより多くのストレージを受け取るためのゲーミフィケーションです。
Dropboxでは、すぐに操作できるユーザーのために、先に「スキップする機能」や「すぐに追加できる課金プラン」を打ち出しています。
5. 意味のあるマイクロインタラクション
ユーザーに影響を与えるマイクロインタラクションについて考えましょう。個々のソーシャルメディアは、マイクロインタラクションでシンプルな体験を作れるため、とても惹き付けるものがあります。
インスタグラムで「いいね！」をすること（ハートマークをクリックすると赤く表示が変わる）からリツイートをタップすることまで、これらのフィードバックはユーザーをまた呼び戻すことができます。
マイクロインタラクションは、単なる細かいデザインだけでなくユーザーにとって価値のある体験をもたらすことができるのです。
6. 物語をつくる
すべてのストーリーには「初めと中間、終わり」があります。
もしあなたのWebサイトのデザインがこのストーリーの流れを表わさなかったら、ユーザーを混乱させてしまうでしょう。
- 初め：ロゴと見出し。ユーザーに、あなたの存在となぜユーザーがWebサイトを訪問したかを知らせます。
- 中間：あなたを特別な存在にさせる物語を支える部分。サイトを訪れたユーザーに対して何ができますか？ユーザーは何を期待すべきですか？
- 終わり：購入できたり、他の場所へリンクが飛んだり、と行動を起こすための呼びかけ。
7. ストーリーの流れは簡潔なままで
これから述べることは前述の6つ目の項目に反するように感じるかもしれませんが、ストーリーはシンプルである必要があります。これは当然、1500ページほどのボリュームではありません。シンプルなストーリーは5分かそれ以下で説明できてしまうものです。
ストーリーは、ユーザーの心を掴み、サイトを離れても「また訪れたい」と思ってもらうようなものでなくてはなりません。
おわりに
ストーリを使ってWebサイトをデザインするとき、覚えておくべき最も重要なことは、あなたのストーリーはあなたのものであるということです。
あなた以外のものになろうとしないでください。ユーザーはつくられた物語よりも真実に近いものを好むはずです。
TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。デザインのスキルを磨きたい、自分が思い描いた通りのWebサイトを作りたい人は、ぜひご覧ください。
