フォームが複数ページに渡る場合、ステップインジケーターは必要不可欠です。ステップインジケーターはユーザーに対して自分たちが今どのステップにいて、あとどのくらいのステップが残っているかを示す役割があります。 画面上のスペースが限られているためモバイルフォームで、ステップインジケーターを提示することは困難です。デスクトップと同じインジケーターをモバイルフォームで使用すると、可読性と可視性の問題が生じてしまいます。 直線型 vs 放射型 無理やり狭いスペースに各ステップのタイトルを収めると、テキストサイズが小さくなりユーザーが読みにくくなります。さらに一度にあまりに多くのステップ名と番号が表示されるため、可視性も下がります。結果、視覚的なノイズが発生し、ユーザーが現在いるステップを把握することが難しくなってしまいます。 モバイルフォームには放射型のインジケーターを使用してください。こちらの方がユ

Murielは熱心なユーザーリサーチャーであり、デザインの編集者。ユーザーのニーズや要望を見つけ出し、そこにある「ギャップ」を埋める解決策を見出すことをやりがいにしている。加えて遠隔教育やeラーニング分野など学習のデザインにも関わっている。 あなたはどんなタイプのデザイナーでしょうか？　デザインをあなたのものたらしめる、原則やチェックリストやメソッドはありますか？　または、０から創作を始めた後でチェックリストを使って分析する方がお好みですか？　あなたが安心するのは、未来を見据えるときか、過去を振り返るときか、それとも完璧主義なため過去も未来もどちらも見据えるときでしょうか。どちらに当てはまるとしても、この記事はあなたに役立つでしょう。 自分らしくあれ。自分以外は皆に取られてしまっているから ―Oscar Wilde 制約を設けてデザインするタイプか？ 多くの人は、制約は創造性の邪魔をすると

スライダーは昔から身のまわりにあり、任意の値や範囲を選ぶためのUIとしては事実上最もスタンダードなものとなっています。選べる範囲をユーザーがすぐに把握できるので便利です。 本記事では、UI要素として馴染み深いスライダーのクリエイティブな例をいくつか見ていきましょう。 １. 設定値を視覚化する スライダーは、ユーザーが特定の値や範囲を選べるコントローラーです。ユーザーはほとんどの場合、スライダーのラベルを読んでどのような値をコントロールできるかを知ります。それに加えて、データをスライダーと連動させて視覚化することで、より強い効果を生み出すことができます。 絵には言葉1000個分の価値があります。 購入する家の部屋数を選ぶもの。ユーザーがいくつの部屋を持つ家の購入をスライダーで選択するかに関わらず以下のように視覚化できます。

ライターは作品を書くことに行き詰まるときがあり、デザイナーはアイデアが煮詰まるときがあります。誰しもつまずくことがあることはプロには避けて通れず、恥ずべきことではありません。ただ、時間は待ってくれず締切は静かに近づいて来ます。そんなときには何か特別な方法を見つけなければなりません。 ありがたいことに、クリエイティブになるには壁をじっとにらんでみたり猫をキックしてみたり、フラストレーションで落ち込んでしまったりするよりもいい方法があります。むきになっても効果はあがりません。このことを頭に置き、下記のような方法を試してみてください。 量は質を導く アイデアに関して言えば、余計なものが無い方がいいということはありません。ブレインストーミングは頭を空っぽにしてくれるので役立ちます。たくさんのアイデアがあれば、最終的には泥沼から抜け出すことができます。 最初に頭に浮かんできたアイデアがベストアイデア

