フェローシップでは、携帯電話向けサイト構築をかなり以前より行っております。
PCサイトより画面は小さいもののいろいろな制限もあるためキャリア別・機種別の仕様などの特別な知識が必要となります。
出先から使える携帯・モバイルの特性を活かしたGPSや簡易位置情報（基地局）などの位置情報によるコンテンツ作りもよく依頼を受けます。
ケータイ3キャリアとは
|
ご存じの通り「NTTドコモ」「au」「ソフトバンク」の3社のことを3キャリアと呼んでいます。
■NTTドコモ
・作ろうiモードコンテンツ
■au / KDDI
・EZfactory
■ソフトバンク
・MOBILE CREATION
|
各社それぞれがHTMLの仕様・機種別情報・開発ツールなどを公開しております（一部非公開もあり）。
当初は独自仕様がかなり強く、対応している画像形式やHTML（とも呼ばれていませんでした）仕様，
絵文字など個別対応していましたが、かなり共通化できる様になってきました。
しかし厳密に対応するには、UserAgentなどを利用して振り分けが必要です。
|
携帯コンテンツ作成の注意点（公式サイト・基準の設定）
|
最近の携帯電話はスマートフォンの登場もあり、かなりPCに近づいてきました。
しかし同じではありませんので違いを知って、その対策を行っておく必要があります。
またスマートフォンと（一般的な）携帯電話はもちろん別物です。
iPhoneとAndroid端末でも当然違いを考える必要があります。
|
画像形式、画面解像度、絵文字、機種別の容量、アクセスキー、対応しているHTMLのバージョン、
クッキーが利用できないなど考えないといけない事柄はかなりあります。
これに加え公式サイトでは、さらに各キャリアサーバとのインターフェイスや機種変更などに対する処置も必要となります。
|
PCサイト構築でも基準を決めると思いますが、重要なのは「対象ブラウザとバージョン（携帯電話の場合はキャリアと世代）を決定すること」です。
画面サイズも当然小さいため改ページ制御（前画面・次画面）は必須となります。form部品についても設置数やデータ件数などに制限があります。
|
|
スマートフォン向けコンテンツ
|
iPhone・Android 向けのサイトデザインをする際には meta タグに viewport を指定することで、デバイスの表示領域に合わせたページデザインを行うことができます。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
| パラメータ
| 説明
|
| width |
ビューポート（可視領域）の横幅（ピクセル値）。
device-widthを指定すると端末の幅で自動調整されます。
|
| height |
ビューポートの高さ（ピクセル値）。
device-heightを指定すると端末の高さで自動調整されます。
|
| initial-scale |
画面表示の初期倍率を指定する。
1 を指定すると1倍。2 を指定すると2倍。
|
| minimum-scale |
ビューポートの最小 scale 値。
|
| maximum-scale |
ビューポートの最大 scale 値。
|
| user-scalable |
ユーザーがズーム操作できるかどうかを yes と no で指定する。
デフォルト値は yes。
|
iPhoneではWebページをブックマークに追加するだけでなく、ホーム画面にショートカットアイコン（Webクリップ）として配置できます。
このアイコンの指定方法は以下の通りです。
<link rel="apple-touch-icon" href="apple-touch-icon.png">
faviconのようなもの。
iPhone用Safariは、ファイル名により自動的に縮小・角丸・ハイライト処理などを行いiPhone風のアイコンにしてくれます。
ホーム画面のアイコンサイズは57px×57px。
iPadでは72px×72px、iPhone 4では114px×114pxの様です。
アイコンの制作は、少し大きめの256px×256pxくらいが良いかもしれません。
| パラメータ
| 説明
|
| href |
PNG形式のアイコンファイル名を指定。
サイトのルートディレクトリに置いておきます。
apple-touch-icon.pngを指定すると端末の幅で自動調整されます。
|
その他・制限事項として、
通常フレームおよびFlashは使用不可。
iframeは使えますが、スクロールバーが出ません。
音声・動画は「mp3」「wav」「mp4」「m4v」「3g*」が対応しています。
|
|
