【ニーズに応えてこそプロ】スマホサイトの意識を高める
「今回はレスポンシブでお願いします」
「レスポンシブでお願いしたはずですが崩れますね」
クライアントからこういったメールが非常に良く来ます。
これからweb、htmlを習得する方にとっても他人事ではありません。
学習する内容は現場のニーズに沿っていた方がはるかに効率的です。
ここでは現役エンジニアとして活躍中の筆者が、
現場で最優先に役立つ知識を一足先にお教えします。
・レスポンシブデザイン
ではレスポンシブとはなにか？
簡単に言うと「画面幅によってデザインが変わるページ」です。
実質的には「スマホだとデザインが変わるページ」と言ってもいいかもしれません。
どうやって実装するかなど詳細はまた別途書きますが、
ここでは一つ最大の注意点だけお伝えしておきます。
それは、「スマホ優先でコーディングする」ということです。
案件やターゲットにもよりますが、現状webページを閲覧する際に使われている
のはPCよりもスマホの方が多いです。
それなのに、PC優先でコーディングを始めてしまうと、htmlの構造やcssの無駄が
発生しやすくなってしまいます。
基本的にはスマホ優先でコーディング、と覚えておいてください。
・UI
さて、スマホのコーディングで気をつけるべきポイントはなにか？
まずは操作性です。よくUI(ユーザーインターフェース)と言ったりします。
例えば「OK」「送信」などメインのボタンと「キャンセル」などのボタンの
大きさや色を分ける。
画面幅が狭いのでなるべく1列表示にする。
横スクロールはなるべくしないようにする。
などです。
もちろん他にも色々ありますが、特に普段PCでサイトを見る機会が多い方は
前提や使い勝手の違いに気をつけたほうがいいです。
私も普段情報収集としてサイトを見ることが多いためPCでブラウジングしてるので、
スマホのコーディングに慣れるまでは結構時間がかかりました。
なのでもし私と同じくPCでのブラウジングが多い方は、スマホでのブラウジングも
少し意識しておくと良いかもしれません。
・jsやcssの挙動
最近は減ってきましたが、javascriptのライブラリやそもそもの仕様が、
スマホに対応していない、あるいはiPhoneだけ対応していないという
事態が稀にあります。
cssも同じで、Androidでは問題なく表示されるのにiPhoneだと全く表示されない、
という状態もままあります。
こればかりは使用するライブラリと端末に依存するため、どういう時に再現するのか
という条件付けが難しいです。
だからこそ言えるのが、Javascriptを使う際は、本実装する前にまず動作確認を
行うということが大事です。
cssも同じく、細かく打ち込む前に「このプロパティはAndroidに対応してるかな？」とテストしてみるのがいいでしょう。
公式リファレンスなどで対応○となっていても、特定のバージョンだと非対応などはよくあることなので、やはり実際に確かめた方が無難です。
まとめ
