情報処理学会 インタラクション 2015
IPSJ Interaction 2015

B35
2015/3/6

フラットデザインを用いた Web サイトのユーザビリティ向上
四十谷 智美†1

平川 優子†1

安村 通晃†2渡辺 隆行†1

概要： 本研究の目的は，広く利用されているフラットデザインの問題点を明らかにし，ピクセル立体がフラットデザインのユーザビリティを改善するかどうか検証することである．まず，フラットデザインの問題点や Web サイトの使いやすさの判断基準を評価グリッド法で明らかにし，その意見から，フラットデザインにシグニファイアを付加したピクセル立体を改善案として採用した．次に，フラットデザインとピクセル立体の Web サイトで被験者にタスクを課す実験を 3 週連続で実施した．実験の結果，タスク所要時間には有意な差はなかった．SD 法の結果は，ピクセル立体の方がフラットデザインより良い印象を与えていた．この結果から，ピクセル立体はフラットデザインを用いたWeb サイトのユーザビリティを改善することがわかった．

Improvements of Usability of Web Sites That Use Flat Design
TOMOMI AITANI†1 YUKO HIRAKAWA†1MICHIAKI YASUMURA†2 TAKAYUKI WATANABE†1Abstract: The objective of the study is, by clarifying the shortcoming of flat design, to examine if “pixel 3D” method improves
usability of flat design. We have carried out “Evaluation grid method” to clarify problems of flat design and important points ofWeb usability. Based on these results, we decided to use “pixel 3D” method, which applies signifier to flat design. We carried out
an experiment for three weeks with use of two kinds of Web sites, flat design and pixel 3D design. We found that 1) there was no
significant difference of task execution time between two sites, and 2) SD method showed that pixel 3D design gave better
impression than flat design. Thus, “pixel 3D” improves the usability of flat design.

1. 序論

・平面的な外観とする・グリッドレイアウトのような均等な配置にする

近年，スマートフォンやタブレット端末の利用者が増加

フラットデザインでは，以前のリッチデザインのようなしている．この背景の中，タッチパネルを想定したユーザ派手な装飾や実物の質感に似せることはしない．リッチデインタフェースとして，フラットデザインが用いられるよ

ザインでは，現実世界のインタフェースを知っていれば，うになってきている．フラットデザインとは，「ユーザイン迷うことなく操作できるが，それには共通の認識が前提とタフェースのデザイン・設計方針の一つで，現実世界に似なり，文化や時代が異なれば無効となったり陳腐化したりせた表現を極力排したシンプルで平面的なデザインのこと」

する可能性がある．一方，フラットデザインはインタフェ[1]である．フラットデザインは，アップル社の iOS7 やマースではなくコンテンツが中心であるため，内容が整理さイクロソフト社の Windows8 等にも採用されており，Webれ必要な情報にたどり着きやすい[4]．しかし，シンプルすページなどにも広く採用されつつある．しかし，ヤコブ・ぎるインタフェースがゆえに，どこがクリックできるかわ

ニールセンは，「立体的な表現を廃したフラットな UI では，からないというデメリットがある．

どこを押すことができるのか，あるいはどこに文字を入力そのフラットデザインが，近年ではスマートフォンやタできるのかわからない」[2]と述べている．この点から平面ブレット端末などのタッチパネルの普及により，用いられ的な要素をもつフラットデザインを用いることが，ユーザるようになったとされている．具体的な理由とされているビリティの低下につながるという問題が存在する．

ものを以下に示す[5]．

2. 研究背景
2.1 フラットデザイン「フラットデザイン」について富士ソフト[3]は，以下の5 つの特徴を挙げている．
・グラデーションや影などの立体感を排除する
・金属光沢などの反射を排除する
・コントラストの強いカラーを使用する†1 東京女子大学
Tokyo Woman’s Christian University†2 慶應義塾大学
Keio University© 2015 Information Processing Society of Japan・開発コストの削減…立体的な要素の代わりに平面的な要素をもたせることで，開発コストを削減できる．
・操作性の向上…タッチ操作は，タッチする部分が指で隠れるため，タッチできる部分を広げ，パネルが敷き詰められたようなデザインにすることで，操作性を高められる．
・場所を問わない…鮮やかな色を用いることで，屋外で歩いている時もデバイスが使いやすくなる．
2.2 リッチデザイン
リッチデザインについて述べる前に「スキューモーフィズム（Skeuomorphism）」という概念について説明する．ス
キューモーフィズムは，現実世界の事物を示すことで，ユ563

