
![]()
ここでは、携帯サイトを制作する方に意識してほしいポイントをまとめて原則として紹介しています。
まずは基本的な原則を覚えてから、サイト制作が出来るといいですね!
![]()
携帯サイトは上から下へ移動する特性上、縦長のページで、区画を作成します。
その縦長の画面の中でレイアウトの方法を以下に記載します。
ページ全体のレイアウトでヘッダーとフッターがページの上下に横幅いっぱいにあり、その間のエリアにコンテンツ本体を配置するレイアウト一般的です。
ヘッダーエリアにページのイメージや内容を表すテキストを表示し、フッターエリアにはコピーライトや共通のナビゲーションを配置します。
TOPページの場合、コンテンツ本体に各ページへのリンクを配置します。
典型例としては各項目に見出しを設け、その配下にリンクを配置する方法です。
見出しの下のリンクは画像+回り込みテキスト、リンク+ページ説明などで表示します。
このレイアウトは現在の携帯ユーザーに浸透しており、踏襲することでユーザーがページの内容を理解しやすくなります。
![]()
この点を踏まえた上でサイトに合った画像を作って下さい。
携帯電話で表示出来る画像の種類は限られています。
さまざまな端末で表示出来るようにするために、画像の種類はjpgかgifにしましょう。
jpgの場合でもプログレッシブjpgはauでは対応していないことが多いので、避けるようにしてください。
携帯電話はPCほど色の再現性が高くありません。
そのため、コントラストは少し高めに設定しましょう。
画像は必ず実際の携帯電話で表示して確認するようにしてください。
携帯サイト向けの画像は横いっぱいに見せたい場合には240pxで作成します。
この画像をau端末で表示するとau端末では画面幅が230px程度のため、若干幅を縮める調整をされます。

このとき、画像内の文字が細いフォントで記載されていると、線が消えてしまうことがあります。
例) 「口」⇒「コ」
そのようなことを防ぐためには、画像内のテキストは少し太めに書きましょう。
![]()
以下の原則を抑えて、ユーザーにとって見やすいサイトを制作して下さい。
絵文字は1文字で多くの情報を表示し、サイトに彩りを添える重要なツールです。
使用する際は以下の点に注意しましょう。
キャリア別の表示を意識する。
絵文字は各キャリアで別々の表示になります。docomoのみ絵文字に色を付けることが可能で、auでは絵文字の大きさを変えることが出来ません。

この制限を踏まえて、絵文字を選択して下さい。
テキストのサイズを変えることは限られた範囲で情報を表示するために有効な手段です。
例えば、リンクの下の説明文のフォントサイズを1つ落とすことで、一目で「補足説明」ということが理解出来ます。
※携帯サイトでは大フォントは余り利用されません。
記述の際の注意点としては、各キャリアでフォントサイズの指定が違うことです。
docomo、auは大中小の3段階ですがSoftBankはさらに細かく5段階になる場合もあります。
下記が弊社の経験則でのフォントサイズです。
上記の通り、小フォントを表示する場合、x-smallやsmallではdocomo、SoftBankは小さくなりますが、auではそのままです。
逆にxx-smallを使用するとdocomo、auでは小フォントですが、SoftBankでは極小フォントになります。
そのため、正しく表示したい場合はdocomo、SoftBankではsmall、auの場合はxx-smallと出し分けする必要がありますので注意して下さい。

» モバイルコマース トップページ » 制作 TOP » 携帯サイト ページ制作のポイント