スマホで見やすくて分かりやすいwebサイトとは？

”スマホ対応”のリニューアル案件が増えています。今日は、制作サイドとして気を付けている点をご紹介しますので参考にしてください。

★タップしやすいか

何といってもパソコンとの違いは「画面をタップして操作する」ことです。タップできると思ったのにタップできなかったり、タップできるところがどこなのかが瞬時で判断できなかったりでは困ります。
タップ可能な、リンクがはられているもの（ボタン、テキスト、アイコン）の色はなるべく統一するなどデザインを工夫しています。
また、スマホのディスプレイは小さいので、要素を詰め込み過ぎると、各セクションやパーツが小さくなりすぎて、タップミスに繋がります。行間、ボタン間のマージンをしっかりとらなければなりません。
Appleガイドラインには「タップのターゲット：コントロール要素は44×44ポイント以上の大きさで…」とあります。

★ターゲットユーザーに合わせて

たとえば、ヘッダー右上の三本線でメニューだと分かる人はどれくらいいるでしょうか。三本線の下にmenuと入れたほうが良いかもしれません。
タップすると詳細コンテンツが開く、いわゆる「アコーディオン」。「∨」と書いてあればタップしてもらえるでよしょうか。「詳細をみる」と書いておいたほうが良いでしょうか。
ターゲットユーザーに合わせた設計・デザインが大切です。

同じように、フォントサイズに注意を払う必要があります。弊社の場合、本文テキストのフォントサイズは14px未満にはしないようにしていますが（このサイトのフォントサイズは15px）、年齢層が高い場合は、16pxかまたはそれ以上にすることも多いです。