あなたのブログが10倍おしゃれになる!WordPressデザイン・カスタマイズ方法総まとめ

WordPressデザイン・カスタマイズ方法総まとめ

アフィリエイトにおいて、デザインはそこまで重要ではないと言われることが多いです。

でもやっぱり、見た目の印象というのは人と同じでとても大事なのではないかと、わたしは考えています。

あなたも、「このブログなんだかおしゃれ!」「このサイトいい感じで真似したくなるな」と思ったことはありませんか?

稼げるかどうかに直結しているのはキーワードや記事の書き方ですが、デザイン・見た目の重要性も無視できません。

ということで今回は、記事の書き方に次いで聞かれることが多い「デザイン・見た目」について徹底的に説明していきます!

目次

デザイン・見た目改善で読まれて稼げるブログになる!

ブログデザインを考える

アフィリエイト、ブログ運営に関して、デザイン・見た目の改善は大事です。

見た目がしっかりしているだけで、記事やブログ全体に説得力が生まれます。「なんかすごそうだからもうちょっと読もう」と思われるようになります。

「つい読んでしまう」という状態が続くと、定期的に読んでくれる読者・ファンが増えます。そうするとアクセス数、ひいては稼ぎにも繋がってきます。

このように、デザインは整えておいて損はないです。

時間をかけすぎると記事を書く時間がなくなって本末転倒になるので、少しずつ整えていくことをおすすめします✨

記事を書いていて飽きたらデザインを変えて、満足したらまた記事を書いて…と繰り返すとバランスよく中身も見た目も整っていくので、いい感じになります。

デザイン力を自分で磨く方法から、わたしが実践している具体的なやり方、あると便利なおすすめツールまですべて大公開します!

興味があるものから試していってください✋

 

デザイン力を上げる3つの方法

まず、デザイン力を上げるためにわたしが意識して行なったことを3つ紹介します。

〔1〕「なんとなく」の感覚を磨く

ブログやサイトを見ていて、「これなんとなくいいなー」と思うことがあると思います。逆に「なんかやだな」と思うことも。

デザインにおいて、この「なんとなく」の感覚は非常に大事です。

なんかやだなと思った場合には、レイアウト崩れがあったり、フォントのサイズが合っていなかったり、色合いが良くなかったりなど、何かしら問題があります。

そうしたことを解消していくうち、デザインが心地いいものに整っていきます。

「なんとなく」の感覚を磨くためには、ひたすら観察することが必要です。

わたしは、いつも自分のブログを見ています。

電車に乗っている時や、何かしらで待ち時間ができた時、ふとした時など時間があればいつでも見ます。

自分のブログをいろいろな媒体で見よう

そして「あれ?なんかここおかしいな」と思ったらメモしておきます。

例えば

  • 見出しの左側だけ色が違う
  • 文字化けしてるところがある
  • バナー広告の表示崩れ

など…

細かく見ていると「あれ?」と思うことがどんどん出てくるはずです。

まずはしっかり観察して「なんか変」「なんかいい!」という感覚を磨き、デザイン変更に活かしていきましょう✨

〔2〕良いと思ったブログ・サイトを研究する

次に、良いと思ったブログやサイトを研究するのもおすすめです。

「このブログおしゃれ!いい感じ!」と思ったら、ブックマークしてひたすら観察します。

「ブログ全体の色がいい」「この見出しがかわいい」「アイキャッチ画像が目立ってていい」など、いろいろあると思います。

そうした部分を見ていって、どういう風にできているのか確認します。

ではここで、簡単な例を一つ紹介します。

デザインがどういう風に出来上がっているのか、わたしがまったくの初心者だった頃は右も左もわかりませんでした😭

でも今は、気になるデザインがあったら「こういう風に出来上がってるのか!」というのがわかるようになりました。

デザインはHTMLやCSS、その他JavaScriptなどのプログラミング言語で出来上がっているので、それらを見ていく必要があります。コードを見て、そのコードが何を表すものかを調べることで知識となっていきます。

そのやり方の簡単な例をお伝えします。

これは、あくまでも「研究・勉強のため」です。もしそのまま自分のブログに取り入れたいと思ったら、「コピペOK」と書かれているところから使うか、書いてなければ運営者の方に問い合わせて確認を取った方がいいです💡

例えば、この枠👇

この枠を真似したい!と思ったら…

このピンク色の枠がどういう風にできているか知って、自分のブログの中に取り入れてみましょう!(もちろんそのまま使っていただいても大丈夫です!)

手順はこうです👇

  1. 調べたいデザインの上のところにカーソルを持っていき、右クリックで「検証」を選択する。
  2. Ctrl+C(Macはcommand+C)でコピーする。
  3. 自分のブログ記事のHTMLの箇所(WordPressなら「テキスト」の方)にCtrl+V(Macはcommand+V)で貼り付けする。
  4. プレビューで確認!ピンクの枠が現れていればOK❤️

詳しく説明していきます。

〔1〕「検証」で詳しく見る

まず、真似するためには「検証」(デベロッパーツール)というのを使いこなす必要があります。ここで調べたいものの内容・正体を明らかにします。

本当はHTML・CSS両方コピーする場合の方が多いのですが、ここではHTMLをコピーするだけで済むようにしました!

そのため、一箇所のみのコピペで大丈夫なようになっています。

HTMLもCSSもよくわからない人でも以下の手順通りにやれば大丈夫なので、ぜひやってみてください✨

