このページの本文へ

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

2010年09月13日 10時00分更新

たにぐちまこと/H2O Space.

  • この記事をはてなブックマークに追加
本文印刷
iphone-android

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

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

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

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

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

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

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

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

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

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

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

コンテンツを選定する

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

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

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

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング