直感的なインタフェースをデザインするための10 の原則
表示を単純化
原則１

表示の強調と抑制

原則２

見た目にシンプル

身体動作を利用した操作

原則４操作の自動化

P

原則３

AUTO

操作を単純化MAS

12:30

操作をイメージできる
原則５

視覚的メタファの利用

原則６

操作のメタファの利用

ユーザーにIFを意識させない
原則７

表示と操作を対応付けるマッピング

原則８

直接操作の利用

原則９

リアルで即時的なフィードバック

原則１０ 表示や操作の一貫性

井上勝雄

Inoue Katsuo

発行日

2015年3月30日

広川美津雄

Mitsuo Hirokawa

発行者

広島国際大学心理科学部／研究代表者：井上勝雄

岩城達也

Tatsuya Iwaki

加島智子

Tomoko Kashima〒739-2695 東広島市黒瀬学園台555-36
TEL: 0823-70-4885

index

はじめに
本パンフレットで紹介する10原則は、よく読んで表示を単純化

頂くと各原則が相互に関係し合っていることが分かるかと思います。

原則１

表示の強調と抑制

原則２

見た目にシンプル

これらの原則の根底には、ユーザーの認知的負荷操作を単純化と身体的負荷の最小化があります。
つまり、認知対象の理解や操作回数およびそれ原則３

身体動作を利用した操作らに要する時間が最も少なくなるにはどのよう

原則４操作の自動化な 原 則が必要かについて解説されています。

操作をイメージできる
このように、すべてにおいて最小化する設計指針

原則５

視覚的メタファの利用が直感的なインタフェースデザインの原則です。

原則６

操作のメタファの利用

ユーザーにIFを意識させない
原則７

表示と操作を対応付けるマッピング

原則８

直接操作の利用（注）

原則９

リアルで即時的なフィードバック

先行研究７の実験結果によると、操作操作速度が250ms以下であ

原則１０ 表示や操作の一貫性ると直感的に感じると示されています。

(c) K. Inoue, M. Hirokawa, S. Iwaki, T.Kashima 2014

直 感 的 な インタフェ ー ス を デ ザ イン する た め の 1 0 の 原 則

原則１ 【表示を単純化】

原則２ 【表示を単純化】

表示の強調と抑制

見た目にシンプル

ボタンの数や表示部の内容が少ないと、どのボタンを押せばよいのか、ユーザーは、目の前にある図形を、全体として、 最も単純で最も規則的どの結果を見ればよいのかが直ぐにわかります。

で安定した秩序ある形に認知しようとする傾向があります。

Mail

画像＋

番組表
1

これを「プレグナンツの法則」と呼んでいます。
AM

そのためには、使用する頻度が少ない操作部分の表示を抑制する方法があります。たとえば、頻度の少ないボタンを段階表示（サブパネルのした がって、この 法 則 に沿って、単 純できちんと整 理 整 頓され た 表 示

中に配置や画面メニューのプルダウンなど）で隠しておく方法がありま画面にしておくと、その画面の内容を直ぐに理解できます。

どうしても少なくすることができない場合は、重要な、または、使用頻度的要素を、ゲシュタルトの法則を用いて、シンプルに見やすくまとめるが高い、緊急性などが高いボタンやアイコンを強調して、直ぐに分かるデザインを行います。

[00] 激知りアワー[00] うらデータ[00] プライスクラッシュ□□□□□□□□□□□[00] 健康家族

1

4[00] フルホース[00] トーク□□□□□□□□□□□□□□□□□□□[00] ゆとりの旅□□□□□□□□□□□□□□□□□□[00] 日差しを受けて□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□[00] スポーツ天気[30] 昼の夢気分

青今の時間へ（注）ゲシュタルトの７法則は、①近接（距離が近いとグループに）、②.類同（色や形、向きが同じだとグループに）、⑤共通運命（移動のベクトルや変化の周期が同じだとグループに）、⑥面積（重なっている図形では面積の小さいほうが主として認識されやすい）、⑦対称性（対称な図形ほど認識されやすい）□□□□□□□□□□□[00] 情報館□□□□□□□[00] ニュース□□□□□□□□□□□

