アフィリエイト基礎講座4 サイトデザインを整える

アフィリエイト2

この記事では、サイトのデザインを整えて見栄えのいいサイトを作る理由とその手順を紹介します。

前回までで、サイトの作成が完了しました。「サイトを作ったし、早速記事を書こう!」と気分が高まっているかもしれませんが、その前に一旦クールダウンして、サイトを綺麗にする作業に取り組みましょう。

というのも、サイトデザインを練り込まずに記事を書き始めると、後からデザインを変更するためにかなりの時間を費やすことになります。そのような事態を避けるためにも、最初にサイトデザインをしっかり練りましょう。

また、アフィリエイトを始めたばかりの人は、「サイトの訪問者が増えない」「サイトの記事が読んでもらえない」といった悩みに直面していることと思います。そのような問題も、サイトデザインを整えることで改善するので、ぜひ記事をご覧になってみてください。

 

なぜサイトデザインが大切なのか?

アフィリエイトで最終的に最も重要になるのは記事の質です。しかし、サイトデザインというのも非常に重要な要素です。

アフィリエイトで稼いでいきたい場合、サイトの評価を上げる必要があります。サイトの評価は、記事を読んでもらうことで上がっていきますが、記事を読んでもらえるかどうかはサイトデザインが大きな影響力を持ちます。

人間には、物事を一瞬見ただけで判断する習性があるためです。

例えば、本を買う際に、表紙のデザインなどを見て、手に取るかどうか決めた経験はないでしょうか?また、対人関係においても、一目見た瞬間に「この人とは合わなそう」といった印象をもった経験があるのではないでしょうか?

このように、人は一瞬見ただけで判断するため、サイトデザインが重要なのです。そして、web業界では、サイトの見た目のことをファーストビューとよびます。

正確にいうと、ファーストビューとは、「webページにアクセスした際に、スクロールせずに見えるブラウザの画面範囲」のことです。記事を読んでもらえるかどうかというのは、このファーストビューにかかってきます。

一般的に、ファーストビューですぐにページから離れてしまうユーザーの割合(直帰率)は70%以上といわれています。つまり、ファーストビューでいかにサイトが有益そうかをアピールし、ユーザに「もっと読みたい!」と思わせることができるかが、アフィリエイトの成否のカギとなるのです。

 

サイトデザインが美しいと閲覧者には以下のような印象を与えます。

  • 楽しそうという印象を与えることができる
  • 信頼感を感じさせることができる

デザインが美しいと読んでいて楽しいのでリピーターがつきやすいですし、サイトに興味がそそられるので直帰率は下がり、サイトの評価が上がります。また、デザインの綺麗なサイトの方がなんとなく信頼感が感じられますので、商品を買ってくれる可能性も高まります。

 

人間はバランスが悪いものに違和感を感じる性質があります。以前テレビで話題になりましたが、就活の面接で同じ内容の受け答えをしたら、顔が整った人が採用されるという実験データもあります。

記事を全部読んでもらえるかは記事の内容に影響されますが、記事を読んでもらえるかどうかは、このようにサイトのデザインが大きな割合を占めます。

サイトのデザインは全ての記事で共通する項目ですので、早い段階でしっかりとしたデザインを固めておくと、記事の作成が楽になります。

逆に記事を書いてからサイトデザインの調整を繰り返していると、それぞれの記事を後から修正する必要が出てきて何かと時間がかかります。まずはしっかりとしたデザインを考えておきましょう。

 

サイトデザインの基本

アフィリエイトサイトを作成する場合、アート作品のような凝りすぎたデザインというのは、逆にアクセス数を損なってしまう可能性があります。

ホームページのデザインや構造を考える上で一番重要なのは、あくまで機能性(ユーザビリティ)です。デザインがいくらおしゃれでも、使い勝手の悪いデザインでは閲覧者がサイト内の複数の記事を読んでもらえず、サイトの評価が高まりません。

必要最低限のデザインを構築したら、あとはサイト訪問者が必要な情報を得られやすいよう、内部リンク(自サイト内の別ページへのリンク)や、ナビゲーション(案内)を整えて、使い勝手のいいサイトに仕上げましょう。

 

基本レイアウト

ホームページの基盤となるレイアウトですが、基本的にはヘッダー、コンテンツ、サイドバー、フッターの4つから構成されています。ヘッダーは上部に、フッターは下部に設置します。サイドバーは右にある場合もあれば左にある場合もあります。

コンテンツとサイドバーは中央に並列に設置します。多くのサイトでは、コンテンツは左側に設置されます。これは、HTMLではページの左側に映される情報の方を、先に記述していくことから、検索エンジンがコンテンツ内容を読みこみやすくなる、といった理由があります。

<各ゾーンの主な記述内容>

ヘッダー:サイトのタイトルロゴ、案内
コンテンツ:本文、アフィリエイト広告、関連記事
サイドバー:注目コンテンツ、読ませたい記事、アフィリエイト広告、カテゴリーページの内部リンク
フッター:サイトのタイトル、トップページでは相互リンク集

それぞれヘッダー、サイドバー、フッターでは、臨機応変にメニューやアフィリエイト広告を配置し、サイト訪問者がいろんなページに行き来できるよう、ユーザビリティの向上をはかります。

注目コンテンツは、ヘッダーのメニューバーやサイドバーを利用して、ファーストビューに映るように工夫します。

ページ全体に背景色などを設定する場合、基本的には明るめの色がオススメです。レイアウトを決めるときは他のサイトをいくつか参考にしましょう。今まで閲覧したサイトでデザインが優れているなと感じたサイトなどがあれば、それを参考にするといいでしょう。

コンテンツの形はこのサイト、サイドバーはこのサイト、メニューはこのサイト、というように、色々なサイトのレイアウトを組みあわせることで、自分のオリジナルのウェブサイトができあがってきます。

コンテンツの背景色は基本的には白、文字には黒系の色を使いますが、完全な黒色というのは逆に文字が読みにくくなりますので、若干グレーよりの黒に設定するのがよいでしょう。強調したい文字の場合には、太字の赤などを使います。

いろんな色があるとサイトがゴチャゴチャしてまとまりがないサイトになります。カラフルすぎるサイトも敬遠されるので、文字の変化色は2、3色程度にしておきましょう。

あとは、記事を読みやすいように、文字の大きさや行間にもこだわりましょう。

 

サイトのユーザビリティーを向上させるデザイン

  • プロフィールページの設置
  • ページの最上部や最下部で、前ページ、次ページというようなリンクを作る
  • ページに関連するコンテンツのリンクを最下部にまとめておく
  • 最下部に、そのページの上部に戻るためのリンクを設置しておく
  • パンくずリストを作成する
  • カテゴリーページの設置
  • ロゴを作る

 

これらの工夫をすることで、サイト訪問者が特定のページで行き止まることはなくなり、長い間サイトに留まってくれます。ウェブサイトの直帰率を下げるための基本戦術ですので、これらの内部リンクの仕組みは、必ず自サイトにくみこみましょう。

ウェブサイト運営でお金を稼ぐ場合、サイト訪問者の管理人に対する信頼感が、重要になってきます。信頼感のあるウェブサイトだと見込み客やファンが増え、リピーター(何度も自サイトを訪れる人)が増していきます。

信頼感は、主には有用な情報コンテンツを増やすことで得ていきますが、ウェブサイト作者のプロフィールを設置することでも獲得できます。

プロフィール用のページを作っておき、自分の似顔絵や写真、プライベートの情報、サイトの歴史などを書いておきましょう。サイト訪問者に、親近感を持ってもらうことができます。

CSSで段落を作ったり、余白を調整したり、大見出しと小見出し(HTMLのh1タグ、h2タグで設定)を作ったりして、ユーザビリティの改良に努めます。

コンテンツの上部には、パンくずリストを設置します。たとえば当ページだと、「HOME > アフィリエイト編> 現在のページ」のような、リンクつきの表記になっています。このようにパンくずリストは、そのページの位置を示す道標的な役割を果たします。具体的には、上位ページを表記することによって、そのページがどんなカテゴリーなのかを示すことができる、という利点があります。

 

