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

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

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

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

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

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

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

ご興味ある方はぜひ!

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

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

サイト構造

milmemo-new-site-header

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

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

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

トップページ

milmemo-new-site-top

これがトップページ。

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

milmemo-new-top-hover

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

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

milmemo-new-category

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

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

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

milmemo-new-category-sp

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

サイドバー削除

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

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

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

milmemo-new-column

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

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

note-com-1-column

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

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

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

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

milmemo-new-site-top-scroll-header

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

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

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

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

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

milmemo-new-search-box

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

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

milmemo-new-entry-topmilmemo-new-entry-top

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

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

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

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

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

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

milmemo-new-profile-by-category

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

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

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

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

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

milmemo-new-profile-by-category-2

記事下にも内容を変えて置いてます。記事内で自分のキャラクターに興味を持ってもらえるとここのリンクはかなりクリックされやすい。

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

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

milmemo-new-page-navi

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

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

cocoon-pagenavi-same-category

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

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

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

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

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

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

管理画面からコメントの返信などをすると赤い表示が出ますが動作自体には影響がないので放置してます。「コメントの送信タイミング」という良いフックが他になさそうだったので…。

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

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

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

wordpress-admin-bar-old

これ。

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

wordpress-admin-bar-display-setting

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

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

cocoon-admin-bar-original

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

cocoon-admin-bar

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

 

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

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

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

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

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

それでは!

みるみ
みるみ

ブロガー、ソフトウェアエンジニア。

文章を書くのが好きです。サイトは全部自分でつくっています。

この記事へのコメント

はじめまして。
Androidのアプリ記事からこちらのブログを見つけ
とても面白く日々更新を待って生活しています!
私の生活レベルがこちらのブログで上がったのは間違いありません。
本当にありがとうございます。

一言お礼を伝えたくコメントさせていただきました。

これからも、沢山の記事を楽しみに待ってます!!

体調にはお気をつけてくださいませ。

阿部さん、こんにちは。

こういったコメントはお世辞ではなく本当に嬉しくて、これからもブログを頑張ろうというモチベーションになります…!
「生活レベルが上がった」なんて言われてしまうと余計嬉しくて…。笑

これからもこのブログの更新はずっと続けていきますので、どうぞよろしくです!
ご興味ない話題も多いかと思いますが、お暇なときにでもぜひお越しください。

新しいコメントを書く

  • 必須項目はコメント本文のみですが、お名前はぜひご記入いただけると嬉しいです。
    ※メールアドレスを書いた場合も公開されることはないのでご安心ください。
  • 特定のコメントに返信したい場合は各コメントにある「返信する」ボタンからどうぞ。
  • コメントはこちらで承認の作業を行うまでは表示されません。ご了承ください。
    ※ここ数年スパムが激化しており、誤って削除されてしまうケースが増えてきました。スパムボックスも毎日自分の目で確認するようにはしているのですが、どうしても限界があります。確実に僕に連絡を取りたい方は メールTwitter からお願いします。