Webサイト制作で重要なこと①レスポンシブ対応

PCもスマホも！HP制作に欠かせないレスポンシブ対応とは…

HP制作において、スマホが普及する前は、関係のないことでしたが…
今の時代は、レスポンシブ対応になっているかどうかは、SEOの観点からも非常に重要になっています。

レスポンシブ対応とは、どういうことか。
『スマホでも見やすく、わかりやすいサイトになっているかどうか』
ということです。

昔制作したサイトをスマホで見ると…

枠から文字が飛び出したり
画像が極端に小さくなったり
デザインが崩れたり
画面の幅が合わなかったり
PCと同じ画面だけど…全てが縮小されて表示される。

などなど。

これでは、サイトに訪れた人もすぐに離脱、
Googleのクローラーもコードから判断して、そういうサイトの評価を下げていきます。

SEO対策としては、マイナスなことばかりなんです。
今回は、
そんなレスポンシブ対応について、どうやって設定していけばいいのかお話します。

HPをレスポンシブ対応にするには…

HP制作において、レスポンシブ対応にすることが一番大変かもしれません。
と言っても、今は、それらを設定する必要はないようになっていますが…

それはあとで紹介します。

では、早速レスポンシブ対応にするためのコードを紹介します。
記述は、stylesheetファイルにします。


@media screen and (max-width: 980px)
{
 この幅の時のデザインを指定
}

@media screen and (max-width: 980px)

{

この幅の時のデザインを指定

}

これは…
◇()内に記載の【max-width:980px(数字は幅によって変わる)】は、画面サイズの最大値が980pxのメディアを指定し
◇{}内に記載の任意コードは、その画面幅の時で表示したいデザインを指定する
という意味です。

でも、980px以下のメディアというと…
ipad
スマホ
ガラケー
とまだ、細分化しなければいけないことはわかりますよね。
と言っても、だいたい決まっています。

980px
736px
480px

最近では、大画面(1900px)のPCも出てきているので、max-width:1330pxでの設定も必要かもしれませんネ。

でも、正直めんどくさいですよね(苦笑)

フレームワークを活用してレスポンシブ対応に

時代は止まることなく進んでいきます。
以前は、上記のように細かい設定をしていたそうですが…

今では、すでにレスポンシブ対応のフレームワークが準備されています。
代表的なのは、ワードプレスのテーマ開発にも活用されている【Bootstrap】。
Bootstrapサムネイル

<head></head>内に

を貼り付けます。

ただ！
これは、すべてBootstrapで制作する時に使用しますが…
初心者にとって、Bootstrapを活用してHP制作をするのも結構大変なんです。

挑戦したい人は、コチラのYoutube動画がとても参考になりますので、見てみて下さい。

私がおすすめしたいのは、すでに出来上がっているものを活用する、ということです。
邪道と言われるかもしれませんが…

HTML5UPという画期的なサービス

HTML5UPには、豊富なレスポンシブ対応のテンプレートが準備されています。
すべて無料でそれらを使用することができます。

✅どのコードがサイトのどの部分に対応しているのか。
✅どんなコードを書くと、どんなデザインになるのか。
✅自分の知らなかったコードの学習

など参考書としての役割も。
そして、それらがわかると自分の作りたいサイトデザインだって簡単に作れるようになります。

条件は、１つ。
HP内に、【Design: HTML5 UP.】の記述を残すことです。
（提供されるファイルに記載済。削除しないようにして下さい。）
簡単に言うと、宣伝です♪

有料プラン（PIXELARITYというサービスに移行）にすると…html5upのライセンスを記述しなくてもOKになります。
※くれぐれも無料プランでライセンスを消すことはやめましょう。
訴えられますよ！

これなら各種レスポンシブ対応も設定済なので、面倒な手間も省けます。
他にもテンプレートを提供するサイトはあるのですが…
個人的にはコチラのサイトが一番使い勝手が良かったので、紹介させて頂きました。

他にも見てみたい方は…
【レスポンシブ対応　テンプレート　無料】
で検索すると多くのサイトがヒットしますので、閲覧してみて下さい。

HP制作するなら…完成したサイトから取り組むのもあり？

パソコンに興味をもった人が、最初にやることと言えば、
『PCの分解、再構築』
ですね。

そして、
・競合よりもアップスペックの商品開発をする時、
・特許商品の内部を調べる時、
元となる製品を分解することから始めるそうです。

完成した商品は、時として最高の参考書になります。
それは、HP制作でも、システム開発でも同じです。

せっかくそれらを無料で公開しているのですから、活用しない手はないですよね。

武道には、「見取り稽古」というものがあります。
『見て学べ（真似べ）』
ということです。

あなたの学習速度を速める為にも。
真似ることは、悪いことではなく学習であり手段です。

早速HPのコードを覗いてみましょう☆彡
では。