こんにちは!ふるもーす(@frumosart)です!
今回は、ブログをリニューアルしたので個人的な雑感について好き放題綴っていきたいと思います。
突然ですが、ブログを改築しました~!イエ~イ、パフパフ~!
いやー、結構大変でしたわ。思いの外、時間も手間もかかってしまいました。
デザイン的な面もそうですが、
・今まで書いた100以上の記事の整理
・カテゴリの仕分け
・タグを全部付け替える
・記事リストを別で作る
等々、とにかく細かい作業が多くて・・・。
まぁそれだけ放置してたんだから仕方ないんですけどね。自分のwebサイトのデザインって一度やり始めると止まらなくなっちゃう。
素敵なデザインにしたい!
こういう感じのイメージにしたい!
妄想が先走ってアイデアはとめどなく次から次へと溢れてくるし、気になる箇所や直したい部分もどんどん出てくるし、元々凝り性だから細部までこだわりたくなっちゃうし。
だからブログ立ち上げ当初から今の今まで、あえて外観にはノータッチだったんです。だって、最初にデザインから手をつけちゃったら絶対に記事が書けなくなるのが分かり切っていたので・・・。
ブログ=コンテンツが命!
外側ばっかりこだわって中身を作る作業が進まないのは本末転倒!
・・・そんな考えがあったので、開設当初から多分2年くらいはずっとテンプレートもデフォルト表示の味も素っ気もないデザインのまま運営してきました。
でも、ある程度記事が溜まってきて、kindle本も出したりして、
本を買って読んでくれた人が当サイトに来ることもあるかも知れない・・・
ってなった時に、もう少し分かりやすく情報がまとめられたサイトに作り替えた方がいいよな~と思い直しまして。
丁度そういうタイミングだったというか。
「ぬはははは、機は熟した・・・!」
・・・的な?(誰)
それで、1か月半くらいかけてシコシコと改装作業をしていたというわけです。お陰様で、イメージ通りのものが作れたと思います(現段階では)。自分の満足のいく仕上がりにはなったような・・・!?
この記事では、そんなブログリニューアルに関するあれこれを適当に備忘録がてら呟いていこうと思います。お暇な方は読んでみて下さいまし。
なぜブログをリニューアルしたのか?自分なりの理由を語ってみる
当ブログは2021年の1月に開設しました。それから早くも5年以上が経過しているわけです。まぁいかんせん更新が不定期なので、かなり放置プレイになっていた時期も長かったんですけどね。
それでも気が付けば記事数も100を超えていました!継続は力なり。そんな気まぐれ更新な当ブログ、実は管理人としてずっと不満を持っていたのです。
確かに記事を書くのを優先していたとはいえ、
・テンプレートもデフォルト表示の設定のまま
・新着記事一覧がズラーッと並べてあるだけ
という、無味乾燥とした地味で味気ないクソダサな見た目だったゆえ、トップページを見るたびに「う~む・・・」という何とも言えない気持ちに包まれること山の如し。
もっと自分の世界観を見せたかったし、せっかく訪れてくれた初見の読者さんたちにふるもーすという世界に浸ってもらいたい。
私たちがふるもーすとして
どんな活動をしていて、どんな世界観を持っていて、どんな理念やビジョンを抱いてこのブログを運営しているのか?
が初めて訪問した人にも分かるようなブログにしたい。・・・なのに、なんじゃこりゃ?みたいな(笑)
新しい記事を書いてもどんどん埋もれていくだけで、情報もとっちらかってて、そもそも色々説明不足だし、とにかく
どこに何があるのか?が非常にわかりにくいブログ
だったというか。
だから、もう少しサイトっぽくしたいとは前々から思っていたのです。
理想のイメージは、気になる記事が綺麗に整理整頓・保管された図書館。トピックごとに欲しいものをすぐに取り出せるような書棚が沢山並んでいる、そんなライブラリー的な仕様にしたくて。
ブログは私自身の過去と現在、未来が交わる場所でもあります。
・自分の想いや理念
・ビジョンや目標
・やってきたこと
・これから頑張りたいこと
・現在過去未来
・ささやかな日記
全ていっしょくたにその時の感情や思考を記事として置いておきたかった。
そして、そんなごちゃまぜな内容の当ブログを、創作に関する発信活動の拠点、もしくは母艦的な立ち位置で運営したいなという気持ちもあって。
だから、kindle本を作り終えて色々と区切りがついた今こそ、ブログをリニューアルしよう!と思い立ったというわけなのです。
リニューアル後のブログについて思う事
で、早速改築作業をしようかと思ってサイトを細かく見ていったのですが・・・。
いやー、もうね、至らない点・気になる点ばかりが目について
「ちょ、これ・・・どっから手をつけよう??」
と頭を抱えてしまいましたよ、ええ。
まずは一旦自分のアイデアや視点を整理するために、紙とペンでイメージを図にしたりして、いっちょ前にサイト設計からスタート。・・・うん、こういう作業意外と楽しいのよね。
とにかくあーでもないこーでもないと自分の脳内をこねくり回して、必要な要素を視覚化して、一通りのサイト構成というかブログの設計図が出来上がったのですが、ここでまた一つ問題が勃発。
自分が作りたいサイトの全体像からやるべきことを逆算して考えた時に、「いや、そもそもコンテンツ足りなくね?」と気づいてしまったのです・・・汗。
ここにこういう記事置いて、画像入れてここに繋げて、こっちからはこういう内容のものを入れて・・・とか頭の中にはすでに完璧な完成図が見えてるんですよ。
でも、レシピ(全体図)はわかるんだけど、食材(記事や画像)がない。カレーを作るってのは決定事項で、レシピもちゃんと用意してある。なのに、
じゃがいもと人参、いや、むしろルーもカレー粉もねぇぇぇぇぇ~~~~!
みたいな困った状況に。
仕方がないので、まずはじゃがいもと人参とカレー粉を買う、というか作る(必要な記事を書く)ことから始めて。
その作業でまず1カ月くらいかかっちゃった。その後でようやく無事食材も全て用意し終えて、カレー作りを始められたって流れなんですが、ほーんとね、何事も下準備大事ですわ。
じゃあ、結局どこをどう変えたんだい?って話なんですが、これはもうね、全部です。とにかくブログのありとあらゆるところを総入れ替え、全面リニューアルしました。
多分サイトの雰囲気もガラッと変わったと思います。使っているテンプレートはアフィンガー6(今は7になったけど)。
デザインテンプレートとかは使ってなくて、外観に関してはいちいち全部設定をいじって自分の好みのデザインにしていった感じです。
ここからは、どんなところを変えたのかを一つずつ見ていこうと思います。
トップページ
まずはサイトの顔であるヘッダー画像(と、ヘッダーエリア)を変えました。
サイトコンセプトが
・創作活動
・自己探求
・ホロスコープ
という三本柱で、そこに旅や紅茶といった自分の好きなコトもうまく織り交ぜたかったのもあり、
・自分のオリジナルキャラクター
・夜空(ホロスコープ的な宇宙のシンボル)
・アトリエ
・紅茶
といったサイト構成要素をうまく視覚イメージ化した結果、このような画像イメージが出来上がりましたとさ。