ユーザビリティ(使い勝手)と、クローラビリティ(検索エンジンからの認識のしやすさ)を考慮して、どのページにも2クリックでたどり着けるようにします。

ある程度コンテンツが充実してきたら、カテゴリーページを設置してコンテンツをまとめます。トップページ→カテゴリーページ→各コンテンツ、というような3段階の階層になるよう、ウェブサイトを設計していきます。

他にも、サイトマップ(サイト内の全ページへのリンクをまとめたページ)や、更新履歴のページを用意しておくことで、ユーザビリティの向上をはかることができます。

ヘッダーに飾るタイトルには、ロゴを使うと印象が強くなります。ロゴはロゴジェネレーターを使えば、すぐに作ることができます。ウェブサイトを使って稼いでいく場合は、商用利用可能なフォントを使っていきます。

これでもほんの一部で、デザインで気にすべきポイントはほかにもたくさんあります。一つ一つは細かいですが、これが積み重なると、使い勝手に大きな差が生まれてきます。

神は細部に宿るといわれるように、ほんの小さなこだわりが使い勝手に大きな影響を及ぼしていき、ユーザーにこのサイトをもっと利用しようと思ってもらうことができるのです。

 

なぜテンプレートを利用するのか?

テンプレートというのは「サイトの雛形」です。テンプレートを使うだけで、HTML/CSSを知らない人でも簡単に美しいデザインのサイトが作れます

自分で一からHTML/CSSを記述してサイトを構築すると、このデザインを整えるのにかなりの時間を費やすことになります。しかし、プログラミング言語というのは、ほんの一行、たった一文字違うだけでもうまく表示されなかったり、バランスがめちゃくちゃになったりします。

このバランスを整える作業というのは、かなりの熟練者でも時間を要します。ですので、このような作業に時間を費やすよりも、テンプレートを利用して記事を書くことに時間を割く方が効率がよくなります。

上で挙げた項目以外にもデザインを整えるべき項目があります。これらを全て調整するのは大変ですが、テンプレートを使用することで回避することができます。

このテンプレートには無料・有料の2種類があります。無料テンプレートにも優れたデザインのものもあるので、そちらもオススメですが、初期投資だと思って有料テンプレートを導入することを当サイトではオススメしています。

先ほども話した通り、サイトの見た目を綺麗にしておくだけでサイトの売上は大きく変わってきます。有料テンプレートは、サイトのデザインが洗練されているのはいうまでもなく、細かいデザインもこだわり抜かれていて、何より機能面が無料のものとは段違いです。

オススメのテンプレートをいくつか紹介していますので、参考にしてみてください。その中でしっくりくるものがなかったとしても、テンプレートは星の数ほどありますので、必ず「これだ!」と思えるテンプレートが見つかります。諦めずに探してみてください。

 

オススメの無料テンプレート

Simplicity

無料テンプレートでオススメなのはSimplicityです。

フォントの大きさや行間などが絶妙で読みやすく、シンプルなデザインなのでカスタマイズがしやすいという点で人気です。

シンプルだけど飽きがこない素晴らしいテーマです。とにかく機能の多さが魅力的で、HTML/CSSの知識がほとんどなくてもAdSenseなどの広告を貼り付けることが出来ます。

また、サポートの対応がいいことでも知られており、テーマの作成者であるわいひらさんに質問すると大抵のことは答えてくれます。カスタマイズの方法などについても、Simplicityの配布元を確認すればたくさん出てくるので、テーマ選びに困ったときは、是非一度使ってみて下さい。

 

Stinger

有料テンプレートでも有名なAffingerの無料版がスティンガーです。有料版の方が高機能ですが無料版でも十分に使えます。当サイトも初めはこのStingerでサイトを作成していました。

アフィリエイト向けに設計されているため、SEO対策が取られており、このテーマに変えるだけでも検索順位が上がるといわれているほどです。どのテンプレートにするか迷ったときはこれを使っておけば失敗はありません。

 

オススメの有料テンプレート

有料のテンプレートの方がデザインに優れており、カスタマイズ性も高くサポートもしっかりしています。

