トップページ >>ネットビジネス>>図解！レスポンシブウェブデザインの作り方（HTMLサイトとWordpressブログ）

図解！レスポンシブウェブデザインの作り方。

HTMLサイトとWordpressブログ、それぞれのやり方を解説！

Responsvie Web Design

HTMLサイトのホームページとWordpressブログ

私の場合、現在、２種類のWebメディアを運営して検索エンジン等から集客を行っています。

Dreamweaverなどホームページ作成ソフトを使ったHTMLサイト
Wordpressを使った有料ブログ

2番目は今の時代に合った作成法なんで、容易にスマホ対策が可能なんです。

例えば、賢威は毎回新しくバージョンアップしてくれているので、ボタン一つでレスポンシブウェブデザインに簡単に変更が可能です。

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

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

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

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

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

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

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

今後、スマホ以外の端末がどんどん出てきたt場合、そして、それらの所有比率が均等になった場合を考えると、レスポンシブWebデザインに対応していた方がGoogleからの評価は絶対に高くなります。

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

図で説明すると、これまでのウェブデザインは、こんな感じです↓↓

　今までのWebdesignはこれでOK

今は、こういう感じです

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

【HTML５とCSS３でレスポンシブWebデザインに】

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

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

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

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

DreamweaverをCSSにアップデートしてスマホに対応する方法と
HHTML５とCSS３で、HTMLのコーディングを編集する方法

この２つでした。

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

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

実際、私も今は、ほとんどWordpressに賢威テンプレートを導入してブログでウェブメディアを作成しています。

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

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

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

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

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

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

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

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

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

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

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

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

レスポンシブウェブデザインの作り方

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

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

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

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

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