さまざまな画面サイズのデバイスがあることから、今ではレスポンシブデザインが当たり前になっています。ユーザーがデバイスに関係なくコンテンツを利用できるように、さまざまな環境でテストをしながらWebサイトをデザインする必要があります。
ほかのあらゆるWebデザイン同様、モバイルなどの小さな画面向けのデザインに対する考え方はさまざまです。しかし考え方の違いに関係なく、Webデザインに関わる者であれば知っておくべきレスポンシブデザインの基本があります。
次にWebサイトをデザインするときは、以下の点を踏まえてモバイル用にもカスタマイズしましょう。
リーダビリティとユーザビリティが最優先
デザイナーなら誰でも、どのデバイスでも美しく見えるデザインを目指します。しかしモバイルでは、凝りすぎたデザインは危険です。デスクトップ画面で魅力的に見える高度なレイアウトやビジュアルであっても、モバイルでは意味がないこともあります。
デザインは、必要に応じてシンプルにする必要があります。小さな画面で見て不恰好な要素があれば、取り除いたりもっと効果的な要素と交換するべきです。
モバイルでは、タイポグラフィのフォントサイズやコントラストも重要です。モバイル画面が高画質でも、長文を読むのはうんざりします。フォントサイズを適切な大きさにし、リーダビリティ（読みやすさ）が向上するような行間とマージンの設定を徹底してください。
デスクトップユーザーのユーザビリティに向けた取り組みは、良質なモバイル体験にも役立ちます。
画面サイズを有効活用する
Webサイトのいたるところでマルチカラムレイアウトを目にします。しかしモバイルなどの小さな画面では、文字量が多くなるこのレイアウトは適していません。小さな画面では、マルチカラムではなくシングルカラムが適しています。しかしタブレット画面やモバイルを横向きにした場合など中サイズの画面では、マルチカラムは効果的です。
使える画面サイズはすべて活用しましょう。私たちはよく、中サイズを考えず、最大・最小の画面サイズのデザインのみに集中します。しかし、たとえばタブレットとモバイルの画面は別ものとして考え、タブレット用に中サイズの画面デザインも考えるべきなのです。
CSS Flexboxを使えば、中サイズにも考慮した画面デザインを簡単に作ることができます。ここでは適切なCSSを設定すれば、各デバイスの表示サイズに適したレイアウトが自動的に表示されます。メディアクエリで若干の微調整は必要ですが、手間に見合うだけの利益が得られます。
デザイン要素をデスクトップと同じ場所に置かない
人々はすべてのデザイン要素を、モバイルとデスクトップで同じ場所に配置しがちです。一貫性を保つのは良いことですが、このアプローチは小さな画面では裏目に出ることもあります。
たとえば、多くのWebサイトは検索ボックスやSNSのアイコンをヘッダー内に置いています。これは大きな画面では良いのですが、モバイルではメインコンテンツの邪魔になります。特にユーザーがテキストを読みたいだけのページには必要ありません。
ヘッダーにデザイン要素を無理に押し込む以外にも、選択肢はいくつもあります。始めはコンテンツを表示せずに、ユーザーがボタンを押したら表示するデザインを考えましょう。モバイル用のナビゲーションメニューを作り、その中にコンテンツを組み込むやり方もあります。
サイドバーにも同じことが言えます。メインコンテンツ以外の要素はすべて隠しておくのがいいでしょう。メディアクエリ（またはそれ以外の条件分けコード）を使って、モバイル上でサイドバーを適切な場所に置くことができます。どの要素をどこに置くのがベストかは自身で判断しましょう。
モバイル専用の機能を追加する
レスポンシブデザインを考えるとき、モバイルユーザーが使いやすいように少し手を加えるのがいいかもしれません。さほど手間のかかる作業ではありませんが、ユーザビリティの改善にはおおいに効果があります。
モバイルのようなタッチスクリーン搭載のデバイスで閲覧すると、デスクトップでは生じない課題がいくつか見つかります。たとえばモバイルで、メインのナビゲーションメニューに戻るために長いページの下から上へスクロールするのは苦痛です。ユーザーが上へ向かってスクロールしたらナビゲーションを自動的に表示するデザインを使うことで、この苦痛をやわらげることができます。他にも、古き良き「ページ先頭に戻る」リンクを各ページの一番下に設置する方法もあります。
電話での問い合わせがあるページでは、クリックすればそのまま電話発信できるボタンは便利な機能です。その設置方法は伝統的な「電話をかける」ボタンでも、Webサイト内の電話番号をハイパーリンクにすることでもいいでしょう。
モバイルユーザーとのコミュニケーションに繋がることはすべて検討すべきです。
モバイルでも最高のユーザー体験を
レスポンシブデザインはきわめて強力なツールです。これを使えば（フィーチャーフォンでは無理だとしても）事実上すべてのデバイスで、最高の体験をユーザーに提供できます。しかしこれができるかはデザイナー次第です。
まずは、モバイルユーザーがWebサイトを簡単に閲覧して回れるようなナビゲーションを徹底しましょう。その後にWebサイトの見た目や機能のデザインを決めてください。ユーザーを喜ばせるほど彼らはWebサイトを何度も訪れ、さらには友人にもサイトを紹介してくれるでしょう。
