ブログをリニューアルしました：「居心地が良くて長居したくなるサイト」を目指してみた

なんか急に思い立ち、１週間くらいかけてこのブログ「みるめも」を大リニューアルしました。

普段スマホからご覧の方はあまり変化を感じられないかと思いますが、PCで見ていただくとだいぶ変わっていると思います。

別に何か意味があるわけではないんですが、なんとなく記録を残したくなったので

• どこをどうカスタマイズしたか
• 何を目的にどういうコンセプトを目指したのか

などをメモがてら記事にしてみることにしました。とか言いつつ実は自分がいつ何をやったか全く覚えていられないからというのが一番の理由

ご興味ある方はぜひ！

リニューアルでカスタマイズした箇所

本当に自分の備忘録の勢いですが、それぞれ箇条書きしてみます。

サイト構造

サイト構造を大幅に変えました。

今までずっとやりたかった「サイト型トップページ」の導入と同時に、新着記事一覧は別の固定ページに分けて読者の導線をすっきりさせました。

たまたま見つけた記事からそのサイトを気になったときって、やっぱりとりあえずトップページに行きますよね？今回は全体的にかなりそれを意識しています。

トップページ

これがトップページ。

「初めて"ざっと見"をしにきた人にどんな雰囲気のサイトなのかなんとなく伝わる感じ」を大切にしてみました。

気になる記事をクリックしたくなるようなエフェクトも作ってみた！

カテゴリ整理と新カテゴリメニューの作成

カテゴリ整理は昔から延々とやってますが、今回も少しテコ入れ。

それと同時に、上部のナビメニューにカテゴリを並べるのではなくカテゴリメニュー自体をホバーすると全てにアクセスできるように変えてみました。

スマホでも同じようにしています。

ヘッダーのメニュー類をすっきりさせたかったことと、多くのカテゴリを押し付けるように並べたって99%の読者には邪魔なだけだろうと思ったからです。それよりもまずはトップページに行ってもらうことを想定しています。

サイドバー削除

実は今回のリニューアルの発端はこれ。

「サイドバーがなくて中央にシングルカラムだけのサイトってめちゃめちゃ文章が読みやすいな」と気付き、今ではコンテンツに集中してもらうにはこれ以上ないデザインだと思うようになりました。

僕が好きなサイトや読みやすいと感じるコンテンツはほぼ全てこうなっているので、自分も真似してみました。結果的には大満足。おかげで自分の記事読んじゃう「ブロガーあるある時間」が増えちゃったけど…。

ただしカラムの横幅が広くなって１行の文字数が増えると読みにくくはなるので、ここの幅の調整は1px単位でやっていました。これからもちょくちょくいじっていきたい。

ちなみにコンテンツプラットフォームで有名な「note」もシングルカラムオンリーで超シンプルに徹したサイト。

ただし読みやすさ優先のためか１行の文字数は少なめで（全角34文字、よく見る数字です）、これだとデザインバランス的には少し微妙に感じました。難しいな。

また、サイドバー削除に合わせて広告類をはじめ余計なUIも全て取っ払いました。

AdSenseだけは明確な収益減になっちゃいそうですけど、僕はお金より自分の好きなサイト作りを優先したい！と思ってこうしてみた。そのうちAdSenseだけ追尾で復活させるかも

スクロールして閲覧するときに上部にさりげなくサイト名を表示

これもいつかやろうと思っていたことで、目的は「自分のサイト名を無意識的にでもいいから覚えてもらう」ことです。

僕のブログは「固有名詞のひらがな４文字」という最高の条件だそうで 、

だったら少しでも認知度を上げる努力をしてみよう！ってことでやってみました。

上か下かに限らず出たり引っ込んだりするバーはうざいことこの上ないので、そういう風には思われないよう最大限注意しました。

ちなみに検索ボックスも自作しました。

検索アイコンってどこに置くかすごく悩みどころですよね…。今回は良い場所が見つかってよかった。

記事内のブログパーツ、フォントやファーストビューなど全てのデザイン

デザイン的な全て、という感じです。項目的には味気ないですが実際の時間はここに一番使いました。ひたすらCSSの微調整を繰り返す１週間。楽しかったー！

「なんか分からないけどずっとそのサイトに居たくなるようなテイスト」ってあるじゃないですか。ああいうのを初心者ながら頑張って目指してみたつもりです。

もともと全体のキーカラーもブラウン系だったので「アットホーム感」みたいのとは相性が良いかも！と思います。どう思われているかな～

あと、今回は「余白」を意識してみました。

シンプルなデザインって何もないところが目立つので、余白を上手く使えるようにならないと一気にダサくなるかなと。デザインは本当にド素人なので今もそうなってないか心配です。

カテゴリによって表示するプロフィールを出し分ける

ここからは機能的なもの。

カスタマイズ中にマクリンさんのツイートを見て閃いたカスタマイズです。

※ツイート見つからない…！これ↓じゃなかったんだけど…。

僕は基本的に「特化ブログより雑記ブログ派」なんですが、そうは言っても1人の検索ユーザーからしたらたぶん特化サイトの方が他の記事を読みたくなるはず。

というわけで、「特化ブログに見える雑記ブログ」を目指してみようと思ってやってみたのが「カテゴリごとにプロフィールを変える」でした。

「基本はみんな一見いちげんさん」ということを忘れずにおきたいですね。

ページナビも同カテゴリのものを表示するように

これもさっきのマクリンさんのツイート内にあったもののはず。

しかも自分でテンプレートファイルをいじろうと思ったらなんとCocoonには標準で設定が用意されていた…！

いやはや相変わらず恐るべしCocoon。

コメント送信後にサンクスページを表示する

読者の方からよく2回以上同じコメントが投稿されてくるのだけど、どうやら「WordPressはコメントの送信完了後に何も通知をよこさないらしい」ということに最近気付いたんですよね。

なのでコメント送信後にサンクスページを表示する関数を作りました。

function disp_thx(){
  wp_redirect('サンクスページのURL');
  exit();
}
add_action('wp_insert_comment','disp_thx');

サンクスページには「もとの記事に戻るボタン」も置いたので、コメント送信後満足してページを閉じられないようにも配慮してみました（なおだいたいみんないなくなる模様

WordPressの管理者バーをなくした

サイト運営者側の内容ですが。

WordPressにログインしているときって自分のサイトすごく重くなりません？
その犯人はたぶんこのadmin-barだと思います。

というわけでこれを非表示にしたい。display:none;では意味がないので根本から消したいのだけど…。

あった！WordPress標準で用意されているとは思わなかった！

使っていた機能があるかといえば、すぐに表示しているページを編集したいときの「編集ボタン」くらいだったんですが、これはCocoonが持っている機能でカバーできます。

ただしこれはスクロールでひょこひょこ動くしデザイン的にも目立つので…

こんな感じにしてスクロールしても動かなくしました。バッチリ～

もっと色々やった気もしますが思い出せるのはこのくらいでした（もう忘れてる）

おわりに：引き続き「みるめも」をよろしくお願いします

色んな思いがあってこのブログをやっていますが、それでも「たくさんの人に読んでもらって"いいブログだな"と思ってもらいたい」というのはやっぱり変わりません。

なんかストレートな貪欲さであまり書くべきではないことなのかもしれないけど、結局は今回もそれを目当てにリニューアルしたわけで。これからもやることは変わらないのかなと思います。

いつも読んでくださっているみなさん、ありがとうございます！
これからもみるめもをよろしくお願いします～

それでは！