ーザーがソフトウェア上でできることを暗示する表現方法

や影などの立体感を排除する・金属光沢などの反射を排除である[4]．それゆえ，この暗示は使いやすさに大きな影響する・平面的な外観とする）・均等な配置・強いコントラスをもつ．スキューモーフィズムは，似たような文化や生活ト」の 3 点とし，それぞれ 3 段階に分け，Web サイトを 27

基盤であれば暗示されたもののイメージができる．

通りに分類した．

リッチデザインはその手法を反映させたデザインであ上述した Web サイトの分類が正しいものか客観的に明り，現実世界の事物を写実的かつ現実的にディスプレイ上らかにするために，Scheffe の一対比較法を実施した．被験で示している．そのため，ユーザーはそれらを意識しなが者にフラットデザインの説明をした後，分類したフラットら，ソフトウェア上のものの使い方を考えられる．

3. 先行研究3.1 Web サイト利用時にユーザが重視する要因の抽出
飯塚・小川[6]は，Web サイト利用時に重視する要因を抽出するため「The Stanford Web Credibility Survey」の項目を元に，重要項目抽出調査を Web ショッピング利用者 311 名，非利用者 310 名に行い，その後因子分析を行った．
「使いやすさ」は利用者・非利用者ともに第一因子として挙げられ，ユーザビリティを Web サイトのデザインに施すことが非デザインの程度が強い Web サイトである刺激 A，B と，フラットデザインの程度が弱い Web サイトである刺激 C，Dの計 4 種を PC のディスプレイ上で一対ずつ表示した．被験者には，左側に表示する Web ページを基準として，右側に表示する Web ページがどれだけフラットデザインにあてはまっているかを 0 を含む+3 から-3 までの整数で回答させた．実験は，2014 年 6 月 27 日，7 月 1〜3 日に，18～22歳の女子大学生 18 名に実施した．差の検定の結果，被験者がフラットデザインにあてはまると答えた Web サイトは，順に，刺激 A(1.25)，刺激 B(1.01)，刺激 C(-1.1)，刺激 D(-1.16)

常に重要であると明らかになった．

であった．また，刺激 BC 間には，1%の有意水準で有意差3.2 情報とデザイン—情報デザインの実際と Web デザインが認められた．

ガイドライン実験の結果から，最もフラットデザインに当てはまって篠原[7]は，情報デザインとは，メッセージの内容とそれいると判断されたものは，行ったレベル分け通りであった．

が提示される環境を明確化し構想し具体化することで，ユ刺激 AB 間，CD 間に有意な差はみられなかったが，フラーザーの要求に合った目的の達成を満たすことであると述ットデザインの Web サイトである刺激 A,B と，そうでないべている．9 つの観点から項目を定めており，「Web サイト

Web サイト C,D の間に有意な差が見られた．以上の結果かをデザインする上での一般的な原則」の観点では「重要なら，行ったレベル分けが正しかったといえる．

情報は目立つ位置に配置する」等が定められており，「グラ4.2 評価グリッド法フィック」の観点では「アイコンはわかりやすくデザイン

フラットデザイン Web サイトの具体的な問題点や，ユーする」，「クリック可能なアイコンかわかるようにデザインザーから見た Web サイトの使いやすさの判断基準を明らする」ことが定められている．

かにするために実施した．また，カーソル操作（タッチパ3.3 公共システムにおけるタッチパネルのユーザインタッドを使用し，マウスポインタを操作すること）とタッチフェースデザイン操作の双方で実験を行い，挙げられる問題点がデバイスに浅輪・浅川[8]は，医療機関での受付会計システムを事例よって変化するか確認することも目的のひとつである．

