WEBサイト関連のお仕事を押されている方は知ってるはずの「レスポンシブデザイン」
PCやタブレット、そしてスマホなどのそれぞれのデバイスの画面サイズに適応したデザインを魅せることができるこの方法は、PCに限らず他端末がどんどん普及している今の時代には必要なものと言えます。
何よりも制作者側は修正や更新作業などがしやすいので、この手法を使いたい人も少なくないはずです。
そんなレスポンシブデザインをECサイトにぜひ利用したい!と考えている人もいることでしょう。
でもレスポンシブのデザインって、どういったことに気を付ければいいのでしょうか?
漠然とレスポンシブが良い!というのではなく、まずはレスポンシブの基本的な部分や注意ポイントなどを把握した上で自身のECサイトに合ったデザインを考えましょう。
そんなわけで今回は、レスポンシブデザインの基本とそのポイントをさっくりまとめてみたのでご紹介したいと思います!
レスポンシブな画像
メインビジュアルに工夫を
サイトを開いた時にまず一番最初に目に付くように配置されるメインビジュアル。
サイトの顔と言ってもいいくらい第一印象に影響するので最善の状態で全端末に表示させたいところですよね。多くみられるのは、やはり写真を大きく端から端に表示させる形だと思うのですが、果たしてその写真はどの画面サイズでも見栄えがいいものなのでしょうか?
例えば横長の写真で全端末の横幅いっぱいに表示させようとした場合、スマホでは結構小さなサイズになってしまいますよね。
その状態でも見栄えがよければ何も変更する必要はないのですが、何の画像か見にくくて意図が伝わらないのであれば魅せ方を変えるなり、端末別に写真を変更したりする必要があります。
使用したい写真が人物や物の単体だとしたら、ズームアップさせた状態を配置するというのもおしゃれでいいかもしれませんね!
CSSで実装できるところはCSSで、画像のファイルサイズは軽く
ECサイトやブログのような、運営しているとどんどん画像が増えていってしまうサイトは注意すべき点です。PCで見る分にはあまり感じないかもしれませんが、ネット環境の影響などでスマホなどの端末の場合、読み込み速度はPCと比べて落ちてしまいます。
そこでサイトに使用している画像の数が多いと、これもまた速度に影響してくるので、削れるものなら削りたい部分なのです。タイトルにもしましたが、この問題の対策は3つです。
- アイコンなどは画像を使わずWEBフォントを使用する。
- CSSで実装できそうなところは極力CSSで実装する。
- 画像はファイルサイズを軽くしてから載せる
WEBフォントは画像のように粗くなることがないなどのメリットもあるのでおすすめです。
画像のファイルサイズに関しては、検索したらたくさんツールが出てきますし、難しいことは何もないのでECサイトなどに限らずやった方が良いです。Wordpress使用者ならプラグインもあるので楽チンですね!
レスポンシブなレイアウト
レイアウトはあえて微調整程度にとどめる
そもそもレスポンシブに限らず、スマホやタブレットに適したサイトを作る理由はなんでしょうか?
不自由することなく各端末で自身のサイトを見れるようにするためですよね。
そこで別端末で見たときにサイトデザインやレイアウトが変わり過ぎていると、
「あら?別のサイトにきちゃったかしら?」
「さっきはここにナビがあったのに・・・」
など、迷子になってしまう恐れがあります。
ネットサーフィンに慣れている人ならあまり心配はいらないかもしれませんが、もし初心者だったら?
色んな場面を想定し、結果やはり端末によってデザインやレイアウトが変わり過ぎるのは、離脱率を上げてしまうことになりかねないので微調整程度にしておくのがベストだと思います。
カラム数を検討
上記ではレイアウトを微調整程度に、とお話ししましたが、カラム数に関しては増減調整が必要だと考えます。スマホなんかだと縦向きが主流ですし、横幅が狭くなるのでカラム数によっては窮屈になってしまいます。
後ほどまたお話しますが、スマホやタブレット端末では指を使った操作になるのでパーツなどが小さいと使いずらくなってしまいます。
カラム数を検討し、減らすなり、維持するなら幅や文字サイズなどを調整するなどをして各端末に合った構成にすることが必要です。そうすることでユーザビリティも向上し、見やすく使いやすいサイトの仲間入りもできるのではないでしょうか!
ナビゲーション問題
ナビのデザインは様々ですが、例えばPCのような横にずらーっと並ぶ型のナビをスマホでも使用したらどうでしょうか?
スマホサイズだと各ボタンが小さくなりすぎて、タップすると自分が意図としないものを押してしまったりしてイライラしちゃいますよね。
他の端末でもサイトを見れるようにするのならば、ナビは魅せ方を変える必要があります。
よくみるのが画面サイズが一定以上小さくなると、アイコンがナビの代わりに表示され、ナビボタンをすべてアイコンの中に隠してしまうパターン。
アイコンをタップすればナビがじゃららっと縦並びに表示され、もう一度タップすれば非表示になるので、スペースを気兼ねなく使えます。
他にもコンテンツをとにかく見てほしいから!という意図からなのか、サイトを開いたときのファーストビューがメインビジュアルなのではなくナビだというパターンもあります。
やり方はたくさんあります。ただまず頭に置いておかなければいけないのは、わかりやすさ・見やすさ・(クリック・タップの)押しやすさということです。
レスポンシブなサイズ感
タッチパネルに適したサイズ感
チラホラと上記で触れているのでもうお分かりかと思いますが、タブレットやスマホではマウスでクリック・・・ではなくフィンガーでタップです。マウスでならテキストリンクも簡単に押せていましたが、指でそれを押すとなると厳しいところがあります。
どの端末でも快適にサイト閲覧をしてもらうためには、やはりユーザビリティを上げることが必要となってきます。この場合、テキストリンクではなくボタンの形にし、更にボタンのサイズもやや大きめを意識してデザインするとタップしやすくなります。
それぞれに端末サイズに合ったフォントサイズを
お次は文字サイズです。
端末によっては、PCの設定をそのまま移行すると小さすぎたり大きすぎたりしてお世辞にも見やすいとは言えない結果になってしまうこともあります。
端末に合ったフォントサイズに変更する、ただそれだけなのです。
当たり前のことですが小さい画面だから文字も小さく!という調節の仕方をするとユーザビリティどころじゃなくなるので、常に見やすさを意識するようにしましょう。
縦と横向きの見栄えを考える
サイト全体をデザインする時に言えることですが、PCは横向きでもスマホは基本縦向きです。
タブレットはどっちでもいけますが、どっちでもいけるということはどっちも考慮しなければならないということです。
常に調節して、動作確認して、調節して、また確認してと繰り返しながら良くしていくしかありませんが、やはりサイトは見るものです。自分の目で見て、閲覧していて居心地のいいサイトになるよう調節していきましょう。
レスポンシブな動作
時には効果的だったものも不必要になる
これはサイズ問題とも言えますね。
例えば、PCサイトではアニメーションや動画などを使用していた場合ですが、ネット環境やサイズ感などからみてあまりスマホには適しているとは言えません。
PCではインパクトを与えることができる上に、コンテンツにあれば文字だけでは説明しきれない部分を補える利点はありますが、閲覧者の環境に適していなければその利点は欠点になりかねません。これは挿絵や装飾などの画像類にも言えることです。
せっかく何かを補助するためにあるものでも、小さすぎでわかりずらくなってしまっていたりすると本来の意味がなくなってしまい、悪く言えば邪魔になってしまいます。
閲覧者にとって邪魔な存在になり、サイト全体に対してネガティブな印象を持たれてしまう前に、端末によって時には「排除する」ということも頭に入れておきましょう。
よかれと思ってやったことが実は逆効果に、なんて悲しすぎますからね!
ヘッダー固定は利便性が高い
端末によらず、ヘッダーが常に上にある状態は便利ですよね。
特にPC以外のタップなどをして操作をする端末の場合は、PCに比べてスクロールが面倒に感じることがあります。ちょっとのスクロールならいいのですが、ブログ記事やECサイトの商品詳細ページだったりすると、ページの先頭へ戻るボタンがないサイトは少し面倒に感じてしまいます。
そんな時ヘッダーがページ上部に常にある状態だったら、すぐにナビを開いて別コンテンツに行けるし、TOPに簡単に戻ることもできちゃいます。サイト名も常に視界に入るので、覚えてもらいやすいかもしれません。どの端末ユーザーにも優しいのでおすすめです。
最後に
以上、レスポンシブデザインの基本やポイントをさっくりご紹介してきましたがいかがでしたでしょうか?
個人的な意見も含まれていますが、実際自分の目でサイトを見て感じることは、世界規模で考えれば同じような気持ちの人は数え切れないほどいるはずです。レスポンシブに限らず、サイト制作を行う際はできるだけいろんな人にサイトを見てもらって意見をもらいましょう。
せっかく端末によっての変更がある程度できるので、タップやスワイプ操作を活用した動作を取り入れてみると画期的でいいかもしれませんね!デザインやレイアウトを大きく変えるのはあまり推薦しませんが!
現に、マウス操作でスクロールするのは縦方向で良いですが、スマホの操作の場合は横方向にスワイプするコンテンツ移動を好む人が多いという研究結果も出てるそうですよ!
参照元:https://www.nngroup.com/articles/horizontal-scrolling/
レスポンシブを利用してよりわかりやすく見やすい、そして使いやすいサイトを作るために、今回の記事をぜひ参考にしてもらえたらと思います!
ではこのへんで・・・みっしぇるでした!