海外の事例から学ぶ!デザインでユーザーを惹きつける7つの施策Webデザイン海外の事例から学ぶ!デザインでユーザーを惹きつける7つの施策ユーザーを惹きつけるWebサイトを作るためにはデザインが非常に重要です。良いデザインだと思ってもらうためには良いストーリーを作らなければなりません。この記事では7つのストーリーを作る方法について紹介しています。[テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。Cousins氏によって投稿されました。Webサイトは、アプリやポートフォリオ、プロダクトよりも情報を多く伝えることができる場です。ユーザを惹きつけたり魅了するためにストーリーを伝えるべき場でもあります。良いストーリーがペンや紙の上のアイデアで始まり、デザインによってさらに盛り上がるでしょう。画像で惹き付けるデザインはユーザーを視覚的に惹きつけるものです。きれいで鮮明なビジュアルとともに始めます。優れた写真や興味深いイラスト、動画などは注意を惹きつけたり、良い第一印象を作るのに適しています。ストーリーは、デザイン技術を使って視覚的に、そして画面上では言葉を使い、画像でいっぱいにすると良いでしょう。デザインの中でユーザーにしてもらいたい動作に導く要素を作っていきます。キャラクターを進化させるWebサイトのデザインでは、ユーザーの特徴(ペルソナ)についてたくさん記載します。開発過程でキーとなる部分だからです。ユーザーが共感したり、親しみを持ったりできるようなストーリーになるようにしましょう。キャラクターはずっと画面上に現れたまま、画面の中でまるで声が聞こえるかのように認識されます。キャラクターを用いた素晴らしい一例として、eメールのプラットフォームである「MailChimp」があります。フレディという会社のアニメマスコットとロゴが、ブログや販売促進画面で常にポップアップで表示されています。そのキャラクターは会社の一部なのです。はじめに、キャラクターは会社の名前をしっかりと伝えます。広告が拡散されるとき、「MailChimp」について詳細が分からなくなることがあるでしょう。そのときは言葉の隣にいるチンパンジーを見ることで明確になります。キャラクターは会社の雰囲気をファンにアピールするのに適しています。口調やビジュアルは明るく、シンプルです。フレディは販売促進について話すことがないとき、ストーリーで会社に貢献します。チンパンジーはどうやってくるの?彼の名前の由来はなに?などです。キャラクターは会社のストーリーを新鮮にし、将来に繋がるものとして役立ちます。参加者を招待する相互要素を共通の行動と組み合わせてデザインに価値を付加します。アニメーションのタッチを、ユーザーが気がつく必要のあるボタンに加えるか、「斜め」の矢やイメージのような方向を示すことで、特定の要素に向かわせます。ストーリーにおいて、ユーザーをずっと惹き付けておくには他の効果を考えます。画面上で移動させるように促す、非常に魅力的な方法に視野移動があります。この技術はとても人気があります。良いストーリーは複雑ではありません。人は会社ではなく、その人々に出会える写真と共に、シンプルに移動するアニメーションストーリーを進めます。(面白いポーズや表情の印象はチームメンバーの個性を光らせます。ゲームをデザインするストーリーを伝える上で最も難しい部分の一つは、実際に開発をすることです。デザインにゲーム性を加えるコツはシンプルで短さを保つこと、クーポンコードや目に見えるバッジのように報酬に近い効果があるものを数種類提供することです。あなたが思いつくであろうポケモンのようなゲームになる必要はありません。Dropboxを考えてみてください。クラウドストレージのアカウントの空き容量を得ることは多くのユーザーにとって必須です。Dropboxを他の人に紹介したり、多くのデバイスからログインしたり、Eメールアカウントに接続したりすることは、ユーザーがより多くのストレージを受け取るためのゲーミフィケーションです。Dropboxでは、すぐに操作できるユーザーのために、先に「スキップする機能」や「すぐに追加できる課金プラン」を打ち出しています。意味のあるマイクロインタラクションユーザーに影響を与えるマイクロインタラクションについて考えましょう。個々のソーシャルメディアは、マイクロインタラクションでシンプルな体験を作れるため、とても惹き付けるものがあります。インスタグラムで「いいね!」をすること(ハートマークをクリックすると赤く表示が変わる)からリツイートをタップすることまで、これらのフィードバックはユーザーをまた呼び戻すことができます。マイクロインタラクションは、単なる細かいデザインだけでなくユーザーにとって価値のある体験をもたらすことができるのです。物語をつくるすべてのストーリーには「初めと中間、終わり」があります。あなたのWebサイトのデザインがこのストーリーの流れを表わさなかったら、ユーザーを混乱させてしまうでしょう。ユーザーに、あなたの存在となぜユーザーがWebサイトを訪問したかを知らせます。中間:あなたを特別な存在にさせる物語を支える部分。サイトを訪れたユーザーに対して何ができますか?ユーザーは何を期待すべきですか?終わり:購入できたり、他の場所へリンクが飛んだり、と行動を起こすための呼びかけ。ストーリーの流れは簡潔なままでこれから述べることは前述の6つ目の項目に反するように感じるかもしれませんが、ストーリーはシンプルである必要があります。これは当然、1500ページほどのボリュームではありません。シンプルなストーリーは5分かそれ以下で説明できてしまうものです。ストーリーは、ユーザーの心を掴み、サイトを離れても「また訪れたい」と思ってもらうようなものでなくてはなりません。おわりにストーリを使ってWebサイトをデザインするとき、覚えておくべき最も重要なことは、あなたのストーリーはあなたのものであるということです。あなた以外のものになろうとしないでください。ユーザーはつくられた物語よりも真実に近いものを好むはずです。TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。デザインのスキルを磨きたい、自分が思い描いた通りのWebサイトを作りたい人は、ぜひご覧ください。はてブに追加この記事を気に入って頂けたらいいね!・フォローをお願いしますFollow関連するキーワードニュース関連する記事レンタルサーバー比較・15選【Webサイト制作の初心者におすすめ】Webサイト制作の初心者の方は、どのレンタルサーバーがいいのかよくわからないということもあると思います。今や当たり前になっているスマホ対応のためにレスポンシブデザインを理解する必要があるでしょう。レスポンシブデザインに対応したサイトをまとめているので、ぜひ...Webデザイン今年のトレンド!2016年最も売れたフォント、トップ50を集めてみた本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。Ciobanu氏によって投稿されました...Webデザイン毎月チェックしたい!Webデザインのおすすめ雑誌まとめWebデザインは実際のデザインと同じように、日によってどんどんトレンドが変わっていきます。トレンドに沿ったデザインをできるというのはデザイナーにとって大きなメリ...Webデザインフローチャートも作れる!デザインツールgliffyの使い方【初心者向け】デザインツールgliffyの使い方に関する解説記事です。モックアップの作成などに利用されるgliffyについて、登録画面から実際に作成する方法まで紹介し...Webデザインモックアップ作成ツールMockingbirdの使い方【初心者向け】モックアップを作成するのに役立つMockingbirdの使い方について解説しています。本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。Babich氏によって投稿されました。近年の最も成功したデザインを観察してみると、勝者のデザイナーは基礎を完璧に実践していることに気づくと思います。彼らは、人間の自然な動作に合ったデザインを考え、障壁となるものを私たちも気づかないうちに上手く取り去っています。外観のデザインとインタラクティブなユーザーエクスペリエンス、特にスキャナビリティ(Scanability:コンピュータの画面上の文字が読みやすいこと)に力を注いでいるようです。モバイルデザインの最も重要なテクニックとその活用法を見てみましょう。Webサイト上やアプリ内のテキストの目的は、ユーザーとの関係を構築し、ユーザーの目的達成を助けることです。このインタラクションにおいて重要な役割を担っているのが、「タイポグラフィ」です。テキストのサイズやレイアウトは、ユーザーが文字を読む体験に大きな影響を与えます。文字のサイズが小さく、行の高さと余白が十分に設定されていないテキストは、ユーザーにとって読むのに非常に時間がかかります。結果としてユーザーは、情報のほとんどを読み飛ばすことになるでしょう。これは特にモバイルにおいて顕著です。高輝度の小さな画面が小さな文字で埋めつくされていると、ユーザーは読みにくいと感じます。画面のサイズが小さいほど、タイポグラフィをよく考える必要があります。モバイルデザインにおけるタイポグラフィの秘訣は、余白を上手く使って、可読性を高めることです。適切な文字サイズと余白を選択することが最も重要です。文字が狭いスペースに詰め込まれたようなテキストとならないように、文字は読みやすいサイズにして、行間には十分な余白を設定しましょう。アドバイス:モバイルデバイスにおける可読性を保証するには、1行あたり30~40文字に収めましょう(日本語に換算して約15~20文字)。これは、デスクトップにおける1行あたりの理想的な文字数とされる60~75文字(日本語に換算して約30~38文字)の約半分です。カラーは、外観のデザインの中でも最も難しい分野かもしれません。カラースキームをシンプルにするとユーザーエクスペリエンスの質を向上する効果がある一方、多くのカラーを使い過ぎるとユーザーエクスペリエンスにマイナスの影響を与えます。単一の色相の明度・彩度を調整するだけでも、豊富なカラーを表現できますし、カラースキームがユーザーの目に派手過ぎると映ることもないと思います。次の例も、単一の色相によるカラースキームです。単一の色相(青色)の、トーン(Tone:色相に灰色を混ぜて生まれる色)、シェード(Shade:色相に黒色を混ぜて生まれる色)、ティント(Tint:色相に白色を混ぜて生まれる色)の濃淡を変えて、複数のカラーを作っています。アドバイス:オリジナルのカラースキームを作るのは難しく思えるかもしれませんが、それほど複雑なことではありません。中間色のカラーパレットに、明るいアクセントカラーを1色だけ加える方法があります。明るいアクセントカラーによって効果的に人目を引くことができます。アプリのコンテンツは、ユーザーに最大限利用してもらうことがその目的となると思います。コンテンツベースのナビゲーションは、オーバービュー画面から詳細表示の画面への遷移を、自然に表現するためのデザインパタンです。このようなデザインのナビゲーションは、カード型の要素と組み合わせることが効果的です。いうのもカード型の要素は、大量の情報を見やすい形に整理するのに適したデザインだからです。カード型の要素には、コンテンツを意味のまとまりごとに区切り、画面のスペースを節約する効果があります。文章においてパラグラフ(段落)が各文をまとめるように、カード型の要素はコンテンツをまとめるのです。カード型の要素は操作も非常にシンプルです。カードを開く操作や、次のコンテンツに進むためにカードをスワイプする操作を、ユーザーは直感的に理解できます。アドバイス:UIを可能な限り隠すこと――コンテンツを中心としたデザインに徹しましょう。デスクトップとモバイルの画面の一番大きな違いは、サイズです。モバイルサイトやアプリの画面はスペースが少なく、この短所を補うために、近年多くのインターフェースが、既存のデザインのレイヤーの上にさらにレイヤーを追加することで、Z軸を加えるようになっています。レイヤーによってZ軸を加えるデザイン手法は、インターフェースに奥行き感を与え、より知覚しやすい3D空間のデザインを生み出します。Googleのマテリアルデザインの次のデザイン例は、複数のレイヤーを重ねてインターフェースを作っています。マテリアルデザインは、現実の物理的な世界における人と物体のインタラクションを模しています。レイヤーには、優れたインタラクションを作る効果があります。サーフェス(Surface:影であるシャドウを落とす要素)とシャドウ(Shadow:影の要素)を使えば、アプリの構造を表現することができます。シャドウを加えた要素は下に影が落とされたデザインとなるので、他の要素やオブジェクトから浮き出て見えます。レイヤーはインタラクションにおけるユーザーへのヒントになります。複数のレイヤーを重ねて作るインターフェースには、次のような機能的なデザインもあります。UI上に浮かぶ円形のアイコンで、操作を促すためによく使われます。典型的な例として、ユーザーがリストから特定のアイテムを選択した場合に、そのアイテムの詳細が画面全体に表示され(このときリストの画面は覆い隠されます)、また元のリストの画面に戻るデザインなどがあります。ユーザーがスクロールなどの操作をしても、メニューが画面上に固定されたまま留まります。上のナビゲーションバーは、スクロール操作をすると画面から消えます。上のナビゲーションバーは、スクロール操作をしても画面に固定されたままです。既存のウィンドウの上に、子ウィンドウを重ねて表示し、ログイン画面、広告、リマインダーなどを知らせます。アドバイス:ユーザーフローはシンプルにしましょう。1つの画面は一度に1つのフローのためだけにデザインします。ジェスチャー機能に対応したデバイスの登場は、インタラクションのあり方にも大きな影響を与えました。近年、スワイプ、タップ、ズームなどが最も一般的なジェスチャであり、従来のマウスのポイントやクリック操作のように、直感的に分かる操作となりました。ジェスチャーは、前のページに戻る、メニュー画面を表示する、お気に入りに登録する、アイテムを変更・削除するなどの操作によく使われています。ジェスチャーによる操作を増やせば、その分画面上のボタン要素は少なくて済むので、コンテンツのためのスペースをより広く確保できまます。そのため、アプリ開発をコンテンツを中心に進めやすくなるはずです。アドバイス:ここで紹介したのは、標準的な(直感的に分かる)ジェスチャーです。新しく作ったオリジナルのジェスャーを使う場合には、注意が必要です。通常、ジェスチャー機能はアプリ上では隠れています。指示などが示されないとしたら、ユーザーはアプリの操作に戸惑うかもしれません。機能的なアニメーションとは、ユーザーインターフェースのデザインに組み込む微かなアニメーションのことです。インタラクションを高める次のような効果があります。ユーザーがクリックやタップなどの操作をした後に、アニメーションがフィードバック(応答)として現われれば、ユーザーは操作が受理されたことが分かりやすくなります。この例では、アイコンを2パターンに変化させることで、2つの機能を備えていることを伝えています。アドバイス:アニメーションやトランジションを絶妙に使うことで、ユーザー体験の質を向上させることができます。アニメーションは目的を考えて使うように注意しましょう。アニメーションは、ユーザーを楽しませるためというよりも、ユーザーにとって役に立つ機能を実現するために使うべきです。現代のUIデザインは、不要な要素を削ぎ落として、より機能性を重視する方向に動いています。整理されたインターフェース・シンプルな色合い・美しい外観デザインが、現代的なインターフェースを生み、ユーザーが使いやすい製品を生み出す秘訣なのです。[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい方はぜひご参加ください。本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。Babich氏によって投稿されました。全てのアプリには、アプリストアとホーム画面の両方においてユーザーの注目を集めることができる、美しくて記憶に残りやすいアイコンが必要です。それと同時に、アイコンはユーザーにとって瞬時に識別しやすいデザインにするべきです。完璧な美しさを備えた、ユーザーにとって分かりやすいアイコンをデザインするために必要なことは何でしょうか?それほど難しいことではありません。本記事においては、そのための3つの施策をご紹介します。アイコンは何よりもまず意味を伝えることができなければなりません。ユーザーにアイコンの意味を考えさせるデザインであってはならないのです。アイコンは、アプリの目的をユーザーに一見で理解してもらうことができる最初のチャンスとなります。アイコンをデザインするときには、次のことを心に留めておいてください。アイコンは、比喩による連想効果によってアイデアを伝える媒体であり、ユーザーはアイコンから特定の動作を連想するものです。ユーザーに意味を瞬時に伝えることができなければ、アイコンは上手く機能しているとはいえません。そのため、アイコンを分かりやすくて直感的なデザインにすることが不可欠なのです。抽象的なアイコンは上手く機能しないことがほとんどであるため、使うのは控えましょう。ユーザーは、抽象的なアイコンの意味を経験から推測することはできません。Center(ゲームセンター)」のアイコンはこの問題の一例です。カラフルで透明ガラスのようなデザインのアイコンは、デザイン自体は良いものの、アイコンの意味を伝えるのは難しいでしょう。ユーザーにとって識別しやすいアイコンを使用する方が確実です。ガラス用品」、「封筒」などほとんど世界共通で同じ意味を持つものもあります。Gmailのアプリのアイコンには「封筒」が使われていますが、世界共通で「封筒」は「メール」の意味として伝わりやすいです。アイコンの「封筒」そのものが「メール」の意味を伝えています。アプリの本質をよく捉えていてそれをシンプルな形で表現できるアイコンをデザインしましょう。アイコンにとって本質的ではないその他の余分なディテールは全て省略します。ほとんどのデザイナーは、アプリのアイコンを立派に見せたいと思う傾向があります。時としてアイコンのデザインに多くを詰め込み、その結果アイコンは詳細を作り込み過ぎたデザインとなることがあります。このような過度に詳細なデザインはかえってユーザーにとって理解の妨げとなり、UXにも影響します。アプリ名の繰り返し、「見る(Watch)」「プレイする(Play)」などのアプリの使い方についての指示、「無料」という文字だけのプロモーション情報など、アプリにとって本質的ではない言葉はアイコンに表示するべきではありません。アプリ名はホーム画面上でアプリのすぐ下に表示されるため、アイコンで繰り返して表示する必要はありません。詳細な画像は小さなサイズでは見にくいため、アイコンのデザインに含めないようにしましょう。透視投影による3Dデザインはアイコンに使用するべきではありません。透視投影による3Dデザイン、ドロップシャドウを加えるとアイコンは識別しづらくなります。アイコンを分かりやすく直感的なデザインにするためには、詳細のバランスを図ることも重要です。アイコンに具体的なオブジェクトを使うときには、その種のオブジェクト全てに共通する要素のみをデザインに反映して、その他の要素は省略します。瞬時にユーザーの注目を集めて、ユーザーがアプリを容易に識別できるような「中心点」をアイコンの中に作ります。良い例:アイコンが「天気」を意味することをユーザーに伝えるために必要な要素は、太陽と雲だけです。アイコンはホーム画面の背景上で見やすいデザインにしましょう。識別しやすくミニマリスズムを追求したアイコンをデザインしただけでは、全てのプロセスを完成したことにはなりません。他のUIと同様に、設計後のテストが必須です。ユーザーがホーム画面の壁紙にどのようなものを選択するかは予測不可能であるため、予め異なる背景上でアイコンをテストすることが必要です。アイコンが背景と混同するようなデザインにしてはいけません。次の例では「Stocks」というアイコンは暗い色の背景をバックにすると識別が困難です。アイコンが背景と同化するようなデザインにしてはいけません。――透明なアイコンを使用するのは避けて、不透明であることを確認しましょう。透明なアイコンを使用するのは避けましょう。端末の動きに合わせて背景が動く機能を備えたデバイス上でもアイコンをテストしてください。今、あなたのアプリを完璧に表現することができる美しく魅力的なアイコンをデザインするために時間をかけてください。TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役のUI/UXデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でUI/UXデザインを習得することが可能です。本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。Babich氏によって投稿されました。アニメーションはストーリーを伝えることができます。伝えるのは長くて複雑なストーリーではなく、シンプルなストーリーです。「このコンテンツを見て!」、「操作は正常に完了しました。」などのメッセージの伴う、短いストーリーです。アニメーションを使う目的は、単にユーザーを楽しませることではなく、ユーザーがアプリの動作や使い方を最も効率的に理解するのを助けることです。次に引用するように、ZURB社もこの考え方を表明しています。「ZURB社では、静的な画面だけをデザインする時代は終わりました。ユーザーが画面からコンテンツを実質的に見ることができるようなデザインを実践しています。アニメーションは美しさと機能を兼ね備えたデザインを、幅広いコンテキストにおいて実現できます。:プログラムの振る舞い(処理や動作)に影響を与えたり、コンピュータのステータス(動作状態)や動作結果をユーザーに知らせたり、ユーザーの注意を引いてを上手く誘導することも可能です。この記事では、UX向上のためのアニメーションの例をいくつか紹介していきます。プログラムのソースコードの行数を減らすことが難しければ、データ読み込み中の待ち時間が、ユーザーにとってなるべく楽しいものとなるよう工夫するべきです。ユーザーを退屈させる、クルクルと回るローディングアイコン(このアイコンは、ユーザーにデータ読み込み中という事実を伝えるだけです。)の代替として、アニメーションを活用できます。screen)を組み合わせて活用すれば、ユーザーの関心をコンテンツに集中させ続ける効果もあります。この組み合わせは、ほとんど全てのWebサイトやアプリにおいて利用できます。スケルトンスクリーンは、コンテンツのデータ読み込みが完了するまでに、UIを段階的に表示する手法です。アニメーションは、トランジション(画面遷移)をよりクリアに表現できるため、操作の過程を明確に示すことができます。ユーザーも意識をどこに向けたらいいのかを理解しやすくなります。Zumbrunnen氏による次のデザイン例では、スクロール画面とアニメーションを組み合わせています(スクロールエフェクト)。ユーザーがリンクをクリックした後も、コンテキストの状態を維持する助けとなります。これと比較して、処理の最初と最後の2つの静的な画面だけでトランジションをデザインした場合、途中経過が欠けているような印象を与えます。画面が急に変わることは不自然であり、ユーザーにとってはインターフェースの操作を理解する妨げとなります。アニメーションとは、静的な画面に「息を吹き込む」ことです。自然なトランジションにより、ユーザーはインターフェース上でのフロー(流れ)や進行速度を理解しやすくなります。インタラクションの次のステップで何が起こるかを予測しやすくなります。アニメーションは、直接操作しているような感覚を高めることもできます。次の例では、スムーズなトランジションが実現されています。メニューアイコンをプレイバックコントロール(コンテンツ再生時のボタン操作の機能)に変化させ、また元のメニューアイコンに戻しています。ユーザーにボタンの機能を示すとともに、インタラクションに「感動や驚き」の要素を加える効果があります。「再生ボタン」から「停止ボタン」に変化するデザインは、これら2つの機能が関連していること、また同時に成立しえないことを上手く示しています。ユーザーの視線を画面中央にあるプレイバックコントロールに集めるために、アニメーションを使っています。Button)をタップすると、プラス記号から鉛筆のアイコンに変化します。鉛筆のアイコンが、最初に生成されるメソッドだと分かります。このような細部の設計があるかどうかが、ユーザーが次に何が起こるかを予測しなければならないデザインとなるか、またはユーザーがアイコンの意味を直感的に理解できるデザインとなるかの分岐点です。フォームの入力画面にもアニメーションを活用できます。正しいデータが入力されたら、「頷く」ようなアニメーションで肯定の意味、間違ったデータが入力されたら「首を横に振る」ようなアニメーションで否定の意味を伝えることができます。したアニメーションは、ユーザーにとってその意味を瞬時に理解しやすいといえます。間違ったデータが入力されたら、「首を横に振る」ようなアニメーションで操作に誤りがあると伝えます。アニメーションは、ユーザーに操作の結果を視覚的に示すことができます。tell(言葉で説明するよりも、見せる)」という原則に従うなら、アニメーションを操作への応答として使うことができます。Villar社の提供するオンライン決済ツール「Stripe」では、ユーザーが「決済する」のボタンをクリックすると、決済完了前に、データ処理中を示すスピナー(Spinner:ローディングアイコン)が現われます。アニメーションは、使い方によっては大きな効果を発揮できます。アニメーションを使った方がいい場面、使わない方がいい場面について時間をかけてよく考えることが大切です。アニメーションは、デザインを構成する要素の1つとして、設計プロセスの始まりから考慮に入れるべきです。presentation:プレゼンテーション、店舗のウィンドウディスプレイなど、視覚的に訴えるデザイン)以上のものだからです。スティーブ・ジョブズ氏の言葉を引用すると「デザインとは、見た目や使い心地だけではない。デザインとは、それがいかに機能するかだ。[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。Schenker氏によって投稿されました。「パンくず」と聞くとグリム童話の『ヘンゼルとグレーテル』を連想する人が多いかもしれません。物語の中で、ヘンゼルはパンくずを家に帰るときの道しるべとして道に置いていきました。Webの世界でも同じように、サイト訪問者のためにより良いUXを創造するときに、パンくずリストがナビゲーションとして役立つようになっています。ユーザーがWebサイト内で現在どの位置にいるかを確認したいときに、パンくずリストは頼もしい存在です。パンくずリストは、ユーザーのアクセスしたページを追跡して表示することができます。アクセスした順にページを表示する場合もあれば、別の配置方法でページを表示する場合もあります。この記事では、適切なパンくずリストの使い方を紹介しています。パンくずリストには主に3つのタイプがあり、そのうち最初の2タイプは、最後のタイプよりもよく使われているでしょう。位置型パンくずリストは、サイトの階層構造において現在どの場所にいるかをユーザーに示します。サイト内でユーザーをわかりやすく導くことができるため、広く利用されているパンくずリストです。位置型パンくずリストは、コンテンツが複数のレベルから構成され、ナビゲーションが複数のレイヤーから構成されているサイトで特によく利用されています。ユーザーは、現在より前の、より上位のレベルの階層にあるコンテンツに、1クリックで戻ることができます。位置型パンくずリストは静的であるため、ユーザーがサイト内での現在位置を確認するのに役立ちます。Flowersのサイトを見てみましょう。Birthday)」というフラワーアレンジメントのページにアクセスすると、このサイトが、トップページ(Home)、誕生日(Birthday)の順にページを辿って、「私の誕生日」のページに辿り着くことができる構造になっていると一目でわかります。ユーザーはこれらの上位の階層にあるページにアクセスすることもできます。属性型パンくずリストは、位置型パンくずリストとは異なり、静的ではなく、ユーザーの操作によって絶えず変化し、検索フィルタのように機能します。サイト内での現在位置を示すことはない代わりに、ページのコンテンツのメタデータを表示します。そのため、属性型パンくずリストはユーザーが「何を買いたいか」をフィルタでカスタマイズして検索できるような、ECサイトによく使用されています。車の販売サイトなどです。属性型パンくずリストは、すでにアクセスしたページに戻るために役立つとは限りません。具体的な例として、Cars.comで使われているパンくずリストを見てみましょう。ユーザーが車の「メーカー」、「モデル」の検索条件からオプションを選択して検索すると、ページ左上にあるサイトのロゴのすぐ下に、パンくずリストが現れます。検索条件の「製造年」、「メーカー」、「モデル」からユーザーが選択したオプションが表示されますが、前のページに戻ることはできません。このように、属性型パンくずリストは、前にアクセスしたページに戻ることができる位置型パンくずリストとは異なっているという点が重要です。パス型パンくずリストは、パンくずリストの主な3つのタイプの中で最も人気のないものです。その理由は、率直に言うと、このパンくずリストはブラウザの「戻る」ボタンを再表示したものに過ぎないからです。UXを改善する効果はなく、むしろ余分な繰り返しなのです。履歴型のパンくずリストとも呼ばれているパス型パンくずリストは、サイトの階層構造の深いレベルにあるページにアクセスしたユーザーに対して、追加的なコンテキストや情報を与えることはできないため、役に立つとはいえません。例として、ユーザーがすでにクリックした検索結果から商品ページにアクセスする場合などがあります。パス型パンくずリストにはこのようなUX上の問題があるため、現在ではサイトに使われることもますます稀になっています。最初に、パス型パンくずリストについては考える必要はないでしょう。少なくともUXを向上する効果はなく、最悪の場合にはユーザーが混乱する原因となる可能性さえあります。いうのもサイトの階層構造そのものを正確に表示するものではないからです。ここでは、他の2つについて考えます。位置型パンくずリストは、複数のレベルのコンテンツから成る、深い階層構造の大型サイトに適しています。大型サイトの例として、数多くのアイテムが販売・オークションのために出品されているeBayが挙げられます。したがって、ユーザーにとって、サイトの階層構造がわかりやすくページを行き来するのに役立つため、位置型パンくずリストは、コンテンツの階層構造が深いサイトに最適です。次に、属性型パンくずリストに注目しましょう。Cars.comのサイトの例で見たように、ユーザーに検索条件について数多くのカスタマイズ可能なオプションを提供しているeコマースのサイトには、属性型パンくずリストのようなナビゲーションが適しています。ユーザーは、検索や注文のときに加えた数多くの変更を確認したいと思うことが多いため、位置型パンくずリストを使用するよりも、属性型パンくずリストによってフィルタを表示する方が効果的です。あなたがクライアントのサイトでパンくずリストのナビゲーションを設計するときには、これらの手法を実践すれば、間違いなく上手くいくでしょう。パンくずリストの構造の中に、重複する要素がないかどうか確認します。ユーザーを混乱させる元となるため、1つのページが複数のカテゴリまたはコンテンツの複数のレベルに重複して分類されることのないように注意します。このスタイルが数年来の伝統であり、多くのユーザーが慣れていて使いやすいものだからです。パンくずリストの中の各カテゴリには、検索順位に反映したいと思うキーワードを設定します。SEO対策として有効です。デザインやUXの多くのコンセプトと同様に、正しく実装されていなければ、本来ユーザにとって非常に役立つ素晴らしい技法もかえって障害となります。UXに何の効果ももたらさない、あるいはUXに悪影響を与えるようなパンくずリストではなくて、UXを最適化できるパンくずリストを設計するために正しい知識を身につけることが、このガイド記事の目的です。パンくずリストは、様々なサイトで絶対的に必要となるわけではありません。サイトのコンテンツが数多くのレイヤーから構成されている場合や、検索条件に数多くのオプションを設置した方が良いような場合には、パンくずリストを使用すれば、ユーザーにとって役立つナビゲーションを加えることが可能です。パンくずリストのタイプ別の目的を理解することで、設計するサイトに合ったパンくずリストを実装できます。適切なパンくずリストを選択できれば、ユーザーの満足度を向上させ、集客の効果も高まるでしょう。次にパンくずリストを実装するときには、これらのことを考えてみてください。TechAcademyでは初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。これからプログラミングやデザインの勉強をしてみたいと思っている方は、ぜひご覧ください。過去に独学で始めてみたけど挫折してしまった人でも、現役のエンジニアやデザイナーの元でサポートを受けながら進めることができます。その場ですぐ聞けるので、つまずくことなく習得できるはずです。本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。Rocheleau氏によって投稿されました。モダンなJavaScriptとCSS3の効果によって、ドロップダウンメニューは進歩しています。すべてのドロップダウンメニューが同じように設計されているとは限りません。この記事では、ユーザーにとって分かりやすいドロップダウンメニューを構築するためのデザインテクニックを紹介します。デザイン例の中には、多階層のドロップダウンメニュー、メガドロップダウンメニューなども含まれていますが、応用しているデザインルールは同じです。サブメニューのあるリンクには、目印となるものを付けましょう。した視覚的な小さな目印を配置することで、ユーザーにとってリンクの場所がわかりやすく、アクセスしやすくなります。このルールは設計するリンクが1階層でも4階層でも適用されます。目印には、矢印、ドット、四角形など目立ちやすい記号を使用します。一般的な記号を使用している限り、ユーザーはその記号の意味を理解できるでしょう。例として、上記Threadbirdの優れたナビゲーションメニューを見てみましょう。このメニューのリンクには、サブメニューがあるものとないものがあります。サブメニューのあるリンクにだけ、目印が表示されています。(»)」が使われています。この記号はシングル矢印よりも目立ちやすいため、Webデザイナーに好まれています。小さなサイズにしても、変形する心配もありません。TutsPlusのナビゲーションメニューも同じような設計です。ドロップダウン形式には下向きの矢印、フライアウト形式には右向きの矢印が使われています。サブメニューに使われている矢印の記号に、1つ残念な点があります。それは、すべてのリンクにサブメニューがあるにもかかわらず、矢印アイコンは、メニューアイテム上でマウスホバーされた時にしか表示されないことです。この場合、矢印アイコンは常に表示されたままにしておくことが、デザインのベストプラクティスです。TutsPlusのシンプルなデザインは個人的には好きです。小さな目印がユーザビリティ向上に役立つことを示している、完璧な例といえます。ほとんどのドロップダウンメニューでは、リンク間にスペースが設けられています。マージン(margin)とパディング(padding)は区別しましょう。marginを使用した場合、リンクのテキストそのものをクリック/タップすることになります。クリック可能な領域は、テキストとほぼ同じ面積になります。paddingを使用した場合、全体をクリック可能な領域にすることができ、より大きなターゲット要素をユーザーに提供できます。ドロップダウンメニューでは、より大きな領域を確保する方が良いでしょう。Depotは、昨年のデザイン変更で、クールなアニメーションのドロップダウンメニューを実現しました。blogというリンクをクリックすると、2カラムのドロップダウンメニューが表示されます。これらのリンクをクリックすれば、スペースにpaddingが使用されていることに気づくでしょう。リンクのテキスト周辺の領域もクリック可能になっていることで、サイトのナビゲーションが向上しています。ほとんどのドロップダウンメニューは、「スペースにpaddingを使用するもの」「スペースにmarginを使用するもの」の2つに分類されます。どちらのタイプであるかは、リンク近くのスペースをホバーした時に、マウスのカーソルがクリック可能を示す「手袋アイコン」に変化するかどうかによって確かめることができます。次のWebサイトは、paddingを使用していない例です。Orchestraは美しいデザインのWebサイトです。ドロップダウンメニューのリンクは、テキスト部分しかクリックできません。最悪なことに、ドロップダウンメニューの面積が広いのに、リンクのテキストがとても小さいのです。marginがpaddingよりも優れた選択になるケースは考えられません。リンクをブロックレベル要素にした場合、リンクはドロップダウンメニューの100%の領域を占領します。このことは、ユーザーがリンクのボックスの領域内であれば、どこでもクリック可能になることを意味します。どちらを選択するべきかは明らかです。ドロップダウンメニュー内のリンクをクリック/タップ可能な領域を広くすれば、ナビゲーションの使いやすさを大きく向上させることができるでしょう。ホバーされたメニューの「アクティブな」クラスを設計すれば、所属関係の構造が明らかになります。ほとんどのデザイナーは、ホバーされた時のリンクに、「:hover擬似クラス」を使用しています。ユーザーがサブメニューのリンクをホバーした時に、メインのリンクを強調して表示したままにするのも効果的な方法です。これにより辿った構造が明らかになり、どのサブメニューのリンクがホバーされているかが一目でわかります。ホバー状態を設計するには、フォントの色の変更、背景色の変更、テキストの下線、ハイライトなど多くのテクニックがあります。目的は、親リンクを、ホバーされていない時にもアクティブな状態に保つことです。UniversityのWebサイトは、白と黒のシンプルなコントラストカラーを使っています。ナビゲーションメニューは、デフォルトでは黒い背景に白いテキストですが、ホバー時にはこれらの色が逆転します。設計ごとにスタイルがあるので、必ずしも白黒のスタイルにする必要はありません。コントラストをはっきりさせて、アクティブな状態を目立たせることが大切です。CentralのWebサイトにも同じ効果が使われています。この場合、白の代わりに、ライムカラーの黄緑色が使われています。このアクティブ状態を示すハイライト効果なしのドロップダウンメニューを構築することも可能です。機能するからといって、それが必ずしも最善の選択であるとは限らないことをデザイナーは理解しておくべきです。私は、すべてのドロップダウンメニューはアクティブ状態を示すハイライト効果を、親リンクに使用するべきだと思います。2~3階層のサブ-サブメニューになっているものも含めて。jQueryとCSS3を組み合わせると、Web上で強力なアニメーションを作成できます。スライド効果であれフェードアウト効果であれ、ドロップダウンメニューは、アニメーションで進化します。アニメーションは常に目的に合ったものにするべきです。UI/UXデザイナーであれば、実践的にアニメーションを使用できることが望ましいです。アニメーションは、見た目に活気を与えることができますが、実行を遅くしてユーザー体験を低下させないように注意しましょう。優れたドロップダウンアニメーションのための2つの要素は、「速いこと」と「よく目立つこと」に要約できます。例として、上のESPNのナビゲーションを見てみましょう。どのスポーツ部門からでも、チームや関連するリンクのドロップダウンメニューを表示できます。このドロップダウンメニューは、上から下に向かって表示されます。処理は迅速で、リンクをクリックするまでに2〜3秒もかかりません。一般的には、メニューのアニメーションは1.5秒以下に保つことをおすすめします。このルールは、メニューのアニメーションにのみ適用されます。必要があれば、他のページのアニメーションを最大3〜5秒(またはそれ以上)に延長しても構いません。MenuMakerのWebサイトは、素晴らしいドロップダウンメニューを設計しています。ドロップダウンメニューは、所属している親リンクを示すために、吹き出しのようなデザインをした引用の矢印となっています。これらのドロップダウンのアニメーションは迅速です。フェードイン&アウト効果は高速に処理され、おそらく300ミリ秒くらいしかかかりません。カーソルが他の場所に移動したときにのみアニメーションが生成され、リンクは明確に表示されます。このことは素晴らしいドロップダウンメニューアニメーションの鍵です。アニメーションは誰もが好む魔法のような効果を実現できるものですが、アニメーション要素をページの構成要素の一部として考えることも重要です。優れたドロップダウンメニューでは、「機能」と「ビジュアル」の両方が考慮されています。外観のデザインも大切ですが、ユーザーのために分かりやすく構築することも大切です。どのルールもシンプルで、小さなコードを追加するだけで簡単に実装できるでしょう。TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分でデザインを形にしたい、デザインのスキルを上げたいという方はぜひご覧ください。Webデザイン近未来を感じる!インタラクションデザインとは本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。Cousins氏によって投稿されました。「インタラクションデザイナー」という言葉は、デザインの分野で近年よく聞かれるようになりました。これらの疑問に答えて、優れたインタラクションデザインの実例を紹介します。インタラクションデザインとは、論理的かつ考え抜かれた動作と振るまいを備えた、魅力的なWebインターフェースをデザイナーが作るプロセスのことです。成功するインタラクションデザインは、テクノロジー、コミュニケーションを利用して、理想的なユーザーエクスペリエンスを実現しています。Webサイトやアプリケーションにおけるインタラクションデザインについて、ここ約10年で多くが語られていますが、その基本は変わりません。Applications』の著者)が2002年に公開した記事で、全12回にわたってWebアプリケーションのためのインタラクションデザインを定義しています。Design)』では、インタラクションデザインを5分野に分類しています。現在でも役に立つ内容です。インタラクションデザインの基本的な役割は、ユーザーとデバイス間のコミュニケーションを翻訳して円滑にすることだとしています。インタラクションがどのように起こり、発展していくのかに注意を向けるべきだとしています。ユーザーがアプリケーションの現在の状態を知り、何がなぜ起こっているかわかるような設計にすべきだとしています。ユーザーが、デバイスやアプリケーションはどのような人向けなのか、また次に何が起こるか予測できるような設計にすべきだとしています。エラーは起こるものだと想定するべきだとしています。次に、インタラクションをデザインするときに考えるべきポイントを挙げてみます。デザインに役立つ基本的な質問がusability.govで提供されているので、引用します。あなたが上で見た質問を考えるタイプだとしたら、インタラクションデザイナーの素質があります。インタラクションデザイナーの役割は、デザイン、開発、クリエイティブ、マーケティングのチームにおいて、デザイン戦略を考えたり、製品の重要なインタラクションを特定したり、製品のコンセプトを試すためにプロトタイプを作成したり、ユーザーを魅了できるような最新のテクノロジーやトレンドについて知識をアップデートしておくことです。このように表現すると、インタラクションデザイナーの仕事は範囲が広くて曖昧なものに思えるかもしれません。簡単に言うと、企業がインタラクションデザイナーを雇うのは、アプリケーション製品が実際にユーザーの手元に届いたときに、確実に上手く機能させるためです。インタラクションデザイナーへのキャリアパスは多様です。研修プログラムによってインタラクションデザイナーになる人もいれば、それまでの経験や機会によってインタラクションデザイナーになる人もいます。インタラクションデザイナーに共通する素養として、物事のメカニズムへの探求心や、人に質問することを恐れないこと、要素やコンセプトを実現化して新しい方法を試す能力などがあります。インタラクションデザインの活用の場面を広げている要因は何でしょうか。普通の「デザイン」とは何が違うのでしょうか?実はこの境界線ははっきりしていません。今回はインタラクションデザインをテーマとしていますが、実際のインタラクションデザインは、Web、アプリケーションのデザインおよび開発の一部なのです。主要なポイントやツールは変わっても、インタラクションデザインの基本的な概念は変わりません。これらの概念を見てみましょう。あなたのサイトやインタラクションが存在する目的は何でしょうか?目的を明確にして、アプリケーションによってこの目的を確実に達成できるようにします。優れたインターフェースとは、魔法のようにその存在に気づかないものです。「最も優れたインターフェースデザインは「存在していない」かのように思えるものです。時間がかかることもなく、ユーザーを悩ませることもありません。」と述べられています。基盤となるシステムを、理解しやすく使いやすいインターフェースが好まれます。優れたインタラクションデザインとは、たとえ説明がなくてもどのように操作したらいいかわかるものです。有名なことわざを借りると「形態は機能に従う」のです。使いやすいインターフェースは、すでにあるコンポーネントで作られます。優れたインタラクションデザイナーであれば、以前と似たようなデザインの課題に取り組むときには、車輪の再発明はしません。決まったパターンを上手く使いこなせるのです。次に優れたインタラクションデザインの実例を紹介します。どのプロジェクトにおいても、インタラクションデザインの概念の核心が体現されています。ユーザーは、現代のWebサイトにインタラクティブな体験を期待します。それは仕方ないことかもしれません。Webに最新のデザインを取り入れて、ユーザーの再訪率を安定させるには、インタラクションが不可欠です。チーム内に、インタラクションの管理、企画、モニタリングを担当する人を置いておくのも大切です。インタラクションデザイナーが必要なのです。[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。CORPORATION.。