として，タッチパネルのユーザインタフェース開発におけ

我々は仮説として，フラットデザイン Web サイトには，るユニバーサルデザイン視点での開発プロセスとその手どこがクリックできるかわからないという問題点があると法・内容を述べている．タッチパネルの利点として，「操作考えた．そして，フラットデザインはタッチパネルを想定が簡単でほとんど習熟の必要がない」，「ボタンを指で直接して普及したデザインであるため，PC を用いてカーソル操ポイントできるため操作性に優れている」等があるが，「触作により閲覧する際にはタッチパネルの場合よりも使いに感によるフィードバックが乏しい」等の欠点もある．そのくいと感じると予想した．今回はフラットデザイン Web サ対策として，「立体的，色覚に考慮した視覚的な表示をする」

イトの問題点を明らかにしたいため，フラットデザインのことが提案されたため，ボタンには他の画面要素に比べて程度が強い Web サイトと比較対象として，フラットデザイ十分な立体感を表し，操作部位であることを強調した．

ンの程度が弱い Web サイトも刺激とする．

4. 予備実験
4.1 サイトの分類
まずフラットデザインを明確に定義づけ，実験で用いるWeb サイトを選定するために，Web サイトの分類を行った．
分類の基準は，フラットデザインの要素として研究背景で述べた 5 つを参考に，「平面的なデザイン（グラデーション© 2015 Information Processing Society of Japan

2014 年 8 月 2 日に 21〜22 歳の女子大学生 8 名に、評価グリッド法を実施した．なお，4 名に PC を用いたカーソル操作による実験を，残り 4 名にタッチパネル端末を用いたタッチ操作による実験を行った．刺激には先ほど分類した
フラットデザインの程度が強い Web サイトである刺激 A,Bと，フラットデザインの程度が弱い Web サイトである刺激C,D の計 4 種を用いた．各 Web サイトに対し 3 つずつ探索564

課題を実行させ，被験者が使いやすいと感じた順に並び替

ソル操作・タッチ操作間で大きな差は見られなかった．一

えてもらった．その後，一方の Web サイトが他方より使い方，ツリー構造では重なる点も見られたが，カーソル操作やすいと判断した理由をインタビュー形式で聞き，それをでは情報をスムースに探せるかどうかを重視しているのに中位概念とし，そこから抽出された評価項目についてさら

対して，タッチ操作では見やすさを重視していると考えらに上位概念と下位概念を抽出した．

れる．

（1）カーソル操作
カーソル操作における Web サイトの評価に際して，ユー

5. 改善案の検討：ピクセル立体

ザーはフラットデザインの程度が強い Web サイトでは「整評価グリッド法から，フラットデザインの特徴である平然性」を重視していることが明らかになった．条件として，面的なデザインに関して，どこがクリックできるかわから「等間隔である」といった具体的な項目が挙げられた．フないという意見や，平面的なデザインのアイコンはわかりラットデザインの程度が弱い Web サイトでは「（リンクボにくいという意見が得られた．ここから，我々は明らかにタンの）押しやすさ」や「わかりやすいアイコン」を重視なった問題点の中から，平面的なデザインに関するものにしていることが明らかになった．条件として，「エフェクトした．中でも，ユーザーがリンクの押しやすさを Web サイのあるもの」，「共通認識のあるもの」といった具体的な項トの使いやすさの判断基準にしているにも関わらず，フラ目が挙げられた．

ットデザインではどこがクリックできるかわからないといまた「色」に関してはフラットデザインの程度が強い
Web サイト・フラットデザインの程度が弱い Web サイト双方で重視されていることが明らかになった．

う点に着目し，改善案を検討することにした．
今回改善案として採用したデザインはピクセル立体（[4]の p130 で深津が述べている）である．ピクセル立体とは，以上のことから，Web サイトの評価は，「ストレスなくクリック可能なコンテンツの底辺等に暗い色で影をつけるスムースに情報を探せるか」を判断基準として行われていことで，浮き出ているように見せるデザインである．このることが示唆された．

