第6回 実例でわかる！スマートフォンサイトの画面設計

スマートフォンサイト設計の基礎知識に続いて、今回からは実際のスマートフォンサイト制作のプロジェクトの流れに沿って、具体的なサイト設計と制作方法を解説します。ぜひ一緒に手を動かしながらスマートフォンサイトの制作の流れを学んでいきましょう。

実在するサイトが課題です！

　題材にさせていただくのは、東京都江東区で幼児向けのプリスクール（就園準備スクール）を運営する「プレイグループ木場校」さんのWebサイトです。

・プレイグループ木場校
http://playgroup-kiba.com/
プレイグループ木場校のWebサイト。入学希望者や通学中の生徒の保護者へ向けてさまざまな情報を発信している

　プレイグループ木場校のWebサイトでは、入学を検討している保護者やすでに通学中の生徒の保護者へ向けて、さまざまな情報を提供しています。カリキュラムや先生の紹介といったスクール案内に加えて、コラムなどのコンテンツも充実しており、情報量はかなり多い方だと言えます。

　今回はこのWebサイトのスマートフォン対応の企画、設計について考えてみましょう。

ゴールの設定とコンテンツの選定

　スマートフォンの利用者層は徐々に広がってきているとはいえ、ビジネスマンや若年層がまだまだ中心です。このサイトのメインターゲットになる未就学児の保護者（20代～30代の女性）の間では、スマートフォンよりも一般的な携帯電話の利用が中心と考えられます。

　前に述べたようにプレイグループ木場校のPCサイトは情報量が多く、すべてのページをスマートフォン向けに最適化した本格的なサイトを構築するにはある程度の予算が必要です。そこで今回のプロジェクトでは、スマートフォンサイトのターゲットと目的を以下のように絞り込むことにします。

・ターゲット
プリスクールへの入学を検討している未就学児の保護者、通学中の生徒の保護者。主にPCを使って情報収集しており、普段はPCからプレイグループ木場校のサイトを閲覧している
・目的
見学や面談などで来校する際に助けとなる情報の提供。道に迷わないためのアクセス情報とスムーズに連絡できる手段を提供する

　上記のターゲットと目的を踏まえ、今回は1ページのみのシンプルなサイトを制作します。

コンテンツを選定する

　スマートフォンサイトの目的を達成するために、サイトに盛り込む内容を検討します。今回必要となるのは次のような項目です。

・地図、住所情報
Googleマップと連携してナビゲーション代わりになる
・電話番号
タップするとすぐに電話がかけられる
・メールアドレス
タップするとメールが起動する

　これらの3項目を盛り込んだスマートフォンサイトを作っていきましょう。


サイトマップを作成する

　今回制作するスマートフォンサイトは1ページのみのマイクロサイトですので、スマートフォンサイト自体の構造設計（サイトマップの作成）は本来必要ありません。ただ、プレイグループ木場校のサイトにはスマートフォンサイト以外にPCサイトや携帯電話サイトもあるので、簡単なサイトマップを作成してそれぞれの関係を明確にしておきます。

プレイグループ木場校のサイトマップ。スマートフォンサイトと携帯電話向けサイトを振り分ける

　サイトマップは、PowerPointやExcelなどのオフィスソフト、アウトラインエディター、サイトマップ作成用の専用ツールなどで作成できますが、ここでは私が普段使っている「Cacoo」というWebサービスでの手順を説明します。

オンラインドローイングツールの「Cacoo」。ブラウザー上でサイトマップやワイヤーフレームを作成できる

　Cacooにログインしたら「新しい図」を作成します。ステンシルにある「サイトマップ」の中から必要なパーツを選んで配置し、コネクタでパーツ同士をつなげていくと、サイトマップを簡単に作成できます。


サイトマップ用のパーツをドラッグ＆ドロップで配置してコネクタで接続していく

ワイヤーフレームを作成する

　続いて画面設計です。同じくCacooを使ってワイヤーフレームを作成しましょう。「新しい図」を作成し、「iPhone」というステンシルの中からiPhoneの画面枠を配置します。この枠の中に必要なボタンやテキストなどのパーツをレイアウトしていきます。

CacooにはiPhone用の画面枠があるのでワイヤーフレームのベースに利用する

　最初に、サイトのロゴを兼ねたプロモーション画像をページ最上部へ配置しましょう。CacooにはさまざまなiPhone用のパーツが用意されていますが、既存のPCサイトや他のサイトで参考になるパーツがあれば、画面ショットを貼り込むのが簡単です。今回は、PCサイトで使用しているプロモーション画像を撮影して配置します。

PCサイトのプロモーション画像。今回はこの画像をスマートフォンサイトのワイヤーフレームにも配置する

