CATEGORY: トップページ >> インターネットビジネスでお金を稼ぐ方法 >> 図解!HTMLサイトをレスポンシブデザインに対応した方法

図解!スマホが出る前に作成したHTMLサイトをレスポンシブデザインに3日間で対応した私の方法を解説!

Responsvie Web Design

【Googleが遂にスマホ対策を必須化に!】

Googleは2015年4月21日以降、スマホ対策を行ってないホームページやブログの順位を下げる事を発表しました。

スマホの検索結果での「順位を下げる」と公式に発表したので、これまでスマホ対策は考えていたものの、まだ対応しようか悩んでいた方たちがやっと重い腰を上げて本格的にスマートフォンサイトの作成を進めるようになりました。

事実、私もその一人。

 

今まで何度か、スマホ対策は行ってみたものの実際、スマホサイトにしたら意外と直帰率、ページ滞在時間がかわる事もなく、逆に言うと、売り上げも増えたわけではないので全てのサイトやブログをスマホに対応するかは、正直言うと悩んでいたところもありました。

事実、私の知り合いのスーパーアフィリエイターの方でクレジットカードアフィリエイト等をされてる方も打ち合わせで、「スマホサイトにしたら逆に売り上げが伸びる事はなく下がったので、PCサイトに<Meta name="viewport">のタグを指定してビューポートのみで対応するにしました」と言っていました。

HTMLコード

 

そして私自身も、新規で作成していたサイトやブログ以外は、同じようにビューポートタグで対応していたんです。

それでもサイト全体の直帰率は70%台、ページの平均滞在時間も1〜2分台と、それなりの数字を出していました。

直帰率+滞在時間

とは言うものの、既に、Googleが「スマホ対策をしてないホームページやブログの順位はこれから下がる!」と発表したので、今までスマホ対策化をしてなかった人も、悩んでいた人も、やむ得ずスマホサイトの作成に取り掛かるようになりました。

 

【スマホが出る前から作成していたホームページ】

私の場合、現在、3種類のやり方でホームページやブログなどのWebメディアを運営して検索エンジンから集客を行っています。

  1. DreamweaverCS4など旧バージョンのホームページ作成ソフトを使ったサイト制作
  2. Sirius(シリウス:上位版)など、PCサイトとスマホサイトをそれぞれ別に作成
  3. WordpressにレスポンシブWebデザインに対応した賢威テンプレートを導入し有料ブログを作成

2番目、3番目は今の時代に合ったサイト・ブログ作成法なんで、容易にスマホ対策が可能なんです。

例えば、賢威は毎回新しくバージョンアップしてくれているので賢威6.2以降は、ボタン一つで簡単に変更が可能なんです。

賢威テンプレートでレスポンシブWebデザイン化

 

ただ、問題は1番目の旧バージョンのホームページ作成ソフトで作成したHTMLサイトです。

これらのホームページは、スマホが出る前から作成したHTMLサイトで、コーディングも今の時代にそぐわないHTMLコードで作成されてしまったため、手直しが非常に大変という問題を抱えていたんです。

 

多分ですが、インターネットビジネスやアフィリエイト等のネットビジネスなどを昔から行っている人は、私と同じような気持ちの人も多いはず。

正直、HTMLサイトは変更するのは面倒・・・それに、PCサイトでも問題なく売り上げがあるし集客も問題なく安定している

 

ただ何度も言うように、Googleの発表により、もう、そんな事を言っている場合じゃなくなってしまったんですよね。

そこで、私が1番目の方法で作成したHTMLサイトをスマホ対策を行うために実践したのが、HTMLコードを一新してレスポンシブWebデザインに適用する事でした。

