ｿｰｼｬﾙｱﾌﾟﾘを作る上での制作ガイド(XHTML)
ｿｰｼｬﾙｱﾌﾟﾘを作る上での制作ガイド(XHTML)
携帯サイトを作る上での制作ガイドをメモ。
▼操作方法は単純明快に
必要な情報がファーストビューに表示されていますか?
もっとも重要な要素を240*320の表示領域に出来る限り表示させるようにしましょう。
また、アクセスキー[5]の徹底でユーザーにサクサク進めるようにしましょう。
▼ページ内の導線を研究する
個々のページ遷移が点ではなく線になるようなゲームサイクルを作りましょう。
ページ内のリンクを無駄に増やすのではなく
次、ユーザーにとって欲しい行動に対して明確に導いてあげましょう
▼ページの表示速度
・画像の数を気をつける
1KBの画像を10点表示するものと10KBの画像を1点表示するのとでは、1KB10点表示させるほうが表示速度が落ちます。
画像容量を軽量化することも重要ですが、1ページに使う画像数も重要だということを意識しましょう。
・使用している画像自体のサイズを小さくする
・全ての画像に縦横比（height weight）を記述しておく
▼文言が重要
ユーザーを気持ちよく、また、楽しませるものとして文言がとても重要となってきます。
短く伝わりやすいキャッチなフレーズがベストです。
グラフィックのクオリティももちろん重要ですが、実は文言もかなり重要だということを忘れてはなりません。
・世界観を伝える。
・購買意欲を掻き立てる。
・行動意欲を掻き立てる。
▼グルーピング
再利用を考えたデザインをする。各ページバラバラなデザインはユーザーに混乱をうみます。
リスト表示やステータス表示などはパターンを絞りましょう
また、グループとグループの間には適度な空間を作りましょう。
▼サイトカラーリング
サイトのカラーリングに一定のルールがありますか?
一定のルールでカラーリングされたサイトは、情報の構造が視覚的にもわかりやすくなります。
テキストは黒、リンクは青、見出しは赤などルールを決めて、キーカラー 3 色＋さし色 2 色の計 5 色ぐらいでカラーリングすると一貫性が出て情報が見やすくなります。どうしても色数が多くなってしまいそうなときは、キーカラーに濃淡を付けた色や無彩色を入れると一貫性が確保しやすくなると思います。
▼スクロール量
1 ページが長すぎるページがありませんか?
長くても3スクロール前後が理想的と考えています。もし 3スクロール以上になってしまう場合は、情報と情報の間か終わりに、画面の上部に遷移するリンクを配置したり、ユーザが目標を達成するためのリンクや回遊につながるリンクを配置してあげましょう。
▼チェックの徹底
3キャリア(ドコモ,AU,ソフトバンク)のそれぞれで正しく実機確認する
Firemobilesimulatorに頼らない
■コーディングのヒント
▼[table]中央揃えにする
<table style=”text-align: center;” align=”center” border=”0″ width=”100%”>
<tbody><tr>
<td style=”text-align: center;” align=”center”>
</td>
</tr>
</tbody></table>
<tbody><tr>
<td style=”text-align: center;” align=”center”>
</td>
</tr>
</tbody></table>
▼[table]Docomoでフォントサイズを
Tableの外で指定すると反映されない。
フォントサイズはtableの中で指定する
フォントサイズはtableの中で指定する
<table align=”center” border=”0″ width=”70%”>
<tr>
<td><span style=”font-size:x-small;”>ホゲ</span></td>
</tr>
</table>
▼[table]widthをただしく設定し処理速度をあげる
Widthが設定されていないとtable表示速度が
遅くなる。
また、ソフトバンクなどの画面サイズが異なるものでも%ならカバーできる。
遅くなる。
また、ソフトバンクなどの画面サイズが異なるものでも%ならカバーできる。
▼リンクボタン作るときのハイライトに気をつける
ボタンのみにリンクをつける際、
ボタンと背景色の隙間が全くないとボタンのハイライトがわかりづらいので、ボタンの周りに1px以上は隙間を空ける
ボタンと背景色の隙間が全くないとボタンのハイライトがわかりづらいので、ボタンの周りに1px以上は隙間を空ける
もしくは、下記の用にし、リンクボタンを分からせる
■■■■■■
■■■■■■
┗友達招待┛
▼入力フォームとボタンを横一列にしたい場合
<table>
<tr>
<td><input type=”text” size=”20″ style=”width:160px;” /></td>
<td>
<input type=”submit” value=”検索” style=”font-size:x-small;” />
</td>
</tr>
</table>
<tr>
<td><input type=”text” size=”20″ style=”width:160px;” /></td>
<td>
<input type=”submit” value=”検索” style=”font-size:x-small;” />
</td>
</tr>
</table>
▼auでselectボックス（プルダウン）が2行になる
<select name=”xx”>
<option value=”1″><font size=”x-small”>20歳?40歳</font></option>
<option value=”2″><font size=”x-small”>40歳?60歳</font></option>
<option value=”3″><font size=”x-small”>60歳?80歳</font></option>
</select>
<option value=”1″><font size=”x-small”>20歳?40歳</font></option>
<option value=”2″><font size=”x-small”>40歳?60歳</font></option>
<option value=”3″><font size=”x-small”>60歳?80歳</font></option>
</select>
▼auで要素と要素の間に隙間があいてしまう対処
▼問題のあるソース
<div style=”background:#84775d;”>サイト内検索</div><br />
<div style=”background:#f6f0e3;”>フォームのパーツ</div>
■■■■■■■■
—————⇒隙間の背景色が出てしまう
■■■■■■■■
<div style=”background:#84775d;”>サイト内検索</div><br />
<div style=”background:#f6f0e3;”>フォームのパーツ</div>
■■■■■■■■
—————⇒隙間の背景色が出てしまう
■■■■■■■■
▼対処方法
<div>タグを入れ子にする
<div style=”background:#84775d;”>サイト内検索<br />
<div style=”background:#f6f0e3;”>フォームのパーツ</div>
</div>
■■■■■■■■
■■■■■■■■
▼Formタグでよく見かけるミス
<input type=”submit” value=” [5]記入する ” accesskey=”5″/>
<input type=”hidden” name=”step” value=”confirm” />
<input type=”hidden” name=”step” value=”confirm” />
最後の閉じタグが抜けていると、
Auで正しくページの遷移が出来なくなるので注意
▼画像の回り込み
<img src=”hoge.jpg” width=”50″ height=”50″ alt=”*” style=”float:left;margin-top:3px;margin-right:3px;margin-bottom:8px;” align=”left” border=”0″ /><a href=”hoge.html”>ホゲホゲ</a><div style=”clear:both;” clear=”all”>回り込み解除</div>
▼Flashをインラインで表示する
<object data=”sample.swf” type=”application/x-shockwave-flash” width=”240″ height=”150″>
<param name=”bgcolor” value=”000000″>
<param name=”loop” value=”off”>
<param name=”quality” value=”high”>
<embed src=”sample.swf” width=”240″ height=”150″ loop=”on” quality=”high” bgcolor=”#000000″></embed>
</object>
<param name=”bgcolor” value=”000000″>
<param name=”loop” value=”off”>
<param name=”quality” value=”high”>
<embed src=”sample.swf” width=”240″ height=”150″ loop=”on” quality=”high” bgcolor=”#000000″></embed>
</object>
▼文字の折り返し
・x-small で1行全角13?14文字
・medium で1行全角10?12文字
・x-large で1行全角5文字
・medium で1行全角10?12文字
・x-large で1行全角5文字