当サイトでオススメするのが「Stork」「ハミングバード」「AFFINGER4」の3つです。これらの有料テンプレートは無料よりも圧倒的に多機能で、何よりも非常に見やすいデザインになっています。

Stork(ストーク)

ストークは、人気ブロガーのJUNICHIさんとOPENCAGE(オープンケージ)が共同で作り上げたWordPressテーマです。

こちらのテーマは、「新しいスマホビュー時代を作ろう」というコンセプトで開発されており、スマホでの見やすさ・機能・デザイン性はばつぐんです。

また、「誰が使っても美しいデザイン」を追求して作られているので、HTMLやCSSの知識がない方でも美しいサイトを作ることができます。さらに、ブログ運営においてよく使われるショートコードも最初からそろっていますので、多彩な表現をつかって記事をつくることができます。

とにかくスマートフォンでの使用感がすばらしいので、見た目のインパクトよりも「使いやすさ」「読みやすさ」にこだわりたい方におすすめです。当サイトも、スマホでの利用しやすさを重視して、別のテンプレートからこのストークに乗り換えました。

ほかのテンプレートを選ぶときの比較対象として参考にもなりますし、一度ホームページを見て確認するだけでも価値があります。

こちらから一度確認してみましょう。

WordPressテーマ「ストーク」

 

ハミングバード

ハミングバードは「誰が使っても簡単に美しいブログサイトを!」をコンセプトとして開発されたWordPress用テーマです。

初めてこのテーマを目にしたときは、そのサイトデザインの美しさにビビッときました。それまで別のテーマを色々と検討していましたが、一発で心変わりしてしまいました。それほど洗練されたデザインです。

その後ストークの存在を知り、どちらにするか迷いに迷ってこのサイトには、スマホデザインにこだわったストークを選択しました。そのあと結局、ハミングバードも購入して別のサイトで使っています。

ハミングバードは最初から美しくデザインされているのでカスタマイズせずとも十分美しいですし、それにサイトカラーが自分好みの色に設定できるのでオリジナルなデザインを実現させることができます。

コンテンツにアニメーションをつけることができます。このようなアニメーションをつけるとなると結構大変なのですが、このテーマなら最初からアニメーション機能がついています。ショートコードで、2カラムデザインや吹き出しデザイン、注意事項のデザインなど見栄えのいいデザインが簡単に実現できます。

値段はストークよりも3,000円ほど安いので、少し高くて手が出ないという方は、こちらを検討されてはいかがでしょうか。

以下のリンクからデザインを確認できます。

WordPressテーマ「ハミングバード」

 

AFFINGER4

AFFINGER(アフィンガー)は、アフィリエイト専用の便利機能が搭載された、アフィリエイトに特化したWordPressテーマです。

上でも紹介しましたが、もともとアフィリエイターに人気の高かった「スティンガー」を機能面やSEO対策面でパワーアップさせたものがAFFINGER4です。

SEO対策に必要な機能が標準装備され、商品ランキング、Youtube動画背景、スマホ専用メニュー、スマホ専用検索フォーム、関連記事一覧など、アフィリエイトをする上で「こういうのがあったら便利だな」と思う機能が盛りだくさんです。これらを使いこなせばオリジナリティの高く、売上も高いサイトを目指せます。

ただ、AFFINGER4のデザインは非常にシンプルになっているので、オリジナリティを出すためにはカスタマイズがほぼ必須です。それにはHTML/CSSが必要になるので、初心者にはハードルが高く、中級者向けのテンプレートにはなります。

廉価版のSTINGER PROもあります。こちらは通常6,480円ですが、当サイトのリンクから購入すると5,980円に割引されます。

STINGER PRO

 

初心者にとって使いやすいのは、「賢威7」というテンプレートです。アフィリエイト業界で著名なWEBライダー監修のSEOマニュアル(全248ページ)が特典としてつきます。賢威7は、採用実績が豊富ですが、そのぶんかなり多くのサイトで使われているためオススメから外しました。賢威7の価格は24800円と少し高いですが、付属のSEOマニュアルの価値が高く、価値を感じて購入した方が多いということです。気になる方は、サイトだけでも確認してみてください。









コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です