ちなみに、このヘッダーエリア画像はchatgptに作ってもらいました。最初、Geminiにも頼んだんですけど、どうにもこうにもキャラの再現性が微妙でして・・・。

イラストの空気感や雰囲気自体はよかったんですけど、キャラの作画が突っ込見どころ満載すぎてとてもじゃないけど採用できないレベルだったのでボツにしました。
本当はヘッダーのサイト名のロゴも作りたかったんですけど、こういうのもこだわり出すときりがなさそうなので今回はあえてスルー。デフォルトのまま。

画像にはキャッチフレーズも入れて、中央にはボタンもつけてみました。これ、ボタンの色が元々のアフィンガーの設定だとあんまり自分好みじゃなかったので、あれこれ試した末に透明っぽいボタンに変更。
私はCSSいじれるほどの知識がないので、ボタンの色を透過させるのがすごーく大変だったのですが、今はAIに聞けば懇切丁寧に教えてくれるからほーんと便利な時代ですね。

ヘッダー画像の下にもサイトの理念を表すような長めのキャッチコピーを挿入。

ついでにヘッダーの右上にある固定ページも変えて、ヘッダー下にあるナビゲーションメニューもバランスや見栄えを考えて4つに絞りました。
サイトのフォントも全部同じだとつまらないので、世界観を出すために見出しやカテゴリといった各項目ごとに違う種類のものをチョイス。
必然的にサイトに使うカラーも統一感が出て、クリエイティビティを刺激するような内省的なイメージになったんじゃないかなと。