レスポンシブWebデザインでは、Googleが1番に推奨しているスマホ対策のやり方。(レスポンシブWebデザインとは?

 

基本的には、3つのやり方があって別に「レスポンシブWebデザインにしたから」と言って「順位が上がる」って事はないものの、今後、スマホ以外の端末がどんどん出てきたt場合、そして、それらの所有比率が均等になった場合を考えると、レスポンシブWebデザインに対応していた方がGoogleからの評価は高くなると思います。

これらは色々な端末に対応するべき

なぜなら・・・それぞれの端末で「見やすい・読みやすい」デザインの方が直帰率・ページの滞在時間などの数字が良くなるからです。

 

 

【HTML5とCSS3でレスポンシブWebデザインに】

さて私の場合、HTMLサイトは旧バージョンのDreamweaverMX、CS3、CS4を使って作成していました。

例えば、このサイトもそうです。

Dreaamwevaer CS4でサイトを作成していた

このサイトをレスポンシブWebデザイン化するために、私が考えたのが

この2つでした。

 

最初は、Dreamweaverをアップデートする事も考えたのですが、最近のDreamweaverはクラウド化したソフト(現DreamweaverCC)を提供しており毎月2万円以上の月額課金制のサービスに変更してまい、そこまで多機能性を必要としない私にとっては、この選択肢はありえませんでした。

今の時代、プロが活用するDreamweaver等ホームページ作成ソフトは、アフィリエイトなどネットビジネスはもちろん、小規模のビジネス展開をされている方にとっては、本当必要性があまりないです。

実際、私も今は、ほとんどWordpressに賢威テンプレートを導入してブログで情報発信するか、あとは、Sirius(シリウス)などのサイト作成ソフトでホームページを作成しています。

 

ですから、私が実際に行ったHTMLサイトをレスポンシブデザインに対応した方法は2番目のHTML5とCSS3を使った方法でした。

私の場合、ある程度HTMLについては理解しているものCSSについては再度勉強をし直し、どのようにして昔のスタイルで作成したHTMLサイトをレスポンシブデザイン化するかを考えました。

実際、今ままでのHTMLのコーディングと今現在の主流のHTML5とCSS3を使ったやり方は全く違うものでした。

 

例えば、今まで私は、Dreamweaverを使い旧式のやり方でテーブル機能を用いてコンテンツ部分、サイドバー部分、フッター部分、ヘッダー部分を分けて作成していました。

しかし、今の時代は違います。

全て<div>コードで、それぞれの部分を分けCSSコードでデザイン化が主流。

そして、S, M, Lの3つのスタイルシートを作成し、横幅でデザインが変わるように設定し、主に、スマホ、タブレット、PCに対応するスタイルになっていました。

3種類のスタイルシートでデザイン

レスポンシブWebデザインは、可変レイアウトが主流になっているらしく、画面(ビューポート)の横幅を3つのの範囲に分け、範囲ごとにデザインを切り変えるらしいです。

デザインの切り替えには、JacaScriptを利用する方法もありますが、一番手軽に利用できるのがCSS3のメディアクエリ機能を利用する事。

CSS3のメディアクエリ機能を利用する事で、画面の横幅に応じて応用する3つのスタイルシートを指定する事が出来るからです。

 

ちょっと難しいですかね?

 

【たった3日でレスポンシブWebデザイン化した方法】

HTMLについてあまり理解してない方にとっては難しく感じるかもしれませんが、HTML5とCSS3を使ったやり方も実は慣れてしまえば非常に簡単です。

また、私が参照した本と、その本に含まれていたサンプルコーディングを活用すれば、ものの3日間程度でレスポンシブデザイン化する事が出来ました

下記のように、Googleのモバイルフレンドリーテストにも無事合格できました。(ほっ)

モバイルフレンドリーテストにも合格!

もちろん、人それぞれ今までのHTMLコーディングの仕方は違うと思いますので一概に「短期間で出来る」とは言えないですが、それでもほとんどの場合は、ちょっとした手直しと私が参照した本と、その本に含まれているレスポンシブデザインのサンプルコード(HTML5とCSS3のコード)を適用すれば簡単に出来ると思います。

 

上記の本には、サンプルコードが含まれている為、それをそのまま活用する事が出来ます。

主に、本の中でも書かれている3つのレスポンシブWebデザイン方法

  1. 可変レイアウトによるレスポンシブWebデザイン化(私が活用した方法)
  2. 固定レイアウトによるレスポンシブWebデザイン化
  3. 可変+固定の組み合わせによるレスポンシブWebデザイン

レスポンシブWebデザインのサンプルコード

これらのサンプルコードが含まれているので、それを、まだスマホ対策されていないHTMLコードに導入すれば良いだけです。

このサンプルコードは凄いオススメです!!

 

ただ、ちゃんと本を購入してHTML5とCSS3、そしてレスポンシブWebデザインの対応方法はそれなりに勉強してからサンプルコードを活用しないと、意味が分からないままHTMLコードを変更すると、ぐちゃぐちゃになっちゃいますよ。

後、1つ注意点があります!

それは、モバイルファーストの考え方を理解して、モバイルファーストに対応したレスポンシブWebデザインのサンプルコードを活用する事です。

これについては、また次回の記事にて・・・

 

参考になったらSNSで共有してください


【初心者向けのおすすめ記事】

ネットビジネス初心者のイメージ画像

パソコン初心者向け!ネットビジネス始め方

kaigainet.com/step1.html

アフィリエイトサイトのイメージ画像

初心者に1番おすすめのアフィリエイトとは?

kaigainet.com/step2.html

資産構築型アフィリエイトのイメージ画像

資産構築型で稼ぎ自由を手にする仕組み

kaigainet.com/step3.html


ネットビジネスで稼ぐ為の秘訣を解説した無料メール講座

いますぐ無料で登録!期間限定ですのでお早めに!

あなたのEメールアドレスを入力後『富田の無料メール講座に登録する』を押して下さい。

Eメールにて、自由を手にする為に初心者がすべき事を解説した無料の特別レポートや動画・音声講座を定期的にお送りします!

※ 注意!必ず、ちゃんと読まれるメールアドレスを入力して下さいね。メールで送るので!

この無料レポートを読んだ方達のコメント


いますぐ無料で登録!期間限定ですのでお早めに!

あなたのEメールアドレスを入力後『富田の無料メール講座に登録する』を押して下さい。

Eメールにて、自由を手にする為に初心者がすべき事を解説した無料の特別レポートや動画・音声講座を定期的にお送りします!

※ 注意!必ず、ちゃんと読まれるメールアドレスを入力して下さいね。メールで送るので!