フィーチャーフォンUIガイドライン

FEATURE PHONE USER INTERFACE GUIDELINE マルチデバイスLab. × ユーザビリティ研究所
フィーチャーフォンユーザーインターフェイスガイドライン

2011.12.21

COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.

目次

INDEX

00 INTRODUCTION

はじめに 2
HTML FLASH

01 SCREEN

画面 3 08 SIZE

サイトサイズ 12

02 TEXT

テキスト 4 09 FONT

デバイスフォント 13

03 PICTOGRAM / ICON
絵文字・
絵文字・記号 5

04 PICTURE

画像 7

05 LINK

リンク 8

06 NAVIGATION

ナビゲーション 9

07 PSD

PSDサンプル
PSDサンプル 10

1

はじめに

00
INTRODUCTION

はじめに

ガイドライン目的
ガイドライン目的

本ガイドラインはサイト制作において、一定のクオリティを担保するための指標となるユー
ザーインターフェイスルールを記載しています。
あくまで共通ルールであるため、必要であればガイドラインを調整してご利用ください。

■対象範囲
- フィーチャーフォンサイト（3G以降) HTML・XHTML・Flash

あああ

マルチデバイスLab.
マルチデバイスLab. - Multi Device Lab.
http://mdlab.jp/

2

HTML

3

オブジェクトサイズ・余白

01
SCREEN

画面

【ファーストビューに入れる内容について】
ファーストビュー

ファーストビューエリアは、240×320pxを基準とします。
サイト名称
主にTOPページのファーストビュー内では、以下の点を十分に満たしているか常にチェック（どのようなサイトか）
します。

ファーストビュー
メインビジュアル
【注意点】（魅力的なコンテンツの紹介）
（1）サイト名称などで、サイトの内容を説明できているか
（2）メインビジュアルなどで、魅力的なコンテンツを紹介できているか
（3）新着情報などで、更新性のあるコンテンツが配置されているか
新着情報
（更新性のあるコンテンツの配置）

スクロール
※スクロールすることを考慮した上でも、これらの要素は上部に配置する。
近年、スクロールしやすい端末が発売されていますが、ページの表示順が上→下であるこ
とは変わりません。
掲載する情報の優先度を明確にし、優先して見せたい情報は画面上部に配置します。

【画像とHTMLによる表現の違い】

ページ容量と
ページ容量と画像数
容量
画像での表現画像
1ページのページ容量上限は100KBです。しかし、容量の重いサイトは回線速度や端末ス
ペックによってページ表示速度が遅くなり、ユーザーのストレスになることから、可能な限り
ページ容量は抑えて制作する必要があります。
<div>
また画像点数が多くなることで、表示が遅くなることがあるため、HTMLで表現可能なデザイ HTMLでの表現絵文字
<span>
ンはHTMLで表現します。
<hr>

4

テキスト

02
TEXT

テキスト

フォントサイズ【i-modoで見た場合の表示目安】

キャリア・端末によって表示可能なサイズが異なるので、全端末で表示可能な範囲の文
字サイズでレイアウトを行います。サイトのターゲット、コンテンツボリューム、レイアウト ■medium
一行に全角12文字を基準と
等によって文字サイズは適宜変更する必要があります。する
基準フォントサイズはXHTMLでは”x-small”を、HTMLでは”1”を推奨します。１２３４５６７８９０１２

■x-small
一行に全角14文字を基準とする
※”x-small”に指定した場合、一文字のサイズは”15px”。１２３４５６７８９０１２３４

【全角・半角カタカナの利点と欠点】
全角半角カタカナの
全角半角カタカナの使い方
カタカナ
半角カタカナ全角カタカナ
短い文章では半角カナを、長い文章では全角カナを使った方が読みやすくなる傾向がある
1行に収めやすいので、短文に向全角の文字に埋もれにくいので、
ため、両者の特徴を考えながら（※）両者を使い分けます。利点いている読みやすく、長文に向いている
ただし、文章中に両者が混在すると、相対的に半角カナが読みにくくなり、文字が詰まって見えるのでカタカ短い文章でも改行しやすくなって
見た目の印象も良くないので、文章内では半角・全角は統一します。欠点
ナの文字が読みにくいしまう。カタカナ（記号）によって
は、空白のスペースが目立ってし
まう。

