Webサイトのスマホ最適化について
今ごろ何言ってんだという感じでしょうが、
最近サイトのスマホ最適化ってほんとに大事だなーと思っています。
サイトによっては半数はスマホとか、よくある話になってきました。
Appleのサイトも最適化して、お金と面倒くさい以外の言い訳を見つけるにひと苦労です
はじめてガラケーよりスマホ利用者が多くなったり、Googleが検索結果の下に「スマホ対応」を表示したり、数年前にスマホがくるー、って言っていたのが本当にきたーという実感がある2014年末です。
そういう事情なので、改めてスマホ対応サイト制作時の勘所というか、抑えたいポイントをまとめます。
取り留めがなくなるので、Web制作会社の100人中95人が想像する、小規模なWebサイト（トップ／アバウト／アクセス／ブログ、のような10ページ未満）の話にしておきます。
◯準備
- Android対応
どのOSバージョンか、どの端末か、標準ブラウザかChromeか、すごーい大事
ただ、そういう状況で動くかどうかわからない機能を入れること自体ものによってはナンセンスな気も
- スマホでの表示を考慮したサイト設計と構造
小規模なら、基本的にはPC優先のサイトでも、閲覧できる情報は同じの方がよいはず、と思っています
PCではこれみれるんだけどなー、みたいな残念な気持ちにはなりたくないのでは
ユーザーエージェントでの振り分けと、メディアクエリなどを使ってCSSでレイアウトを変える方法、
おおまかに2種類あると思いますが、よほどの限りワンソースでいける後者が多い
Googleは後者推しですね
前者はいろいろ死んじゃうやつなので、もうお金と時間が優先されてしまうのはしょうがない問題な気がします
また、PC優先でPCのワイヤーを先に書くにしても、
その段階でスマホの場合はどうなると考えていないとしんどい
PCワイヤー → 確認 → おっけー → スマホワイヤー → ほげー
◯制作
- リキッドレイアウトで
fixレイアウトなんて滅多に見ないですが。
ただランドスケープで見る場合はあんまり考慮しない
どうしても画像を max-width: 100%; とかにすると画面全体にぼわーんとなるし…
iPhone6とかだと変わるかも
個人的な思想としては、ボタンやナビなどの分割の%指定（50%とか33%）はちょっとないかなーという感じ
box-sizingやcalcは使うの怖い印象があったり、ボタンなどでも縦に横100%で並んでいる方が押しやすいなー、という気持ちです
- CSSでできることはやりつくす
ファイル容量の話もありますが、要素の表示・非表示をリキッドレイアウトでやろうと思うと
メンテナンス込み込みで考えていた2.5倍くらいは大変になる印象
- 文字サイズは16px以上で
コンテンツ量にもよりますが、最近の好みとしてPCでもスマホでも16px以上が良い気持ちが心の中にあります
line-heightも2.0前後が好きです
- 横のマージンは20pxくらいに
これ大事っぽいんですが、横の空き具合を固定値にする場合、20pxが最適ではと思っています。
- 画像、js少なく、cssを使う
CSS3はAndroidの対応は鬼が出てくるの可能性も
- スマホ特有のタグなど
その都度、いろいろあるのでいろいろ使います。
途中でやる気なくなったのが分かったと思いますが以上です。
◯参考