UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
ユーザビリティを向上させる25のデザインの基本概念 デザイン会社 ビートラックス: ブログ
ビジネスにおけるユーザーインターフェイス(UI) や、ユーザーエクスペリエンス(UX)の重要性が頻繁に語られる事が多い。 Webサイトやアプリから始まり、自動販売機、券売機、車のダッシュボート、テレビ、トイレ、エレベーターのボタン配置に至るまで、”ユーザビリティー”と表現される ”使いやすさ” の大切さが注目を浴びている。 そして、その使い易さを生み出す最初の入り口がインターフェイスである。 インターフェイスとは、ヒトとデバイスとの円滑なコミニュケーションを達成するための媒介役であり、操作性や使い易さを印象づける点ではソフトやデバイスの成功を最も左右する、唯一無二の存在である。 今さら聞けないUI（ユーザーインターフェース) の基本 最終的なインターフェイスの仕事は “ユーザーゴール + ビジネスゴールの達成”であり、どんなに良いプロダクトを作っても正しい方向にユーザーを導き、ビジネスとし
「スマートフォンのインタラクションデザインに関するユーザビリティ調査」を発表～最も支持されるJavaScriptの表現方法とは～ / IMJモバイル
「スマートフォンのインタラクションデザインに関するユーザビリティ調査」を発表 ～最も支持されるJavaScriptの表現方法とは～ 株式会社アイ・エム・ジェイ（JASDAQ 4305）のグループ会社である株式会社IMJモバイル（本社：東京都目黒区 代表取締役社長：川合純一）は、「スマートフォンのインタラクションデザインに関するユーザビリティ調査」を実施いたしました。 調査期間は2011年9月14日～9月15日、有効回答数は412名から得られました。 調査結果概要 スマートフォンの普及に伴い、インタラクション性が高いサイトが求められています。 スマートフォンサイトを構築する際の効果的な表現方法としてJavaScriptの活用がありますが、実際にJavaScriptを使った表現方法がユーザーに与える印象について実例を用いた調査を行いました。 調査の結果、シンプルにわかりやすい表現方法はユーザ
日本でFacebookの普及を妨げているのは、実名主義ではない、かもしれない - in between days
ちょっと前からFacebookについて感じていたことを脳科学者の茂木さんがいみじくも語ってくれていた。ブクマのコメントでもそれに賛同する意見が多数寄せられているので、合わせてリンクを貼っておく。 茂木健一郎 クオリア日記: Facebookの謎 そのブクマ おそらく話のポイントはココだとおもう。茂木さんのブログを引用する 日本でFacebookが伸びない理由を、日本のウェブの匿名文化と結びつけて論じる人もいる。しかし、私には、それが本質だとは思えない。 Facebookのインターフェイスが、まず私にはよくわからない。一時期のウィンドウズに対して抱いていた違和感と同じように、「ごみごみした」「整理されてない」印象を受ける。 前半はまさに同意見だ。匿名／実名は実はそれほど大した問題ではない。Facebookをしばらくやっていればわかるが、実名主義を徹底して主張しているのは、つまり際限のない匿名
外部リンクは別ウィンドウで開かせるべきか？ アクセス解析でユーザー行動を理解する
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
【スマートフォン】 図解！今すぐ直せる、WEBフォーム 6つの課題 (ユーザビリティ実践メモ)
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、PC向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか？ 今回は、弊社コンサルタントの自主調査から、スマートフォン端末（特にiPhone）でのWEBフォーム利用時の6つの頻出課題をご紹介します。 多くのWEBフォームでは、項目名が入力ボックスの横に配置してあります。 PCでは全く問題のないレイアウトですが、iPhone端末では入力ボックスをタップしてズームインするとラベルが見えなくなり、非常に入力しにくいものになってしまいます。 【改善案】＜推奨＞入力例を入力ボックスの上または下に配置する項目名（ラベル）を入力ボックスの上部に配置する ※項目名の位置が変わるとPCで見にくくなるケースも想定されるため、ご注意ください 課題2
スマートフォン対応しただけで、安心してはいけない理由 (ユーザビリティ実践メモ)
前回に引き続き、スマートフォン対応サイトを制作する場合に気をつけるべきポイントとして、「PCサイトへの誘導の必要性」についてご紹介します。 スマートフォン対応サイトでも、PCサイトへの誘導を残しておこう スマートフォン対応をしているサイトの中には、PCサイトへのリンクが用意されている場合があります。せっかくスマートフォンから利用しやすいユーザインタフェースを用意しているのに、どうしてPCサイトへと誘導する必要があるのでしょうか？ 今回は、PCサイトへのリンクが必要な2つの理由についてご説明します。 スマートフォンはPCと比べると画面サイズも小さいため、最適化したサイトを作るために機能を絞ったり、情報量を減らしてサイトを構成するケースがよくあります。このような場合には、忘れずにPCサイトへのリンクを用意しておくことが必要です。 amazon.co.jpのiPhoneサイトを例に見てみると、ト
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
第1回 Flashはなぜ嫌われるのか | Think IT
今や「当たり前」に使われているFlash 本連載では、ユーザビリティに配慮したFlashの正しい使い方や導入法について紹介します。 エンドユーザーのインターネット接続環境が加速度的に高速化している現在、ムービーやサウンドの要素を含んだリッチなウェブコンテンツは「当たり前」に見られるようになってきています。特に、閲覧に必要なプレーヤーアプリケーションの普及率が高く、プラットフォーム（OSやブラウザなど）の違いに依存せず使えるFlashは、スタンダードな手段として幅広く使われています。 Adobe社の発表（http://www.adobe.com/products/player_census/flashplayer/version_penetration.html）によると、日本国内のFlash Playerの普及率は、どのバージョンもおおよそ99パーセント近くとされています（2008年6月現
ひとつのページに同じラベルのリンクが複数存在する場合 | Accessible & Usable
公開日 : 2009年10月8日 (2018年1月20日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) Webページには、共通ラベル（同じ文言）を持ったリンクが複数存在し、かつ、これらのリンクの飛び先が異なることがあると思います。主に、同じ粒度の情報が一覧表示されていて、「続きを読む」「詳しく見る」といった類のリンクがあるケースです。 たとえば下記に図示した例では、製品の特長の一覧ページに同じラベルのリンク（詳しくはこちら）が並んでいて、かつ各々のリンク先が異なっています（株式会社ニコンのサイトより）。 このように、同じ文言で飛び先の異なるリンクが存在するケースでは、<a>要素にtitle属性を付けて、より具体的な（ユニークな）情報を補足的に記述すると良いでしょう。その理由は、主に音声読み上げツールを使用している視覚障害者ユーザーに対して、多少なりともアクセシビリティを
mixi のユーザーインターフェースガイドライン作成に協力［株式会社ミクシィ様］
日本最大の SNS「mixi」を運営している株式会社ミクシィ様ではユーザーインターフェースを重要なものと位置づけて改善活動を始めていらっしゃいます。その活動の第一歩として、現状の mixi（PC版）のUIカタログとしてのガイドライン作成をソシオメディアが協力いたしました。 今回インタビューさせていただきましたのは株式会社ミクシィ 開発部 デザイングループ 馬場沙織様、河野崇史様のお二人です。 デザイングループでは mixi のユーザーインターフェースの管理・設計、そして実際のデザインを担当されており、馬場様と河野様は今回のUIガイドラインのプロジェクトの中核を担われました。 株式会社ミクシィ 開発部 デザイングループ 馬場沙織様 株式会社ミクシィ 開発部 デザイングループ 河野崇史様 聞き手：ソシオメディア 上野 学 ソシオメディアはUIの重要性をアピールしていますので、日本最大の SNS
ユーザの疑問に、「その場で」応えていますか？ - Feel Like A Fallinstar
ネットのユーザ体験設計には欠かせない「疑問の解消」。 商品のよさ、わからない用語の解説、お金のこと・・・ちょっとでも「？」が解消されないと、せっかく集めた人も、検索をしたり他の情報を探すためにサイトから逃げていってしまいます。 最近では、サポート（FAQ）情報を設けるサイトは増えてきましたが、それではまだまだ不十分だということも、数多くのユーザ検証の中で見えてきています。 サポートのトップに飛ばしても、ユーザは満足しない 問題の多くは、とにかくここに帰結します。 サポートページを作りこんで、沢山の情報を充実させればさせるほど、ユーザにとっては「情報が多すぎて、おげっとなってしまう」ページへと変わってしまうという、なんとも厄介な課題にぶつかります。 また、サポートから各商品やサービス下位ページへの導線をこまめに引くのは事実上かなり難しいので、結局戻ってこれない人が出てしまうのも結構大変です。
2010年版 ユーザーインターフェース（UI）・ユーザビリティ必見サイト/必読書 - Feel Like A Fallinstar
ウェブサイト 実はユーザー中心設計やユーザビリティ、インターフェースについてちゃんとまとまったサイトは国内には少数です。 ここに挙げたサイトはどれも大変充実したものだと思います。 ※残念ながら、海外の記事を紹介しているブログでよいものは見つからず。 劣化コピペサイトを紹介するのも気が引けるので割愛しました。 ヤコブ・ニールセンのAlert Box ユーザビリティ・ユーザ調査の世界的権威であるヤコブ・ニールセン博士のナレッジを発表しているサイトです。 実際の調査結果、そこに対する考察も含め、とてもよくまとまっています。 アップル ヒューマンインタフェースガイドライン Max OS Xのためのインターフェース資料に始まり、アプリケーションをデザインしている間、心に留めておくべき基礎となるデザイン原則がまとまっています。 もちろん、Windows / Linusユーザーにとっても必見。 ユーザビ
プロトタイピングでUIデザインの失敗にさようなら - ＠IT
仲里淳 2009/9/11 ※ トリックスター……この連載でのトリックスターのイメージは、相反する2つの者同士が、別個に機能する共同体をつなぐ役目を果たす人。閉鎖的な空間に風穴を開けて風通しを良くする人。エンジニアとコーダー、デザイナの機能システムが組み合わさった緩やかな共同体を創造する人たちです。 WebサイトのUIデザインを効率的に進める「プロトタイピング」が注目されている。この手法に積極的に取り組むビジネス・アーキテクツの伊原力也氏に、実践する際のポイントについて聞いた 悩みの種は納品後に発生するUIデザインの修正 RIA/リッチクライアントに限らず、納品後にUI（ユーザーインターフェイス）に対して「使いにくい、分かりにくい」「やっぱり画面にアレが欲しいな」といった意見がクライアントから出ることは少なくない。こういったUIトラブルを減らす有効な手段として「プロトタイピング」が注目を集
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
純利益をあげているEコマースTOP100サイトに見る、購入フローの全ステップをキャプチャでおさめたまとめ
方法: Windows Phone Marketplace 用のスクリーンショットを作成する
HugeDomains.com
IDEA * IDEA
ファーストビュー都市伝説 - ページ上部に詰め込むのはダメデザイン？ | 初代編集長ブログ―安田英久
Modeless and Modal