強調の方法には、形や色、大きさと距離（フィッツの法則）、動きなどを③閉合（意図して描かれていない単純で閉じた図形を見出す）、④連続（切れ目や変化の無い線を見出す）、[00] ５センス[00] 昼どき

これは、原則1を適用するのが難しい場合に効果があります。

プルダウンのメニュー画面

051
cineV

[50] 天気予報

ようにします。

調整して視認性を高めます。

5[50] スポーツ□□□□□□□□□□□[00] お昼寝テレビ

041
MRNV□□□□□□□□□□□[00] お昼のニュース[30] おもてなし

AM

021

at TV

AM

0

この単純で秩序だった表示画面にするには、数ある形態的要素や意味

2□□□□□□□□□□□□□□
□□□□□

11

テレビ

WWN

10

AMす。

地デジ013

電子番組表（EPG）の画面□□□□□□□□□□□[00] 遥かなる旅□□□□□□□□□□□赤日時切換

直 感 的 な インタフェ ー ス を デ ザ イン する た め の 1 0 の 原 則

原則３ 【操作を単純化】

原則 4 【操作を単純化】

身体動作を利用した操作操作の自動化

情報機器はキーボードやマウスなどの操作デバイスを介して操作して夜景を撮影するには、シャッター速度と絞りを数値入力する操作のためいますが、それらのデバイスを極力使用しないで操作ができると、より専門的な知識が必要です。

使いやすくなると言う二重接面理論があります。

しかし、その一連の操作を自動化した「夜景」というシーン・ボタンがつまり、直接操作する身体的な操作は、操作手続きを単純化することができます。

キーワードを音声入力

ポートレート
屋外での人物撮影に適しあれば、誰でもが簡単に綺麗な夜景を撮影できます。

ます。望遠側では背景をきれいにぼかします。

このように、目的や手続きを言葉やアイコンに置き換えて自動化してく
たとえば、知りたいことをネット検索する場合も、キーワードをキー入れる操作は簡単になります。この操作の自動化を専門用語では「目的型力するのではなく、操作を単純化した発話の音声で入力ができると、IFデザイン」と呼びます。

OK

レストランのメニューに料理の写真があると、比較的迷わずに選ぶことジェスチャー、指さし、体重の移動などの日常生活の身体的な操作を、ができます。飲み物の自動販売機もサンプル（写真やアイコン）が提示

インタフェースデザインに取り入れると直感的に感じます。

されていますので、簡単に選ぶことができます。

MASとても使いやすいと感じます。

PAUTO

したがって、上記の「夜景」も視覚化したボタンだと、さらに分かりやすく操作できます。
（注）
二重接面理論は、ユーザー側の第１接面と機器側を第２接面の間に操作デバイスが介在するモデルです。この第１接面と第２接面が近づくと身体化して使いやすくなるという考え方です。

発話の音声によるネット検索

カメラの目的型インタフェース

直 感 的 な インタフェ ー ス を デ ザ イン する た め の 1 0 の 原 則

原則５ 【操作をイメージできる】

原則６ 【操作をイメージできる】

視覚的メタファの利用

操作のメタファの利用

航空券の座席指定をするときに、端末の画面上に実際の飛行機の座席

表 示 画 面 の 本 の ペ ージを めくる操 作 が 、「 次 に」の ボタンを 探して、と同じようにイラスト画があると、迷うことなく直ぐに希望の座席を選ぶ

それを押すという手続きでなくて、実際の本のページを指でめくるといことができます。

う身体操作と似ている手続きだと無意識的に操作することができます。

アイコンやコンテンツを現実にあるものの質感、陰影、立体感、動きなまた 、地 図 画 面をズ ームアップ するの に ２ 本 の 指を使う身 体 操 作もどとそっくりに見せようとする方法の「スキュアモーフィックデザイン」も自然な行為として感じます。