まず、さっきのピンクの枠の上にカーソルを合わせ、右クリックを実行します。

真似のやり方

そして、一番下の「検証」をクリックしてください。

真似のやり方

〔2〕調べたいところをコピーする

「検証」をクリックすると、下か横にいろいろズラーっと出てきたと思います。

真似のやり方

この左下の部分が青くなっていればOKなので、コピーします。

さっきピンクの枠の上で右クリックできていれば自然とここが青くなっているはずなので、そのままCtrl+V(command+C)でコピーしてください。

もし検証画面が右側になってたりして見にくい場合は、右下の点が3つ並んでいるところで変更することができます。(上記画像参照)

左上のカーソルマークのところをクリックすると、選択するカーソルのON・OFFを切り替えることができます。

〔3〕貼り付けたいところにペーストする

コピーしたら、そのまま貼り付けたいところに貼り付けてください。

WordPressの場合は、ビジュアルエディタではなくテキストエディタの方に貼り付けるようにしてください。

貼り付けたら、中身の文章のところを変えます。

真似のやり方

〔4〕プレビューで確認する

好きな文章に変更したら、プレビュー画面で確認して完了です!

さらに余力があれば、コードの内容を見ていきましょう。

例えば、”border-radius”と検索してみると、それが何を表すのかすぐに出てきます。同じように”background”や”padding”、”margin”も調べてみてください!

数値を変えて確認して、「ここを変えるとこうなる」と自分で実感すると、より知識がつくと思います。

ーーーーー

どうですか?できましたか?✨

これはもっとも簡単な例で、HTMLの他にCSSなどが入ってくるとまたやることが増えます。

とりあえず、「調べるためには検証画面を見る(デベロッパーツールを使う)ところから始まるんだ」と覚えておいてくださいね👌

ただ、いろいろ説明しましたが、アフィリエイトをやるにあたってやっぱりもっとも大事なのはキーワードと記事の書き方になるので、凝りすぎる必要はありません。

デザインに凝るとその他のことが疎かになりがちなので、デザインに夢中になりすぎないよう何事もバランス良く取り組んでくださいね!

〔3〕HTML・CSSを勉強する

HTML・CSSとは?

最後におすすめなのは、HTML・CSSを勉強することです。

HTMLはデザインの骨組みの部分、CSSはデザインの装飾の部分です。2つが組み合わさってデザインが成り立っているということだけ、覚えておいてください!

勉強するといっても、そこまでがっつりやらなくてもいいです。

一からすべてできるようにならなくても、少しいじれる程度でだいぶ便利になります。

「見出しの色を変えたくなったらどこを変えればいいんだろう?」というような小さな疑問がすぐに解消するようになります。

勉強する方法としては、①webサービスを利用する②本を読む、の2通りの方法があります。

webサービスではProgateが非常にわかりやすいし楽しいです。

本は、以下の一冊のみで一通りの知識をつけることができました👇

もし余力があれば、ぜひ取り組んでみてください😊

 

わたしが実践しているデザイン・カスタマイズ方法

では、わたしがさっきの「デザイン力を上げる3つの方法」を実践してきて、「これはイイ!」と思って今も使っているデザイン・カスタマイズ方法を紹介します!

「いつもこんな風に考えて自分のブログ・サイトを作ってるよ!」っていうのをとことん説明していきます。

参考になりそうな部分はぜひ取り入れてみてください❤️

〔1〕テーマ選びは重要!使っているテーマについて

WordPressおすすめテーマ

まず、ブログ全体の雰囲気を左右する「テーマ」について紹介します。

わたしがいつも使っているのは、「ストーク」という有料テーマか、「Simplicity」という無料テーマです。



また、WordPressとは別に、以前は「Sirius」というWindows用のホームページ作成ソフトを使ったりもしていました。

今ではだいたいストークに統一していて、Simplicityを使ったブログはミニサイト用という感じになっています。

Simplisityも名前の通りシンプルで、それなのになんだか見やすくてカスタマイズがしやすいという素敵なテーマなのですが、ストークの使い心地とおしゃれさが大好きでハマってしまいました。

このブログでも、ストークを導入しています💕

わたしがストークを使っている理由は以下です👇

  • 直感的にカスタマイズできる
  • 導入するだけで一気におしゃれになる
  • 見た目の心地よさがすごい
  • 目立つボタンを簡単に使うことができる
  • その他ショートコードが充実している

わたしはApple製品が好きなのですが、その理由の一つに「直感的に、説明書がなくても使うことができる」というものがあります。

それと同じで、ストークも特にカスタマイズのためにいろいろ他のサイトを見に行かなくてもいいので、とってもラクです。

他にも有料テーマはたくさんありますが、カスタマイズ方法を調べないと差別化できなかったりして、結構めんどくさいんです…

「カスタマイズ方法を調べていたら1日過ぎてた」なんて人も多いのではないでしょうか?

ストークを使えば、そうしたことに時間を取られません。

「さっさとおしゃれな感じにして、記事執筆に取り掛かりたい!」という人には非常におすすめです。

また、ところどころに登場するこんなボタン👇

これも👇

これらすべて、「ショートコード」というもので最初から入っているので、何も設定しなくてもただあるコードで囲むだけで使えるようになります。

めちゃくちゃ便利です✨

この補足説明の枠もショートコード!

かゆいところに手が届く感じで、たくさんのショートコードが最初から用意されています。

HTMLやCSSを使ってボタンを作ったりというめんどくさいことをする必要は一切ありません。

初心者の方は「テーマにお金かけるってどうなの?」と考えがちだと思います。わたしもそうでした。

でも、ここにお金をかけた方が、結果的に時間が短縮されて見た目もおしゃれになって、記事を書く時間は増えるしやる気も出るしで良いことづくめだと思います。

わたしは「最初からこのテーマ買っておけばよかった…」と後悔しました😭

もちろん、無料テーマでもダメだということはありません。

でも、本気で作るブログ・サイトなら、お金をかけるべきところにはかけた方が、結果的に完成度が高いものができあがります。

そういう考え方で、わたしもメインブログには有料テーマ、ミニサイト・お試しサイトには無料テーマと使い分けています。

「これは本気でやるブログ・サイトだ!」というものには、これから読まれるブログ・サイトを作って稼ぐための投資だと思って、ぜひ採用してみてくださいね!

↓ ↓ ↓

参考記事:

アフィリエイトにおすすめのWordPressテーマまとめ【無料版】

アフィリエイトにおすすめのWordPressテーマまとめ【有料版】

〔2〕全体のデザイン決定の考え方

デザインを決める際の考え方

どんなテーマを使うにしても共通して言えるデザインの考え方を紹介します。

わたしは、ブログやサイトでは、世界観やターゲットによって雰囲気を変えることが重要だと考えています。

例えば、「色」

このブログは主に女性×アフィリエイト初心者向けに書いているので、ピンクを基調としました。もう一つのダイエットブログも、女性に読んでもらいたいのでピンクにしています。

あとは、単純にわたしがピンクが大好きだからっていうのもあります(笑)

元気な感じに見せたいなら赤やオレンジを基調としたり、ビジネスマン向けの内容なら青系の落ち着いた感じがいいかもしれません。

わたしは特に色の勉強などはしたことがないのでこのへんは直感的な話になってしまいますが、ざっくりとでも考えるだけでもだいぶ印象が違ってくると思います。

要は、「何も考えずに決めないで」ということです。自分で考えたり他の人に感想を求めたりして、自分なりの根拠を持って色を決めてみてください。

次に、「フォント」です。

フォントを変えると、ブログ・サイトの雰囲気が一気にガラッと変わります。

そのため、世界観を作ったり見てもらいたい人の興味を引きつけたりする意味で、フォントも変えてみるといいと思います。

このブログもフォントを変更しているのですが、時々「読みにくいからもとのフォントの方がいい」と言われることがあります。

ただ、面白いのが、これを言うのは100%男性だということなんです。

女性からは逆に、「フォントが可愛くて好き!」と言ってもらえます。

先ほども書いた通り、わたしは主に女性に向けてブログを書いています。

もちろん男性や初心者以外の人にも読んでもらえたら嬉しいけど、ターゲットを広げすぎて曖昧にすると逆に読まれなくなると思うので、そのへんはあえて狭めています。

だから、たとえ男性から「フォントが読みにくい」と言われても、読んでもらいたい層の人からのウケが良ければ、そのままで良しと考えています。

色と同様、誰に読んでもらいたいかで全体の雰囲気を決めるようにしてください。

ほんとざっくりと色とフォントに触れましたが、この2つは第一印象を大きく左右する重要項目です。

ぜひじっくりと考えてみてください✨

〔3〕レイアウト・サイドバーの項目などについて

1カラムにするのか2カラムにするのか、またサイドバーは右か左かなどいろいろな議論がありますが、ここではあくまでもわたしの考えをお話します。

まず、結論から言って、これがいい!というのは言えません。

なぜなら、人によって違うからです。

ジャンルも内容も読者層も変わってくるので、一概にこれ!というのは言えません。

ただ、一般的には「2カラム、右サイドバー」の形が今のところ多いように感じます。初めは一般的な形にして、後から調整していくやり方で良いと思います。

また、サイドバーの項目ですが、何を押し出したいかによって変わってきます。

例えば、商品を紹介したいならその商品の詳細ページへのリンクなどを貼っておいたり、自分のことを知ってもらいたい・印象づけたいならプロフィールを右サイドバートップに持ってくるといいと思います。

わたしの場合、「InstagramやTwitterなどのSNSも見てもらって、読者の方と距離を縮めてやりとりを活発にしたい」と思っているので、Instagramを右サイドバートップに持ってきています。

あと、文字通り「顔が見える」方が信用性や説得力も増すと考えたので、Instagramを上に持ってきたというのもあります。

こんな風に、目的によってその項目は様々です。

「これとこれとこれをこの順番で貼ればOK!」という絶対的な正解はないので、少しずつ変えて反応の良いものを探していってください(。・ω・)ノ゙

〔4〕ちょっと便利なカスタマイズまとめ

コピペでOKなデザインカスタマイズ

ここでは、わたしが実際に使っているカスタマイズ方法を紹介します!

フォントを変更する

フォントについては先ほどお話しした通りです。

必ずしも変えたら良い反応を得られる、というわけではないですが、いろいろ工夫してみる一つの項目として、興味があれば試してみてください!

参考記事:WordPressブログのフォントを変える方法

WordPressブログのフォントを変える方法

2016.10.10

蛍光ペンでマーカー風にする

蛍光ペンでマーカー風にするやり方です。

これです。

こちらの方の記事を参考にしました👇

参考記事:ブログの文章を蛍光ペンでマーキングしたように表示する方法

とってもわかりやすく、勉強になりました。ありがとうございます。

上の記事では2つのやり方が載っていますが、わたしはstrongタグはstrongタグで使いたいので、2つ目のやり方について詳しく説明します。

まず、ダッシュボードから外観→テーマの編集を選びます。

そこの一番下に、

こんな風に入れます。

これで準備は完了です!

蛍光ペンっぽくしたい文章を、

で囲みます。後ろの”span”のカッコの手前に文章を入れる感じです。

プレビュー画面で確認して蛍光ペンっぽくなってたらOK!

色を変えたい場合は、”#FAD5DC”を違うコードに変えてください。

色見本と配色サイトを参考にどうぞ✋

フォントの太さを普通にしたい場合は、”bold”を”normal”に変えてください。

蛍光ペン、一気におしゃれな感じになるのでおすすめです!

毎回HTMLタグをコピペして囲むのは大変だと思う人は、『Add QuickTag』というプラグインを使ってみてください。一発で囲みたいコードを呼び出すことができます。

画像に枠をつける

記事内に挿入する画像の背景が白だと、どこが境目かわからなくなって見にくくなることがあります。

それを防ぐため、うっすらと画像に枠をつけておきましょう!

以下のCSSを外観→テーマを編集にコピペすれば一発です。

色を変えたい場合は”#ddd”を好きな色に変えてください。

太さは”1px”を2、3、などに変えれば変更できます。

見出し前に好きなアイコンを設定する

見出し前に、チェックマークなどをつけているものをたまに見かけます。

あれ、さりげない感じだけどおしゃれですよね😊

こんなやつです👇

見出しの前にアイコンを入れる方法

やり方は簡単です。

アイコンを入れたい見出しを決めます。(h2、h3、h4など)

以下はh4の例で、CSSを追加します。(外観→テーマの編集)

色は”#FA9CB8″を変更、チェックマーク以外にしたい時は、FontAwesomeの公式ページから探します。

とその前に、プラグイン『WordPress Visual Icon Fonts』を導入していない人は、入れておいてください。

この記事の最後の方でも説明していますが、このプラグインを入れておけば、簡単にFontAwesomeのアイコンを使えるようになります💡

公式ページから好きなアイコンを選んだら、クリックして、Unicodeと書かれているアルファベットと番号をコピーします。

FontAwesome

上の場合は「f004」です。上のCSSの「f058」を消して貼り付けすれば、切り替わります。

もしプレビュー画面で見たり更新しても変わっているのが確認できない場合は、何度か更新ボタンを押してみてください。単に読み込めていないだけのことが多いです。それでも変わらなければ、CSSをコピーした時に余計なスペースが入っていたり、全角になっているなどが考えられます。確認してみてください。

ーーーーー

以上、わたしが実際に使っているカスタマイズ方法のまとめでした!

何かあればまた随時追加していきます✨

〔5〕簡単なのにそれっぽい!ロゴの作り方

たまに聞かれるので、ロゴの作り方を紹介します。

わたしの場合、ささっとできて適度におしゃれなら満足なので、なんとなくいい感じになるよう簡単に作っています。

「あまり時間はかけたくないけどいい感じのものを作りたい!」という人は、同じようにやってみてください💕

必要なものは以下の2つ。

  1. 好きなフォント
  2. 画像編集ソフト

このフォントいい!というものを見つけたら、ダウンロード&インストールします。

FONT FREEというサイトが便利で、フォントのインストール方法も詳しく載っています。

画像編集ソフトも用意しておいてください。わたしは最初『GIMP』を使おうとしていましたが、『Pixelmator』というとっても使い心地の良い画像編集ソフトに出会って、それからはずっとこれを使っています。

数千円で買えるのにも関わらず、「Photoshopキラー」と呼ばれるほど機能が豊富で、できることが多くて助かります。

「PhotoshopやIllustratorを使うほどがっつりとデザインはやらなくていいけど、使いやすくて機能がそこそこ豊富な画像編集ソフトが欲しい」と思っている人にはぴったりです。まさにわたしがこれでした。

今はPhotoshopもIllustratorも月額数千円で使えるとは言っても、買い切りではないので、使いこなせていないとモヤっとしてしまいます💧

その点Pixelmatorは安くて買い切りでさらに使いやすいので、初心者の方におすすめです。

Photoshopほど詳しい説明本などはありませんが、チュートリアルPixelmatorの使い方を説明しているサイトなどで十分事足りるし、わたしも困ったことはありません。

画像編集ソフト選びで困ったら、Pixelmatorもぜひ候補に入れてみてください!

話は戻って、ロゴの作り方です。

今回は、Pixelmatorを使ったやり方を説明しますが、基本的にどの画像編集ソフトでもやり方は同じです。

まず、ロゴのだいたいの大きさを決定します。

最初からぴったりとうまくいくことはなかなかないので、最初はざっくりとでもいいと思います。

ロゴのだいたいの大きさを決めるのは、テーマによって推奨サイズなどがあると思うのですが、それが見当たらない場合は自分で測ってみましょう。

ブラウザでchromeを使っている人は、『Page Ruler』という拡張機能を使うのがおすすめです💕

これをインストールすると、ブラウザの右上に定規のアイコンが現れるので、それをクリックします。

すると、自由自在に長さを測れるようになります。

これを利用して、ロゴのだいたいの大きさを決めてみてください。

こんな風にして測ったら、左上の縦と横の幅を把握します👇

ロゴ画像の作り方

Piselmatorを起動したら、「新規書類」で左上の数値を入れます。