デザイン思考とは、解決をつねに念頭に置いて問題に対処するデザイン方法論です。この方法は、十分定義されていない、または知られていないような複雑な問題に対処する際にとても役立ちます。デザイン思考には、関連する人間のニーズを理解する段階、人間中心設計から問題をとらえなおす段階、ブレインストーミングセッションで多くのアイデアを生み出す段階、実践的にアプローチを適用するプロトタイピングとテストの段階があります。これらの５段階を理解すれば、会社や国家、さらには地球規模の複雑な問題を解決するのに大いに効果があるでしょう。 この記事では、Hasso-Plattner Institute of Design at Stanford（d.school）が提案した、デザイン思考の５段階モデルに注目します。d.schoolは、デザイン思考の教育分野で他を牽引する存在です。彼らによれば、デザイン思考の５段階は、共感

Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 UX（ユーザー体験）は徐々に認知され始めています。それでも、UXがなぜ重要なのかや、実際に何を意味するのかを説明しなければならない機会はまだ多いです。したがって、論拠を示せるように事例や画像を準備しておくべきでしょう。製品やサービスの開発にUXがどのように関連しているかを例示するには、ケーススタディがとても効果的です。あるいは、図表を用いるのも、UXをわかりやすく説明する良い手段でしょう。 UXの分野を視覚的に解説する際には、いくつもの分類や型があります。しかし実際にはUXは、専門外の人々にとって高度に専門的で曖昧な概念です。UXとは正確にはどのような意味なのでしょうか？　哲学でしょうか、プロセスでしょうか、それともガイドライン、基準、規律でしょうか？　UX

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 電話番号入力フォームは、生年月日入力フォームと並んでくせ者です。たくさんのフォーマットがあり、どの入力方法が正しいかを見分けにくいことがよくあります。国番号を入力すべきか否かさえよくわかりません。 適切な入力フォーマットを判別できないと、ユーザーは電話番号入力フォーム以外の項目も入力内容が不適切なのではと不安になります。電話番号入力フォームでエラーがでると、フォーム入力自体を放棄してしまうかもしれません。 どのフォーマットが正しく、どのフォーマットでエラーが出るのかを、ユーザーが入力時に困惑しないように伝えるべきです。もしユーザーが困惑するようあればユーザー体験が乏しいということなので、デザインし直す必要があります。入力フォーム改善のためには、

自身の旅行体験をまとめているフリーWebデザイナー。オンラインの小さなリブランディング会社と仕事をしている。会社の理念は、顧客が希望を持ち、人生を新たにもっと楽しめるような製品を作り、提供すること。 マイクロインタラクションは、私たちの周りに溢れています。これはユーザインターフェイスの特定の瞬間のやりとりに用いられるものです。たとえば、ユーザーがモバイルアプリのボタンをタップするとナビゲーションメニューが開かれるなどが一般的なマイクロインタラクションになります。 より詳しく述べると、マイクロインタラクションとはユーザーがどこかでなにかの操作をしたときに起こる、インターフェイス上のアニメーションや変化を指します。ユーザーにとって有益な情報を提供するインタラクティブなアニメーションのことだと考えてください。マイクロインタラクションを利用する理由はたくさんありますが、ここでは４つの例を紹介しまし

Lesは、サンディエゴにあるWebデザインやブランディング代理店Jacob TylerのCEOです。また、Webサイトデザインやユーザー体験、ブランディング、マーケティング戦略、デジタルマーケティングの専門家でもあります。 なにがWebサイトデザインを真に効果的なものにするでしょうか？　外観でしょうか、それとも機能でしょうか？ 答えは、その両方です。Webページの美しさも機能も、UX全体にとって等しく重要です。実際、ユーザーがWebサイトをどのように感じるかによって、彼らの行動は大きく変わります。顧客がブランドを信頼できると感じ、Webサイトとのインタラクションになにも不満を覚えなければ、買い物などの私たちが期待する行為を達成してくれる可能性は高いでしょう。しかし、もしWebサイトが崩壊していてデザインも魅力的でなければ、ユーザーは不安になって苛立ち、操作を中断してWebサイトを離れてしま