影がシグニファイア[9]となり，ユーザーを導くことができ（2）タッチ操作る．ピクセル立体のシグニファイアはわずかにデザインに実験の結果からタッチ操作における Web サイトの評価付加するだけでありフラットデザインの特徴を損なわないに際して，ユーザーは，フラットデザインの程度が強いと考えられる．したがって，我々はピクセル立体を用いる

Web サイトでは「押せると感じられるデザインのボタン」，ことがフラットデザインの改善案として効果的だと考えた．

「Web サイトの整然性」が重視されていることが明らかに

また，今回の改善案として採用した他の理由は，制作になった．条件として，「（リンクボタンに）枠を付ける，浮かかるコストが少ないと考えられるためである．ピクセルき出たデザインにする」，「色のメリハリがある，情報が整立体の制作はフラットデザインのコンテンツを元に行う．

理されている」といった具体的な項目が挙げられた．フラ先述したように，フラットデザインが普及した理由のひとットデザインの程度が弱い Web サイトでは「統一された配つに，開発コストの削減という点がある．シンプルなフラ置」，「ボタンの大きさ」が重視していることが明らかになットデザインは，高度な技術を持つデザイナーでなくてもった．条件として，「メインとサブのコンテンツを分ける」，簡単に制作することができるため，開発費や開発期間が短「指より大きい」といった具体的な項目が挙げられた．

い．ピクセル立体は，そのフラットデザインにわずかなシ以上のことから，Web サイトの評価は，「情報がはっきグニファイアを付加することだけで制作ができるので，すりと見やすく示されており，必要な情報に辿り着きやすいぐに実装することができる．このデザインは，フラットデか」を判断基準として行われていることが示唆された．

ザインの代替案として触れられており[4]，現在実装していPC を用いたカーソル操作における実験結果より、フラッる Web ページも見受けられる．我々は，そのピクセル立体トデザインの程度が弱い Web サイトがフラットデザインを用いた Web ページと通常のフラットデザインの Web ペの程度が強い Web サイトよりも（リンクが）押しやすく使ージを制作し，それぞれのユーザビリティに差があるのかいやすいという意見が得られた。このことから、フラットを実際に検証することを本実験の目的とする．

デザインの程度が強い Web サイトはフラットデザインの6. Web サイト制作

程度が弱い Web サイトに比べてリンクボタンの押しやすさが欠如しているといえる。フラットデザインの程度が強い Web サイトが押しにくく感じた理由として、我々の仮説で述べた「フラットデザイン Web サイトは、どこがクリックできるかわからない」ということが関連していると我々は考えた。
デバイスによる差については，順位づけの結果ではカー© 2015 Information Processing Society of Japan

本実験で使用する Web サイトを 9 つ（架空の 3 つの大学×3 種類のデザイン）制作した．本実験の被験者が女子大学生であるため，既存のサイトを参考に大学の Web サイトを制作した．Web サイトの制作にあたり，以下の 3 点を統一した．
（1）大学名は架空の大学名に統一

565

（2）メニューの横並びの数を 5 つに統一

トを評価する基準が得られたため，それを基に使用する形（3） 各 Web サイトでメニューバーとサイドメニューバー容詞対を決定した．2 種類目，3 種類目の Web サイトも同のデザインを統一様に，5 問のタスクを課し，SD 法の質問紙を回答させた．

1 つの大学の Web サイトに対し，3 種類（メニューバーをフラットデザイン・ピクセル立体・リッチデザインに統一したもの）の Web サイトを制作した．
各デザインのメニューバーを以下に示す（図 1,2,3）．

以上の実験を 1 人の被験者に対し，3 週間連続で計 3 回実施した．
また，3 回の実験における 3 つの大学の Web サイトの使用順序，1 回の実験における 3 種類の Web サイト（フラットデザイン，ピクセル立体，リッチデザイン）の使用順序，タスク実験で課す質問の順序は被験者ごとに異なるものと

図 1

フラットデザインのメニューバー

した．
タスク実験の際は，「はじめ」の合図から，被験者が回答を見つけ，「はい」と言うまでの時間を計測した．また，

図 2

ピクセル立体のメニューバー（画像の右側と底辺に幅 3 ピクセルの影をつけた．）