ロゴの作り方

するとこんな風になるので、画像を2本指で大きくしたり小さくしたりして、編集しやすい大きさにします。

ロゴの作り方

整えたら、早速ロゴを作っていきましょう❤️

テキストツールを選択して、フォント・大きさ・色を決めます。ここで、さっき用意しておいたフォントを使いましょう!

ロゴの作り方

今回わたしは「うつくし明朝体」というものにしてみました。なんだか雰囲気落ち着いた感じになりました…!!

「これでいいかな」となったら、「背景のレイヤー」を選択して、deleteキーを押します。

ロゴの作り方

後ろの白が消えて、何もない状態になりました。これをしないと白い背景の四角いロゴとなって背景となじまないので、文字だけを残して他はすべて透明な状態にします。(「透過」と言います)

ロゴの作り方

ここまでできたら完成!あっという間です。

ファイル→書き出すを選択します。

ここで注意!PNGで書き出さずにJPEGなどにしてしまうと、透過が認識されず白い背景が残ってしまいます。

PNG形式で書き出しましょう。

ロゴの作り方

最後に、名前をつけて保存で終了です!!

ロゴの作り方

この画像を、カスタマイズページなどから適用すればOKです。

テーマがストークの場合は簡単に設定できます👇

サイトロゴ・アイコン設定ページ

あ、あと、もしロゴの中にちょっとしたアイコンを入れたい方がいたら、『FLATICON』を使ってみてください。

いい感じのアイコンを無料でダウンロードすることができます。

ダウンロードしたものをそのままパッと貼り付けるだけで画像の中にアイコンを取り入れることができるので、とっても便利です❤️

以上、ロゴの作り方の説明でした!

〔6〕おしゃれなアイキャッチ画像の作り方

続いて、アイキャッチ画像の作り方です。

嬉しいことに、アイキャッチ画像を褒めてもらえることが多いです。

と言っても、90%以上おしゃれなフリー素材のおかげなのですが…

そこにちょっと手を加えるだけで、さらにおしゃれな感じになります!

ここでは、こんなアイキャッチ画像の作り方を説明します👇とっても簡単です!

アイキャッチ画像の作り方

まず、フリー素材から良さそうな画像を持ってきます。上の画像は『Unsplash』から持ってきたものです。

Pixelmatorで開きます。

アイキャッチ画像の作り方

画像サイズを調整します。イメージ→イメージのサイズから…

アイキャッチ画像の作り方

自分のブログ・サイトの幅を調べて、入力します。(テーマの詳細ページなどどこにも書いてなければ、先ほど紹介したchrome拡張機能の『Page Ruler』などを使って調べてください。ストークの場合は幅728pxです。)

アイキャッチ画像の作り方

小さくなりました!

アイキャッチ画像の作り方

小さいままだと編集しにくいので、2本指で大きさを整えます✌️

アイキャッチ画像の作り方

四角を選択します。

アイキャッチ画像の作り方

横幅いっぱいに引き伸ばします。

アイキャッチ画像の作り方

その資格を選択したまま、右のレイヤーのところの「不透明度」を調整します。

50%くらいにするといい感じに透明っぽくなっておしゃれです💕

アイキャッチ画像の作り方

次にテキストを追加します。

アイキャッチ画像の作り方

フォント・大きさ・色を整えて…

アイキャッチ画像の作り方

『FLATICON』で”camera”と検索し、好きなものをダウンロードして、それを引っ張ってきます。

アイキャッチ画像の作り方

完成です!

アイキャッチ画像の作り方

ちなみに、こっちの画像はロゴと違って透過していないので、JPEGで書き出して大丈夫です。(JPEGの方が軽いらしいので、わたしは透過してる場合以外はJPEGで書き出しています!)

意外と簡単だと思いませんか?

慣れればパパッと作れるようになります👌

他にも応用はたくさん利くので、慣れてきたら四角じゃなくて丸にしたり、吹き出しにしてみたり、いろいろと試してみてください💕

【参考】クリックされやすくするために…

クリックされやすいデザイン

ここで少し、アフィリエイト寄りのお話をします。

デザインは、見た目の心地よさを求める意味の他に、使いやすさや成約率をアップさせる意味でも大事です。

わたしは結構テキトーなところがあるので、「全体的にいい感じなら読まれる率も成約率も高くなるでしょ!」という考えなのですが、クリック率は少しでも良くなるようできるだけ工夫しています。

読者のために日々頑張っているのだから、チャンスがあれば自分のところから買ってもらいたいですよね。

正直、データ分析などを行なったわけではないのでわたしの考えになってしまい申し訳ないのですが…🙇

考え方の参考にしていただければ幸いです。

というわけで、その確率を上げるためのデザイン面からの補足ポイントをいくつか説明します🖋

リンクの色・下線について

リンクの色は、基本青色がいいと言われています。実際に、GoogleやYahoo!、Amazonなど、主要なサイトでは青色のリンクを使用しています。

が、それも一概には絶対そうだとは言い切れません。

最適なテキストリンクの色は?」という記事を参考にさせていただきましたが、そこにも書いてある通り、

クックパッドは、日本最大級のレシピ検索のサイトです。ユーザービリティには細心の注意を払っていて、ユーザー一人当たりの平均PVが高いことでも知られています。

そんなクックパッドですが、サイトをのぞいてみると青系のリンク色がまったく使用されていないことがわかります。これは、青という色が料理というテーマに合わないために、あえて青系の色を外しているためかもしれません。

