レスポンシブデザインの作り方 アフィリエイトでの必要性

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

レスポンシブという言葉もすっかり一般的になりました。今やレスポンシブ対応は「当たり前」的な感じです。アフィリエイトサイトも当然レスポンシブ対応が必須の時代です。

http://g-outfitter.com/g-outfitter/google.html

Googleがモバイル用インデックスをリリースするという話しも話題ですし、実際にアクセス解析を見るとスマホでの閲覧がPCを上回ってるのは明らかです。となると、アフィリエイトサイトもスマホに最適化されていなかったら、お話にならないというのが実情です。

というワケで、レスポンシブデザインの作り方をザックリ紹介します。

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

まず、↓このサイトをご覧ください。

血糖値が高い?まず基準値を知りましょう!

PCで見てる方は↓こんな風に見えるでしょう。
レスポンシブ PC表示

スマホの方は↓こう。
レスポンシブ スマホ表示

超シンプルなレスポンシブデザインです。

PCで見ると「うげっ、なんて古臭いデザインだ」と思うでしょうけど、実はレスポンシブなんです。ワードプレスじゃなくてHTMLサイトです。何を隠そう私が作りました。

原理原則は簡単です。「ディスプレイの幅が●●px以下ならボックスの幅をディスプレイ幅の●●%にする」と指定してるだけです。このサイトの場合、デフォルトでは幅800pxなんで、ディスプレイサイズが800px以下になるとメインのボックスがディスプレイ幅の100%になるようにスタイルシートで指定しています。

ここで「げっ、、、意味わかんないし面倒くさそう」と思ったあなたそこまでです。

レスポンシブデザインのアフィリエイトでの必要性

今、自分が持ってるサイト達を見回してください。ほとんどブログじゃないですか?

このブログもそうですが、昨今検索でヒットするページの多くがワードプレスなどのブログ形式です。それはブログにメリットがあるからです。

プログラムをサーバーにインストールして、テーマを反映させればスグに書き始められるし、HTMLの知識が無くてもタイピングさえできれば誰でも書けます。この点は素晴らしいメリットです。

ただ、アフィリエイトで稼ごうと思ったら、少なからずドメインの数は必要だし、それぞれをリンクしてつなげてユニットを組む必要もあります。

その全部がブログって不自然じゃないですか?

しかも、使い慣れたCMSとテンプレートに偏るのは明らかです。その方が作業が早いし新しいことを学ばなくていいですからね。今の流れでいうとCMSはワードプレスで、テンプレートはこれにも使ってるSimplicityをベースにしてるブログが非常に多いです。

ただ好きな事書くだけの趣味ブロガーで、稼ぐつもりが無いなら↑これでも構いません。

でも、ネット上で少しでも目立ちたい、差別化したいと思ったら、人よりひと手間ふた手間掛けないと埋没してしまいます。

そういう意味で、レスポンシブデザインを学ぶという事、自分でレスポンシブデザインのサイトが作れるようになるという事は非常に大事だと私は思います。先に上げたサイトですが、見た目はウルトラ古臭くても、ソースはワードプレスと比べると非常にシンプルで軽いです。

PageSpeed Insights

試しに自分のブログを↑このグーグルのツールでWEBサイトの表示時間をチェックしてみてください。前述のサイトは81点でした。このブログのトップページは53点でした。

コンテンツの内容・量が最優先なのは言うまでもないですが、同じコンテンツが掲載されていて、重いページと軽いページがあればきっと軽いページの評価が高くなると私は信じています。

そういう意味で、レスポンシブデザインを学び、HTMLが書けるようになることのアフィリエイターとしてのメリットは少なくないと私は思います。

ジー・アウトフィッターのメルマガ

メールアドレスと名前をご登録ください【無料】

お名前(必須)  
メールアドレス(必須)

ジー・アウトフィッター代表 吉川ごうが
アフィリエイト・ネットビジネスの最新情報をお届けします!

※プロバイダーアドレスでは、メールが受け取れない場合がございますので、
Yahoo、Gmail、Hotmailなどのメールアドレスでの登録をお薦めいたします。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

新着記事

  1. グローバルナビゲーションメニューアイコン表示

    2017-1-23

    グローバルナビゲーションメニューにアイコンを表示する方法

    グローバルナビゲーションメニューの役割 サイトにとって、グローバルナビゲーションメニューとは訪…
  2. グローバルナビゲーションメニュー

    2017-1-17

    グローバルナビゲーションメニューの設定方法

    ワードプレスのメニューとは ワードプレスでメニューと一言で言うような場合は、たいていは下のよう…
  3. ワードプレス記事投稿方法

    2017-1-8

    ワードプレスの記事を投稿する方法

    ワードプレスの記事とは WordPressで作るサイトとは、記事を投稿し続けていくブログ型のサ…
  4. 2016-12-27

    アフィリエイトのノウハウ・手法・作業内容を知れば稼げるか?

    アフィリエイトのノウハウや手法、具体的な作業内容って知りたいですよね? 先に書いておきますが、…
  5. ミニバード

    2016-12-18

    ミニバードでワードプレスを使う手順

    ミニバードとは ミニバードとは、ネットオウルという会社が運営しているレンタルサーバーのことで、…
ページ上部へ戻る