　画面ショットを配置するには、Cacooのメニューバーから画像挿入ボタンをクリックして「スクリーンショットを撮影して挿入」を選択します。しばらく待つと黒い枠が表示されるので、撮影したいWebページを開いて「撮影」ボタンをクリックします。これでCacoo上にパーツとして配置されるので、枠に合わせてサイズや位置を調整します。


スクリーンショットを撮影して挿入」を選択。撮影した画像をワイヤーフレームに配置してサイズを調整する

コンテンツを分かりやすく配置する

　次に、見出しや本文といった必要なコンテンツを配置していきます。今回はプロモーション画像の下に、大きな見出しとテキスト（リード文）を置きました。本サイトは「スクールへ来校する方にアクセス情報を提供する」という目的に特化しているので、見出しとリード文でサイトの目的をはっきり示します。

プロモーション画像の下に見出しとリード文を配置。目的が伝わりやすいように見出しは大きめにする

　リード文の下には、本サイトに盛り込む「アクセス」「電話での問い合わせ」「メールでの問い合わせ」の3項目を配置します。ポイントは、「地図」や「電話」といったラベルだけでなく、情報の中身（住所や電話番号）も明記すること。

住所や電話番号はリンクしているからといって省略せず明記すること

　住所や電話番号はそれぞれGoogleマップや電話機能と連携させるので、ページ内に明記するのは一見無駄にも思えますが、ユーザーは必ずしも設計者が想定した目的、意図した環境でWebサイトを見るとは限りません。たとえば、住所を調べるのは「地図が見たい」のではなく「カーナビに打ち込みたい」からかもしれませんし、誰かに伝えるためかもしれません。タップするだけですぐに電話がかけられるのは便利ですが、スマートフォンではなく自宅やオフィスの固定電話からかけたい場合もあるでしょう。Webサイトはさまざまな使われ方をするものですから、「見た目がすっきりする」という理由だけで必要な情報を隠してしまうのはよい設計とは言えません。

　また、Googleマップだけでは電車の路線名や駅からの距離などの移動手段が分からないので（ルート検索はできますがやや手間です）、路線名や最寄り駅などの情報も表示しておくと親切です。

「ジャンプボタン」で見通しをよくする

　必要な要素を配置してワイヤーフレームを作成していると、パーツがiPhoneの画面枠に収まらず、枠の外側にはみ出てしまう場合があります。コンテンツがファーストビューに収まらないこと自体は問題ありませんが、スクロールしなければ全体を把握できなくなるので、見通しをよくするためのちょっとした工夫が必要です。

コンテンツがファーストビューに収まらずにはみ出てしまった

　そこでリード文の下に、ページ内の見出し（「アクセス」「電話での問い合わせ」「メールでの問い合わせ」）へリンクするジャンプボタンを設置します。

「ジャンプボタン」を配置して使いやすくする

　ジャンプボタンをリード文の下に配置するのは、最初のリード文でサイトの目的を理解したユーザーが、自分が採りたいアクションをすぐに選べるようにするためです。要素は適当に配置するのではなく、ユーザーがどのような順番で情報を得たいかを意識して決めましょう。

ユーザーの行動を考えてリードのすぐ下にボタンを配置する

　ジャンプボタンの大きさにも注意します。これまで解説したとおりほとんどのスマートフォンは指でタップして操作するので、誤操作しないように大きめに配置します。

ボタンはタップすることを考えて大きめに配置する

　最後にフッターを配置したらワイヤーフレームの完成です。ここでは前に紹介した画面ショット機能を使ってPCサイトのフッターを流用しました。

フッターを入れたら完成

デザイナーに意図を伝える「注釈」

　画面設計とデザインを1人で担当するのであれば、この後すぐにデザイン作業へ移れます（ワイヤーフレーム自体をPhotoshopやFireworks上で作成する場合もあります）。私の場合、デザイン作業はデザイナーへ依頼するので、ワイヤーフレームを見たデザイナーが作業しやすいように注釈を入れています。

　ワイヤーフレームだけでは、デザイナーはどこまで忠実に再現するべきなのか、自分なりのアレンジを加えてよいのか分からず、思い切ったデザインができなくなります。意図を口頭で伝えるのはもちろんですが、できるだけワイヤーフレームにも明記して正確に伝わるようにしましょう。

　ここでは、画面ショットを貼り付けたヘッダーとフッターはそのまま使うのではなくアレンジして欲しいことを記しました。また、スマートフォンサイト特有の点として、画像で制作すべきかCSS3で処理すべきか分かりにくい部分があるので、CSS3で処理する部分には注釈を入れています。

　以上で画面設計が完了しました。この後はデザイン作業に入ります。続きは次回紹介しましょう。


Comments