スマホサイト作成について調べたスッゴイ適当なメモ

内容が古かったり、かなりテキトー

箇条書き

  • iPhoneはほぼSafari, AndroidはAndroidn標準ブラウザ
  • iPhone, Android ともにウェブページからのファイルのアップロードはできない。
  • iPhoneからファイルのダウンロードは出来ないが、Androidでは可能。
  • iPad は画面が大きいためPC用のサイトを表示させることが多い。
  • iPhone のブラウザの解像度は 320x480px
  • Androidのブラウザの解像度はいろいろ。
  • iPhone のブラウザの日本語フォントはヒラギノ角ゴのみ。英字フォントはいろいろある。まぁHelveticaでいいんでないかな。
  • Androidのフォントは固定。
  • 開発中にブラウザで確認する場合はウェブサーバにアップして、 そこにデバイスやシミュレータからアクセスする。 自分のPCにApacheなりTomcatなりのサーバをインスコすればOK。

UI・デザイン

  • スマホ特有の操作 : (シングル, ダブル)タップ, ピンチ(イン, アウト), スワイプ, フリック, ホールド
  • http://editors.ascii.jp/m-kobashigawa/iabook/ppb-note.pdf
  • 基本的には横場320pxを基準にリキッドレイアウトにする。
  • iPhoneにファーストビューに表示できるのは320x356px(アドレスバーとフッタ80+44px分縮む)
    ※ただし javascript でアドレスバー部分をスクロール可能
  • 画像を美しく見せたい場合は サイズを倍にして Style で表示サイズを半分にする。
  • iPhone 4 GUI PSD (Retina Display)
  • iPhone の文字サイズは 14 ~ 15px くらいが良い?PCサイトより大きめに。
  • 伸縮しても問題のない画像を使用する
  • CSS3を積極的に利用する。text-shadow, 角丸枠, 角丸ボタンなど
  • 今のところはSafariとChrome Liteのみの対応でほぼ問題ない。将来的には不明。
  • 階層はできるだけ浅くする。ページ遷移は少なくする。
  • ページ内リンク、折りたたみ、タブ、アイコン
  • 速度重視 -> 画像などのHTTPリクエストを極力減らす。
  • smoothScroll.js とかでなめらかにスクロール!
  • link要素の apple-touch-icon でWebClip のアイコン指定
  • iframe, スクロールバー, target="_blank" などは使わないほうが良い

コーディング

reset.css, normalize.css

HTML5用のリセットCSS、およびリセット+αなnormalize.css。 適当にググッて探す。

meta name="viewport" content="width=device-width"

viewport は仮想的なウィンドウのサイズを指定する。 1000px に指定する場合、どのようなディスプレイであれ、 ウィンドウのサイズは1000pxして画面が描画される。 width=device-width でデバイスのサイズを指定する。

拡大縮小についての制限も設定できるけど、スマホ用に最適化されたサイトでは拡大縮小機能はいらないよね。

<meta
  name="viewport"
  content="
    width=device-width,
    user-scalable=no,
    initial-scale=1,
    maximum-scale=1
  "
>

電話番号の自動リンク

意図しないリンクが張られないようにOFFにしておいたほうがいいかもね。

<meta
  name="format-detection"
  content="telephone=no"
>

HTML5

HTML5では div以外に header, footer, nav, article, section, aside の要素で区分けする。 これらが具体的にどう機能するのかはよく分からないけど、divはspan的な位置づけになる。 SEO的にも多少の意味はあるかもしれないけどほとんど加点は無い気がする。 加点されたらスパムに利用されるだけだしねぇ…ユーザビリティに影響するんだろか。

CSS3

CSS3を利用するとCSS2のみでは表現できないグラフィカルなスタイルを設定できる。 で、CSS3系のウェブツールを使用するとグラデーションなどが楽に作れるのでとりあえずウェブサービスを探してみるってのが賢そう。

box系プロパティ, グラデーション, ドロップシャドウ, 背景画像スタイルの機能拡張などなど、 CSS2では面倒だった部分がかなり楽に記述できるようになるっぽい。セレクタも新しく増えている。

Javascript

  • マウス系のイベントはスマホではない。タッチイベントを使う。

その他

  • サイトの目的を明確に!無駄を省く。
  • スマホは入力が面倒なのでフォーム入力は微妙かも
  • 電話、来店(地図、住所)、バズマーケティング
  • jquery-ui-transitionanimator]
  • ユーザーエージェント, navigator.mimeType による内容の振り分け
  • -webkit-text-size-adjust
  • apple-mobile-web-app-capable
  • window.navigator.standalone

参考にしたもの

Share