Design

【サンプルコード有】レスポンシブデザインとは?概要から方法までをご紹介します!

レスポンシブデザイン
Pocket

こんにちは、うらけんです。

今回のテーマは「レスポンシブデザイン」についてです。

web制作を行う際に、必ずと言っていいほど、つきまとってくるのがレスポンシブデザインです。

しかし、駆け出しwebデザイナーにとっては、「レスポンシブデザインはなんとなく難しそう」と感じる方は意外と多いかと思います。

実際に、この「なんとなく難しいそう」という感覚は、過去に私自身も感じていたのでよくわかります。

しかし、やってみるとわかりますが、レスポンシブデザインは驚くほどカンタンなのです。

実際にレスポンシブデザインのできるコードも載せているので、ぜひ活用してみてください。

先にやり方に関しては記しておきますが、実は、かなりシンプルにできます。

詳しい手順は以下のツイートをご覧ください。

レスポンシブデザインとは

レスポンシブデザインとは、デバイスごとに画面を最適化することを指します。

例えば、パソコンの画面用にデザインをしたり、スマホの画面用にデザインしたりすることです。

これをすることで、スマホならスマホの画面のまま、タブレットならタブレットの画面のまま、コンテンツを見ることができます。

逆に、レスポンシブデザインがされていないと、パソコンの画面の大きさをスマホで見なければなりません。

経験がある方もいるかもしれませんが、レスポンシブデザインをされてないコンテンツを見るのは、なかなか面倒なことが多いです。

まだ、レスポンシブデザインに対応していないのであれば、早急に対応しておいた方が良いです。

レスポンシブデザインを行うメリットとデメリット

本項目では、レスポンシブデザインをするメリットとデメリットについてご紹介していきます。

デメリット:スキルが必要

デメリットとしては、スキルが必要ということが挙げられます。

具体的には、HTMLとCSSの知識が必要です。

ただ、この2つの知識に関して、少しでも知識があるならば、割とサクサクできるのでチャレンジしてみるのもアリです。

詳しいやり方に関しては、下記に記しているので、参考にしてみてください。

デメリット:外注費がかかる

スキルがない場合、代表的な方法として、外注があります。

ただ、レスポンシブデザインは簡単なのですが、割と費用がかかります。

クラウドソーシングでも2〜5万円くらいが相場です。

もし、「クラウドソーシングでも高いなぁ」と思った方は、お問い合わせからご連絡をいただけると今だけ1万円でやらせていただきます。

レスポンシブデザインのお問い合わせはこちらから!

メリット:コンテンツを見てもらいやすい

1つ目のメリットは、コンテンツを見てもらいやすいことです。

上記でも書きましたが、パソコンの画面用をスマホで見るととても見にくいです。

実際に、レスポンシブデザインがされてないサイトの多くは離脱率がかなり高いです。

逆に、レスポンシブデザインをしていれば、コンテンツは読まれやすくなるので、やらない手はないです。

メリット:上位表示されやすくなる

2つ目のメリットとしては、上位表示されやすくなります。

レスポンシブデザインはGoogleも推奨しているため、レスポンシブデザインを行うことで上位表示されやすくなります。

実際に、GRCという順位計測ツールでは、PC用の順位とスマホ用の順位があります。

このことからも、レスポンシブデザインの重要性はうかがうことができます。

メリット:管理がカンタン

3つ目のメリットとして、管理がカンタンです。

レスポンシブデザインは一回すれば、ほぼ永久的にやらなくていいので、管理が楽です。

また、cssという言語でレスポンシブデザインは行うため、知識が少しあればできる分野であることも特徴の1つです。

レスポンシブデザインを作る方法がこちら

最後に、レスポンシブデザインを作る方法をご紹介します。

デメリットでスキルが必要と言いましたが、ある程度HTMLやCSSの知識がある方ならば、サクッとできます。

上記の通常・タブレット用・スマホ用にそれぞれのデザインをするだけです。

確認するには、Google Chromeの右上のメニューを押して、ディベロッパーツールから各サイズごとに適切なデザインができているかを確認できるので、ぜひ活用してみてください。

コードはこちら。

/* スマホ用 */

/* タブレット用 */
@media (min-width: 600px) {
}

/* それ以外 */
@media (min-width: 800px) {
}

ABOUT ME
ウラケン
ウラケン
サラリーマンとWebデザイナーの二足のわらじを履いてます。「独学でWebデザイナーになれた方法」・「Webデザイナーの方に便利な情報」に発信しています。
Webデザインの詳細ページ
Pocket

Webデザイン_フロー Webデザイン