モバイルナビゲーションの基本パターンを選ぶときに、プロダクトデザイナーは２つの選択肢から選びます。ハンバーガーメニューとしても知られるドロワー型か、タブバー型です。どちらのナビゲーションにも長所と短所があります。 この記事はそのうち、タブバー型に関するものなので、ドロワー型を上回るタブバー型の利点から話しましょう。 ユーザーの現在地がひと目でわかる。アプリの中で自分がどの位置にいるのかをメニューを開いて確認する必要がありません。ひと目で知ることが可能です。 見つけやすさ。ユーザーはトップレベルのナビゲーションオプションを最初から見ることができます。 指の届く範囲にある。タブバーは届きやすい場所（画面の１番下）に位置しています。ユーザーは指を伸ばして選択する必要がありません。 しかし、タブバー型にはいくつかの欠点があります。 ナビゲーションに載せる選択肢の数が限られる。タッチ箇所が小さくなり

AdobeXDは「リピートグリッド」を含む独特の機能を発表し、大きな話題となりました。この魔法の機能を使えば、どんな要素も複製することができます。 しかし、要素を複製できることだけが、リピートグリッドのもっとも優れた部分なのではありません。 リピートグリッドを使えば、連続したテキストや画像情報も簡単に取り込むこともでき、各グリッドに固有のコンテンツを含むことができます。これによりリピートグリッドは、テーブルやリスト作りに使用するツールになっています。 しかし、リピートグリッドがデザインワークフローにおいて他にどんな用途を持つのか気になりませんか？　ここでは、リピートグリッドを使った６つのクリエイティブな方法を紹介します。 ※動画でのチュートリアルはこちら： ハンバーガーメニュー ハンバーガーメニューアイコンは、複数要素の繰り返しとスペースで構成されています。そのためリピートグリッド機能を使

フレーミング効果とは、同じ中身のものだとしても表現の方法次第では相手の印象を変えることができる効果を指します。あなたが飲み会のコースを予約するとき、3,000円、4,000円、6,000円の3つのコースがあったらどのコースを選びますか？フレーミング効果の理論に従うと、50%以上の人が4,000円のコースを選びます。この記事では、行動経済学で証明された考え方であるフレーミング効果についてご紹介します。 フレーミング効果とは？意味は？ いつもご覧いただきましてありがとうございます。BraveAnswer編集部です。 フレーミング効果とは 「同じことを表すのに、表現方法が違うだけで受けての受け取り方が変わる」 という行動経済学に基づいた理論です。 人は複数の選択肢から選択をするとき、 絶対評価よりも相対評価 をする傾向があります。 客観的に見て合理的な判断をくださない場合があるのです。 表現方法

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ビジュアルデザイナーの間では、アニメーション効果がユーザー体験を向上させると考えられがちですが、全体の体験にはそこまで大きな価値を生み出すわけではありません。デザインにモーションを加えることは、あくまでデザインプロセスの最後に仕上げとして行います。 しかしもしこれを再考察し、飾りではなく体験の土台としてアニメーションを取り入れたらどうなるでしょうか？　この記事では、いつどのようにモーションを用いることで感情を作れるかを説明していきます。 ちなみに、この記事ではアニメーションの説明で「喜び」という言葉を使用していません。アニメーション効果で喜ぶ人もいれば、うっとうしく感じる人もいるためです。 ストーリーを伝えるためのアニメーション すべての体験は、物語的です。どの

UIデザインとWeb開発に関するトピックのライター。個人ポートフォリオやWeb上のいたるところで彼の記事を見つけることができます。最新のアップデートなどを見るにはTwitterをフォローしてください。 Googleで検索すると、Webサイトのパフォーマンス改善のための便利なツールが数多く見つかります。 サイトの画像最適化から独自のCDN設定にいたるまで、さまざまです。 しかし、デザイナーの中でコード最適化について考える人はほとんどいません。 コード最適化とは、総HTTPリクエスト数を減らしたり、ファイルを軽量化したり、表示スピードアップのために最適なカスタムフレームワークに切り替えることを意味します。 最新のBootstrap v4は素晴らしいデザインですが、残念ながら最も重いフレームワークの１つです。 そこで今回の記事では、重いBootstrapの代わりに軽いWebフレームワークを厳選し

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザイナーがコンテンツを重視したアプローチの利点を理解するにつれて、タイポグラフィがデザインプロセスで欠かせないものになってきました。 Web上の95％もの情報は文字で書かれています（Oliver Reichenstein氏） しかしタイポグラフィは、その分野に不慣れな人にとって難しいものです。そこで、タイポグラフィのタスクを快適に行えるように、役立つツールリストを用意しました。この記事で取り上げるツールは、適切なタイポグラフィによってより良いデザインを作る助けになるものです。 以下の項目に分けて、ツールを紹介しています。 フォントを選ぶ フォントペアリングとスタイリングを選ぶ フォントに情報の階層を付ける インスピレーションを得る フォントを選ぶ タイポグラフ