このように、青という色がジャンル的に合わないものもあります。

あくまでも「基本は青」と覚えておいて、自分のブログ・サイトに照らし合わせて考えてみてください。

ボタンだとクリックされやすい?

「ボタンだとクリックされやすい」と、以前は思っていました。

でもこれも、一概にはそうと言えません。

ボタンをボタンだと認識しない人もいるからです。

よくブログやサイトを見る人なら「あ、ボタンだ」と思うかもしれませんが、疎い人はリンクっぽいリンクでないど(青色&下線など)気付かないこともあるそうです。

決して「ボタンがいい」「おしゃれならおしゃれなほどいい」というわけではないことを覚えておいてください。

おしゃれさと使いやすさ・ユーザビリティはまた別物です。

読者層(ブログ・サイトを見慣れているかどうかなど)・ジャンルを考え、どのような形のリンクにするか考えてみてください!

バナー VS テキスト!勝つのはどっち?

「リンクは絶対テキストがいい」という意見をたまに耳にしますが、何事にも絶対はありません。

わたしはバナーとテキストを状況によって使い分けるようにしています。

例えば、ダイエット系の広告なら、ただの文字だけのリンクとキレイで細い女性のウエストが強調されたバナーのリンク、どちらが目を引くでしょうか?

この場合、きっと後者なのではないかと思います。

計測していないので予想となりますが、このように、ジャンルによってはバナーを使った方が魅力的に映るものもあると思います。

美味しそうなごはんなども、テキストよりも画像の方が良さそうですよね🍙

「テキストの方が圧倒的にクリック率が高い」「バナーは広告色が強いのでクリックされない」などいろいろな意見がありますが、自分で試して確かめるしかないのです。

何度も同じことを言いますが、正解はありません。

自分なりに予想を立てて1ヶ月はテキストリンク、次の1ヶ月はバナーリンクと期間を決めて計測してみるのもいいと思います✨

デザインを考える際の注意点

デザインを考える際の注意点

上記で説明したものすべて自分でデータを取ったわけではないので、根拠がなく申し訳ないです。

ですが、何か一つの意見を絶対的に信じることは結構危険だと思います。

これはデザインに限らず言えることかもしれません。

「自分の頭で考えることが大事」です。

「そう言われたからそうした」では、ブログやアフィリエイトではなかなか稼げないです。

ジャンルや読者のことを考え、想像し、試行錯誤することで前に進むことができるからです。

なんでも参考にするのは良いと思うのですが、それを自分に当てはめて考えるようにしてください。

同じようなことを何度も言っていますが、大切なことなので何回も言います!

他の人の良いところを真似しながら、自分のブログ・サイトのジャンル・内容・読者層を考えて照らし合わせて取り入れていってくださいね💕

 

おすすめPCツール・アプリまとめ

ここからは、わたしが実際に使っているおすすめツールやアプリ、フリー素材サイト、プラグインをどんどん紹介していきます!

まずはPCメインで使っているツールやアプリの紹介から💻💕

どれもわたしにとっては必須のものばかりです。

Pixelmator

『Pixelmator』は、さっきも紹介した通り、ロゴ画像やアイキャッチ画像を作るときに大活躍です!

Photoshopも使ってみたことはあるのですが、Pixelmatorを先に使ってしまうと使えなくなってしまいました…

というのも、Pixelmatorは直感的に使えるので、とっても使いやすいんです。

Photoshopに慣れている人はそちらでもいいですが、そうでない人はぜひPixelmatorを使ってみてください!

簡単な画像加工から切り抜き、ロゴ画像やアイキャッチ画像作成まで、ブログやサイト運営のための画像作成なら困らないか使いきれないくらいの機能があります。

以下のサイトも参考にすると、より快適に使えます👇

iMageTools

『iMageTools』は、まとめて画像のサイズを変えるとき、ファイル名を変更するときに使っています。

画像が何枚もあると、いちいちサイズやファイル名を変えていくのがとっても面倒です。

そういうときiMageToolsがあれば一発です👌

Skitch

『Skitch』は、簡単な画像加工を行なう際に便利です。

今回の記事で使っている画像も、ピンクの枠や文字で説明が入っているのはすべてSkitchを使っています。

こういうのは全部そうです👇

ロゴの作り方

こういう加工をすることがありそうな人はぜひダウンロードしてみてください。

FileZilla

『FileZilla』は、FTPフリーソフトです。

わたしはいまだに「FTPってよくわかんない…」という状態なのですが、ないと困るものです。

ファイルを直接アップロードしたり、バックアップファイルを確認したり、時々ですが必ず必要となります。

フォントを変更するときにも必要です🙌

FTPフリーソフトはいろいろありますが、わたしはこのFileZillaが使いやすくて好きです💕

FileZillaの公式サイトの左側のボタン「Download FileZilla Client」をクリックしてください。

Mac OSでない場合は、下の「More download options」のところからWindowsなどを選択すればそのダウンロードボタンが表示されます。

mi

『mi』は、とってもシンプルなテキストエディタです。

HTMLやCSSを整えたり、一時的に保存したり、何かメモしたりいろいろ使えます。

他にもAtomなどちょっとかっこいい感じのテキストエディタもありますが、わたしはそこまで使い込まないのでmiが一番シンプルで好きです😊

一つあれば何かと便利なので、ぜひダウンロードしてみてください。

miのダウンロードページはこちら

 

おすすめスマホアプリまとめ

