フラットデザイン - 版の履歴

2014年4月28日 (月) 03:35に192.168.200.111による

2014-04-28T03:35:02Z

← 古い版		2014年4月28日 (月) 12:35時点における版
8行目:		8行目:


	===~~■フラットデザインの特徴~~===		===～フラットデザインの特徴～===

	*・ドロップシャドウやグラデーションによって立体感を表現しない。		*・ドロップシャドウやグラデーションによって立体感を表現しない。
21行目:		21行目:
	フラットデザインが注目されるようになった背景にはスマートフォンの普及がある。<br>		フラットデザインが注目されるようになった背景にはスマートフォンの普及がある。<br>
	<br>		<br>
	スマートフォンによるタッチ操作は、マウスクリックのようにポイントを正確に示すことが難しく、タップの瞬間はボタンが隠れてしまう。したがって、タッチで操作しやすくするには、必然的にタップする部分を大きくする必要がある。<br>		スマートフォンによるタッチ操作は、マウスクリックのようにポイントを正確に示すことが難しく、タップの瞬間はボタンが隠れてしまう。したがって、タッチで操作しやすくするには、必然的にタップする領域を大きくする必要がある。<br>
	<br>		<br>
	その際、過剰に装飾された立体的なデザインがスマートフォンの小さな画面に並ぶと、ゴチャゴチャして複雑さが増してしまい、UIとしては使い勝手が悪い。いわゆる暑苦しいデザインだとどうしてもユーザーに負担がかかる。<br>		その際、過剰に装飾された立体的なデザインがスマートフォンの小さな画面上に並ぶと、ゴチャゴチャして複雑さが増してしまい、UIとしては使い勝手が悪い。いわゆる「暑苦しいデザイン」だと、スマートフォンではユーザーに負担がかかってしまう。<br>
	<br>		<br>
	そういった観点から見て、シンプルなUIとしてのフラットデザインが求められるようになった。<br>		そういった観点から見て、シンプルなUIとしてのフラットデザインが求められるようになった。<br>
29行目:		29行目:

	==PCとスマートフォンの閲覧環境の違い==		==PCとスマートフォンの閲覧環境の違い==

			PCとスマートフォンでは閲覧環境やユーザーの行動特性が大きく異なる。<br><br>

	*・スマートフォンはPCに比べて画面が小さい。		*・スマートフォンはPCに比べて画面が小さい。

2014年4月28日 (月) 03:30に192.168.200.111による

2014-04-28T03:30:04Z

← 古い版		2014年4月28日 (月) 12:30時点における版
40行目:		40行目:
	==レイアウトがシンプルになった理由==		==レイアウトがシンプルになった理由==

	~~フラットデザインでは1カラムのレイアウトが多いが、それは以下のように理由である。~~<br><br>		フラットデザインでは1カラムレイアウトが多いが、それは下記の理由がある。<br><br>

	*~~・PCサイトではスクロールは嫌われるため、ファーストビューに重要な情報を収める必要性があった。~~		*・PCサイトではスクロールは嫌われるため、一覧性を重視し、ファーストビューに(ナビゲーションも含めた)重要な情報を収める必要があった。

	*~~・タッチデバイスの場合、画面をのぞるだけでスクロールできるので、PCに比べてスクロールの抵抗がない。~~		*・タッチデバイスは画面が小さく、なぞるだけで簡単にスクロールできる。そのため、PCに比べてスクロールが普通の動作として浸透している。

	*~~・スマートフォンだと元々画面が小さいので、スクロールしながら見るのが普通の動作になっている。~~		*・小さい画面でスクロールを前提にすると、1ページの流れは1本にするのが好ましい。
			<br>

	*・スクロールを前提にすると、ナビゲーションを減らすことができし、1ページの流れは1本にしたい。		上記のような理由で、段組みを使った複雑なレイアウトから、ワンカラムのレイアウトに移行する例が増えた。

	*・そういう流れで段組を使った複雑なレイアウトから、ワンカラムのレイアウトに移行する例が増えた。

	</div>		</div>

2014年4月28日 (月) 02:15に192.168.200.111による

2014-04-28T02:15:58Z

← 古い版		2014年4月28日 (月) 11:15時点における版
39行目:		39行目:

	==レイアウトがシンプルになった理由==		==レイアウトがシンプルになった理由==

			フラットデザインでは1カラムのレイアウトが多いが、それは以下のように理由である。<br><br>

	*・PCサイトではスクロールは嫌われるため、ファーストビューに重要な情報を収める必要性があった。		*・PCサイトではスクロールは嫌われるため、ファーストビューに重要な情報を収める必要性があった。