同じように、視覚的に操作をイメージすることができます。
これは、原則３と近いのですが、この原則は、ページめくりなどのすでにこの原則で、最も有名な例がごみ箱のアイコンです。

体験として持っている身体的な操作を利用します。

そのアイコンをみたら、誰でもが不要なデータを削除するとイメージす専門用語では、NUIと呼ばれているインタフェースと関係があります。

Upgrade notes
Following
are no tolonger
supported in
Althoughﬁleit isformats
not necessaryuninstall
PhotoshopElements
andofthecorresponding ﬁles will
any previousversion
Photoshop
not beimported
into the new catalogs
Elements,beAdobedoes
not recommend
JPEG
2000, between
Filmstripolder(FLM),
switchingandWirelessnewer BMP (WBM,WBMP),
PCX,(TGA, VDA,ICB, VST), Photoshop
versionsof Targa
the Photoshop
Elements
RAW(RAW), PICT File (PCT, PICT), Scitex CT (SCT),
Organizer.
Photoshop
EPS (EPS),EPS
TIFF ofPreview(EPS),
Catalogs createdin olderversiontheGenericEPSwould(AI3, need
AI4, AI5,AI7, AI8,
product
to beAI6,
convertedtoPS, EPS, AI,EPSF,avc, mkv, ﬂv, m1v, mpe, asx, mpv, dcr,
the EPSP),
latest version.
avs, hprj,usedm2p,mpa, mp2,
Only the most recently
catalog
will asf, 264
Anyﬁles thatIfyou
beslideshow
convertedprojectautomatically.
youmayusehave createdin multiple
earlier versions
Photoshop
Elements will nocatalogs,ofstart
Photoshop
longerbe openedin Photoshop
13,Elements,
go into Organizer,
and useElements
thehowever
you would
have theability toFile > Manage
Catalogs
commandto convert thoseto new Slideshows.
search and convert other catalogs.
In Updatingaddition, previous
on Mac catalogs
OS following
are no(more formats
thanlonger
supported:
IFF takeFormat,30,000photos) canoverPhotoshop
an hour 2.0, Alias
PIX, PICT(possibly a few hours, if the catalog
is Resource.
large, and from an older version of Online Services
Photoshop Elements or Photoshop
Album). Please be patient.
Following ﬁle formats are no longer
supported in Photoshop Elements andthe corresponding ﬁles will be not be
imported into the new catalogs

ることができます。

上が２種類のごみ箱のアイコン
下がスキュアモーフィックデザインのごみ箱（注）
NUI（Natural User Interface）は、ユーザーの五感やユーザーが自然に行う動作によって機械を操作する方法です。

ページめくりによる操作の電子ブック

直 感 的 な インタフェ ー ス を デ ザ イン する た め の 1 0 の 原 則

原則７ 【ユーザーにIFを意識させない】

原則８ 【ユーザーにIFを意識させない】

表示と操作を対応付けるマッピング

直接操作の利用

表示と操作の位置や方向、動きなどを対応付けることを「マッピング」と操作対象やコンテンツに対して直接的に操作するとユーザーはユーザ言います。表示を見ただけで、直ちに操作のための身体感覚が呼び起感覚レベルの認知と身体感覚による操作が結合することによって、表示や操作に意味の解釈やルールを感じさせず、瞬時に操作できます。

ーインタフェース（UI）を意識しないで操作できます。

日付

こされます。

これは「直接操作」（ Direct Manipulation）と呼ばれています．

2015/5/15

画面の中における直接操作は、ボタンやスクロールバーなどのUI要素
さらにマッピングは、操作によって得られる効果を予想させることがでを意識する必要がなく、コンテンツだけが強調されます（原則1）。

きます。

2015年

5月13日

たとえば、iPhoneのピッカーは、ドラム形式で択一選択するインタフェ

2015年

5月14日

2015年

5月15日

2015年

5月16日

