海外の事例から学ぶ！デザインでユーザーを惹きつける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では、すぐに操作できるユーザーのために、先に「スキップする機能」や「すぐに追加できる課金プラン」を打ち出しています。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
5. 意味のあるマイクロインタラクション
ユーザーに影響を与えるマイクロインタラクションについて考えましょう。個々のソーシャルメディアは、マイクロインタラクションでシンプルな体験を作れるため、とても惹き付けるものがあります。
インスタグラムで「いいね！」をすること（ハートマークをクリックすると赤く表示が変わる）からリツイートをタップすることまで、これらのフィードバックはユーザーをまた呼び戻すことができます。
マイクロインタラクションは、単なる細かいデザインだけでなくユーザーにとって価値のある体験をもたらすことができるのです。
6. 物語をつくる
すべてのストーリーには「初めと中間、終わり」があります。
もしあなたのWebサイトのデザインがこのストーリーの流れを表わさなかったら、ユーザーを混乱させてしまうでしょう。
- 初め：ロゴと見出し。ユーザーに、あなたの存在となぜユーザーがWebサイトを訪問したかを知らせます。
- 中間：あなたを特別な存在にさせる物語を支える部分。サイトを訪れたユーザーに対して何ができますか？ユーザーは何を期待すべきですか？
- 終わり：購入できたり、他の場所へリンクが飛んだり、と行動を起こすための呼びかけ。
7. ストーリーの流れは簡潔なままで
これから述べることは前述の6つ目の項目に反するように感じるかもしれませんが、ストーリーはシンプルである必要があります。これは当然、1500ページほどのボリュームではありません。シンプルなストーリーは5分かそれ以下で説明できてしまうものです。
ストーリーは、ユーザーの心を掴み、サイトを離れても「また訪れたい」と思ってもらうようなものでなくてはなりません。
おわりに
ストーリを使ってWebサイトをデザインするとき、覚えておくべき最も重要なことは、あなたのストーリーはあなたのものであるということです。
あなた以外のものになろうとしないでください。ユーザーはつくられた物語よりも真実に近いものを好むはずです。
TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。デザインのスキルを磨きたい、自分が思い描いた通りのWebサイトを作りたい人は、ぜひご覧ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
