世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
ビジュアルデザインと機能性 ビジュアルデザインと機能性。ウェブサイトやアプリケーションのデザインでは、この２つは密接な関わりを持っています。 多くの人は、ビジュアルデザインと聞いて、ものを美しく（もしくは格好良く、楽しく）見せるためのデザインを連想するかもしれません。まさにそれはデザイナーの仕事です。世の中をより美しく、格好よく、楽しくすることは、人が関わるものを生み出すデザイナーにとっての使命です。それをないがしろにすれば、何のためのデザインか、何のためのデザイナーか、と問われることになるでしょう。 ただし、道具の世界では、デザインが機能性に直結しています。人は道具を使うとき、はっきりした目標を持って扱います（はさみを使って紙を切る、蛇口をひねって水を出す等）。そういった目標をどれだけ達成できたか、ストレスなく達成できたかという観点＝機能性は、道具の価値に関わってきます。ウェブサイト
「使いやすいメニュー」に必要な3つのこと よく「ナビゲーションメニュー」と言われるように、Webサイトではメニューはナビゲートするためのものです。ナビゲートする対象はもちろん人（ユーザー）ですが、もっと具体的に言及すると「情報を探しているユーザー」ということになります。そして、情報を探す際には、できるだけ簡単に探せる必要があります。 使いやすいメニューには、3つのことが必要です。1つ目はアフォーダンス。言い換えると「メニューがメニューである（次の情報に導く）とすぐにわかる」ということです。2つ目はインタラクティブ性。たとえばメニューにマウスオーバーした、あるいはクリックしたことがわかることを意味します。3つ目はカレント表示。これは「現在いる場所がわかる」という意味です。 この3つを満たすため、メニューには3タイプから4タイプの画像を用意することが多くなっています。ノーマル時、マウスオーバー
前回は、気持ちいいUIを構築する方法を開発者の視点から捉え、「開発者が“面倒くさくて”やらなかったことが、利用者の“面倒くささ”の蓄積につながるのではないか」、そしてユーザーの面倒くささを解消してあげる方法の1つとして「ユーザーが何もしなくて良い状態を作る」ことがよいのではないか、という意見を提示しました。今回はその考察をさらに発展させ、技術者がついついやってしまいがちな「やりすぎ」について考えてみたいと思います。 チュニジアで痛感したGoogleマップの出来の良さ 筆者は8月末にチュニジアに行って来ました。チュニジアはアフリカ大陸の地中海沿岸に位置しており、アフリカの中では比較的発展を遂げている国です。フランス人などのリゾート地としても有名です。今回は家族を連れて、チュニジア人の元同僚を訪ねての旅だったのですが、筆者は基本リモートで仕事をしているため、仕事を完全にストップさ
当記事は、2015年2月5日に無料動画のオンライン学習サイト - schoo WEB-campus（スクー）にて開催した授業「優れたUXを実現するための人間中心デザインとは？」のフォローアップになります。 当日の授業の内容は schoo の下記ウェブサイトよりご覧いただけます（会員登録が必要です）。 はじめに 当企画は schoo と弊社コンセントとの合同企画で「社会に求められる価値あるデザイナーとは？」というテーマのもと、著者含むコンセントのアートディレクターの佐藤とサービスデザイナーの大崎の3名でそれぞれの立場から1人づつ授業を開催してきました。 デザイン領域の拡張に伴うデザイナーとしての役割とは？ 佐藤 通洋 先生 - 無料動画学習｜schoo（スクー） サービスデザイン時代のデザイナーのあり方とは？ 大崎 優 先生 - 無料動画学習｜schoo（スクー） 最終回となる今回は、以下の
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ある大手チェーンのスーパーであったこと。 そこは東京近郊の駅前にあって24時間営業の店なんだけど、朝の6時～8時はレジを2～3台で回していた。 でもある日、上の意向でこの時間のレジは基本1台のみで回すことになった。 レジの回転率の数値を見て1台で充分回せるとわかったため経費削減の判断だ。 しばらくレジは1台で回していたのだが、ほどなくしてこの時間帯の来客・売上げはかなり落ちてきた。 レジの稼動を1台に絞れという判断は、来客が少ないのにレジに余計な人件費をかけるという 無駄を事前に防ぐことができたとその判断自体はそれなりに評価されたらしい。 でもこの時間帯に現場で働いている人間はバイトでも知っている。 来客数・売上げが落ちた理由は稼動レジを1台に絞ったためだ。 確かにレジ1台でも充分裁くことができる来客数だったんだけど1台だと常にレジに列ができている状況だった。 この時間帯に来る客は、主に通
使いやすいアプリを作るための、とても簡単で、確実な方法があります。 それは、ユーザの問い合わせに対応することです。具体的に言うと、問い合わせが気軽にできるようなUIにして、そこで得た情報源を元にUIを分かりやすく改良していく。(機能追加とはまた別の話) ただ、直感的に感じるように、これは手間がかかるのでたくさんの人は逆のことをしようとする。つまり、ユーザヘルプを設置して、問い合わせ先は出来るだけ発見しにくい洞窟の奥深くに設置する。 でも、問い合わせには、アプリの利便性向上につながるヒントが豊富に隠されています。ユーザがどんな問題やニーズを持っているかのヒントもザックザック出て来ます。ザックザックです。 アプリ開発にとって、やったことがいい事は星の数ほどあって、そのどれもをやろうとすると時間やお金がいくらあっても足りません。だから、”やったほうがいい事”の優先順位は常に意識して、メリットとそ
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
連載の初回にソフトウェアテストの4つの分類をご紹介しました。今回は品質の観点から分類されるテストの中のユーザビリティテストについてご紹介します。 ユーザビリティテストとは？ ユーザビリティテストとは、ソフトウェアの使いやすさを確認するテストです。 皆さんが普段利用されているソフトウェアで、使いにくいと感じることもあるかと思います。機能要件は確かに満たされているけれども、実際使ってみると使いにくい場合があります。使い方がわからずあきらめてしまう場合もあるでしょう。利用者としてはそのソフトウェアは使えないも同然と受け取られてしまいかねません。 機能は豊富だが、使いにくくて誰も利用していないのでは、機能の目的を果たせません。有効に利用されなければソフトウェア開発に対する費用対効果が出てきません。 このようなことが起こらないよう、使いやすさを確保することを重視するケースが増えてきています。ソフトウ
前回は、「開発側にとって便利であるがためによく利用されているUIが本当に直感的にわかりやすのか、疑ってみよう」というお話でした。世の中でよく利用されているUIや、あなたやあなたのまわりにいる人たち、すなわちスマートフォンをすごくよく利用していてさまざまなUIに対する経験のある人たちであればすぐに理解できるUIが、実際にそのサイト、アプリケーションを使うユーザー層にとって理解しやすいかどうかはじつはわからないのです。 今回は、「理解しやすい」よりさらに発展した発想である（と筆者が思っている）「気持ちいい」UIと開発者の関係について考えてみたいと思います。 「気持ちいい」を要素分解すると見えてくる そもそも、「気持ちいいUI」とはどういうものなのでしょうか。まずはどういう状況が「気持ちいい」のかを要素分解をしてみましょう。 処理速度が速く、処理の際の待ち時間が少ない わかりやすく直感的
※ この話はフィクションです。実在の人物や団体などとは関係ありません スマートフォンサイトを制作していて、「サイトを自由に拡大縮小できるようにしてるのは理由あんの？」と言われた時の場合の話です。 Viewportの設定どうしてたか <meta name="viewport" content="width=device-width"> これだけ。こうするとサイトの幅=デバイスの幅になり、拡大縮小は自由にできる。 対処法1：話し合うそもそもブラウザにデフォルトで備わっている拡大縮小機能を無効にするのがおかしいなぜ拡大縮小を無効にするのか ネイティブアプリ感を出したい拡大縮小した時に表示が崩れるのを防ぎたい拡大した時に画像がボヤけるのが嫌例えば構成/デザインの上で小さな文字を使わなくてはならない場合、ユーザーはどうやってその文字を拡大するのかユーザーが拡大したいと思っても拡大が禁止されていたら、
本書は、ユニバーサルデザインの構造的な原則をウェブアプリケーションに適用し、できる限り多くの人々がコンテンツを利用できるようにする方法を紹介する書籍である。パソコンのブラウザ以外の手段でウェブにアクセスする際、ブラウザごとに異なるインターフェースを用意しないで済むためのデザインから、動的なコンテンツを閲覧可能にするためのWAI-ARIAへの対応やウェブアプリケーションにJavaScriptを組み込む際のポイント、またFlashやFlex、Silverlightなど、アクセスしやすいRIAのについても詳述する。日本語版では、日本国内での状況を付録として収録している。 訳者まえがき はじめに 1章 ユニバーサルデザインの導入 1.1 アクセシブルなデザイン：その物語 1.2 仕事にユニバーサルデザインを取り入れる 2章 売り込み 2.1 「彼ら」などいない 2.2 ユーザーの特性 2.2.1
本エントリーは、以下の目次で構成されています。 2種類のハサミと2種類のWebデザイナー Webデザインの特殊性 ビジュアルのディテールに神が宿らないWebデザイン 美しいが使えないWebデザインをしてしまう理由 Webデザイナーを支配する「強固な固定観念」と「裏の動機」 美しいビジュアルの根底にあるデザインの本質 本当に「最近のWebデザインはつまらない」のか？ ミスマッチが生む不幸なWebデザイン Webデザイナーに求められる自らのスタンス Web制作会社にも求められる明確な価値観 2種類のハサミと2種類のWebデザイナー 例えば、以下のような2種類のハサミが存在するとします。 工芸品のように美しいが切れ味はよくないハサミ 見た目はそれなりだが非常によく切れるハサミ 1は、ハサミとしては売れないでしょう。ただ、それが刺激的で斬新なビジュアルであった場合には、特別な賞を取ったり、美術館に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く