2015年

5月17日

ースです。
ドラムの形状がユーザーにドラムの回転方向を想像させ、スワイプという指の操作を誘導します。

この 場 合 、操 作 が N U I ( 原 則 3 / 6 ) で あったり、コンテンツ が 現 実 世 界 のリアルな視覚的メタファ(原則5)であったりすると、より直感的になります。

ピッカー表示はスワイプする早さに応じて、ドラムの回転速度が決まります。さらに、ドラムの回転速度は時間送りの速さと対応しています。

電子地図を指で拡大する直接操作

今までのプルダウンの択一選択より直感的にメニューを選択できます。
（注）
スワイプ（swipe）は、指を触れたまま特定の方向になでること。

ピッカー表示を搭載した情報端末

直 感 的 な インタフェ ー ス を デ ザ イン する た め の 1 0 の 原 則

原則９ 【ユーザーにIFを意識させない】

原則10 【ユーザーにIFを意識させない】

リアルで即時的なフィードバック

表示や操作の一貫性

ユーザーの直感的な操作が連続する場合、リアルで即時的に応答する以前に経験した操作と同一のユーザーインタフェース（UI）が提示されフィードバックによって、ユーザーはインタフェースをあまり意識せずにた場合には、ユーザーは素早く操作できます。

操作できます。

そのためには、ハードウェアの間やソフトウェアの間において、同じユーザー体験ができるようにUIの表示や操作方法に、一貫性をもたせる

たとえば、最近のデジタルカメラは、タッチ操作によるピント合わせ、絞12:30必要があります。

り，画像効果などの結果が、瞬時にディスプレイにフィードバックされ、次の操作のプレビューの役割を果たし、ディスプレイから目を離さずにたとえば、高級カメラは、時代とともに機能や技術は大きく変わってい連続的に操作できます。

ますが､新旧世代の間で基本的な形態と操作に一貫性が継承されているので、あまり学習しなくても操作できます｡

また、電 子 地 図、電 子 書 籍 および や 写 真 などのコンテンツをピンチ、ドラッグ、回 転 するタッチ操 作で は、現 実 世 界 にお いて指で 物を移 動

画面の中のUIにおいても、視覚的メタファ、操作のメタファ、直感的なする速度や方向と同じように、コンテンツが指に吸い付くように移動・マッピング、フィードバック表現などに一貫性をもたせると､直感的な伸縮・回転するフィードバックを実現しています。

インタフェースとなります (原則5/6/7/9などに関連)。
連続操作を可能するデジカメの露出補正

なお、この原則は、原則3/5/6などと関連します。

たとえば、DVDの再生停止ボタンは電子機器のUIに継承され、直感的なインタフェースとなっています。
他の製品でも用いられている記号やアイコンでレイアウトされた画面デザイン

直 感 的 な インタフェ ー ス デ ザ イン の た め の １ ０ の 原 則

原則の引用先・先行研究と図書

補遺・２

１）山下千成美、井上勝雄：直感的なインタフェースデザインの一考察、第6回日本感性工学会春季大会概要集、pp.12E09(CD-R)、2011

ユーザーが機器を操作するとき、ユーザーは操作対象の認知および過去

２）広川美津雄、山下千成美、井上勝雄：直感的なインタフェースデザインの基礎的研究、第7回日本感性工学会春季大会概要集、pp.SI-4(CD-ROM) 、2012の操作経験の記憶を手がかりにしています。

３）井上勝雄、広川美津雄：直感的なインタフェースデザインの調査分析、第8回日本感性工学会春季大会概要集、pp. 5−1 (CD-ROM)、2013

その流れは、大きく分けて右図のように「認知過程」と「操作過程」に分ける

５）井上勝雄、広川美津雄、加島智子：体制化と直感的なインタフェースデザイン、第15回日本感性工学会概要集、pp.A62(CD-ROM)、2013

ことができます。認知から操作への実際の流れは、矢印が示すように様々