次はスマホアプリのまとめです📱

わたしはiPhoneを使っているのですが、カメラアプリや画像加工アプリには本当お世話になってます。

以下はすべて、厳選神アプリばかりです💕

「これ知らない!」ってものがあったら使ってみてくださいね。

Dropbox

まずは『Dropbox』!使っている人も多いのではないでしょうか?

これがあれば、ブログ・サイトに使う画像を安心して大量に保存することができます。

わたしはいつも写真は「iPhoneで撮影→iPhoneで加工→Dropboxに保存→PCでファイル名変更」して使っています。

イラストを作る場合は「Pixelmatorで作成→Dropboxに保存」という風にしています。

「画像なんて一度ブログに載せちゃえばもとの画像は消してもいいんじゃないの?」と考える人もいるかもしれませんが、もしブログに何かあってなくなってしまったら、画像も消える可能性があります💦

だから、もしもの時のために画像は残しておいた方がいいです。

PC自体に残しておくとどんどん重くなってしまうため、Dropboxのようなオンラインで残して置ける場所を一つ用意しておくと安心です!

わたしはたぶんもうDropboxなしではやってけないと思います(笑)

DECOPIC

『DECOPIC』は、一番使いやすくてヘビロテしてる画像加工アプリです。

シンプルなフィルターからハートを散りばめた可愛いフィルターまでいろいろあったり、スタンプも自分の好みに合わせて随時ダウンロードできるので便利です💕

ibisPaintX

『ibisPaintX』は、イラストを作るときに使っています!

例えば、このブログにもよく登場する右下の女の子👇

アフィリエイトの仕組み

こういう女の子をibisPaintXでたくさん書いて、表情も描き分けておいて、後ろをPixelmatorで透過処理してDropboxに保存します。

そうすると、Dropboxからドラッグ&ドロップするだけで上のようなイラストが作れるわけです💡

使い方は簡単です。メモ用紙などにテキトーに描いたイラストをスマホカメラで撮って、ibisPaintXを起動して上からなぞって、色をつけていくだけ!

「スマホでやるのって難しそう…」と思うかもしれませんが、拡大縮小自由自在なので、意外と簡単にできちゃいます。

本格的な道具や機能がなくても、ibixPaintXがあればこれくらいのイラストはパパッと描けるので、ぜひやってみてください!

AnalogParis

『AnalogParis』は、インスタで流行りの「ピンクフィルター」をかけられるカメラアプリです。

ピンクにするだけでなく、暗い画像も一気に明るく、そして可愛くなるのでとーってもおすすめです!

有料ですが、買って大満足でした!

例えばこれが…👇

AnalogFilmBefore

こんな風に明るく可愛くなります!!👇

AnalogFilmAfter

iPhoneは画質はキレイだけどどうしても暗くなってしまうことが多いので、わたしはいつもこのフィルターを通すようにしています。

ちなみにフィルターも何種類かあって微妙に違うので、その状況によってぴったりなフィルターを見つけることができます!

「写真が暗くなるのが嫌」「可愛い感じにしたい!」という人におすすめです❤️

Foodie

『Foodie』は、主に料理のために使ってます。

フィルターがおしゃれで、ご飯が美味しそうに写るんです!

たまに誰かが料理の写真を載せていて、本当はもっと美味しいはずなのに美味しそうに撮れていないことがあって「もったいないな…」と思ったりします😭

そんな人にはぜひおすすめしたいアプリです!

でもこのアプリのすごいところは、料理だけでなく人や風景もキレイに撮れてしまうところ…!!

AnalogParisと併用する感じでわたしは使ってます💕

Collon

『Collon』は、簡易的なイラスト画像を作るときに使っています。

Pixelmatorのスマホ版みたいな感じです。

イラストを引っ張ってきたり、吹き出しをつけてみたり、文字を入れてみたり…

背景画像も可愛いものが豊富に揃っているので、簡単なイラスト画像を作りたいときに便利です。

BeautyPlus

もう自撮りするならこれしかない!!ってくらい使っているのが『BeautyPlus』です✌️

これなしでは自分の顔はアップできません…くすんで荒れた肌も一瞬でツルツルにしてくれるのでありがたい🙏💦

自撮り苦手なわたしでもこれで練習したらいい感じに撮れたので、これから顔出ししていこうと考えているブロガーさんなどにぜひ使ってみてほしいです!

WordPress

ブログを書くときはほとんどPCなのですが、たまーに電車に長い時間乗ってたりして「書こうかな」って思ったときに使うのが『WordPress』のアプリです。

思ったより使いやすくてシンプルです。

気軽にスマホで書くときとPCできちんと画面と向き合って書くときと両方あっていいと思っているので、スマホで書く機会がありそうな人はぜひ!

秘密のアルバム

わたしの場合かもしれませんが、ブログをやっていると、人に見せられないような画像が増えていきますww

ダイエット中のひどいビフォー写真とか、自撮りを練習した写真とか…

それらがずっとカメラロールの中に残っていると恥ずかしいので、『秘密のアルバム』というパスワード付きのアルバムに移すようにしています。

このアルバムに移しておけば、カメラロールの方は消して大丈夫になります。

密かに重宝してるアプリです。

 

よく使うフリー写真素材サイトまとめ

わたしがいつも使っているフリー写真素材のサイトを紹介します!

Unsplash

unsplash

『Unsplash』は海外のフリー素材サイトです。

