Lesson 03 スマートフォンサイトならではのモックアップ作成とプロトタイピング - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Smartphone編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

Smartphone編

	Lesson 3			スマートフォンサイトならではの モックアップ作成とプロトタイピング
	制作・文			山岸ひとみ（株式会社Gaji-Labo）

ビジュアルデザインを作り込む前には、画面設計や画面遷移を十分に考える必要がある。スピーディーで効率的なプロトタイピングの方法とポイントを覚えておこう。

プロトタイピングは労力を投入する前に、アイデアを検討する手段である。ユーザーの操作にデザインが及ぼす影響を検討するモックアップを作ってテストすることにより、早い段階で機能に対するフィードバックを得ることができる。早い段階で使用感とボリュームが洗い出され れば、後工程での手戻りが減る。

また、デザインを作り込んでサイトが完成した後になって、「ボタンや文字が小さい」、「こう動くとは思っていなかった」という声が上がることは少なくない。ビジュアルデザインに合わせて機能を作っていくのではなく、必要な機能をあらかじめ確保したうえでビジュアルデザインを行うことで、本来不要であるはずの工数をかけずに制作を進めることができる。

ただし、プロトタイプを作るために膨大なコストをかけては本末転倒。最小限の労力で効果的に作り上げるための最低限のポイントを紹介しよう。

PCサイトを作る感覚でデザインし始めると、知らず知らずのうちに大きさの感覚がわからなくなってしまうことがある。感覚がわからなくなると、文字やパーツを 詰め込み過ぎて画面が破綻する危険性がある。それを防ぐためには実寸大の感覚を持ちながらデザインすることが大切なので、モックアップ（原寸模型）を使用するのが望ましい。

そのため、スマートフォン向けサイト作成では、自分の手の中で手軽に大きさを再現できるペーパープロトタイピングがより有効性を増してくる。大きさの感覚がないまま制作を進めるとプロトタイプとしての役割を果たさない場合があるので、まずはその点に注意したい。

PCサイトではたくさんの入り口を用意するために複数のナビゲーションを考えるが、スマートフォンに最適化したサイトではよりシンプルな動線を心がけたい。回線速度の遅い端末で見ているユーザーは少しでも早く情報を見せてほしいだろうし、画面内の情報の優先度をシビアに考えればナビゲーションに当てる領域も多くは取れない。ナビゲーションはできるだけ一つに絞り込み、見せたいコンテンツに直線的に辿り着くためのリンクを配置するのが効果的だろう。

ナビゲーションメニューを並べた際に詰め込み過ぎていると感じたら、デザインに作り込む前に軌道修正した方がよいか もしれない。

スマートフォンは手に持って指で触って操作するケースが多い。持ち方によって、タッチ操作がしづらいエリアが出てくる。あらゆる持ち方を想定して、デッドス ペースとなるエリアには主要なナビゲーションやリンクボタンを置かないなど工夫が必要だ。

また、どういうジェスチャでどのような 画面遷移をするかもプロトタイプの時点で決めておくべきだ。クライアントの合意が取れていれば後工程での手戻りが少なくなるし、デザイナーとエンジニア間のやり取りに齟齬が生じないため、開発コストを低減できる。

現実にはプロトタイピングに時間を避けないことも多いので、デザイナーの手元だけで画面上のパーツを吟味しなければならないケースがある。その際にも、まずはざっくりと部品を落とし込んで確認していけばスムーズに事が運ぶ。PCと 違って画面のサイズが限定されている分、最適化するための部品作りをシンプルに行えるのがスマートフォンサイト制作の醍醐味だともいえるかもしれない。

一番手軽なのは画面と同じサイズの紙を使って、ペーパープロトタイピングを行うことだ。グラフィックを作り込まなくても必要なナビゲーションや部品の大まか なサイズを決めることができるし、壁などに並べて貼っていけばそれだけでワイヤーフレームの原型となる。サイトの全体設計と画面設計の両方を同時に行うことができるので、開発のスピードを上げることも可能になるだろう。

iPhoneの場合には市販の50×70mmサイズの付箋を使用すると便利だ。部品を再現したステンシルやiPhone型のメモ帳なども市販されているので、必要であればそういったアイテムを使用してもよい。


【1】付箋を用いたペーパープロトタイピング

モックアップやワイヤーフレームを作るウェブサービスやアプリケーションを利用するのも効率的な手段。Cacoo【2】は一つの図を複数人が同時に編集することができ、編集の反映がリアルタイムに行われるため、チームで作業する際に便利だ。MockApp【3】はKeynoteやPowerPointで使えるテンプレートのた め、プレゼンテーション用のモックアップを作る際に有効だろう。


【2】Cacoo:http://cacoo.com/


【3】MockApp:http://mockapp.com/

紙やドローツールで作ったモックアップのボタンが本当に快適に動作するのかどうか、最終的には実際のHTMLで確認するのが望ましい。この段階ではビジュアル的な装飾はまったく必要がなく、文字サイズやボタンの大きさ、タップ領域 などが再現されているだけでよい。

スマートフォンサイトの場合にはCSS3で装飾する場合が多いだろう。プロトタイピングに使用したHTMLファイルをそのまま本番環境に移植して使えるケースも多くなるので、結果的にスピーディな開発へと繋がるのだ。