2014年4月28日 (月) 02:14に192.168.200.111による

2014-04-28T02:14:21Z

← 古い版		2014年4月28日 (月) 11:14時点における版
37行目:		37行目:
	*・ユーザー数と使用時間が拡大した。（ユーザーが常に端末を持っていて、どこでも閲覧できる）		*・ユーザー数と使用時間が拡大した。（ユーザーが常に端末を持っていて、どこでも閲覧できる）


			==レイアウトがシンプルになった理由==

			*・PCサイトではスクロールは嫌われるため、ファーストビューに重要な情報を収める必要性があった。

			*・タッチデバイスの場合、画面をのぞるだけでスクロールできるので、PCに比べてスクロールの抵抗がない。

			*・スマートフォンだと元々画面が小さいので、スクロールしながら見るのが普通の動作になっている。

			*・スクロールを前提にすると、ナビゲーションを減らすことができし、1ページの流れは1本にしたい。

			*・そういう流れで段組を使った複雑なレイアウトから、ワンカラムのレイアウトに移行する例が増えた。

	</div>		</div>

2014年4月28日 (月) 02:04に192.168.200.111による

2014-04-28T02:04:20Z

← 古い版		2014年4月28日 (月) 11:04時点における版
26行目:		26行目:
	<br>		<br>
	そういった観点から見て、シンプルなUIとしてのフラットデザインが求められるようになった。<br>		そういった観点から見て、シンプルなUIとしてのフラットデザインが求められるようになった。<br>


			==PCとスマートフォンの閲覧環境の違い==

			*・スマートフォンはPCに比べて画面が小さい。
			*・スマートフォンはタッチで操作する。（ロールオーバーがない）
			*・PCに比べてスクロールしやすい。（ドラッグによる加速スクロールができ、長いページも閲覧しやすい）
			*・ピンチアウト操作で、ページを拡大して見ることができる。
			*・高解像度ディスプレイが搭載されているものが多い。
			*・ユーザー数と使用時間が拡大した。（ユーザーが常に端末を持っていて、どこでも閲覧できる）


	</div>		</div>

2014年4月28日 (月) 02:03に192.168.200.111による

2014-04-28T02:03:00Z

← 古い版		2014年4月28日 (月) 11:03時点における版
1行目:		1行目:
	<div id="manual">		<div id="manual">

			フラットデザインについてのまとめです。

	==フラットデザインの特徴==		==フラットデザインの特徴==

192.168.200.111: ページの作成:
==フラットデザインの特徴== いわゆる凝った作りを「リッチデザイン」といい、その方向性に反する形で注目されてい...

2014-04-28T02:02:43Z

ページの作成: <div id="manual"> ==フラットデザインの特徴== いわゆる凝った作りを「リッチデザイン」といい、その方向性に反する形で注目されてい...

新規ページ

<div id="manual">

==フラットデザインの特徴==

いわゆる凝った作りを「リッチデザイン」といい、その方向性に反する形で注目されているのが「フラットデザイン」である。

===■フラットデザインの特徴===

*・ドロップシャドウやグラデーションによって立体感を表現しない。
*・グラデーションやテクスチャを使って素材感を表現せず、単色を使用する。
*・強いハイライトで光沢や反射を表現しない。
*・現実世界にあるものをリアルに表現せず、抽象的に表現する。
*・罫線、枠線、囲み、角丸はあまり用いず、余白を活用する。

==スマートフォン普及によるフラットデザインの必要性==

フラットデザインが注目されるようになった背景にはスマートフォンの普及がある。<br>
<br>
スマートフォンによるタッチ操作は、マウスクリックのようにポイントを正確に示すことが難しく、タップの瞬間はボタンが隠れてしまう。したがって、タッチで操作しやすくするには、必然的にタップする部分を大きくする必要がある。<br>
<br>
その際、過剰に装飾された立体的なデザインがスマートフォンの小さな画面に並ぶと、ゴチャゴチャして複雑さが増してしまい、UIとしては使い勝手が悪い。いわゆる暑苦しいデザインだとどうしてもユーザーに負担がかかる。<br>
<br>
そういった観点から見て、シンプルなUIとしてのフラットデザインが求められるようになった。<br>

</div>