はじめに

あなたは今、この記事をスマホから読んでいますか？

それともパソコン？はたまたタブレット、いや、もっと違うデバイスかもしれませんね。

今回のテーマは、レスポンシブデザインと、リキッドレイアウトです。

この記事を最後まで読んでいただけれは、ウェブサイト制作に欠かせないデザインは、誰に、どのデバイスから、どのような感想をもって見てもらうかという”目的”の設定が大切なのだということが分かっていただけるかと思います。

ウェブサイト制作を考えている方、ウェブサイトのリニューアルを考えている方に少しでもお役に立てればと思います。 

サイトを見てほしいなら、レスポンシブデザインに！

レスポンシブデザインとは何でしょう。はじめてサイトを持とう！と思っている人でなければ、耳にしたことがあるかもしれませんね。あなたも、またはあなたの周りの人も8割の人が持っているであろうスマートフォン。スマートフォンが普及し始めたことがきっかけで開発されたデザインです。

レスポンシブウェブデザイン

ユーザーのデバイス（パソコン、タブレット、モバイル、非視覚的ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しますが、
画面サイズに応じて（つまり「レスポンシブ」に）レンダリングを変えることができます。

https://developers.google.com/search/mobile-sites/mobile-seo/?hl=ja#select-config

このように、 開発者側の手間を少なくするために生まれました。
なぜなら、ＨＴＭＬ（サイトを構築するコード）をデバイスの数だけ作ると、管理が大変になるからです。

［レスポンシブレイアウトについて］

作成時の話になってしまいますが、レスポンシブレイアウトは”ターニングポイント”という一定の幅を決めて作成します。スマホは640pxまたは750px、タブレットは1024px、そしてPCは1290px。大体はこの3つの画面サイズをターニングポイントとして、640px以下はこのレイアウト、1024px以下はこのレイアウト、というように細かく設定します。

メリット

• デザインを適応させるデバイス（画面サイズ）をあらかじめ決めておいて、その数だけレイアウトを変えられる。

• 各デバイスごとに、表示したいものそうでないものを自由に表現できる。要素の表示非表示。

デメリット

• 構築に時間と知恵が必要なので、作業が増え、管理が大変

［リキッドレイアウトについて］

リキッドレイアウトは、ウインドウの幅に合わせてデザインを対応させる手法です。例えばPCで見てもスマホで見ても、コンテンツの幅や写真などの画像幅は変化しますが、位置などレイアウトは変わりません。レスポンシブレイアウトではターニングポイントごとにレイアウトを決めますが、リキッドレイアウトではコンテンツの幅を％で設定することにより、デバイス幅に対して相対的に表示されます。

メリット

• どんな画面サイズのデバイスにも、ほぼ同じレイアウトを適応できるデザイン手法。

• 様々なデバイスが登場してきているので、ユーザーにも優しく時代にあったレイアウト手法であると言える。

デメリット

• あまりにも小さいデバイスだと文章や画像が縦長になってしまって、読みにくかったり見にくくなる。
  ↓下の画像でも、スマートフォンの表示は縦長で、横書きの文章がここに入ると…とても見にくくなってしまいそうですよね。

デザイン最優先でサイトを作ると起こる悲劇、大切なのは”目的”

1.　「カッコイイ」「きれい」がデザインの目的？

サイトを作りたい、リニューアルさせたいと考えた時、一番初めに頭に浮かんだ言葉は何でしょうか？

『どんなデザインにしよう』『お金はいくらかかるだろう』

こういう言葉が浮かんだら、ちょっと待ってみてください。

デザインがテーマの記事でこのようなことを言うことは相応しくないかもしれません。しかし、デザインを最優先でサイトを作ることはオススメしません。

ウェブサイト制作では、漠然とした理由や、表面的な理由ではなくまずはなぜ作るのかという目的があるはずです。例えば、「売上をもっと伸ばしたい」「問い合わせを増やしたい」…など。デザインのための目的ではなく、目的のためのデザイン。目的のためにカッコいいサイトや綺麗なサイトがあります。