ちなみに、これまではトップページにただ新着記事一覧をただダーッと並べてただけだったんですが、カテゴリごとにおすすめ記事を2~3つチョイスしたゾーンを設置して、その後に自作品の商品バナーを配置してみました。

・kindle紀行エッセイ
・絵本
・YouTubeちゃんねる
・SUZURI
という並びで、個人的にはYouTubeの宣伝バナーがふるもーすの雰囲気にぴったりで気に入っています。
サイドバー
サイドバーの作りも大分変更しました。
基本の
・検索フォーム
・サイドバーのメニュー
・新着一覧
あたりはそのままで、まずはプロフィール欄の内容を作り替えました。

プロフ画像もデフォルトのグレーの人型のやつからオリキャラ画像に変更し、プロフにリンクさせる記事もつけて、初見のユーザーが見た時に大分分かりやすくなったかなと。


プロフ欄のあとには商品案内バナー画像(紀行エッセイと絵本)を2枚追加し、自分の商品の宣伝もしっかりできたらいいなと。
さらにその下にはおすすめ記事セレクションがきて、これはランキング式におすすめ記事を掲載してるんですけど、少しでも回遊率を高められればいいなぁという工夫の1つですね。
フッター
フッターは申し訳程度に
・プライバシーポリシー
・お問い合わせ
を固定ページとして設置してみました。あとは各種SNSリンクも目立たせない程度につけています。
フッターまでスクロールする人はそんなにいないかとは思いますが、一応サイトの体裁を整えるという意味でここも軽く修正。
今回のサイトリニューアルで一番こだわったところと苦労したところ
全体的に修正箇所が多岐に渡ったのですが、その中でも特に
・こだわったところ
・苦労したところ
についても、自分の記憶を辿りながらあれこれ語っていきますね。
カテゴリページの大幅修正
・ヘッダー用のメニュー
・カテゴリバナー
は、基本的に数を4つに絞ると収まりがいいので、ブログのメインカテゴリ自体を設定し直すことにしました。
これまで好き勝手に色々なジャンルの記事を書いてきたので、カテゴリそのものもかなりとっ散らかっていたんですよね。丁度いい機会だったので、一度自分が書いた記事を確認がてら全部手動で4つのカテゴリに再仕分け。
わざわざカテゴリ別に記事一覧リストとかも作って、記事ごとに入れてるタグも全て追加・削除・修正したうえで1つずつリストに記入していったり。
今後どんなテーマで記事を書いていくか?
どんなカテゴリを作って記事を入れていくのか?
といったサイト設計部分も含めて、ここはかなり時間と手間暇をかけましたね。
とにかく
・体系的
・構造的
に理解できるようなブログの作りにしたくて。
初めてきた人がブログの世界観や趣旨を理解したうえで、迷わず自分の興味ある情報に辿り着けるように
というのが今回の改装の目的だったので、ここは手を抜きたくなくて。
たまたま何かの記事に辿り着いた人が、
そのまま関連記事も読む
↓
気になったから試しにトップページに飛ぶ
↓
ほうほう、どんな記事書いてるのかな~?とサイトを回遊
↓
カテゴリやプロフページを見てこのブログの雰囲気を気に入る
その流れで、偶然やってきた読者がその後何度も訪問してくれるようになったら一番いいですよね。
だから、カテゴリとか記事の整理・整頓にはかなりこだわりました。

視覚的に分かりやすくするためにカテゴリバナーを4つ配置したのですが、この画像もそれぞれのカテゴリのイメージに合うようなテイストのものをAIで作成。
それだけでも大分雰囲気が出てきたような気がします。

画像は各カテゴリページの冒頭にも配置し、カテゴリの説明文もあえて中二的な感じにして(笑)、とにかくふるもーすの世界観に浸ってもらえるように作っていきました。
そう、ふるもーすのブログは基本的に中二な世界観なのです!(え)