※商品名やブランド名など重要な固有名詞や、タイトルバーの文字は全角にする場合がある。

5

操作設計

03
PICTOGRAM / ICON

絵文字・
絵文字・記号

【よく使用される絵文字例】
絵文字の
絵文字の活用方法

絵文字を使う場合はアイコンとして使用することで、ページの情報が整理されサイトが見会社概要無料
やすくなります。装飾のために使用する場合は、かえって見づらくならないよう、使いす
ぎに注意が必要です。お問い合わせ新着情報

検索プレゼント
※docomoの機種では絵文字のカラーを指定することができます。

記号の
記号の活用方法【記号使用例】

絵文字が使えない場合は、記号を使いテキストをレイアウト・装飾することで、
■ｼｮｯﾋﾟﾝｸﾞｶーﾄ
ページの見易さを向上させることが出来ます。 ■会員情報変更 / 退会ﾃｷｽﾄﾃｷｽﾄﾃｷｽﾄﾃｷｽﾄﾃｷｽ
■ﾒﾙﾏｶﾞ会員登録 /退会ﾄﾃｷｽﾄﾃｷｽﾄﾃｷｽﾄ
■お届け先追加 ┗詳細はこちら
【記号サンプル】
■ ● ・ ▼ ┣ ┗ [ ] ≫≪ ＞＜ ↑→↓← ┣ｶﾃｺﾞﾘ1ｶﾃｺﾞﾘ1
▼ ▼今すぐお申し込み！▼ ▼ ┣ｶﾃｺﾞﾘ1ｶﾃｺﾞﾘ2
キャンペーン情報 ┣ｶﾃｺﾞﾘ1ｶﾃｺﾞﾘ3
┗ｶﾃｺﾞﾘ1ｶﾃｺﾞﾘ4

≫最新ﾆｭｰｽ[11.08.25 ]

6

操作設計

04
PICTURE

画像

【アイコン例】
アイコン

画像サイズは横幅240pxを基準としてデザインします。
ブラウジングにスクロールバーが表示されるau等の端末では、240pxの画像がスクロー
ルバーの幅分自動縮小されるため、文字が潰れて視認性が悪くなる可能性があるので、サムネイル画像

タイトル文字に細いフォントを使用しないよう注意が必要です。
タイトル画像
サムネイル画像のサイズは横幅60pxを最低サイズとします。
アイコンサイズは15px アイコン画像
アイコンサイズは、配置の仕方により様々ですが、視認性を確保するためには
15×15px以上で作成します。

※テキストを”x-small”に指定した場合。

VGA対応【240pxと480pxでの作成の利点と欠点】
VGA対応
横幅240px 横幅480px
近年多くなっているVGAの端末にサイトのデザインを合わせる場合は以下の2つの方法
ページ容量を変えずにSoftBankのどの端末で見てもキレイな画像で
があります。利点 VGA端末でもレイアウトを崩さず表表現できる
現できる

【方法】 VGA端末で見たときに画像が荒くな画像容量が大きくなる分ページが
る可能性がある重くなる
（1）横幅240pxのデザインでHTML上の画像幅をパーセンテージで指定する欠点

（2）横幅480pxのデザインでHTML上の画像幅をパーセンテージで指定する

7

レイアウト

05
LINK

リンク

【テキストリンクの表記】
テキストリンク色
テキストリンク色

テキストのリンク色はリンク以外のテキストと区別が付きやすいようにデザインします。通常テキストリンクテキスト
デザイン上、問題がないようであれば、リンク色は青色を推奨します。詳細はこちら詳細はこちら

