スマートフォンサイトの制作 - 設計編 -

はじめに

iPhone+Androidスマートフォンサイト制作入門を読んだことを忘れないようにメモ

階層は浅く1ページを長く

  • 3G回線で利用される為、PCのように何回もクリックして遷移するのには不向き
  • 階層は浅くし1ページ内に多くの情報を収めるように設計する
  • 長くなってしまったページはページ内リンクでユーザビリティを高める

画面(解像度)はiPhoneベース

  • 解像度は320 x 480px(※1)だが、iPhoneの場合、上部にアドレスバー、下部にツールバーがある為表示領域はさらに小さい
縦
項目 表示領域 アドレスバー ツールバー
高さ 356px 80px 44px
横
項目 表示領域 アドレスバー ツールバー
高さ 210px 80px 30px

(※1)iPhone4は640 x 980pxだが、ブラウザは320 x 480pxで表示されるように設定されている

画面の向きに応じたレイアウトを行う

例えばテキストの文量。
テキストが多いページで横向きにした場合、1行の文字数が多くなり読みにく。
横向きの際は、レイアウトを変え、縦、横のどちらであっても1行の文字サイズを同じするなど配慮が必要

画面の向きでスタイルを変える方法はCSS3のメディアクエリのorientaionを使う

  • 縦：portrait
  • 横：landscape

詳しいしようはこちら

<link rel="stylesheet" media="all and (orientation:landscape)" href="land.css">

長いページを使いやすくする

  • 階層を浅く1ページの量を増やす為、ページが長くなりがち。
  • 対処方法は下記3つ
    • ページ内リンクを配置する
    • 要素を折りたためるようにする
    • タブで区切る

タップしやすくする

  • ほとんどの操作を指先で行う為、リンク要素が大きくなくてはならない
  • 対処方法は3つ
    • 大きなボタンを配置する
    • リストにし、リスト要素すべてをリンク対象にする
    • アイコンを配置する(iPhoneの画面のように)

文字サイズを大きくする

  • 目安は14〜15px程度

リキッドデザインする

  • iPhone/Androidはスクロールバーが表示されない為ページの一部がはみ出でいてもわからない
  • 縦を前提に作成すると、横にしたときに余白部分が目で立つ

画像の量を抑える

  • 3G回線で利用されるため、なるべく容量を抑える

テキストを画像化しない

装飾はなるべくCSSを利用

  • グラデーションや角丸などCSS3では今まで出来なかった装飾を利用可能
  • 安易に画像やJSを利用するのではなく、可能なかぎりCSSを利用することで表示速度を早める

PNG画像を活用する

  • PNG8
    • GIFと同じ256色を表現できるが、圧縮率が高く、軽い画像を作成できる
  • pNG24/32
    • フルカラー
    • 複数の背景とあさせて綺麗に表示できる
    • JPEGと比べると圧縮率は低い

コントラストを強くする

  • 屋外での利用を意識して、背景色と文字色のコントラスと高くする

(背景：黒、文字：白)

リンク要素は分かりやすく

  • PCではロールオーバーでリンク要素を区別するときがあったが、スマフォではできない
  • 初見でリンクであるとわかりやすくする