スマートフォン版のワイヤーフレームを作成しよう

PCとは画面幅が大きく異なる

今回のPC版は1280pxのフレームで作成しましたが、スマートフォンは画面幅が大きく異なります。今回の見本では、スマートフォン用のフレームを使用して作成します。PC版で横に並べていた要素を、そのまま縮小して配置すると、文字や画像が小さくなりすぎてしまいます。「小さくする」のではなく、「画面幅に合わせて組み直す」ことを意識しましょう。

レイアウトグリッドは2カラムにする

PC版では12カラムのレイアウトグリッドを使用しましたが、スマートフォン版では2カラムに変更します。左右には最低でも16px程度の余白を確保し、文字や画像が画面の端に近づきすぎないようにします。スマートフォンは表示領域が狭いため、複雑なカラム分けをするよりも、シンプルな構成を意識しましょう。

キービジュアルはスマートフォンに合う見せ方にする

PC版のキービジュアルは横長でしたが、スマートフォンでは画面幅が狭くなるため、同じ比率のままでは写真が小さく見えてしまうことがあります。スマートフォン版では、縦方向にも高さを持たせたキービジュアルにすると、写真を大きく見せることができます。

横並びの要素は1列に変更する

PC版ではMenuのカードを2列で配置しました。スマートフォンでは横幅が狭いため、基本的には1列に変更します。【PC版：2列】→【スマートフォン版：1列】PC版では横並びだったものを、スマートフォンでは縦並びにする。この考え方は、HTML/CSSでレスポンシブ対応をするときにもよく使います。

文字は極端に小さくしない

画面が小さくなったからといって、文字まで大幅に小さくする必要はありません。本文は、14px〜16px程度を目安にします。見出しは本文より大きく設定し、見出しと文章の違いが分かるようにしましょう。スマートフォンでは特に、「画面に収めるために文字を小さくする」のではなく、「読みやすさを保ったままレイアウトを変更する」ことが大切です。

セクション間の余白を調整する

About、Menu、Accessなど、それぞれのセクションの間には余白を入れます。

ただし、PC版と同じ大きな余白をそのまま使うと、スマートフォンではページが必要以上に縦長になることがあります。余白をなくすのではなく、画面サイズに合わせて調整することがポイントです。