携帯サイト ページ制作のポイント タイトル

制作について


携帯サイト ページ制作のポイント

携帯サイトでは、携帯サイト制作ならではのポイントがあります。
ここでは、携帯サイトを制作する方に意識してほしいポイントをまとめて原則として紹介しています。
まずは基本的な原則を覚えてから、サイト制作が出来るといいですね!




【 原則1 】レイアウトに関する原則

レイアウトに関する原則

携帯サイトとPCサイトのデザインで最も違う点はレイアウトです。
携帯サイトは上から下へ移動する特性上、縦長のページで、区画を作成します。
その縦長の画面の中でレイアウトの方法を以下に記載します。


ポイント1 ページ全体のレイアウト

画像に関する原則

ページ全体のレイアウトでヘッダーとフッターがページの上下に横幅いっぱいにあり、その間のエリアにコンテンツ本体を配置するレイアウト一般的です。

ヘッダーエリアにページのイメージや内容を表すテキストを表示し、フッターエリアにはコピーライトや共通のナビゲーションを配置します。



ポイント2 TOPページのコンテンツ本体のレイアウト

画像に関する原則

TOPページの場合、コンテンツ本体に各ページへのリンクを配置します。
典型例としては各項目に見出しを設け、その配下にリンクを配置する方法です。
見出しの下のリンクは画像+回り込みテキスト、リンク+ページ説明などで表示します。
このレイアウトは現在の携帯ユーザーに浸透しており、踏襲することでユーザーがページの内容を理解しやすくなります。


【 原則2 】画像に関する原則

画像に関する原則

携帯サイト向けの画像作成では注意すべき点がいくつかあります。
この点を踏まえた上でサイトに合った画像を作って下さい。


ポイント1 画像の種類

携帯電話で表示出来る画像の種類は限られています。
さまざまな端末で表示出来るようにするために、画像の種類はjpgかgifにしましょう。

画像の種類

jpgの場合でもプログレッシブjpgはauでは対応していないことが多いので、避けるようにしてください。


ポイント2 画像の色数

携帯電話はPCほど色の再現性が高くありません。
そのため、コントラストは少し高めに設定しましょう。
画像は必ず実際の携帯電話で表示して確認するようにしてください。


ポイント3 画像のサイズとフォント

携帯サイト向けの画像は横いっぱいに見せたい場合には240pxで作成します。
この画像をau端末で表示するとau端末では画面幅が230px程度のため、若干幅を縮める調整をされます。

画像のサイズとフォント

このとき、画像内の文字が細いフォントで記載されていると、線が消えてしまうことがあります。
例) 「口」⇒「コ」
そのようなことを防ぐためには、画像内のテキストは少し太めに書きましょう。


【 原則3 】テキストに関する原則

テキストに関する原則

携帯サイトではテキストの表現も重要です。
以下の原則を抑えて、ユーザーにとって見やすいサイトを制作して下さい。


ポイント1 絵文字

絵文字は1文字で多くの情報を表示し、サイトに彩りを添える重要なツールです。
使用する際は以下の点に注意しましょう。
キャリア別の表示を意識する。
絵文字は各キャリアで別々の表示になります。docomoのみ絵文字に色を付けることが可能で、auでは絵文字の大きさを変えることが出来ません。

絵文字

この制限を踏まえて、絵文字を選択して下さい。


ポイント2 テキストサイズ

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

上記の通り、小フォントを表示する場合、x-smallやsmallではdocomo、SoftBankは小さくなりますが、auではそのままです。
逆にxx-smallを使用するとdocomo、auでは小フォントですが、SoftBankでは極小フォントになります。
そのため、正しく表示したい場合はdocomo、SoftBankではsmall、auの場合はxx-smallと出し分けする必要がありますので注意して下さい。

テキストサイズ2

スマートフォン・携帯サイト ページ制作(コーディング) トップへ戻る アイコントップへ戻る

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