プチ携帯サイト講座
2005-07-12 13:35:13 written by hikarutsukasa
簡単ではありますが、携帯サイトの基本的な作り方・コツをまとめておきます。参考になれば幸いです。
プチ携帯サイト講座
初心者でも簡単に導入できることを優先しているので、専門用語などを使わず出来るだけ簡単に分かるように説明していますので、少し的を外れた説明もあるかもしれませんが予めご了承ください（＾＾；
より詳しい情報をお求めの場合は、お手軽！携帯サイトの作成支援を参考にしてください。
タグとは？
HTMLはタグと呼ばれるものを指定して文字の色やサイズ、またはその他の意味づけをしていきます。< >という記号を用い、そのタグの意味をつける部分を開始タグ<○○>と終了タグである</○○>で囲っていきます。終了タグはただ単に"/"（スラッシュ）を付ければOKです。
（例）「文字を<b>太くする</b>にする」→「文字を太くするにする」と表示されます。
HTMLの基本構造
HTMLには基本となる必要不可欠な記述があります。以下に実際のHTMLを記述します。
====================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>【ここにサイト名を入れる】</title>
</head>
<body>
【ここにページの中身を記述する】
</body>
</html>
====================================
<html>～</html>は、これからHTMLの記述をしますよ、という意味です。必ず記述してください。ページ全体を囲むように括ります。
<head>～</head>は、そのページの設定や概要を記述する場所になります。携帯サイトでは、文字コードを指定する<meta>要素と、サイト名を設定するための<title>要素があれば、とりあえず問題ありません。<title>要素に入る文字は、ブックマークに登録したりした場合に使われる文字になるので、きちんとサイト名を記述するようにしましょう。
<body>～</body>は、そのページに実際に表示されるページの中身になります。ここに、テキストや画像などを記述することになります。
ページを組み立てよう
さて、上記のHTMLはそのままコピー＆ペーストで使用しましょう。この部分は書き方が決まっているので、良く分からない方は、そのまま何も考えずに記述してOKです。
後は<body>～</body>の中に、あなたが掲載したい情報を記述していくことになります。
携帯サイトもPCサイトと同じように、ヘッダ・メニュー・コンテンツ・フッタという構造を考えて制作すると分かりやすいと思います。
┌─────┐
│ ヘッダ │
├─────┤
│コンテンツ│
├─────┤
│ フッタ │
└─────┘
ヘッダ部分にはサイトのタイトルや説明、更にはインフォメーションやカウンタなどを掲載します。
次にコンテンツ部分、トップページであればメニューを、コンテンツページであれば、そのサイトの情報を記述していきます。
フッタにはコピーライトや問い合わせなどを記述していきます。また、こちらにカウンタなどを掲載するケースもあります。
その他の制作のコツ
○横幅は全角8文字、半角16文字
携帯の画面の最小横幅文字数は、全角は8文字まで、半角は16文字までです。タイトルなどはこの文字数以内に収まるようにすると、どんな携帯でも途中で文字が自動改行されたりせず、見栄えがきれいなまま表示されます。どうしても収まらないようであれば、途中でうまく改行しましょう。
○半角カタカナ
携帯サイトは半角カタカナを使用することができます。半角にするということは文字数的にも容量的にも半分になるので、どんどん活用しましょう。情報量が限られてくるので有効的な手段になります。
○画像形式
画像形式には気をつけましょう。基本的にiモードはgif画像、ボーダフォンはpng画像、EZwebは両方対応しています。画像を使用する場合、iモードかボーダフォンか、どちらかに統一する必要がでてきますのでご注意ください。画像を使用しなければ3キャリア全てに対応させることも可能になります。またプログラムで画像形式の記述を振り分ける方法もあります。
○アクセスキー
携帯サイトの場合、PCと違ってマウスなどは当然ありませんから、操作面での使い勝手の工夫をしてあげる必要もあります。ダイレクトキー機能をつけると特定のコンテンツを数字を押すだけで選択できたりすることが可能になります。
○絵文字
携帯サイトで絵文字を使用するのは文字の省略ができるというメリットがあります。「メール」と記述する場合には絵文字で表現した方が文字数も少なくなりますし、見た目も分かりやすくなります。iモードの絵文字の場合、ドコモから絵文字入力ソフトが配布されています。このソフトをダウンロードすると、テキストエディタなどもでも絵文字が表示されるので編集が見やすく便利に。活用していきましょう。
この記事へのトラックバックについて
【トラックバックURL】
http://god.xsrv.jp/__mt/mt-tb.cgi/714
【この記事のURL】
http://affiliate.em00.com/file/200507/12_133513.shtml
※トラックバックは管理人のチェック後に公開します。
基本的なルールとして、送信する記事の内容にこのページの記事へのリンクをお願いします。また、概要が半角英数字のみトラックバックや、<a>タグを含むトラックバックはブロックするようになっています。
- 2007年9月のアフィリエイト収支報告
└ハッちゃん（02/19）
└ヒカルツカサ（02/20） - 初めての確定申告と税金
└0からはじまった確定申告 タックス（03/21）
└ヒカルツカサ（03/22） - 2006年12月のアフィリエイト収支報告
└ぽん柑＠HP・WEB収入（01/06）
└ヒカルツカサ（01/06） - 携帯アフィリエイト アクセスアップのチャンス？
└関谷＠投資王伝説（06/18） - ドロップシッピング
└無料レポートでアフィリエイト！（05/16）
└upup（05/18）
└アベユウタ-シャツシティ（05/30）
└eBayの純（06/02）
コメントを投稿する
※コメントは管理人のチェック後に公開します。
投稿後すぐには反映されませんが、エラーが出なければ問題ありませんのでしばしお待ち下さい。