デバイスをカーソル操作する被験者には，タッチパッドのみで操作するよう教示した．一方，デバイスをタッチ操作する被験者には，指でタッチ操作し，サイズを統一するためピンチによるズームをしないよう教示した．

図 3

リッチデザインのメニューバー

7. 本実験
我々は，フラットデザインを用いた Web サイトより，シグニファイアを付加したピクセル立体を用いた Web サイ
トのユーザビリティのほうが優れていると考えた．それを検証すべく，本実験ではタスク実験と SD 法を 3 週間にわたって毎週 1 回行った．また，本実験では，操作方法によ実験は，2014 年 10 月 7 日～11 月 27 日に実施した．被験者は，18～23 歳の女子大学生 39 名である．そのうち 19 名にデバイスにキーボードを付けた状態でカーソル操作で使用してもらう実験を，残り 20 名にキーボードを外してタッチ操作で使用してもらう被験者間実験を実施した．なお，デバイスは，ASUS Eee Pad TF201（10.1 型 LED バックラ
イト 1,280×800 ドット（WXGA））を用いた．OS は Android（バージョン 4.1.1）であり，使用したブラウザは Firefoxって印象の差が生まれるかをみるために，カーソル操作す（バージョン 33.1）である．また，有効なデータが得られる場合とタッチ操作する場合で実験を行った．なお，比較たのは，そのうち 36 名（PC18 名，タッチパネル 18 名）で対象として，従来使用されてきたメニューバーがリッチデあった．残り 3 名のデータは，ネットワークの不具合や実ザインのものも刺激に加えた．

験キャンセル，実験不備のため使用できなかった．

実験は，1 人の被験者に対し 3 週間連続で計 3 回実施した．1 回の実験の所要時間は約 30 分であった．1 回の実験
では，練習とタスク実験，SD 法を実施した．なお，1 回の8. 実験結果
8.1 タスク所要時間

実験で用いる Web サイトは，1 つの大学の 3 種類 Web サイ

タスク所要時間の平均値の推移を図 4 と図 5 に示す．カト（フラットデザイン，ピクセル立体，リッチデザイン）

ーソル操作とタッチ操作のタスク所要時間について繰り返である．

しのある 1 要因の分散分析を行ったが，特定のデザインがはじめに練習としてタスクを 3 問与え，デバイスの操作常に有意ということはなかった．に慣れてもらった．使用した Web サイトは，東京女子大学の Web サイトで，本実験同様，大学の Web サイトを用いた．練習後，1 種類目の Web サイトに対して 5 問のタスクを課し，回答させた．5 問のタスクを終えると，1 種類目の印象を調査する SD 法の質問紙により，7 段階で被験者に印象評価させた．今回は，ユーザビリティ評価に関連する15 対の形容詞を用いた（「楽しい―退屈な」，「慣れた―不慣れな」，「押しやすい―押しづらい」，「気持ち良い―煩わしい」，「親しみのある―よそよそしい」，「好きな―嫌いな」，

35
タ 30
ス
ク 25
所 20
要時 15
間 10（秒 5）

フラットピクセル
リッチ

0
１週目

「良い―悪い」，「使いやすい―使いにくい」，「親切な―冷２週目

３週目

実験回数淡な」，「明快な―難解な」，「便利な―不便な」，「単純な―複雑な」，「優しい―厳しい」，「見やすい―見づらい」，「わかりやすい―わかりづらい」）．評価グリッド法で Web サイ© 2015 Information Processing Society of Japan

図 4

カーソル操作のタスク所要時間平均グラフ

566350.4

タ 30ス
ク 25
所 20
要時 15
間 10（秒 5）

0.30.2
フラット0.1

ピクセル

0

リッチ

-0.1
-0.2

0
１週目

２週目

３週目

実験回数

図 5-0.3-0.4

タッチ操作のタスク所要時間平均グラフ

8.2 SD 法

図 7

因子得点の平均値比較（カーソル操作・利便性因子）

操作方法による 3 種類の Web サイトの印象とその印象の3 週間の推移をみるため，3 週間すべてのデータを 15 項目