その甲斐あって、かなり分かりやすい構造になったんじゃないかなと。
SHOPページも作成
今回のリニューアルの大きな目標がSHOPページを作ること。
せっかく
・kindle紀行エッセイ
・kindle絵本
・アクスタ等のグッズ
・lineスタンプ
といった商品を作っているので、それをちゃんと宣伝する場所をサイト内に作りたくて。
基本的に今まで記事は書けば書きっぱなし、サイトも作ったら作りっぱなしだったので、販売とか宣伝とか、認知に繋がるような施策を全くしていなかったんです。面倒臭いので後回しにしていたんですよね汗

SHOPページに関しては、やはりここでも世界観を感じさせたいので、それっぽいバナー画像を作成して配置、そのうえで商品が種類ごとにズラッと並んでいるカタログ風のページにしてみました。
ここでマイブロック機能の便利さを知るというね。いやー、アフィンガーってほんと痒いところに手が届くテンプレだわ~と。
カタログページにはセルフライナーノーツ記事も添えてみたり。
いきなり商品ページに飛ぶよりは、まずは作品の解説記事を読んでもらって、そこで色々な作者の想いとかこだわりとかを理解したうえで買って欲しかったので、そういう仕様にしてみました。
これもまた都度マイナーチェンジしながら、自分がやりたいSHOPの形に徐々に整えていければいいですね。
まとめ・ブログは自分の大切な居場所。これからもいい環境を作っていきたい
さーて、そんなわけで、ブログのリニューアルについてを備忘録がてら好き放題語ってみましたよ!
やっぱそれなりに時間かけただけあって、ほぼほぼ自分のイメージ通りのブログに仕上がりました。何度でも戻ってきたくなるようなブログになった(自分比)んじゃないかと。
これでようやく自分の居場所が出来たって感じがします。
あれこれ試行錯誤しながらいじったからこそ、余計に愛着が湧いてきたというか。自分の好きなコトや興味あることだけを並べた宝箱、いや、おもちゃ箱的な感じ?
それと同時にブログ=自分だけの立派なお城であり、誰にも侵略されない秘密基地であり、色々な野菜が植えられたとっておきの畑であり、自分の本音がひっそり綴られた聖域、ってところでしょうか。
制作過程も想いも、完成した作品も、各種発信メディアの情報も全部ひとまとめにできる。一極集中。これで発信の母艦ができたぞ!と嬉しい気持ちで一杯です。
外側のデザインや内部の構造をしっかり整えることで、こんなに自分自身の思い入れも変わるんだなって改めてびっくりしました。
ワードプレスで作るブログって色々やれることがありすぎて、アレンジや工夫し放題ゆえに何をどういじるか?で迷ってしまいがち。
そういうガワ的なことはどうでもいいから記事をとっとと書きたい!記事だけ書きたいんですけど!という人はnoteとかの方がいいんでしょうね。
記事を書いてハイ終わり、じゃなくて、
出来た記事を自分なりの解釈や設計図に沿って蜘蛛の巣のように、網の目のように張り巡らせていく。
後で何回手を加えてもいいから、
自分だけの秘密基地を居心地よくするために淡々と環境を整えながら作っていく。
結局、ブログって全体的なイメージの統一感だとか、デザインの雰囲気だとか、一つ一つの記事と記事との繫がりとか、各カテゴリごとのテーマ設定や導線設計とか、トップページの構成だとかetc…
そういう細かくてちまちまとした作業の連続ですよね。
記事を書くだけでも全然いいんだけど、
それをどういう見せ方にするのか?がその人の個性の見せ所
のような気がします。
デザインもコンテンツの内容も全体のコンセプトも、もろもろ全部ひっくるめて自分好みの世界観を作っていくのが「ブログならではのよさ」だよなぁなんてしみじみ思ったり。
そういう箱庭的な楽しさが好きな人はきっとブログ向いてるなって、作業しながら感じましたね。
とりあえずしばらくはこの感じで運営していこうと思います。
そんなわけで、めっちゃ長くなりましたが以上、ふるもーすでした!ここまでお付き合いいただき、どうもありがとうございました~。