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