0.4について因子分析（最尤法，プロマックス回転）し，因子0.3

負荷が 1 つ以上の因子について 0.40 以上を示す 15 項目を0.2

選出した．カーソル操作では，初期の固有値の大きさと減0.1衰状況から判断して，2 つの因子が採択された．第 1 因子

0.0は「好感因子」，第 2 因子は「利便性因子」と解釈された．
その得点の推移を図 6,7 に示す（フラットデザインを FD，ピクセル立体を PD，リッチデザインを RD とする）．分散分析を行った結果，3 週目における好感因子の因子得点のみ，F(2,34)=2.643,p<.10 となり，デザインに有意傾向がみ-0.1-0.2-0.3-0.4られた．Bonferroni 法による多重比較の結果，ピクセル立体の因子得点がフラットデザインよりも有意に高い傾向がみられた（p<.10）．
タッチ操作では，初期の固有値の大きさと減衰状況から判断して，1 つの因子が採択された．第 1 因子は「配慮因子」と解釈された．その得点の推移を図 8 に示す．分散分析を行った結果，1 週目における配慮因子の因子得点のみ，図 8

因子得点の平均値比較（タッチ操作・配慮因子）

9. 考察
本実験で明らかになったことをフラットデザインとピクセル立体に焦点を当てて以下にまとめる．

F(2,34)=3.724,p<.05 となり，デザインの主効果が認められまず，我々はタスク実験のデザインの差に関する仮説とた．Bonferroni 法による多重比較の結果，ピクセル立体のして，実験回数を重ねるにつれて，ピクセル立体の習熟度

因子得点がフラットデザインよりも有意に高いことが認めがフラットデザインと比較して高くなり，タスク所要時間られた（p<.01）．

が短くなると考えていた．結果として，カーソル操作では，0.4

フラットデザインとの有意差はみられなかったものの，ピ0.3

クセル立体は週を追うごとに所要時間が有意に短くなって0.2おり，仮説は一部支持された．ここから，カーソル操作に0.1おけるピクセル立体の習熟度は使うほど上昇するといえる．

0.0

タッチ操作においても，ピクセル立体の所要時間が短く，-0.1習熟度が上がる傾向がみられた部分があった．しかし，1-0.2週目ではピクセル立体の所要時間がフラットデザインに比-0.3

べ有意に短かったが，2 週目ではフラットデザインの所要-0.4

時間がピクセル立体より短く，我々が考えていた実験回数による段階的な習熟度の上昇がみられず，仮説は支持されなかった．

図 6

因子得点の平均値比較（カーソル操作・好感因子）© 2015 Information Processing Society of Japan

我々は仮説として，フラットデザインに比べ，ピクセル567

立体のユーザビリティのほうが優れているため， SD 法でSD 法の結果では，カーソル操作では 3 週目のピクセルはピクセル立体のほうが好ましい印象を抱かれると考え，立体の因子得点がフラットデザインより有意に高かった．

また，その印象の推移は実験回数を重ねるにつれて右上がタッチ操作においては 1 週目のピクセル立体の因子得点がりに推移していくと考えた．実験結果を見ると，カーソルフラットデザインより有意に高く，また，有意差はみられ操作では，好感因子において，ピクセル立体の因子得点がなかったが，3 週の実験を通し全体的にピクセル立体の因

週を追うごとに上がっていき，さらに 3 週目ではピクセル子得点がフラットデザインより高い傾向がみられた．

立体の因子得点がフラットデザインより有意に高い傾向が

この結果から，推移の仕方に差はみられたが，カーソルみられた．利便性因子については，有意差はみられなかっ

操作，タッチ操作両方でピクセル立体はフラットデザインたが，ピクセル立体の因子得点の値のほうがフラットデザよりも良い印象を与えるということが明らかになった．こインより高い傾向にあった．ここから，カーソル操作におこから，我々は，操作方法を問わずピクセル立体はフラッいて仮説は支持され，ピクセル立体はフラットデザインに

トデザイン Web サイトのユーザビリティ向上に貢献し得比べ好ましいと感じられ，さらに使用回数を重ねるにつれると考える．てその度合いは上昇するといえる．

