【レスポンシブデザイン】スマホ対応のデザインで気を付けるべき3つの事

こんにちは朱夏です。

今回は、スマホ用のデザイン作成、コーディングで気を付ける必要がある3つの事を紹介します。

朱夏

PC様に作ったデザインをスマホの画面に収まる様に表示を調節すればいいんじゃないの？

スマホ用のデザインを作成する場合、PC用のデザインとは勝手が違うところがいくつかあるため、サイズや位置を調整して終わりというわけにはいかない場合がほとんどです。

今までの学習や、いくつかの対応を行った経験から、スマホ用デザインを作成する上で注意が必要なポイントを3つに絞って紹介します。

それではいってみましょう。

「もくじ」
スマホ用のデザインはなぜ必要か
1.viewport設定は必須
2.横並びの表示は禁止
3.スマホに合わせたサイズ調整
あとがき

そもそも、PC用とは別にスマホ用のサイトデザインを何故作る必要があるのでしょうか。

それは、PCとスマホの機能の違いが影響しています。
具体的に何が違うのかというと、ポイントになるのは以下の3つです。

1の画面サイズについては、圧倒的にスマホの方が小さいです。
画面サイズが小さいという事は、一度に表示できる情報量が少ないという事。
PC用のサイトより細かいまとまりを意識してデザインしないと、見づらいサイトになってしまいます。

2の縦横比に関しては、スマホまたはPCで一般的に閲覧する場合の表示について言っています。
スマホの場合縦長、PCの場合は横長が一般的です。
縦横比が変われば、当然1行で表示できる文字数や、1画面で表示できる文字数なども変わってきます。

3つ目の操作性について、PCは基本的にキーボードとマウス、スマホはタッチパネルで操作します。
PCのデザインをそのまま流用しようとするのは、この操作性の違いからあまりお勧めできません。
ボタンが小さすぎて、指で押すのに苦労する、なんてことが起きたら非常に残念です。

スマホ用のサイズに、ただ小さくまとめてデザインするのではなく、こういった違いを意識してデザインしましょう。

それでは、次の項から注意ポイントを紹介します。

最初の注意点はviewportの設定をすることです。
これが設定されていないと、折角スマホ対応のデザインを作成しても、実際にスマホで表示した時には、PC用のデザインがそのまま縮小されて表示されるだけになってしまいます。

私が以前、全く同じ失敗をしています。

以下の1行をHTMLのheadに追記するだけなので、忘れない様に注意しましょう。

前述した通り、スマホの画面は小さく、横幅は極端に狭いものが多いです。
なので、PC用のサイトで横並びになっているコンテンツは全て、縦一列で表示できるようにデザインしましょう。

最悪、どうしても横並びにしたい内容が存在していた場合、スマホ画面の横幅に収まるのであれば、2列までならOK、くらい慎重に判断した方が良いです。

スマホの縦画面で、左右二分割されていたら、とても圧迫感があって見難いと思うので、横並びの表示は絶対にしないくらいの意気込みで作成するのが良いと思います。

サイズ調整は特に重要で、「見易さ」と「操作し易さ」の2つの点を意識してサイズ調整を行う必要があります。

例えば、スマホ用のデザインの場合、ハイパーリンクやボタンが小さすぎて押せない、タップするのにわざわざ画面拡大してボタンを押さなければいけない事態になる事もありえます。

私が作成したサイトではありませんが、プライベートでそういったサイトの閲覧に当たってしまい、苦労した経験があります。

サイトの訪問者に、ストレスなく閲覧してもらうためにも、サイズ調整には注意して作成していきましょう。

というわけで、スマホ用サイトを作成する上で注意するポイントを紹介してみました。

今回のまとめはこちら。

スマホで見る事、操作する事の2つの始点から考える事で、ユーザーにとって優しいデザインを作成する事が出来るようになると思います。

今回は以上です。
次回もよろしくお願いします。