デザイナーが抱える大きな悩みのひとつに、「デザインを理解してくれる人がいない」というものがあります。最近では少しずつ変わっていますが、デザインの重要性を理解してくれる企業は全体としてはまだまだ少ないように思えます。 今回は、専任のデザイナーがいない企業に１人目のデザイナーとして入社したテモナ株式会社の大村さんに、「デザイン文化を組織に浸透させるために行った取り組み」を聞いてきました。 登場人物 テモナ株式会社 UI/UXデザイナー 大村 真琴氏 デザインを考慮する重要性 ── 最初に、テモナさんの事業と大村さんの仕事内容を簡単に教えてください。 大村：テモナ株式会社は、「たまごリピート」と「たまごリピートNext」というサブスクリプションに特化したECの販売管理システムを提供しています。「たまごリピートNext」は、10年以上に渡って提供してきた「たまごリピート」をリニューアルしたサービス

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 ユーザーがオンラインで読むことを想定して、文言を書いていますか？ アイトラッキング調査によると、多くのユーザーはオンライン記事の見出しを数単語だけ読み、最後までは読まないそうです。 さらなる調査で、ほとんどのユーザーが見出しの最初の２単語だけに目を通していることがわかりました。ユーザーはCTAをクリックする前に、見出しを見て内容を予測しているのです。 ユーザーは早くキーワードを知りたがる 見出しの最初の２単語でユーザーに本文のヒントを与えないと、ユーザーは見出しをスキップするだけではなく本文自体も読まないでしょう。 ユーザーが情報を手に入れるまでの忍耐力と行動力は長く続きません。そのため、彼らの興味を引くために見出しの最初の数単語に強いキーワー

Stephen Moyersはオンラインマーケティング担当者、デザイナー、テクノロジーに精通したブロガーです。 彼はロサンゼルスに拠点を置くSPINX Digital Agencyと提携しています。 あなたのサイト内のコンバージョン率を低下させている原因は「検索機能」にあるかもしれません。 致命的な問題ではなくても、コンバージョン率アップに役立っていなければ検索機能の意味がありません。サイト内検索を最適化してユーザー体験を向上させれば、Webサイトのユーザビリティと楽しさを大いに向上できます。 ユーザーはWebサイトが楽しいほど頻繁に訪れ、会員、顧客、購読者などの人数増加に繋がります。サイト内検索の改善は簡単ですが、よくある間違いによって検索するときの体験が邪魔されていることが多いです。サイト内検索を適切なものにするやり方を身につけて、競合サイトと同じ落とし穴にはまるのを避けましょう。 見

ユーザーがWebサイトを見るとき、彼らの視線は左を向いています。そのため右側に配置されたロゴにはユーザーはあまり視線を向けず、ブランドリコールが弱くなります。左側に配置されたロゴには多くの視線が集まり、ブランドリコールに繋がります。 中央配置のロゴはサイトトップへのナビゲージョンを邪魔する Nielsen Norman Groupは中央配置のロゴについても研究を行いました。調査によると、ロゴが左と中央のどちらに配置されるかでブランドリコールに違いはありませんでした。位置よりもロゴのコントラストや読みやすさのようなデザイン的な違いがブランドリコールに影響していました。 それだけではなく、中央配置のロゴはユーザーがサイトトップへ遷移するのを邪魔していました。左配置のロゴを比べると、中央配置のほうがユーザーが１回のクリックでサイトトップへ戻ることを失敗する割合が「6倍近く高い」ことがわかりました