とにかくおしゃれ!!光がいい具合に入ってる写真とか、神々しい(?)写真がいっぱいです。

Unsplashの写真素材を見る

GIRLY DROP

girlydrop

『GIRLY DROP』は、THE!!女の子って感じのフリー素材サイトです。

とーっても可愛くておしゃれで、たまに写真増えてるかな〜って見に行くのが楽しみです💕

GIRLY DROPの写真素材を見る

FLATICON

flaticon

『FLATICON』は、ロゴ画像・アイキャッチ画像を作るところでも紹介しました。

名前の通り、とってもかわいいフラットデザインのアイコンをフリーでダウンロードすることができる素敵なサイトです。本当は教えたくないくらい…

ダウンロードしてドラッグ&ドロップするだけで、おしゃれなイラストっぽくなります!

いろいろ検索してみてください❤️

FLATICONの素材を見る

 

デザイン・見た目を整える際に重要なプラグインまとめ

WordPressのプラグインでも、デザインに関わるものがたくさんあります!

「これは入れておくべき!」と思うものを紹介します✋

TinyMCE Advanced

『TinyMCE Advanced』は、投稿画面のビジュアルエディタをカスタマイズすることができるプラグインです。

テキストのフォントサイズを変更したり、簡単に表や動画を追加したりする項目を追加できるんです。

WordPressのデフォルトの投稿画面の項目は微妙に少ないので、このプラグインを入れて必要そうな項目を追加しておくと、記事作成が捗ります🖋

WP Visual Icon Fonts

『Wordpress Visual Icon Fonts』は、記事中に簡単にFontAwesomeのアイコンを挿入することができるプラグインです。

こんなのとか→ icon-heart 

こんなのも→ icon-anchor 

これも→ icon-tag 

ポイントとなる部分で使ったり、文章の終わりにちょこんとつけてみるのも可愛いです!

いちいちFontAwesomeの公式ページからコードを引っ張ってくる必要がないので、とっても便利なプラグインです。

Table of Contents Plus

『Table of Contents Plus』は、記事に自動的に目次を追加するプラグインです。

長い記事を書くことが多い人は、ぜひ入れておいてください。

最初に「こういう項目がありますよ!」と目次で宣言しておくだけで、読者の「どこまで続くんだろう?」「どういう内容が書いてあるんだろう?」という不安を払拭することができます。

Huge IT Lightbox

『Huge IT Lightbox』は、画像のポップアップを表示するプラグインです。

画像をクリックしたとき、フワッと拡大表示されるあれです。なんかかっこいい!と思ったので入れておきました✋

Display Widgets

『Display Widgets』は、カテゴリごとに表示するウィジェットを変更できる機能を追加してくれるプラグインです。

例えば、「脱毛の広告を、脱毛のカテゴリの記事の時だけ記事下に表示したい!」と思ったとします。

「他のダイエット関連の記事などには表示させたくない」「脱毛のときは脱毛の広告だけ出るようにしたい」ということですね。

そういう振り分けが、このプラグインを使えば簡単にできてしまいます。

広告だけじゃなくても、このウィジェットはこのカテゴリの時だけ…と振り分けたくなったら、チェックボックスにチェックを入れるだけで切り替えられるようになります。

「必要なものを必要な時だけ表示させたい」と考えている人にぴったりのプラグインです💕

Instagram Feed

『Instagram Feed』は、このブログの右上(スマホでは下の方)にあるように、インスタの画像をバーっと何枚か出してくれるプラグインです。

枚数や何列にするかなど、自分でカスタマイズすることができます。

インスタのプロフィールも表示させることができるので、プロフィール代わりとしても使えます。

顔出ししている人、SNSと連携させたい人にはとってもおすすめです!

 

自分のブログ・サイトを細かく観察しよう!

自分のブログ・サイトを観察しよう

パッと訪れたブログやサイトが、ところどころレイアウト崩れをしていて、色が原色でチカチカして、フォントがめちゃくちゃ小さくて読みにくいものだったら、あなたはどうしますか?

きっと5秒もしないうちに「なんかやだからやめよ」と帰ってしまう人が大半なのではないかと思います。

この「なんかやだからやめよ」を「なんかいい感じだから見てみよう」に変えるのが、デザイン改善の役割です。

そのためには、自分のブログやサイトを細かく観察することから始めましょう。

読者の立場になって、「この色だと見にくくないかな?」「フォントの大きさはPCとスマホで分けた方がいいかも」「画像が暗いなあ」など、気になるかもしれないポイントを洗い出します。

わたしも暇があれば自分のブログ全体や記事を見て、気になるところがないかチェックしています💡

デザインの詳しい知識はなくても、この「なんかいい感じ」というのを突き詰めていけば、自然とやるべきことが分かってきます。

奇抜で前衛的でおしゃれな目立つブログ・サイトを作る必要はありません。

見ていて心地よく、伝えたいことを伝えたい人により伝えやすくなるデザイン・見た目を考えていってくださいね😊

デザイナーでもなんでもないわたしがいろいろ書いて恐縮ですが、もし参考になりそうなところがあればぜひ取り入れてみてください💕

ABOUT

ブロガー・アフィリエイターとして活動中の25歳。東京都に住むフリーランス。
2014年にアフィリエイトを始め、2016年に独立しました。アフィリエイトの素敵さ、楽しさを伝えたくてこのブログを始めました(ノ)^ω^(ヾ)
好きなことをしてゆるく楽しく生きていきたいです。
詳しいプロフィールはこちら