このページの本文へ

ディレクターなら押さえたいケータイサイト制作のコツ

2012年01月21日 11時00分更新

文●アンティー・ファクトリー

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

 制作するケータイサイトの要件が固まったら、制作作業に入ります。デザインをもとに画像やHTMLを用意してページを組み上げていく工程そのものはPC向けのWebサイトと同じですが、ケータイサイトでは携帯電話の機能的な制約や、キャリアや携帯電話端末の世代による仕様の違いを意識することが重要です。

キャリアや端末の違いに留意して実装

 ケータイサイトのHTMLは、要件定義で決定した仕様に従って作成します。対象端末が広範に及ぶ場合、3G対応以降の端末ではXHTMLで統一し、それ以前の端末ではコンパクトHTMLやHDMLなど、キャリアや端末ごとの対応言語を使って記述します。ただし、HTMLのバージョンによっては使用できるタグに制限がありますので、言語の仕様を確認しましょう。

 絵文字やアクセスキー(数字キーによるショートカット)、入力フォームの入力モード指定など、キャリア固有の機能を使う場合は、キャリアごとにHTMLを分岐させる必要があります。方法はいくつかあり、サーバーサイドプログラムを利用してキャリアごとにHTMLタグを動的に出力したり、キャリアや端末ごとに用意したテンプレートを切り替えたりして対応します。

 ページ内で読み込む画像は、キャリアや端末によって対応しているフォーマットが異なります。全キャリアで使用できるフォーマットで統一するか、複数のフォーマットの画像ファイルを用意して切り替えるかを検討します。

 携帯電話のブラウザーの多くは、JavaScriptが使用できません。PCサイトのようなリッチな表現や機能は実装できませんので、代替手段としてFlash Liteを使用します。ただし、Flash Liteのバージョンは端末によって異なり、バージョンによって実装できる機能が異なるので、対象機種に合わせた制作が必要です。

Webディレクターは制作者と連携して進行を

 ケータイサイトの制作におけるWebディレクターの役割は、前に挙げたような点に留意して制作が進んでいるかをチェックすることです。特に、要件定義にあいまいな点が残っていた場合、制作者が独断で実装してしまうことがあります。制作者と密に連携をとり、相談しながら解決していきましょう。

 完成したサイトの実機検証もWebディレクターの大切な役割です。ほとんどの場合、制作作業はPC上のシミュレーターで確認しながら進めますが、シミュレーターで正しく動作しても実機で動かないことも珍しくありません。対象となるすべてのキャリアの全端末を用意するのは現実的ではありませんので、世代ごとの検証端末を決めて確認するとよいでしょう。

著者:アンティー・ファクトリー

アンティー・ファクトリーはWeb戦略だけでなく、タッチパネルやスマートフォンなどの各種インターフェイス・アプリケーション開発、次世代広告コミュニケーションの設計や開発を行っています。ワールドワイドなクリエイティブを展開し、発展しつづける会社です。

書影

書籍版は、企画・設計・制作・運用など、Webディレクション業務の大まかな流れに沿って構成。最新情報を盛り込み、書き下ろしのコラムや用語集も収録しました。ずっしり重い1030g、厚さ19.5mmで、苦手分野を穴埋めしたい新米Webディレクターや、これからWebディレクターを目指す方におすすめの1冊です。

Webディレクション標準スキル152

本体 4,280円+税、AB判392ページ(オール4色刷)
ISBN:978-4-04-868746-1

Amazon.co.jpで買う 楽天ブックスで買う

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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

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