背景色とテキストカラーの関係 imodeXHTMLの場合
リンク色/アクティブリンク色の設定によっては、リンクフォーカス時にテキストの視認性
が悪くなる可能性があるので、注意が必要です。ローカルナビゲーション >詳細はこちら
▼ >詳細はこちら
また、imodeXHTMLでは個々のリンクテキスト色は変更できても、下線の色はページ全 >詳細はこちら
体で統一されてしまいます。テキストの色を変更しても、リンクの下線の色は1色になっオーバーすると、テキスト
下線の色はページ内で1色
カラーが反転するため読めなくなる
てしまうので注意が必要です。

リンクの
リンクのレイアウト【下キーを押したとき、リンクにカーソルがあたる順序】

docomo / au 端末 docomoのモードブラウザ2.0以降の
2.0以降
Softbank / docomoのiモードブラウザ2.0以降の端末
レイアウト上、横に並べることも可能です。（モバイルは上下にスクロール操作をするの
で、リンクは縦に並べるのが基本です。）その場合Softbankの端末および、docomoのi ① ② ①
>ﾘﾝｸ1 >ﾘﾝｸ2 >ﾘﾝｸ3 >ﾘﾝｸ1 >ﾘﾝｸ2 >ﾘﾝｸ3
モードブラウザ2.0以降の端末（一部機種）は、左右キーで操作をします。
※リンクが左右にレイアウトされることで間のリンクがスキップされてしまいます。 >ﾘﾝｸ4 >ﾘﾝｸ5 >ﾘﾝｸ6 >ﾘﾝｸ4 >ﾘﾝｸ5 >ﾘﾝｸ6
②

画像リンク
画像リンク【画像リンク例】

赤枠のついたデザインのボタン正方形・長方形ボタンの切り出し
バナー等の正方形・長方形の画像にリンクを設定する場合、フォーカスの色と画像の淵
の色が一致するとフォーカスが当たっていることが分かりにくくなります。
▼
正方形・長方形の画像にリンクを設定する場合は、画像切り出し時にページ背景色と同
じ余白を入れるか、画像に付随するテキストを含めてリンクを設定します。
オーバーすると、デフォルトで赤枠がしっかり見えるように、
赤枠がつくため、オーバーしているか背景を少し画像内に含めて切り出す
わかりづらい

8

ナビゲーション

06
NAVIGATION

ナビゲーション

ページ内【ナビゲーション例】
ページ内リンク

リンクの多いページはページ内リンクで操作性を確保します。
【ページ内リンク】【階層の上り下り】

目次の役割を果たすので、ページ内リンクはファーストビュー内に入れることを心がけま前のﾍﾟｰｼﾞへ｜次のﾍﾟｰｼﾞへ
ﾆｭｰｽ｜ﾌﾟﾚｾﾞﾝﾄ｜ﾀﾞｳﾝﾛｰﾄﾞ
しょう。お役立ち｜ｻﾎﾟｰﾄ
< 1階層上に戻る
また、ページ下部からページ上部へジャンプする、ページ内リンクも適宜使用します。 ≪2階層上に戻る

←TOPﾍﾟｰｼﾞに戻る

▲上へ
TOP>第1階層>第2階層>現在ﾍﾟｰ
ｼﾞ
階層の
階層の上り下り

階層が深くなりがちなモバイルサイトでは、サイト内でユーザーが迷子にならないように
サイト全体で一貫したナビゲーション設計を行います。【カテゴリ間移動】【ショートカットキーの設定】
必要に応じてパンくずナビゲーションを設置します。
┣カテゴリ1 [4]前へ｜次へ[6]
┣カテゴリ2
┣カテゴリ3 [*]1階層上に戻る
┗カテゴリ4
[0]TOPﾍﾟｰｼﾞに戻る
カテゴリ間移動
カテゴリ間移動
[2]上へ

下層ページからのサイト回遊を促すために、カテゴリ間移動のナビゲーションを設置しま
す。

ショートカットキー