また、制作した後に、サイトをどのように運営していくのかも重要です。それこそ、目的がないと出来ませんよね。そのためにヒヤリングをじっくり行うことは欠かせません。

2.　ヒヤリングが大事。”目的 ＞ デザイン”

ヒヤリングは、「目的」から一緒に考えてそれを共有し実現するための要です。例えば、

• ターゲット「40代の男性」

デザイン　→　ターゲットの年齢を詳細まで明確にすることで、ウケのいい配色なども全く異なる

• ターゲットにとって利用する価値のあるウェブサイトとは？

デザイン　→　ウェブサイトを訪れた結果どう感じてほしいか、どう思われたいかを考える。

これはごく一例で、とても簡単にしていますが、デザインには必ず目的があるのです。

リキッドレイアウトの利点を活かすウェブサイト制作の「目的」は？

ウェブページ制作は、目的ありきだと前述しました。さて、ここからが本題です。リキッドレイアウトにマッチする目的にはどんなものがあるのでしょう？ここからは、「目的」と「どんな印象を与えたいか」を例に挙げて、見ていきましょう。

滞在時間を増やしたい

→画像を沢山盛り込む　または　余白を多くとり大きめの画像をゆったり並べる

画面サイズ（デバイスサイズ）は縦の長さよりも横幅の変動大きい。よってゆったりと写真や絵、文字をを並べても、リキッドレイアウトにすることでどのデバイスでもレイアウトを崩さずに表示することができます。文字ばかりのウェブサイトより、画像がが盛りだくさんのサイトは滞在時間が伸びます。また、余白を上手に使うことも、サイトの滞在時間が伸ばす手段の一つです。

ブランディング施策

→第一印象をデバイスに左右させない

コーポレートサイトをお考えの方に多いご要望なのではないでしょうか。コーポレートサイトは企業の顔、しかも情報は社内外へ向けて発信されます。会社の事業内容はもちろん、ビジョンやそのブランドイメージを第一印象で伝えなければなりません。もし見る人によってその印象が変わるようなことがあれば、それはデザインのミス。

そんなミスを無くすお手伝いをしてくれるのが、リキッドレイアウトです。

一目で印象に残したい

→ユーザーにインパクトを与えよう！

インパクトの大きいサイトは大胆なデザインが多いなと感じます。インパクトがないサイトは、直帰率が高くなります。確かにレスポンシブレイアウトでも、大胆なデザインは可能ですが、リキッドレイアウトにすることにより画像の幅がデバイスごとに伸び縮みするので、同じレイアウトでユーザーの心を掴めます。

レスポンシブ対応にすることで、PCだけでなくどのデバイスでもユーザーに見やすくなるため、「SEO対策」には必須です。検索エンジン対策が必要だという目的がある方で、まだウェブサイトをレスポンシブ対応してない！なら、ぜひ紹介したレイアウトを取り入れてみましょう！

まとめ

結論としては、目的に合わせてリキッドレイアウトにするとよいでしょう。

実は、ほどんとのサイトは、何か一つのレイアウトのみを採用して作られてはいません。つまり、ミックスされています。「レスポンシブレイアウトだけ」「リキッドレイアウトだけ」ではなく、目的に合わせてレイアウトを選びましょう。

ただ、今後どんなデバイスが登場するのかわかりません。レスポンシブレイアウトは、デバイスごとのターニングポイントを設定しなくてはいけませんでしたね？リキッドレイアウトは、％でデバイスに対して相対的に画像幅を調整して、その画面サイズに合わせて表示してくれます。リキッドデザインを中心にデザインをするほうが、時代の流れに適しているのではと考えています。

ウェブページ制作、ウェブページのリニューアルには、ぜひリキッドレイアウトを取り入れてみませんか？

[なんとなく作ってない？]ホームページを作る意味と重要性！

https://myajo.net/tips/3541/

レスポンシブデザインとリキッドデザイン！違いとメリット・デメリット

https://myajo.net/tips/2473/