スマホ対応の進め方（方針編）

スマートフォンへの対応について整理しておく
　　技術的な作成上の観点ではなく、デザインする際の基本的な考え方を記述する

　　（１）スマホ優先かＰＣ優先かを検討する
　　　　　　スマホ優先・・・移動中にアクセスされるか、戸外で使用されるか
　　　　　　ＰＣ優先・・・・じっくり家からアクセスされるので、内容に興味を持たせたり、画像を沢山用意して多彩な表現をするか
　　　　こういった点を考慮した上で、スマホ優先での対応を決定することにする

　　（２）常にシンプルな構造にする
　　　　通信環境は比較的改善されてはいるが、通信に必要なデータ量を多くしない
　　　　　　メニューやボタンは画像だけでなく、ＣＳＳを使いなるべくデータ量を少なくする
　　　　　　画面の表示要素をシンプルにする
　　　　　　　　フッターやサイドバーなどを思い切って無くすことも考える
　　　　　　　　便利さよりシンプルさを強調して、使いやすくする
　　　　サイトの階層を複雑にしない
　　　　　　一度の読み込みでできるだけ多くの情報が読み込めるように工夫をする
　　　　段組を使わない
　　　　　　横幅に限界があるので、サイドバーは設けない

　　（３）リンクは一目で分かるようにする
　　　　タッチパネル操作であることを考慮する
　　　　　　マウスポインタが表示されず、ロールオーバー（マウスオーバー）機能は使えない
　　　　　　　　マウスを文字の上に置くと、コメントが浮かび上がったり、文字の色が変わったりする機能
　　　　　　一目でリンクだとわかるように工夫する必要がある

　　（４）タッチ操作に最適な行間や余白をとる
　　　　タッチ操作が誤操作しない様に、文字や画像の行間を見直す
　　　　　　入力を求める場合には、キーボード入力しやすい工夫を施す
　　　　　　選択を求める場合には、選択しやすくボタン等にも配慮する

　　（５）リキッド（可変幅）でデザインする
　　　　縦長の画面と横長の画面の双方でアクセスされる、固定幅でデザインはしない
　　　　　　文節で区切って改行するのではなく、段落で区切って改行する
　　　　リキッド（可変幅）デザインにして、デザインが崩れていないかどうかをチェックする

　　（６）便利なソフトは使わない、見慣れた画面にする
　　　　Flashは使わずに代替手段を考える
　　　　　　可能であればアニメーションgifで代用する
　　　　　　動画をアップロードして、YouTube等の動画サイトへ繋げる
　　　　スマホのＯＳや標準アプリの操作性と一致させたデザインにする
　　　　　　操作の感覚がＯＳと似ていれば取っ付きやすくて分かりやすくなる
　　　　　　角丸で四角形のアイコンを使う、グラデーションの背景に大きなボタンを配置する

　　（７）ＨＴＭＬ５とＣＳＳ３を活用する
　　　　できるだけシンプルなデザインにして、ＣＳＳ３で表現力を高める
　　　　　　ＩＥは徐々に追い着いて来ているので、バージョンを気にする必要もなくなる

　　（８）画面のデザインをスホ用ＯＳに合わせる
　　　　スマホの操作性と一致させることによって、誰にでも簡単に操作に馴染んでもらう
　　　　　　角丸で四角形のアイコンを配置する
　　　　　　グラデーションの背景に大きなボタンを配置する