６）岩城達也、中村直樹、井上勝雄：ユーザーインタフェースにおける直感についての基礎的研究、第15回日本感性工学会概要集、pp.A63(CD-ROM)、2013

な経路をたどると考えられます。そして、経路が短いほどユーザーの認知的７）T. Iwaki, N. Nakamura, K. Inoue : Basic study of the i n t u i t i v e f e e l f o r u s e r i n t e r f a c e u s i n g t h e s e r i a l r e a c t i o n t i m e t a s k ,負荷や身体的負荷が減り、認知から操作にいたる時間が少なくなります。

Proceedin g of 5th International Congress of Intern a t i o n a l A s s o c i a t i o n o f S o c i e t i e s o f D e s i g n R e s e a r c h , p p . 2 6 9 1 - 2 6 9 6 , 2 0 1 3８）井上勝雄：インタフェースデザインの教科書、丸善出版、pp. 136-150、2013

おいてユーザーが元々もっているインタフェースの能力を促すことが重要

10）広川美津雄、井上勝雄、岩城達也、加島智子：直感的なインタフェースデザインの原則、第10回日本感性工学会春季大会概要集、pp.2-01 (CD-ROM)、2015

であると考え、心理学の「体制化」と「親近性」の考え方を拡張しました。

補遺・１

形態の親近性

直感的なインタフェースデザインの原則を提案するために、操作の流れに

９）広川美津雄、井上勝雄、岩城達也、加島智子：直感的インタフェースデザインの設計論の基礎的考察、日本感性工学会論文誌、第13巻5号、pp. 543-554、2014

アンケート調査（先行研究２）から直感的な使いやすさは、一般的な使いやすさの内容と多くが重複することが示されました。その中で、操作指向する「形態の体制化」，分かりやすさを指向する「意味の体制化」、およ時間が短くなるようにデザインされたインタフェースが直感的なインタフェースデザインであることが分かりました。

び使いやすさを指向する「操作の体制化」の3つに分けました。

そのためには、まず、インタフェースを見たら直ぐに操作できる「高い学習性」が求められます。次に、初めはどのように操作していいのかが分か

親近性は、ユーザーの行為や操作対象などから構成される記憶と現行のらなくても、つまり学習性が高くなくても、一度使用したら次からは迷うことなく操作ができる「高い記憶性」が求められます。これはアップル社の

行 為とが 類 似していると、記 憶 の 活 性 化 に つ な がり、体 制 化を促します。

製品で多くの例を見ることができます。

詳しくは、先行研究9）をご覧ください。

意味の親近性
意味の体制化

この体制化は、目の前にある図形を全体として、最も単純で最も規則的で安定した秩序ある形に認知しようとするユーザーの働きです。見やすさを身体記憶
手続き記憶

感 覚 記 憶 エピソード記 憶ワーキングメモリ 意 味 記 憶

形態の体制化
対象の知覚

操作の親近性
目標設定・到達

意味の解釈

操作意図の形成認知過程

表示部

をシステムが代行する目的型インタフェースも効率性が高い例です。

形態の体制化の観点から直感的インタフェースデザインの原則1-2、操作のこの３つの視点がそれぞれの10の原則の中に複数含まれてるので、見直してみると理解がより深まります。なお、これらの視点は、ニールセンの体制化の観点から原則3-4，親近性の観点から原則5-6、認知と操作の結合

ユーザビリティ特性の中の有名な項目です。の観点から原則7-10を抽出しました。

操作感覚の形成操作過程

認 知・フィードバック

また、操作手順が少ない「高い効率性」も重要です。特に身体的な操作は、操作手続きを簡素化してくれるので効率が高くなります。操作手続き

操作の体制化

操作の実行
操作部

操作対象
行為遂行の流れにおける体制化と親近性

次の補遺・２では、先行研究で進められた研究内容から、10の原則の基になった考え方について解説します。

本パンフレットは、JSPS科研費（24603035）「直感的なインタフェースデザインとその評価」の助成により作成したものです。