スマートフォンサイトの必要性
40代以下のユーザーは、
70%以上スマホで見る。
スマートフォンでのインターネット利用者はどんどん向上している。
2017年の統計では、個人のインターネット利用機器に関しては、スマホがPCを上回っている。
ただし、年代別でみると60歳以上はPCの利用がスマホを上回っている。
Chapter01 モバイルサイトデザイン
スマートフォンサイトの必要性 40代以下のユーザーは、
気をつけるポイント スマホは小さい。外でも使う。
スマホは、画面の大きさ、操作性、利用場所、回線速度
などがPCサイトとは異なる。
-
画面の大きさ
PCと比べて画面サイズが小さい。
→ 複雑なレイアウトは控え、シンプルなレイアウトを心がける。 -
操作性
指でタップして操作する。
→ リンクやボタンは、誤操作がないように大きく配置する。片手で操作する際は親指の付け根の付近と対角線側の上部がタップしにくい。 -
利用場所
自宅や会社などに加え屋外や寝ながら利用する。
→ ユーザーの利用シーンとニーズを考察しコンテンツを配置する。 -
回線速度
3Gや4G回線は光回線と比べると速度が遅い。
→ 画像の多用は避けて、CSSで対応できないかを考察。
解像度 PCは横長。スマホは縦長。
スマートフォンの画面サイズはPCと違い、
縦長の解像度になる。解像度は機種によって
様々なサイズがある。
iPhone4
iPhone6
iPhone6 Plus
| 機種 | 解像度 | デバイスピクセル比 | 画面サイズ |
|---|---|---|---|
| iPhone 4 / iPhone 4s | 640px × 960px | 2 | 320px × 480px |
| iPhone 5 / iPhone 5s / iPhone 5c / iPhone SE |
640px × 1136px | 2 | 320px × 568px |
| iPhone 6 / iPhone 6s iPhone 7 / iPhone 8 |
750px × 1334px | 2 | 375px × 667px |
| iPhone6 Plus / iPhone6s Plus iPhone 7 Plus/ iPhone 8 Plus |
1080px × 1920px | 3 | 414px × 736px |
| iPhone X | 1125px × 2436px | 3 | 375px × 812px |
| 機種 | 解像度 | デバイスピクセル比 | 画面サイズ |
|---|---|---|---|
| Xperia Z5 | 1080px × 1920px | 3 | 360px × 640px |
| Galaxy S6 edge | 1440px × 2560px | 4 | 360px × 640px |
| AQUOS EVER (SH-04G) | 720px × 1280px | 2 | 320px × 640px |
ゾーンマップ スマホは片手で操作する。
親指が届かない範囲を理解する。
スマホユーザーの約半数は片手でスマホを持ち、親指で操作する。
持ち手側の親指の付け根付近と、対角線側の上部は親指が届かない。
下記はスマホを右手で持った時のゾーンマップ。
iPhone4
iPhone6
iPhone6 Plus
レイアウト ワンカラムのレイアウトが基本。
足りない時は奥行きを活用する。
スマートフォンの画面サイズは縦長のため、
基本的にはワンカラムでシンプルなレイアウトを心がける。
スペースが足りない場合は重ねて表示するなど、
奥行きを活用しスペースを確保する。
情報への視線誘導と、
飽きさせない工夫が必要。
スマートフォンはPCと比べて一覧性が低く、スクロール速度が早い。従って一字一句読むことが期待できない。ユーザーの利用場所とユーザーのニーズを考察し、ユーザーが見たいコンテンツをストレスなく認識できるような視線誘導が必要。また、スマホサイトは縦に長くなるため、飽きさせない工夫も必要となる。
- ユーザーのニーズにあったコンテンツを
優先的に配置 - 「Z型」や「F型」の視線誘導を意識
- 見出し、余白、背景、境界線、色などで
抑揚を付ける - スペースが足りない場合、奥行きを活用する
- ヘッダーを固定する際は、50px以内にする
- 本文のサイズは14 ~ 16px、行間は1.5が基本
ナビゲーション グローバルメニューの設置
スマホサイトのナビゲーションには、様々なタイプがある。
ハンバーガーメニュー
採用しているサイトが多いナビゲーションパターン。
コンテンツのスペースがナビゲーションに邪魔されないためデザインの幅が広がる。しかし、「メニューを表示する」という意味が伝わらずクリックされない場合もある。また、ハンバーガーボタンをクリックするまでメニュー項目が見えず、現在地もわかりにくい。従って、項目の数を覚えれる程度（5 〜 9個程度）にし、重要なページへのボタンは、別途コンテンツのエリアにも表示するなどの工夫が必要。
メリット
- コンテンツのスペースが広がる
- 多くのスマホUIで採用されているため、
徐々に認知が向上している
デメリット
- メニューを表示するボタンと気づきにくい
- メニューを展開するまで項目が見えない
- 現在地がわからない
- 向いているサイト
- グローバルメニューでのページ移動より、ビジュアルイメージの訴求などが重要なサイト
タブバー
メニューを横並びに表示するナビゲーション。
メニュー項目が見えるためサイトの構造がわかりやすい。
ただし、横並びで一度に表示できるメニュー項目の数は5固程度、文字数によっては、3、4個が限度になる。また、ファーストビューで訴求できるスペースも少なくなる。アイコンを活用して情報を集約したり、横スクロールなどを取り入れるなどの工夫が必要になる。
メリット
- メニューの項目が見える
- サイトの構造がわかる
デメリット
- 表示できる項目の数に限度がある
- ファーストビューのエリアが狭くなる
- 向いているサイト
- サイトの構造が複雑で、ナビゲーションによるページの移動が重要なサイト
スプリングボード
スマートフォンのホーム画面のようにアイコンを画面上に並べるナビゲーション。見やすく使いやすいが、表示領域のほとんどがナビゲーションで埋まるためコンテンツの見せ方に工夫が必要。
メリット
- メニューの項目が見やすい
- メニュー項目が押しやすい
デメリット
- 表示できる項目の数に限度がある
- ファーストビューのエリアが狭くなる
- 向いているサイト
- ページ数が多くて、フラットな（カテゴリの数が広くて浅い） 構造のサイト
ドリルダウン
不動産系のサイトや地域のポータルサイトなどでよく利用されるナビゲーションパターン。サイトの階層を降りていく誘導に有効な反面、画面のほとんどをメニューが覆い尽くしてしまう。その為、コンテンツの見せ方に工夫が必要となる。
メリット
- メニューの項目が見える
- サイトの構造がわかる
デメリット
- 表示できる項目の数に限度がある
- ファーストビューのエリアが狭くなる
- 向いているサイト
- ページ数が多くて、階層が深い構造のサイト
詳細ページへの誘導詳細ページへの誘導を促す
一覧表示でよく使う装飾。
スマホサイトでのテキストリンクはタップしにくい。
各コンテンツの詳細ページに誘導するため、タップしやすい工夫が必要。
カード型
一つの記事やコンテンツを長方形で囲いカードのような装飾のコンポーネント。一般的には上部に写真を配置し、その下にタイトルや文章を配置する。情報量の多いコンテンツには向いておらず、文章よりも写真のイメージが重要なコンテンツに向いている。
メリット
- コンテンツのまとまりがわかりやすい
- 誘目性が高い
- どんなコンテンツでも使いやすい
デメリット
- 長い文章は記述しにくい
- たくさんのコンテンツは配置しにくい
- 向いているコンテンツ
- アパレル商品の一覧などのように、文章よりも写真のイメージの方が重要なコンテンツ。
メディア型
文章などの情報の横に、サムネイル画像を配置するコンポーネント。一般的には左にサムネイル画像を配置し、右に文章を配置することが多い。情報が多いコンテンツでも一覧表示しやすく、使いやすい。
メリット
- 長い文章でも大丈夫
- たくさんのコンテンツを配置できる
- 省スペースで使いやすい
デメリット
- 単調になりやすい
- 流し読みされやすい
- 向いているサイト
- ブログやニュースなど、文書が中心のコンテンツ。
まとめ スマホはPCより小さい。
スマートフォンはPCに比べると表示領域が小さい。
- シンプルなレイアウトを心がける
- 目的に合わせて使いやすいナビゲーションを提供する
- コンテンツは飽きさせないように工夫して配置する