Web デザインの分野は流行のサイクルが早い．2014 年 6

一方，タッチ操作では，週を通してピクセル立体の配慮

月に Google が新たに発表したマテリアルデザインは，因子の得点がフラットデザインより高い傾向があったが，Android アプリ上のユーザインタフェースのデザイン方針

有意差がみられたのは 1 週目のピクセル立体とフラットデである．これは，あらゆるデバイスで操作しても違和感をザイン間のみであった．ピクセル立体の因子得点の推移に覚えないスケーラビリティを目標にしており，基本の外観関しては，1 週目の得点が最も高く，ついで 3 週目の得点はフラットデザインを元にしている．しかし，アニメーシが高いという結果が得られた．ここから，タッチ操作におョンなどにより，操作している箇所をユーザーに表現する

いては，ピクセル立体の評価は高い傾向であったが，因子点が異なる．この試みのように，フラットデザインは Web

得点の推移に関する仮説は認められなかったといえる．

デザインに留まらずユーザインタフェース全般に大きな影また，カーソル操作とタッチ操作による差について述べ響を与え続けると考えられる．その際には，フラットデザ

ると，カーソル操作では，上述したように，タスク実験とインの利点・欠点を見極め，利点を生かしつつどのようにSD 法の両方で仮説と概ね支持する結果となった一方，タ欠点を補っていくか考えることが重要である．

ッチ操作のデータの推移が仮説に反するものであったことがわかる．このタッチ操作のデータの推移が仮説に反した理由として，ボタンを指で操作するタッチ操作は直感的な操作であるということが考えられる．そのため，タッチ操作は，カーソル操作に比べて慣れに時間がかからず，段階的な推移がみられなかったと考えられる．
インタビューの結果から，フラットデザイン，ピクセル立体ともに「はっきりしていて見やすい」という意見が得られたが，フラットデザインからはやはり「平面なのでボタンなのかわからない」という意見が得られ，一方ピクセ
ル立体からは「立体感があるため『この部分は押せる』とわかる」という意見が得られたことから，フラットデザインの改善案として，ピクセル立体は有効であると考える．

10. 結論我々は，フラットデザインの特徴として，「平面的なデザイン」「均等な配置」「強いコントラスト」の 3 つを挙げ，中でも「平面的なデザイン」の，どこがクリックできるか

参考文献
1) IT 用語辞典 e-Words. http://e-words.jp/
2) Windows 8 — Disappointing Usability for Both Novice and Power
Users.
http://www.nngroup.com/articles/windows-8-disappointing-usability/3) 富士ソフト(2013)．アプリ／web 開発者のためのフラットデザ
インガイドブック．マイナビ．
4) 佐藤好彦(2013)．フラットデザインの基本ルール―web クリエイ
ティブ・アプリの新しい考え方．インプレスジャパン出版．
5) 泉本優輝・吉竹遼・津守優(2013)．iOS デザインの作法．秀和システム．
6) 飯塚重善・小川克彦(2005)．Web サイト利用時にユーザが重視する要因の抽出 電子情報通信学会技術研究報告，
Vol.105,No.306 ,p55-60．
7) 篠原稔和(1999)．情報とデザイン—情報デザインの実際と Web
デザインガイドライン 情報の科学と技術，特集：情報とデザイン, 49 巻 12 号, p606-617．
8) 浅輪武生・浅川玄(2003)．公共システムにおけるタッチパネルのユーザインタフェースデザイン Fujitsu，特集 ユニバーサルデザイン；事例，54 巻 3 号，p225-213．
9) D.A.ノーマン（2011）．複雑さと共に暮らす～デザインの挑戦.
新曜社．

わからないという点に焦点を当てて本研究を行った．そして，フラットデザインの改善案として，シグニファイアを付加したピクセル立体を用いた Web サイトを制作し，本実験でその有効性を調査した．
タスク実験の結果では，カーソル操作，タッチ操作ともに，特定のデザインによる有意差がみられなかった．

© 2015 Information Processing Society of Japan568