レスポンシブデザイン5つのポイント

レスポンシブデザイン5つのポイント

Adobe XDやSketch, FigmaやFramer, inVision Studioなどなど、様々なデザインツールがある昨今では、PhotoshopでWebデザインをする機会は激減したように思います。
かくいう私も今はもっぱらAdobe XDを使っているのですが、XDが生まれる前はもちろんPhotoshopを使ってデザインしておりました。
今日はPhotoshopで利用できるAdobe stockのテンプレートを見て、レスポンシブページのパソコン版とスマホ版のデザインの変わり方、工夫を観察していきます。
すべて当たり前のことなのですが、今一度整理して見ていくと、単純ながらとても大事なポイントが浮き上がってきます。

こちらが今回見ていくテンプレート「シャスタのレスポンシブページレイアウト」。

1. メニュー周り

PC版では横並びで表示できる複数メニューですが、スマホでメニューを並べてしまうと画面が文字だらけになってしまいます。サイトタイトルだけ残し、残りはすべてハンバーガーメニューにしまい込んでいますね。
こちらはよく見るデザイン・仕様です。

2. 中央寄せから左寄せに

PC版では大きな太字でセンタリングされていた見出しは、スマホ版では左寄せになっています。海外のテンプレなので改行位置が若干不思議ですが、これは後続するコンテンツに合わせた変更です。俄然読みやすいですね。

3. 表示数は1つに

数が決まっていないコンテンツはカルーセルにして、決まった縦幅以上にはコンテンツを伸ばさないようにすることが多いですが、このときPCとスマホで表示数を変更するのも同時に行われます。こんなときのため、数字を変更するだけで表示数を変えられるスクリプトが便利ですね。

4. 横並びから縦並びへ

こちらもよくあるレイアウトです。このとき、テキスト部分が長文だとセンタリングより左寄せのほうが改行トラブルに強いので左寄せにするとします。すると、後続するボタンも左寄せにしないと何か気持ち悪い、では見出しはどうする……? と、結構悩ましい状態になります。よくあります。

5. フッター

とにかくすっきり収めたいPC版のフッターと違い、スマホではフッターの長さにはかなり寛容なイメージがあります。下手にすっきり短くまとめようとせず、縦幅が長くなろうがマージンをたっぷり取って見やすく配置したほうが綺麗に感じますね。


昔はスマホ版のデザインも作るとなれば見積もりがガッツリ変わってきたと記憶していますが、今はどうなんでしょう?

全人類みなスマホ時代の昨今やらざるをえないレスポンシブデザイン。要点をおさえてなるべくスピーディにスマートにデザインデータを作りたいものです。

それでは。

一覧へ戻る