➡ ENDOO VLOGで紹介したものはコチラ ⬅

【はてなブログ/カスタマイズ】レビュー記事にピッタリのデザインとテンプレート化のメリット

f:id:eshateblo:20180323175607j:plain

はてなブログでレビュー記事を書いている人も多いと思いますが、記事のデザインを考えたことってありますか?

 

Endooも食べ物やガジェット、雑貨、お店などのレビューを中心に書いているブロガーの一人です。最近、レビュー記事はテンプレート化して、デザインを統一しました。

 

良かった参考にしてみてください。

 

まずは、完成形!

例えば、こんな感じです。ポイントは構成がほとんど同じということと、レビュー記事ならではのカスタマイズをしているということ。

 

商品はAmazon・楽天・Yahoo!のリンクを、飲食店は食べログ・ぐるなび・ホットペッパーグルメのリンクを貼ってます。

 

 ▼レビュー記事(飲食店・コスメ・ファッション)

www.endoo.site

www.endoo.site

www.endoo.site

 

レビュー記事って、基本的に構成は同じ気がする?

ブログを書く時にちゃんと構成を考えている人もいるかと思いますが、僕は基本的にはノリだけでダラダラと書いています。

 

で、ある時思ったんです。「レビュー記事って、書くこと同じじゃない?」って。モノやお店、場所やサービスを紹介する上で、書く内容ってだいたい同じなんですよね。(僕の場合は)

 

例えば…

  • モノならスペックやサイズ、価格
  • お店や場所なら住所、電話番号、営業時間
  • 買ってみた、食べてみた、行ってみた時の写真や感想
  • メリット、良い点
  • デメリット、悪い点
  • 口コミやネットの反応
  • 特化した内容
  • まとめ

 

と、まぁ、僕の場合はこんな構成になります。内容をひねって書く人や、ネタっぽく書いたり、ストリート仕立てで書く場合もありますが、シンプルな構成ってこんなもんだと思います。

 

強いて言えば、【特化した内容】くらいが記事ごとに違うだけで、後の流れは同じです。見出しもほとんど統一してます。

 

それなら、テンプレート化した方が楽じゃない?っていうことで、先日からレビュー記事を見直したわけです。賛否両論あるかと思いますが、個人的にはこのやり方が気に入ってます。

 

レビュー記事のテンプレート化について

ブログ経験のある方は抜きにして、構成を考えるのが苦手だったり、初心者の方は記事のテンプレート化をした方が効率がグッと上がる気がします。

 

まず、重要なのは「テンプレート用記事の構成を考える」こと。

 

面倒ですが、せめて1パターンくらいは考えたほうが良いです。最初に考えてしまえば、後は商品名や店舗名をあてはめていくだけなので。

 

例えば…

  1. 出だし・問題提起・購入or訪れた理由
  2. 商品や店舗情報
  3. 口コミや評判
  4. レビュー・レポート
  5. メリット・良い点
  6. デメリット・悪い点
  7. 特化した内容
  8. まとめ

 

テンプレート用に作った記事は、原本として、次からは「複製」して書いていきます。はてなブログの複製方法は下記をご覧ください。

 

▼はてなブログ/記事の複製方法

staff.hatenablog.com

 

レビュー記事に使える!おすすめのカスタマイズ

Endoo Siteで使っているカスタマイズをいくつか紹介します。ほとんど参考にさせて頂いたブログのコピペなので、詳細は省きます。カエレバ風デザインだけ少しいじってるので、CSS等を載せておきます。

 

商品や店舗情報は「カエレバ風」

レビュー記事と言えば、カエレバやヨメレバを使っている方は多いですよね。簡単に商品リンクを貼れるし、デザインもスッキリしていて見やすいです。

 

でも、僕は「カエレバ風」を愛用しています。理由は簡単です。

 

Amazonや楽天に限らず、飲食店(食べログやホットペッパーグルメなど)も扱っているので、カエレバやヨメレバでは対応できないんですよね。

 

なので、それっぽいデザインで、なおかつリンク部分を自由にカスタマイズできる方が助かるんです。

 

下記のブログからコピペして使わせてもらってるんですが、スマホ用でも綺麗に見れるように少し変更してます。どこをどう変更したのか忘れました(笑)レスポンシブ対応のサイトは関係ないかも。

 

▼サンプル

f:id:eshateblo:20180131102648j:plain
「Endoo Site」で商品検索
商品購入&価格チェックはコチラ!
メーカー/ブランド:Endoo(エンドゥー)
評価/口コミ数:★★★★☆/50(Amazon)
Endoo購入時の価格:¥100
 
リンク
リンク
 

 

▼Endoo Siteと同じデザインにしてみる

画像URLを入れないとデザインが崩れます。画像については、Amazonで取り扱っている商品ならAmazonから、その他の商品や店舗・場所の場合は予め「はてなフォトライフ」にアップロードして、URLをコピペしてください。Amazon以外の画像を使う場合は、サイズに注意!詳しくは下記の参考にさせて頂いたブログをご覧ください。

➡デザイン>カスタマイズ>デザインCSS

