一目で印象に残したいまとめはじめにあなたは今、この記事をスマホから読んでいますか?それともパソコン?はたまたタブレット、いや、もっと違うデバイスかもしれませんね。今回のテーマは、レスポンシブデザインと、リキッドレイアウトです。この記事を最後まで読んでいただけれは、ウェブサイト制作に欠かせないデザインは、誰に、どのデバイスから、どのような感想をもって見てもらうかという”目的”の設定が大切なのだということが分かっていただけるかと思います。ウェブサイト制作を考えている方、ウェブサイトのリニューアルを考えている方に少しでもお役に立てればと思います。サイトを見てほしいなら、レスポンシブデザインに!レスポンシブデザインとは何でしょう。サイトを持とう!と思っている人でなければ、耳にしたことがあるかもしれませんね。あなたも、またはあなたの周りの人も8割の人が持っているであろうスマートフォン。スマートフォンが普及し始めたことがきっかけで開発されたデザインです。画面サイズに応じて(つまり「レスポンシブ」に)レンダリングを変えることができます。開発者側の手間を少なくするために生まれました。HTML(サイトを構築するコード)をデバイスの数だけ作ると、管理が大変になるからです。[レスポンシブレイアウトについて]作成時の話になってしまいますが、レスポンシブレイアウトは”ターニングポイント”という一定の幅を決めて作成します。スマホは640pxまたは750px、タブレットは1024px、そしてPCは1290px。大体はこの3つの画面サイズをターニングポイントとして、640px以下はこのレイアウト、1024px以下はこのレイアウト、というように細かく設定します。メリットデザインを適応させるデバイス(画面サイズ)をあらかじめ決めておいて、その数だけレイアウトを変えられる。各デバイスごとに、表示したいものそうでないものを自由に表現できる。デメリット構築に時間と知恵が必要なので、作業が増え、管理が大変https://www.opera-net.jp/[リキッドレイアウトについて]リキッドレイアウトは、ウインドウの幅に合わせてデザインを対応させる手法です。PCで見てもスマホで見ても、コンテンツの幅や写真などの画像幅は変化しますが、位置などレイアウトは変わりません。レスポンシブレイアウトではターニングポイントごとにレイアウトを決めますが、リキッドレイアウトではコンテンツの幅を%で設定することにより、デバイス幅に対して相対的に表示されます。メリットどんな画面サイズのデバイスにも、ほぼ同じレイアウトを適応できるデザイン手法。様々なデバイスが登場してきているので、ユーザーにも優しく時代にあったレイアウト手法であると言える。デメリットあまりにも小さいデバイスだと文章や画像が縦長になってしまって、読みにくかったり見にくくなる。↓下の画像でも、スマートフォンの表示は縦長で、横書きの文章がここに入ると...とても見にくくなってしまいそうですよね。「カッコイイ」「きれい」がデザインの目的?サイトを作りたい、リニューアルさせたいと考えた時、一番初めに頭に浮かんだ言葉は何でしょうか?『どんなデザインにしよう』『お金はいくらかかるだろう』こういう言葉が浮かんだら、ちょっと待ってみてください。デザインがテーマの記事でこのようなことを言うことは相応しくないかもしれません。デザインを最優先でサイトを作ることはオススメしません。ウェブサイト制作では、漠然とした理由や、表面的な理由ではなくまずはなぜ作るのかという目的があるはずです。「売上をもっと伸ばしたい」「問い合わせを増やしたい」...など。デザインのための目的ではなく、目的のためのデザイン。目的のためにカッコいいサイトや綺麗なサイトがあります。制作した後に、サイトをどのように運営していくのかも重要です。それこそ、目的がないと出来ませんよね。そのためにヒヤリングをじっくり行うことは欠かせません。デザイン”ヒヤリングは、「目的」から一緒に考えてそれを共有し実現するための要です。ウェブサイトを訪れた結果どう感じてほしいか、どう思われたいかを考える。これはごく一例で、とても簡単にしていますが、デザインには必ず目的があるのです。リキッドレイアウトの利点を活かすウェブサイト制作の「目的」は?ウェブページ制作は、目的ありきだと前述しました。リキッドレイアウトにマッチする目的にはどんなものがあるのでしょう?ここからは、「目的」と「どんな印象を与えたいか」を例に挙げて、見ていきましょう。余白を多くとり大きめの画像をゆったり並べるhttp://www.rmd.co.jp/画面サイズ(デバイスサイズ)は縦の長さよりも横幅の変動大きい。よってゆったりと写真や絵、文字をを並べても、リキッドレイアウトにすることでどのデバイスでもレイアウトを崩さずに表示することができます。文字ばかりのウェブサイトより、画像がが盛りだくさんのサイトは滞在時間が伸びます。余白を上手に使うことも、サイトの滞在時間が伸ばす手段の一つです。→第一印象をデバイスに左右させないhttps://asmobius.co.jp/コーポレートサイトをお考えの方に多いご要望なのではないでしょうか。コーポレートサイトは企業の顔、しかも情報は社内外へ向けて発信されます。会社の事業内容はもちろん、ビジョンやそのブランドイメージを第一印象で伝えなければなりません。見る人によってその印象が変わるようなことがあれば、それはデザインのミス。そんなミスを無くすお手伝いをしてくれるのが、リキッドレイアウトです。一目で印象に残したい→ユーザーにインパクトを与えよう!https://brands.onisi.jp/インパクトの大きいサイトは大胆なデザインが多いなと感じます。インパクトがないサイトは、直帰率が高くなります。確かにレスポンシブレイアウトでも、大胆なデザインは可能ですが、リキッドレイアウトにすることにより画像の幅がデバイスごとに伸び縮みするので、同じレイアウトでユーザーの心を掴めます。レスポンシブ対応にすることで、PCだけでなくどのデバイスでもユーザーに見やすくなるため、「SEO対策」には必須です。検索エンジン対策が必要だという目的がある方で、まだウェブサイトをレスポンシブ対応してない!なら、ぜひ紹介したレイアウトを取り入れてみましょう!まとめ結論としては、目的に合わせてリキッドレイアウトにするとよいでしょう。実は、ほどんとのサイトは、何か一つのレイアウトのみを採用して作られてはいません。ミックスされています。「レスポンシブレイアウトだけ」「リキッドレイアウトだけ」ではなく、目的に合わせてレイアウトを選びましょう。今後どんなデバイスが登場するのかわかりません。レスポンシブレイアウトは、デバイスごとのターニングポイントを設定しなくてはいけませんでしたね?リキッドレイアウトは、%でデバイスに対して相対的に画像幅を調整して、その画面サイズに合わせて表示してくれます。リキッドデザインを中心にデザインをするほうが、時代の流れに適しているのではと考えています。「本当にウェブサイトって必要?」とご不安に思われることが多々あるかと存じます。お気軽にお問い合わせください。9:00-18:00会社案内ダウンロード会社案内のPDFをご用意しております。お問い合わせをするメールフォームからのお問い合わせはこちらから。含め、お気軽にご相談下さい。ラーラぱどプラスiPhone修理.jpMAP。