当ブログ「力こそパワー」の記事数も200を超え、その半分以上が商品レビュー記事です。
検索で上位に来ている記事や発売から間もない商品の記事なら読んでいただく機会も多いですが、そうでない記事はどうしても埋もれてしまいます。
古い記事が読まれなくなってしまうのは仕方のないことなのかもしれませんが、どの記事も心をこめて書いていますので新たにファンになっていただいた人にも出来る限り読んでいただきたいと考えていました。
そんな悩みを解決するべく、新たな試みを行いましたので記事にてご紹介させていただきます。
レビュー商品一覧ページを作成
今回行なった試みとは、過去にレビュー記事を書いた商品の一覧ページの作成です。
入り口はPC表示時のヘッダー上の「SHOPPING」です。
スマートフォン表示時にはまだ入り口を用意していないので、こちらからお入りください。
入ってみるとこのようなページになっています。
商品ごとに写真・Amazon or 楽天の商品ページリンク・レビュー記事へのリンクの3要素で構成されています。
出来る限り余計な要素を排除したかったので、サイドバーやヘッダー下の関連記事も無いシンプルなデザインにしています。
通常の記事に表示しているカエレバを使った商品リンクに比べ、コンパクトにまとめており、横方向に複数並べられるようになっています。
また、ウインドウ幅に合わせて整頓されるので、無駄に横スクロールせずに済みます。
商品一覧ページを作ったきっかけ
今回の商品一覧ページを作るにあたり、最初のきっかけになったのはスティッキー(id:stockphoto-info)さんのブログ「PHOTO for LIFE」です。
PHOTO for LIFEは以前ははてなブログで運営されていましたが、現在はWordPressに引っ越されました。
https://www.photo4life.net/entry/keep-on-movin/www.photo4life.net
その際にこの「ショッピング」ページを作られており、レビュー記事が大半である私のブログでも導入したいと計画を始めました。
https://www.photo4life.net/product/
方法を考える
「商品一覧を作るぞ！」と思ったものの、どのように実装するのかが問題です。
はてなブログでは実装が難しそうだし別サイトのページに飛ばそうか…と考えたりしながら、気付けば1ヶ月以上経っていました。
そんなある日に出会ったのがこの記事です。
これらの記事で紹介されているのは、はてなブログのトップページを固定ページにするというもの。
時々「え！？このブログってはてなブログなの！？」と疑いたくなるほど、トップページがゴリゴリにカスタマイズされたブログを見たことはありませんか？
超有名どころですが「クレジットカードの読みもの」さんがまさにそれですよね。
先ほどのカスタマイズ記事では「ブログトップを固定ページのようにする」というものでしたが、私のやりたいことに繋がるヒントが多く含まれていました。
特に、記事内に書いたCSSでサイドバーを消すといった発想は「その手があったか！」と衝撃を受けました。
実装イメージ〜作業の効率化
サイドバー等を消せば「それっぽいページ」に出来るだろうと判断したところで、実装イメージを立てていきます。
最初はカエレバにレビュー記事リンクを追加する方向で考えていましたが、レビュー記事への誘導が最大の目的なのにAmazonやら楽天やらのボタンがあると、読者に結局何を一番見てほしいのかが伝わらない恐れがあります。
そこでラフイラストを書きながら「写真・商品ページリンク・レビュー記事へのリンクの3要素にしよう」と決め、同時に「カエレバでは余計な要素が多すぎるので使いまわすのは難しいだろう」と感じました。
また、最終的には100商品近くのリンクを貼ることになりますが、1つ1つにレビュー記事のリンクをコピペをするなど、想像するだけで気が遠くなる作業です。
そこでカエレバのような商品リンクを作成しつつ、あらかじめ指定したURLをリンクとして組み込んで吐き出せるツールを作成しました。
汎用性を一切考えていないまさに「オレ専用」なツールですが、痒いところに手が届くように自分で設計できるのが自作ツールの良いところですね。
このツール作成が楽しく、目的を一時期忘れていたのはここだけの話です。
新たな問題…それはデザインのセンス
自作ツールも完成し、記事にどんどんコピペして商品を貼り付けていきます。
ある程度商品数が増えたあたりでデザイン用のCSSを本格的に書いていったのですが…
ダサい…ダサくない？
頑張ったのですが、私のデザインセンスではこの画像にあるような状態が精一杯でした。
どうしたもんだか…誰かデザインに自信がある人はいないだろうか…
そんなことを考えていた時に見つけたツイートがこちら。
@nantehida03 御見舞代わりに息抜きに作ったこれあげるね( ˘ω˘) pic.twitter.com/sARhYLnUhS
— ケンヂ@ちーむぽんこつ (@neetblogman) 2017年5月28日
めちゃくちゃオシャレじゃないですか？
このヘッダー画像は沖縄の自称ニートなフリーランサー、タイラケンヂ(id:bumpmania)さんが作成したものです。
私はコードを書くことは出来ますが、0からデザインを考える・作り出す能力はさっぱりですので、デザインが出来る人は本当に尊敬しています。
ウェブサイトのデザインだけでなく素敵なヘッダー画像まで作れてしまうって凄いですよね。
そんなケンヂさんに相談してみたところ「ボタンは暖色系の方が良いよ」「商品リンクごとのボーダーは全体囲うんじゃなくて右側だけあれば良いかも」「見出しはシンプルにしよう」と的確なアドバイス、そしてCSSまで送ってくれるという神対応。
その結果、このようなシンプルかつ可愛い見た目に進化しました。
ケンヂさんの協力もあり、目標であった5月中の公開も達成できましたので今度何か贈ります。
今後の課題
記事タイトルに「完成度7割ほど」と書いたように、まだまだ終わりではありません。
主な残作業を書いておきます。
商品の追加
全商品を掲載できているわけではありませんので、今後も少しずつ商品を追加していきます。
見出しにしているカテゴリー名も整理したいですね。
スマートフォン表示
スマートフォン表示時はPC表示時と異なり、広告などの余計な物が表示されていますので、こちらも商品一覧ページ専用にレイアウトを整える必要があります。
本当は商品リンクの並び自体ももう少しお粗末だったのですが、これもケンヂさんの協力により改善されました。
レイアウトがもう少し整ったら、スマートフォン表示時にも商品一覧ページへの入り口を用意します。
絞込機能
商品が多すぎると、下の方にある商品がまた埋もれてしまうことが想像されます。
なので、絞り込みや検索のような「商品を見つけやすくなる機能」を付けたいところ。
どのように実装するかはまだ妄想中ですが、大きなバージョンアップ時にはまた記事で報告させていただきます。
最後に
いかがだったでしょうか。
スティッキーさんの記事をきっかけに妄想し始めた商品一覧ページを先人の知恵やケンヂさんの協力もあって、一つの形にすることが出来ました。
この商品一覧ページをきっかけに過去に書いた記事を沢山読んでもらえるようになれば嬉しいですね。
それではまた。
スマートフォン版も作成
記事投稿から数日…スマートフォン版も無事に作成できました。
同じページですがPCとスマートフォンで異なる外見にするなど遊び心と利便性の両立を意識してみました。
詳しくはこちらの記事をご覧ください。