.af-box{
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border: 1px solid #d1d1d1;
padding: 10px;
margin: 0 8px;
}
.af-imgbox{
width: 160px;
margin-right: 10px;
float: left;
text-align: center;
}
.af-textbox{
width: 100%;
}
.af-title{
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.af-desc{
font-size:14px;
margin-bottom: 10px;
}
.af-kobox{
width: 120px;
margin: 0 5px 0 0;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
float: left;
text-align: center;
}
.af-kobox a.aflink{
display: block;
padding: 5px 0 5px 0;
text-decoration: none;
}
.af-taberogu{
border: 2px solid #F3A847;
}
.af-taberogu a{
color: #F3A847;
}
.af-hotpepper{
border: 2px solid #BF0000;
color: #BF0000;
}
.af-hotpepper a{
color: #BF0000;
}
.af-gurunabi{
border: 2px solid #1995DF;
color: #1995DF;
}
.af-gurunabi a{
color: #1995DF;
}
.clear{clear:both;}
@media screen and (max-width: 399px) {

.af-imgbox{
margin: 0 auto;
text-align: center;
float: none;
}

} 

➡デザイン>スマートフォン>フッタ(PRO)>ページャ下

.af-box{
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border: 1px solid #d1d1d1;
padding: 10px;
margin: 0 8px;
}
.af-imgbox{
width: 80px;
margin-right: 5px;
float: left;
text-align: center;
}
.af-textbox{
width: 100%;
}
.af-title{
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.af-desc{
font-size:14px;
margin-bottom: 10px;
}
.af-kobox{
width: 100%;
margin: 8px 5px 0 0;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
float: left;
text-align: center;
}
.af-kobox a.aflink{
display: block;
padding: 5px 0 5px 0;
text-decoration: none;
}
.af-taberogu{
border: 2px solid #F3A847;
}
.af-taberogu a{
color: #F3A847;
}
.af-hotpepper{
border: 2px solid #BF0000;
color: #BF0000;
}
.af-hotpepper a{
color: #BF0000;
}
.af-gurunabi{
border: 2px solid #1995DF;
color: #1995DF;
}
.af-gurunabi a{
color: #1995DF;
}
.clear{clear:both;}
@media screen and (max-width: 399px) {

.af-imgbox{
margin: 0 auto;
text-align: center;
float: none;
}

}

➡記事中のHTML編集より本文にコピペ

<div class=”af-box”>
<div class=”af-imgbox”>画像URL</div>
<div class=”af-textbox”>
<div class=”af-title”>「商品名など」で商品検索</div>
<div class=”af-desc”>商品購入・価格チェックはコチラ!</div>
<div>1行目</div>
<div>2行目</div>
<div>3行目、行は増やせます</div>
<div> </div>
<div class=”af-kobox af-taberogu”><a class=”aflink” href=”リンク” target=”_blank” rel=”noopener noreferrer”>サービス名</a></div>
<div class=”af-kobox af-hotpepper”><a class=”aflink” href=”リンク” target=”_blank” rel=”noopener noreferrer”>サービス名</a></div>
<div class=”af-kobox af-gurunabi”><a class=”aflink” href=”リンク” target=”_blank” rel=”noopener noreferrer”>サービス名</a></div>
</div>
<div class=”clear”> </div>
</div>

 

▼参考にさせて頂いた記事

収益増加!カエレバより綺麗なアフィリエイトリンクをコピペで設定 | iscle [イズクル]

 

評価の数値化・星のマーク

レビュー記事で重要なのは、視覚的な評価だと僕は思います。パット見で良いのか悪いのか分かると、読んでいる方にも優しいですよね。

 

で、単純に星のマーク(★☆)を並べるのでもいいかなって思ったんですが、素敵なカスタマイズを紹介しているブログがあったので、使わせてもらいました。

 

▼サンプル

コスパ 
使いやすさ 
デザイン 
品質 
耐久性 
携帯性 
肌触り 

 

▼参考にさせて頂いた記事

レビューブログに使ってほしい はてなブログカスタマイズ その2:自分の評価を星で表示 – FOXISM

 

文字に枠をつける

記事のテンプレート化は、内容が単調になりかねません。そんな時に使えるスパイスが、こいつです。文字に枠をつけて、ワンポイント的なことを書くと仕上がりがグッと良くなります。

 

また、僕の場合は記事の最初の方に「こんな人におすすめ」という枠を設けています。どんな人にメリットのある商品か分かりやすいように工夫しています。

 

▼サンプル

こんな人におすすめ!

こんな感じで

 誰に向けた記事なのか

✔ 書いておくと

いいかもね

 

▼参考にさせて頂いた記事

おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ – NO TITLE

 

最後に

このやり方だと、ちょっとしたレビュー記事でも無駄に文章が増えたり、書く必要のない項目が出てくる可能性があります。

 

がっつりレビューする時にはテンプレートのパターンAを使って、軽めの時はパターンBを使って…みたいに記事のボリュームをコントロールする必要はあるかと思います。

 

ゆくゆくはテンプレートから抜け出して、記事ごとにオリジナリティー感を出したいと思ってますが、成長するまではこのやり方がオススメです。

 

では。