知れば知るほど面白くなるUIの世界を皆さんにもチラ見せしたい……ということで、連載の第2弾となる今回は「これは発明だ！」と私たちが感動したUIパーツについてご紹介します。 ミクロな視点でアプリを観察し、UIパーツ一つひとつに注目してみると、普段は気付けない面白い発見がたくさんありますよ。 ※各UIパーツの名称は、公式で発表されているものではなく、私たちが便宜的につけた呼称になります。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Apple Booksのセミモーダル Appleが提供する電子書籍アプリ「Apple Books」では、カルーセル状に並んだ本を押すと、そのままセミモーダルが立ち上がります。前の画面の一覧性を保ちながら、それぞれの本の詳細を見ることができるのが特徴的ですね。さらに下スクロールすることで、全モーダルへと滑らかに変化します。 このUIのポイン
みなさんは、ユーザーインタビューでどんな質問をしていますか？ 事業立ち上げで顧客の課題を確かめる際、顧客や将来の顧客候補とのユーザーインタビューでこんな会話をしていませんか？ 「○○（課題）で困っていませんか？」 「なぜ○○（課題）で困っているのですか？」 「○○（課題）のうち、特に困っていることは何ですか？」 この質問に違和感がなければ、ユーザーインタビューとしては不十分かもしれません。 これまで携わってきたどの事業でも、顧客の課題は一見それっぽく見えました。 しかし、よくよく確認してみると事業の作り手である「自分たちが課題と決めつけている」ケースが多くありました。 僕自身の経験を振り返ってみても、事業立ち上げの当事者になると、どうしても「顧客はこういう課題を持っているはずだ」と思い込みたくなってしまいます。そもそも思い込んでいると言う自覚さえない事がほとんどでした。 その錯覚がどこから
ユーザビリティテストとは、サイトの改善において、実際にサイトのターゲットユーザーに利用してもらい、操作感やサイトの構成に関する課題を発見する手法のことです。 この記事では、ユーザビリティついての基本的な解説から、ユーザビリティテストのメリット、必要な準備など、実際にテストを行う前に知っておきたい事項をまとめました。
ユーザビリティテストとは？ ユーザビリティテストとは、該当するプロダクトにおける使い勝手に関するユーザビリティ課題を導き出す調査手法のことです。 例えば、あるサイトの改善をしたい場合、実際にサイトのターゲットユーザーに利用してもらいユーザビリティテストを行うことで、操作感やサイトの構成に関する課題を発見することができます。 以前の記事ではユーザビリティテストの概要や実施方法について主に紹介してきましたが、今回の記事では、ユーザビリティテストを実施した後の分析方法について紹介していきます。 基本情報や実施するメリットや具体的な実施の流れについては下記記事をご参照ください。
コンテキストインタビュー： ユーザーのコンテキストで彼らを観察・インタビューし、デザインのヒントを得よう 観察とその結果の解釈をユーザーと協力して行うことを通して、コンテキストインタビューは、顧客の作業に関して他の調査方法では得られない、隠れた知見を明らかにする。 Contextual Inquiry: Inspire Design by Observing and Interviewing Users in Their Context by Kim Salazar on December 6, 2020 日本語版2021年5月10日公開 我々が提供するUX調査手法のメニューに、コンテキストインタビューは欠かせない。 コンテキストインタビュー（contextual inquiry）は、民族誌学で行うフィールド調査の1つで、小サンプルのユーザーの徹底的な観察とインタビューにより、ユーザーの作
ユーザーインタビューは、すばやく容易に実施可能なことから、ユーザーからのフィードバックを得る手法としてよく利用されている。この手法は、ユーザビリティに関してではなく、自分たちのデザインについてのユーザーの認知を知るために利用しよう。 User Interviews: How, When, and Why to Conduct Them by Kara Pernice on October 7, 2018 日本語版2019年5月23日公開 ユーザーインタビューというのは、UX調査手法の1つで、その間、リサーチャーが関心のあるテーマ（たとえば、システムの利用やユーザーの行動、習慣など）について知ることを目的に、1人のユーザーにそのテーマについての質問をするというものだ。一度に複数のユーザーに参加してもらうフォーカスグループとは異なり、ユーザーインタビューは1対1のセッションでおこなう（とはいえ
UXを改善することによって、ユーザー満足度や売上の向上につながるため、UXの重要性が上がってきております。 しかし、UX改善に取り組むデザイナーの中には、ユーザー目線となることが時に難しく感じることもあるでしょう。 そんな時に、アイデア出しを助けるツールとして、SEOに強いAIライティングツール「トランスコープ」や「ChatGPT」が注目されています。 ChatGPTとは、OpenAI社が運営するAIチャットボットです。 ChatGPTへの命令文であるプロンプトを活用できると、UX改善の調査や分析などが効率化できます。 【ChatGPT・OpenAI・GPT-4とは？】の記事で、ChatGPTについて詳しく解説しているため、ぜひご覧ください。 本記事では、UI/UXデザイナー向けに、ChatGPTを活用してUX改善に役立つプロンプト集を紹介します。 日々の作業を効率化し、UX改善アイデアを
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
3人のWebデザイナーがインハウスデザイナーとして、三井住友銀行のスマホアプリやWebサイトのリニューアルを通してデザインによるDXをどのように浸透させたのか、その経験が惜しみなく明かされた良書を紹介します。 「銀行」は自分とは関係ないやと思った人は間違いです。スマホアプリやWebサイトのUI/UXをユーザー目線で使いやすく洗練されたデザインにするテクニックなども詳しくていねいに解説されており、UIデザインの学びがたくさんあります。 一読するだけでなく、何度も繰り返し読みたくなる優れたデザインの解説書です。 3人の経歴は、金澤氏はフリーのWebデザイナーを経て制作会社に入社、金子氏は知人とWeb企画・制作、堀氏は企業でUIデザインを担当、そして三井住友銀行のインハウスデザイナーとしてUI/UXデザインを担当しています。 デザインの必要性や重要性を社内からどのように理解してもらったのか、スマ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 興味がある方は、過去分もどうぞ。 2021年、最も注目されたUIデザインのテクニックのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な
こんにちは、デザイナーの小蕎です。UX DAYS TOKYOの読書会で学んだ”心理学や脳科学”の内容を取り入れた「脳科学で習慣化を促すアプリ（以下、習慣化アプリ）」を作ってみようということになりました。 アプリの画面設計をして、オーガナイザーである大本さんからUIを指摘されることで多くのナレッジを得られました。知識として頭にいれるだけでは身につかない、実際に作ってみたことで学べた事例をご紹介します。 CTAはメインカラーと異なるものを利用する 色を決定していく時に、ヘッダーや行動を誘導するボタン（CTA）もメインカラーにあわせた色にしていました。 それが左の画像です。ヘッダーと「次へ」ボタンが同じ色になっていて一見まとまりがあるように見えますが、馴染みすぎてしまいCTAであることや強調したい部分がユーザーに伝わりません。 メインカラーとボタンを同じにしてしまうと画面に馴染みすぎてユーザーの
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー
無限ローディングや「さらに表示」ボタンを採用することで、商品の読み込み時にスムーズなインタラクションを提供することができる。 Alternatives to Pagination on Product-Listing Pages by Kate Moran on March 6, 2022 日本語版2022年8月4日公開 最近、従来のページネーションコントロールをやめて、インタラクションコストを少し下げることのできるデザインパターンを選択するECサイトが多くなってきた。これらのパターンを採用したほうがいいのだろうか。それは、提供している商品の数による。 従来からのページネーションでは、商品の一覧を複数のページに分割し、ページごとに一定の数の商品を配置していく。そのため、さらに商品を見るには、画面の上部または下部にある「次へ」ボタンをクリックかタップして、次のページに移動する必要がある。ペー
UX Movementの創立者、ライターです。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始めました。 モバイルアプリをデザインするとき、ソリッド（塗りつぶし）かアウトライン、どちらのアイコンを使用するか決めなければいけないときがあります。ユーザー体験にはどちらが最適なのでしょうか。 単なる好みの問題だと考える人もいますが、研究によると、認識の速さに違いがあることがわかっています。 ソリッドアイコンとアウトラインアイコンのどちらを使うべきかがわかれば、モバイルアプリの操作がしやすくなります。ユーザーはアイコンをより早く認識し、正しい選択をすることができるのです。 「Filled-in vs. Outline Icons: The Impact of Icon Style on Usability」という調査で、アイコンのスタイルは作業効率
Webサイトでもスマホアプリでも、アイコンのデザインは非常に重要です。優れたアイコンをデザインするために必要な7つの原則を紹介します。 アイコンだけでなく、UI全体のデザインにも通じるプロのデザインテクニックが詳しく解説されています。 7 Principles of Icon Design by Helena Zhang 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Clarity -アイコンは分かりやすく Readability -アイコンは見やすく Alignment -アイコンにおける揃え Brevity -アイコンは簡潔にデザインする Consistency -アイコンの一貫性 Personality -アイコンの個性 Ease of Use -アイコンの使いやすさ アイコンのリソース Clarity -アイコンは分か
↓本記事はアドベントカレンダー「Game Graphic Design Advent Calendar 2019」用に書きました。 ----------------------------------------------- 記事内容の削除についてのお詫びにつきまして 本記事は、ゲームタイトルの作例をもとに自分の目線で文章を書いておりました。 しかし、「ゲームUI演出ブログ」での記事削除などの事例もあり、 法的な部分での判断により記事を削除いたしました。 本記事にコメントを寄せていただいた方、みていただいた方々、そしてご紹介したゲームタイトルに関わっていた制作者の皆様方、本当に申し訳ございませんでした。 中には記事になったものに対して不快に思われた方もいるかもしれません。 制作者の皆様に強く敬意を表すとともに、以後改めて著作物であることを強く意識していこうと思います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
