図解!スマホが出る前に作成したHTMLサイトをレスポンシブデザインに3日間で対応した私の方法を解説!【Googleが遂にスマホ対策を必須化に!】Googleは2015年4月21日以降、スマホ対策を行ってないホームページやブログの順位を下げる事を発表しました。スマホの検索結果での「順位を下げる」と公式に発表したので、これまでスマホ対策は考えていたものの、まだ対応しようか悩んでいた方たちがやっと重い腰を上げて本格的にスマートフォンサイトの作成を進めるようになりました。今まで何度か、スマホ対策は行ってみたものの実際、スマホサイトにしたら意外と直帰率、ページ滞在時間がかわる事もなく、逆に言うと、売り上げも増えたわけではないので全てのサイトやブログをスマホに対応するかは、正直言うと悩んでいたところもありました。name="viewport">のタグを指定してビューポートのみで対応するにしました」と言っていました。私自身も、新規で作成していたサイトやブログ以外は、同じようにビューポートタグで対応していたんです。それでもサイト全体の直帰率は70%台、ページの平均滞在時間も1〜2分台と、それなりの数字を出していました。言うものの、既に、Googleが「スマホ対策をしてないホームページやブログの順位はこれから下がる!」と発表したので、今までスマホ対策化をしてなかった人も、悩んでいた人も、やむ得ずスマホサイトの作成に取り掛かるようになりました。私の場合、現在、3種類のやり方でホームページやブログなどのWebメディアを運営して検索エンジンから集客を行っています。DreamweaverCS4など旧バージョンのホームページ作成ソフトを使ったサイト制作Sirius(シリウス:上位版)など、PCサイトとスマホサイトをそれぞれ別に作成WordpressにレスポンシブWebデザインに対応した賢威テンプレートを導入し有料ブログを作成2番目、3番目は今の時代に合ったサイト・ブログ作成法なんで、容易にスマホ対策が可能なんです。賢威は毎回新しくバージョンアップしてくれているので賢威6.2以降は、ボタン一つで簡単に変更が可能なんです。問題は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を使って作成していました。このサイトもそうです。このサイトをレスポンシブWebデザイン化するために、私が考えたのがDreamweaverをCSSにアップデートしてスマホに対応する方法とHHTML5とCSS3で、HTMLのコーディングを編集する方法この2つでした。最初は、Dreamweaverをアップデートする事も考えたのですが、最近のDreamweaverはクラウド化したソフト(現DreamweaverCC)を提供しており毎月2万円以上の月額課金制のサービスに変更してまい、そこまで多機能性を必要としない私にとっては、この選択肢はありえませんでした。今の時代、プロが活用するDreamweaver等ホームページ作成ソフトは、アフィリエイトなどネットビジネスはもちろん、小規模のビジネス展開をされている方にとっては、本当必要性があまりないです。実際、私も今は、ほとんどWordpressに賢威テンプレートを導入してブログで情報発信するか、あとは、Sirius(シリウス)などのサイト作成ソフトでホームページを作成しています。私が実際に行ったHTMLサイトをレスポンシブデザインに対応した方法は2番目のHTML5とCSS3を使った方法でした。私の場合、ある程度HTMLについては理解しているものCSSについては再度勉強をし直し、どのようにして昔のスタイルで作成したHTMLサイトをレスポンシブデザイン化するかを考えました。実際、今ままでのHTMLのコーディングと今現在の主流のHTML5とCSS3を使ったやり方は全く違うものでした。今まで私は、Dreamweaverを使い旧式のやり方でテーブル機能を用いてコンテンツ部分、サイドバー部分、フッター部分、ヘッダー部分を分けて作成していました。全て<div>コードで、それぞれの部分を分けCSSコードでデザイン化が主流。Lの3つのスタイルシートを作成し、横幅でデザインが変わるように設定し、主に、スマホ、タブレット、PCに対応するスタイルになっていました。レスポンシブWebデザインは、可変レイアウトが主流になっているらしく、画面(ビューポート)の横幅を3つのの範囲に分け、範囲ごとにデザインを切り変えるらしいです。デザインの切り替えには、JacaScriptを利用する方法もありますが、一番手軽に利用できるのがCSS3のメディアクエリ機能を利用する事。CSS3のメディアクエリ機能を利用する事で、画面の横幅に応じて応用する3つのスタイルシートを指定する事が出来るからです。難しいですかね?【たった3日でレスポンシブWebデザイン化した方法】HTMLについてあまり理解してない方にとっては難しく感じるかもしれませんが、HTML5とCSS3を使ったやり方も実は慣れてしまえば非常に簡単です。私が参照した本と、その本に含まれていたサンプルコーディングを活用すれば、ものの3日間程度でレスポンシブデザイン化する事が出来ました。下記のように、Googleのモバイルフレンドリーテストにも無事合格できました。(ほっ)もちろん、人それぞれ今までのHTMLコーディングの仕方は違うと思いますので一概に「短期間で出来る」とは言えないですが、それでもほとんどの場合は、ちょっとした手直しと私が参照した本と、その本に含まれているレスポンシブデザインのサンプルコード(HTML5とCSS3のコード)を適用すれば簡単に出来ると思います。上記の本には、サンプルコードが含まれている為、それをそのまま活用する事が出来ます。可変+固定の組み合わせによるレスポンシブWebデザインこれらのサンプルコードが含まれているので、それを、まだスマホ対策されていないHTMLコードに導入すれば良いだけです。このサンプルコードは凄いオススメです!!ただ、ちゃんと本を購入してHTML5とCSS3、そしてレスポンシブWebデザインの対応方法はそれなりに勉強してからサンプルコードを活用しないと、意味が分からないままHTMLコードを変更すると、ぐちゃぐちゃになっちゃいますよ。後、1つ注意点があります!それは、モバイルファーストの考え方を理解して、モバイルファーストに対応したレスポンシブWebデザインのサンプルコードを活用する事です。シェアツイート【初心者向け記事コンテンツ】パソコン初心者向け!ネットビジネス始め方kaigainet.com/step1.html初心者に1番おすすめのアフィリエイトとは?kaigainet.com/step2.html資産構築型で稼ぎ自由を手にする仕組みkaigainet.com/step3.htmlあなたのEメールアドレスを入力後『富田の無料メール講座に登録する』を押して下さい。注意!必ず、ちゃんと読まれるメールアドレスを入力して下さいね。メールで送るので!あなたのEメールアドレスを入力後『富田の無料メール講座に登録する』を押して下さい。注意!必ず、ちゃんと読まれるメールアドレスを入力して下さいね。富田たかのり大学生卒業後バイト生活をし2000年頃から、海外向けのネットビジネスを副業で開始!その後、起業しネット上に資産を構築し稼ぐ資産構築型の仕組みを確立し、日本国内でもアフィリエイトなど様々なビジネスを展開!また、ネットで稼いだお金をもとに土地を購入し駐車場運営も行う。