画面をデザインするということ - Qiita
この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 （実際にUX５段階モデルを意識して仕事してるわけではありませんが、何かしら
ディズニー直伝！Webデザインでアニメーションの基本原理を応用する方法
この記事では、ディズニーによるアニメーションの基本原則を、どのようにWebサイトやUIデザインに適用できるか、具体的なサンプル例と一緒に紹介しています。 ディズニー社の現場で長年培われた、アニメーションの基本原則12個（英: 12 Principles of Animation）は、「生命を吹き込むイリュージョン: ディズニーアニメーション（英: The Illusion of Life: Disney Animation）」として1981年に出版され、現在でもアニメーションの基本ガイドのひとつとして広く知られています。 これらの基本原則は、もともとディズニーのキャラクターデザインのために設計されたものですが、この記事では、これらのアニメーション基本原則をUIデザインに適用する方法を探っていきましょう。 ここで紹介するアニメーションの基本原則を、どのようにウェブページに適用できるかまとめた
Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
伝わりやすさが違う、UIデザインのシステムステータス可視性のコツ4個まとめ
Webサイトにおいて状況を伝えるシステムステータスの可視性（英: Visibility）は、ウェブサイトのユーザビリティ研究の第一人者ヤコブ・ニールセン（Jakob Nielsen）氏のユーザビリティ10原則のひとつです。 システムの現在の状態を伝えることで、ユーザーはそのシステムを操作、制御している感覚となり、この感覚こそが信頼を築くのに役立ちます。 この記事では、Webサイトでシステムの状況をうまく伝えることができる、4つのインタラクティブで視覚的なフィードバック方法をご紹介します。 1. ユーザーのロケーションや進行状況を表示する視覚的フィードバック いまどこにいる？ 迷子になりたいというひとはあまりいないでしょうが、現実の世界だけでなくデジタルの世界の両方で起こり得ます。 アプリ内のどこにいるのかユーザーに知らせることが、優れたナビゲーション体験に不可欠と言えます。アプリとWebサ
入力した時の反応速度が遅いとイライラする！ユーザーインタラクションでどの程度の遅延だと煩わしく感じるか
フォームにテキストを入力した時など、ユーザーインタラクションにおいてどの程度の遅延だと煩わしく感じるかを検証するためのデモサイトを紹介します。 当然きびきびと操作できるのがベストですが、実際にどの程度の遅延が許容範囲なのか確認してみるのも一考です。 Typing delay experiment GoogleのMonica Dinculescu氏（@notwaldorf）が制作したサイトで、Audio delay experiment（音の遅延）と比較できます。 デモサイトの操作は、簡単です。 遅延時間を定義し、フォームにテキストを入力すると、遅延を体感できます。しっかりと体感するには、一度に多くの文字を入力してください。
プロが重視するスマホゲームのKPIとは？ 売れ続けるゲームにするための運用と改修 - MdN Design Interactive
皆様こんにちは。UIUX Lab代表の鷲山です。ゲームUI/UXの魅力をお伝えする連載第二回目は、長期戦になることが多いスマホゲームの「運用」についてお話ししようと思います。最近はスマホゲームも従来のコンシューマーゲーム同様に開発期間が長くなる傾向がありますが、散々試行錯誤してα版、β版とユーザーテストも繰り返し、自信を持って世に出しても、ユーザーとの微妙なずれは大小さまざまなところで発生します。 そんな中で、状況をどのように評価し改善していくのかを、いくつかの実例とともに紹介していきます。 2019年5月13日 TEXT：UIUX Lab代表 鷲山優作 ゲームの場合は、ユーザーが楽しい、面白い、わかりづらい、操作しづらいなどを直感的に体験して声を上げてくれることもありますが、客観的に評価するためには、やはり、いくつかのKPIを設定して、やるやらないの判断、優先度や対応策に対する判断基準に
ユーザーを魅了する！UXデザインの正しいアニメーション完全ガイド 2018年版 - PhotoshopVIP
海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras Skytskyi より許可をもらい、翻訳転載しています。 最近では、UIデザインのアニメーションで感動させたり、驚くせることは難しくなってきています。画面上でのやり取りを示したり、アプリケーションの使い方を説明したり、ユーザーの注意を向けるなど、実装テクニックはさまざまです。 この記事では、UXデザインにおけるアニメーションの基本原則とルールをまとめてご紹介します。これからインターフェースデザインのアニメーションを作成したいというひとが、追加情報を探す必要がないよう、アニメーションのすべてをまとめた完全ガイドです。 アニメーションの持続時間とスピード 要素の状態や位置が変更されると、アニメーションの長さは、ユーザーに変更を通知し、
サイトやアプリの使い心地を改善！UIアニメーションを良くする実践テクニック、小技7個まとめ
実際のサンプル例を確認しながら、UIデザインの「良い」アニメーションを「より良く」してみましょう。ほんの少し調整を行うだけで、UIマイクロインタラクションをより魅力的で、ユーザーにも分かりやすく表現できます。 たとえば、リスト形式で並べたコンテンツにちょっとした工夫を加えるだけで、よりつながりのあるUIパターンを演出できたり、コンテンツの関係性を考えたアニメーション遷移、ボタンをクリックするなどユーザーに行ってもらいたいものに注意を引くことも、ほんのわずかなUIマイクロインタラクションによって実現できます。 今回はこれらのサンプル例を作成するために、Material Motion、IBMのアニメーション原則、Motion in Manifestoのガイドラインを参考にしています。 また今回のサンプル例は、InVision Studio（現在は限定ユーザーのみのアーリーアクセスで、メール登録
マイクロインタラクション
UIのディテールをほんの少し工夫するだけでUXは劇的に改善します。本書では効果的なマイクロインタラクション――ひとつの作業だけをこなす最小単位のインタラクション――の意味、有効性、デザイン手法を学びます。マイクロインタラクションを「トリガー」「ルール」「フィードバック」「ループとモード」に分解して豊富な実例とともにていねいに解説し、さらにプロトタイプやドキュメント作成、テストといった実践的な手法も紹介します。マイクロインタラクションを活用すれば、ありふれた製品も顧客を引きつける魅力的な製品に生まれ変わらせることができます。ドナルド・ノーマン推薦書！ 翻訳者によるサポートページ。 本書に寄せて ――ドナルド・ノーマン 賞賛の声 まえがき 謝辞 意見と質問 1章 マイクロインタラクションのデザイン 1.1 機能ではないが侮れない存在 1.1.1 大規模なマイクロインタラクション 1.2 マイク
UXライティングはじめの一歩、国内外のWEBサイトの『マイクロコピー』を勝手に分析してみた。 | Web担当者Forum
マイクロコピーはWEBサイトやアプリのあらゆる箇所で見つかります。例えば、 ・ボタンの文言 ・メニューやナビゲーション ・入力フォームのラベル ・サインアップ画面 ・ログイン画面 ・パスワード復元ページ ・プレースホルダーのテキスト ・プログレスバー ・アプリのプッシュ通知 ・404ページ ・エラーメッセージ などです。 マイクロコピーは、ユーザーを助けるコピーのことを言います。指示、説明、通知、警告を通じてユーザーの行動をガイドします。その点、セールスコピーや、マーケティングメッセージとは明確に区別されるものです。 ではなぜマイクロコピーが重要なのか？ 答えは簡単です。もし、インターフェースにコピーが書かれていなかったら、誰もが操作を投げ出してしまうでしょう。アプリを利用したり、ウェブサイトを見ているとき、私たちはインターフェースに書かれるマイクロコピーを頼りに操作しているのです。 優れ
UXデザインを改善する、参考にしたいアニメーションの使い道4つまとめ
動き（英: Motion）は物語、ストーリーを伝えます。たとえば「これを今、見てみましょう。」、「操作がうまく完了しました。」など、あまり長くなく、複雑ではないストーリーなどです。 アニメーションの目的は、ユーザーを楽しませることではなく、ユーザーが今何が起こっているか理解したり、より効果的なアプリの使い方を説明することにあります。このアイデアについて、Zurb では次のように述べています。 我々は、静的な画面スクリーンをデザインするだけではもはやありません。どのようにユーザーがスクリーン画面から、実際に閲覧するコンテンツに誘導できるかデザインすることが重要になります。 アニメーションは、美しさと機能性を統一するために、幅広いコンテンツに利用されています。ユーザーの行動やステータス状況、ユーザーの注目を集めたり、実行したアクションの結果をうまく伝えたり、さまざまな要素に影響しています。 今
ユーザーテストサービスのUIscope | UIscope
ユーザーがどのようにサービスを使っているのか。 利用シーンが最短1日で届く、 ユーザーテストサービス。 いますぐ無料で試してみる UIscope とは？ 「高品質なユーザーテストを 最も安く・早く・簡単に」 ユーザーがサービスを使っている様子を 動画形式でお届けする、 ユーザーテストサービスです。 ユーザーテストとは
リモートユーザーテストをWeb担で実施したら、なんと発見点126個。重要課題13個すべて見せます！ | やってみました！ リモートユーザーテスト
Web担編集部では、今回Web担当者Forumのサイトで「リモート・ユーザーテスト」をやってみました。それを2回に分けてレポートします。今回は、リモートユーザーテストの実施前の準備編と重要課題13個をすべて紹介します。 リモートユーザーテストとは何なのか、どのように行われて、そこから何がわかるのか――今回、Web担編集部がリモートユーザーテストを実施するにあたって、ポップインサイトのオーダーメイド調査を提供いただき、実施してもらいました。 サービス提供側が裏でどんなことをしているのかをポップインサイトの池田氏に執筆いただき、依頼側としてWeb担編集部がどんなことを行い調査を通じて何を得られたのか、2つの視点で紹介していきます。 なんと発見点126個！ うち重要課題は13個リモートユーザーテストの流れを解説する前に、まずはWeb担サイトでどんな改善点がリモートユーザーテストで発見されたのか紹
UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
デプスインタビューのやり方や準備する質問項目は？ 逆引きリストで解説！ | プロ厳選！ ユーザーを理解する調査手法
インタビュー実施前 ①インタビューする人（被験者）はどのように選べばいいの？デプス・インタビューにおける被験者の選定方法は、大きく分けて2パターンあります。 利用しているユーザーから優先度の高いユーザーを選ぶ インタビューする人を選ぶために、アンケートなどの定量調査データを活用して、利用している人をいくつかに分類（クラスタリング）して、その分類に重要度を付けます。 重要度の高い分類に属しているユーザーのなかから、今回調査したい条件に合う人や個別の属性、回答傾向からウェイトを付けて優先選定候補者としてリストアップします。 その後、電話やメールなどでインタビューの依頼をしていきます。時間や予算、センシティブな配慮事項などの制約条件が強くない場合のプロジェクトではこの選び方をします。 仮説条件に合う身近なユーザーを選ぶ 簡単でカジュアルなインタビューの場合は、定量調査の分類などは行わず、調査対象
ユーザーをイライラさせないIn-App Walkthrough（アプリ初回起動時の説明スライド）の作り方 - 小さなごちそう
スマートフォン・アプリを初めて起動したときの説明スライド（In-App Walkthrough）の必要性は、いつも悩むところだ。 不要派の主張はだいたい以下の通りだ。 ユーザーは早くをアプリ操作したい どうせ読まれない AppStore上の説明パネルで事足りる 要は「作成コストがかかる割には効果がないのでは」ということだろう。いちユーザーとしては僕も確かにそう思う。ただ、提供側が期待するほどユーザーの理解力は高くない。実際にユーザーテストをしてみると、一通りアプリを操作したもらった後でも、作り手の意図が思った以上に伝っていないことがわかる。 操作画面では思った以上に伝わらない、アプリの価値 操作UIだけで「なぜこのアプリが必要か」「どんな問題をどのように解決しようとしているのか」というアプリのバリュー・プロポジションを十分に伝えるのは非常に難しい。 ユーザビリティを考慮してログイン後の操作
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ログインページや値段表、コンタクトフォームなどのUI/UXをより良くするためのチェックリスト・「Checklist Design」
Ballpark — Product research so simple, you'll never skip it again
音声インターフェイスについて思う7つのこと | TechCrunch Japan
ユーザーテストExpress