ショートカットキーはサイト内でよく使われるメニューを対象に設定します。
ショートカットキーはページ内の移動方向やサイトの移動方向がイメージしやすい数字
キーを割り当てます。

9

PSD

07
PSD SAMPLE

PSDサンプル
PSDサンプル
TIPS 制作に役立つヒント

PSDファイル格納場所
PSDファイル格納場所
ファイル
点線で区切りのラインを表現する場合、「-」と「-」の間隔を狭くしすぎると、
『Docomo絵文字』端末によっては横幅が圧縮され、点線がつながってしまうことがあるので
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/ 注意が必要です。

『au絵文字』
背景色の変更は、xhtmlのみ設定可能。Htmlの場合は1色のみ。ラインもし
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
くは画像を間にはさみ、区切りの処理をします。

10

FLASH

11

サイトサイズ

08
SIZE

サイトサイズ

サイトサイズについての注意点
サイトサイズについての注意点
についての【フラッシュサイズ240X320に対するブラウザ表示解像度の違いによるSWF拡縮変化】

最も多くの端末に対応するサイズは240x240pxです。
docomo905i、906iシリーズ以降を対象とした場合は240x320pxも対応します。
１：
サイトサイズより小さいブラウザサイ
【必ず対象端末のブラウザサイズを確認】
必対象端末のブラウザサイズを確認ズの端末で表示した場合（縦横費が
維持されて縮小）
端末のブラウザサイズがサイトサイズより小さい場合は縦横比の維持が優先され、サイト
全体が縮小されて表示されます。

【デバイスフォントへ影響】
デバイスフォントへ影響
デバイスフォント
サイト全体が縮小されてもデバイスフォントは縮小されない（ポイントが維持される）ため、
テキストが画面から見切れてしまう可能性があります。２：サイトサイズとブラウザサイズの３：サイトサイズよりブラウザサイズ
縦横比率が一致した場合（縦幅）が広い場合

【大きいサイズのFLASHサイトを制作する場合】
きいサイズのFLASHサイト制作する場合】
サイズサイトをする場合
ブラウザサイズが小さい端末の対応について、必要最低限の情報を見せるようにする等、
調整が必要になります。

【端末のブラウザサイズがサイトサイズより大きい場合】
端末のブラウザサイズがサイトサイズより大きい場合】
より場合
サイトの上下に余白が生じるので、サイトのデザインに合わせて余白部分にデザインを
施す必要があります。

12


09
FONT

TIPS 制作に役立つヒント

デバイスフォント使用についての注意点
デバイスフォント使用についての注意点
使用についての
ページ容量上限は100KBを基準としますが、90KB前後を推奨します。

【サイズ/太字】
デバイスフォントサイズは12ptを推奨。（全キャリア、全端末を対象として表示できるサイズ） 1枚の画像の縦と横の長さの上限は1000pxとします。
（240x1020pxのjpegを使うとエラーとなる事例有）
デバイスフォントの太字の使用は不可。

【文字間のマージン】エラーを考慮して、JPEG画像を避け、PNG画像の使用を優先します。

文字間のマージン調整不可｡（行間は列毎にレイアウトをすることで可能）
端末によっては左キーで前のページに戻ってしまうので、上下キーのみの
操作を想定して設計します。
【文字色】
SoftBankの一部の端末でデバイスフォントに白フチが付いてしまうため、文字色を白にし
キャリア依存性が高くメンテナンス性に難があるため、絵文字の使用は推
ない。奨しません。

【テキストの強調色】
テキストボックス内の個別文字列の色替え不可。

【リンクの表現】
リンクの表現ではUIデザインとして統一したアイコン/バー等で対象フォーカスがリンクし
ていることを示しますが、FLASHでアニメーションを加えることも行います。

13

フィーチャーフォンUIガイドライン

Recomendados

Recomendados

Más contenido relacionado

Similar a フィーチャーフォンUIガイドライン

Similar a フィーチャーフォンUIガイドライン (20)

フィーチャーフォンUIガイドライン