HTML5+CSS3 |
Smartphone編
|
Lesson 3 | スマートフォンサイトならではの モックアップ作成とプロトタイピング |
||||
制作・文 | 山岸ひとみ(株式会社Gaji-Labo) |
ビジュアルデザインを作り込む前には、画面設計や画面遷移を十分に考える必要がある。スピーディーで効率的なプロトタイピングの方法とポイントを覚えておこう。 |
なぜプロトタイプが
必要なのか
また、デザインを作り込んでサイトが完成した後になって、「ボタンや文字が小さい」、「こう動くとは思っていなかった」という声が上がることは少なくない。ビジュアルデザインに合わせて機能を作っていくのではなく、必要な機能をあらかじめ確保したうえでビジュアルデザインを行うことで、本来不要であるはずの工数をかけずに制作を進めることができる。
ただし、プロトタイプを作るために膨大なコストをかけては本末転倒。最小限の労力で効果的に作り上げるための最低限のポイントを紹介しよう。
実寸大で考える
そのため、スマートフォン向けサイト作成では、自分の手の中で手軽に大きさを再現できるペーパープロトタイピングがより有効性を増してくる。大きさの感覚がないまま制作を進めるとプロトタイプとしての役割を果たさない場合があるので、まずはその点に注意したい。
必要なナビゲーションを
吟味する
ナビゲーションメニューを並べた際に詰め込み過ぎていると感じたら、デザインに作り込む前に軌道修正した方がよいか もしれない。
タッチジェスチャと
可動領域を考慮する
また、どういうジェスチャでどのような 画面遷移をするかもプロトタイプの時点で決めておくべきだ。クライアントの合意が取れていれば後工程での手戻りが少なくなるし、デザイナーとエンジニア間のやり取りに齟齬が生じないため、開発コストを低減できる。
部品をシンプルに分解できる
醍醐味
紙のモックアップを用いた
プロトタイピング
iPhoneの場合には市販の50×70mmサイズの付箋を使用すると便利だ。部品を再現したステンシルやiPhone型のメモ帳なども市販されているので、必要であればそういったアイテムを使用してもよい。
【1】付箋を用いたペーパープロトタイピング
ドローツールを利用した
モックアップ作成
【2】Cacoo:http://cacoo.com/
【3】MockApp:http://mockapp.com/
可能であればHTMLで
確認する
スマートフォンサイトの場合にはCSS3で装飾する場合が多いだろう。プロトタイピングに使用したHTMLファイルをそのまま本番環境に移植して使えるケースも多くなるので、結果的にスピーディな開発へと繋がるのだ。
>>目次に戻る