せっかくGhostにしてたので、ブログデザインをいじってみた

はじめに

ちょっと前にWordPressからGhostへ移行した当ブログ。この時の移行理由として「ヘッドレス思想のCMSであること」を挙げていました。

https://www.iris-on-bookrest.info/hello-ghosts/

そして、今回はそれを実際にやってみたので、方法とかを見ていければと思います。

前提

作業をする前に、この作業をする上での決め事というか目標というかを定めました。

• ローカル環境を別途作成する
• デフォルトテーマをベースにカスタマイズする（イチから作らない！）
• GitLabでのビルド＆デプロイを可能にする
• テーマ以外の管理はしない
• コーティングはAntigravityに任せる

WordPressの時はLocalっていうワンクリックでローカル環境を立ち上げる便利ソフトがあったのですが、Ghostにはないっぽいのでまずこれを用意したいのと、作ったテーマを都度手動でFTPするのはダルすぎるので、CI/CD環境を先に準備したいというのがあります。

そして、管理対象は基本的にはテーマだけ（ブログの見た目だけ）となります。その他のコンテンツはCMSの機能に任せれば良いですしね。

そして、今回のコーティングは最近ハマっているAntigravityに全て任せることにします。もはや今回もになりつつありますね（笑）

本業がエンジニアなので仕事では自らコーティングする機会があるんですが、プライベートで手を動かすことは本当に減りましたね。環境構築とかサーバー設定とかしかしてない気がします！

準備したこと

早速、サイトのデザイン作成にあたる準備をしていきます。やったことはこんな感じ↓

• デザインの下書き
• デザインのイメージ画像
• 導入したい機能リスト

※本当はGhostのローカル環境の立て方とかも書こうと思ったのですが、これは別途やろうかと。

デザインの下書き

デザイン変更にあたり、トップページ、ポストページそれぞれの要素配置とイメージがなければならないので、まずはこれを準備しました。やったことはノートに手書きでカラムレイアウトを書いたりするアナログの手法です。仕事中はこれをExcelでやったりしているんですが、プライベートでそんな事やってると時間がかかってしょうがないので紙になりました。

ざっくりとしたレイアウトに加え、テキストでサイトのイメージを加筆する感じでやりましたね。クッソ雑にやったので10分くらいで完成しました。

デザインのイメージ画像

上で作成したものをキャプチャーしてGeminiに食わせます。

そうするとこんな感じでイメージ画像を出してくれます。

思っていたものどおり！とはいきませんでしたが、Antigravityに渡すイメージ画像としては十分な物ができたと思います。「夜の図書館のイメージ」で出しているんですが、だいぶ誇張される感じがしますね（笑）ちゃんとブログタイトルからも情報を拾ってくれてる感もあります。花とか。

導入したい機能リスト

イメージの準備ができたので、次に導入したい機能のリストを作成しました。Ghostのデフォルトテーマはめちゃめちゃシンプルに作成されているので、機能としてはWordPressより物足りない感じになっており、プラグインもないため、基本的には追加実装が必要となります。

なので、あらかじめ欲しい機能をリストアップしておこうというわけですね。

今回は以下の機能を実装してもらうことに↓

• 目次
• コードハイライト
• 画像押下時の拡大

この辺りはデフォルトだとできないので、個別に実装する必要があるんですよね。基本的には外部のjsライブラリで対応できるやつなので、実装コストは低め。間違いなくできるだろうと思ってお願いしています。

いざ実装

とは言ってもAntigravityにこれまでに準備したものを投げるだけです！今回は自らコードをいじらず、指示→確認のサイクルをひたすらやっていく手法で実装してみました。

これまでは依頼するほどでもなかったら自分で修正しちゃってましたが、今のAIのレベルであれば上手く指示を出せればピンポイントでの修正も楽にできますからね。

指示する際はレイアウトのズレはキャプチャ取って送ったり、フォント変更の依頼はChromeの拡張機能で要素を抜いてきたりと、修正依頼の手法はさまざまです。ブラウザのコンソールにエラーログがある場合はそのままコピーしてテキスト貼り付けしたりも、あるあるだと思います。

ちょっと話は逸れますが、開発者が人間であろうがAIであろうが、正しく修整するためのエビデンスはとても重要です。

エンジニアは新人の頃にテスターという工程を通ることが多いですが、これは工程として技術力がさほど求められないという部分ももちろんあるのですが、より大事なのは「相手にわかりやすいように報告をする」を意識付ける意味があるのだと個人的には思っています。

というわけで、AIを利用して開発する際も、しっかり情報を与えて上げたうえでデバッグしてもらうようにしましょう。

とりあえず完成

もともとのシンプルなブログデザインと比べると、かなり特徴的なデザインになったのではないかと思っています。テーマを選択して導入しただけではないな、感は間違いなく出ているはず。。！

実はGhostにも有料テーマがあって、それを導入すればWordPressみたいにノーコードでいろいろできたりするんですが、結局それをやるとデザインが似たり寄ったりになってしまうんですよね。

筆者もWordPress歴が長いからか、ブログサイトを見たらどのテーマが適用されているか分かってしまいますし。

今回はそこからの脱却を目指していたため、おおむね満足する結果になったのかなと思っています。

最後に

背景画像やらWEBフォントやらでリソース増えすぎて、ブログ表示が重ためになってしまった！まあしゃあない。