携帯電話向けコンテンツの作成手順。

実際の携帯電話向けコンテンツの作成法を纏めてみました。

もちろん、この方法に従わなければならないと言う訳でも無いのですが、初めてで右も左も分からない方には指針にはなるでしょう。

携帯電話向けコンテンツの作成手順・目次。

1. 公開したいコンテンツを携帯電話向けに作り直す。

当り前ですが、公開したいものが無ければわざわざウェブを作る必要はありません。

PC向けサイトを既に持っていて、その"おまけ"として携帯電話版を作るのか、あるいは携帯電話版をPC兼用として公開するのかによって、サイトの構成も随分違ってくるでしょう。

対応端末をどうするのかも考えなければなりません。

ただ、携帯電話は以下のような制約があります。

一ページの総容量

一番旧いiモード端末まで考えるなら総容量は画像込みで 5キロ以内( 2キロ以内が望ましい)にします。

画像を含む場合、初期のiモード端末では画像が見られなくてもテキスト情報だけ読めれば充分と割り切るのであれば、テキスト 5キロバイト以内( 2キロバイト以内推奨)・画像込み10キロバイト以内まで許されます。

いずれにしても、コンテンツに依っては、ページを適宜分割する必要があるかも知れません。

画像の制限

現在の端末は殆どがJPEG画像に対応しておりますが、旧式のiモード端末では表示出来ません。

また、ソフトバンク旧型機とV801シリーズではGIF画像が表示出来ません。

こう言った事を考えて適切な画像を用意しましょう。

また、容量制限も決して忘れないで下さい。

文章も短くする

携帯電話でのスクロール操作は非常に面倒です。文章は一文字でも短くなるようにしましょう。

例えば、

  • <p>文章は一文字でも短くなるようにしましょう。</p>

も、携帯電話向けなら

  • <p>文章は一字でも短くしましょう。</p>

くらい端折った方がいいでしょう。

2. 実際にマークアップする。

携帯電話向けにはXHTML モバイル・プロファイルで記述するのが望ましいですが、どうしても旧型機での見映えを重視したいならXHTML 1.0 トランジッショナルで書いても構いません。

実際に覚えておきたい要素とマークアップ。

初めての方は最低限、これだけ覚えておけばいいでしょう。詳しくはHTML&CSS入門内の『基本となる要素』をご覧下さい。

  1. <title>要素で文書に題名を付ける。
  2. 文書中に適切な見出しを付ける。

    1. <h1>要素で文書全体に掛かる見出しを付ける。
    2. <h2>要素で文書中の各項目に掛かる見出しを付ける。
    3. 更に下位の項目があれば<h3>要素で見出しを付ける。以下<h6>要素まで用意されている。
  3. 各段落を<p>要素とする。

最後に、文字コードの指定HTML文書構造を明記して、XHTML モバイル・プロファイルXHTML 1.0 トランジッショナル<!DOCTYPE>宣言を付ければ完成です。

必要に応じてハイパーリンク画像の埋込みも随時行えば、一通りのことは出来るでしょう。

また、サイトのお品書きなどには段落を並べる代りにリスト要素群を用いるとさらにすっきりしたものになります。

3. モバイル専用のスタイルシートを作る。(オプション)

勿論、スタイル定義ファイル無しでプレーンな表示になっても、情報が伝わればそれで充分と言うのも一つの選択です。

スタイル定義ファイルを採用する場合、ご自分でスタイル定義ファイルを書かなくてもいいのですが、あいにくモバイル向けのCSSスタイル定義ファイルは余り出廻っていないので、PC向けのスタイル定義ファイルを携帯電話向けに改変するという方法もあります。

また、PCでも閲覧出来るようにPC用のスタイル定義ファイルを合わせて作っておくのもいいでしょう。

実際のCSSスタイル定義ファイルの書き方は、CSS作成の実習で簡単に解説しておきましたので、ご一読ください。

3'. 見映えに関するタグ・属性を追記する。(オプション)

XHTML 1.0 トランジッショナルで書く場合は、一通りのマークアップが完了した後で物理要素・属性による見映えの調整をすれば良いでしょう。

この場合、CSSが使える環境ではCSSの定義が優先されます。CSSの方が遙かに多彩な表現が可能なので、CSSスタイル定義ファイルも作っておきましょう。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com