はじめに：はてなブログのデザイン問題
最近公式テーマで好きなデザインがない！
っと感じておりました。
WordPressに映るタイミングなのかもしれないなと、ドメイン取得とテンプレまで購入して１ヶ月くらいやってみたのだけれど、やっぱりしっくりこない。
っというわけで、つるたまははてなブログのおかげで今があるしもう一回はてなブログ頑張りたい！っと再起して、AIを導入してカスタマイズに挑戦！
- はじめに：はてなブログのデザイン問題
- 従来のカスタマイズ方法の課題
- 今回実装した新機能・パーツ一覧
- 記事本文ページ
- Claudeを使ったカスタマイズの実際の流れ
- Claudeカスタマイズのメリット・デメリット
- とはいえClaudeでのカスタマイズの魅力
従来のカスタマイズ方法の課題
テンプレ型でカスタマイズはできるけども、自分オリジナルは作れない。
なのでどうしても似てしまう部分や、
この人このテンプレ使ってるなと分かる部分はあったと思います。
WordPressならもっと差別化できるのかな....
そんな淡い思いで、WordPressを触ってみるも、挫折。
そこで出てきたのがAI！
Claudeでのカスタマイズならこれが解決
- 自然言語で指示するだけ
- デザイン知識不要
- 何度でも修正可能
- 自分だけのオリジナルデザイン
このメリットが大きい！実は最初Gemini使ってたのですが思うように行かず、同じプロンプト出したらClaudeがサクッと解決して
Claudeすごい！この勢いで作っちゃお！
になったわけです。
今回実装した新機能・パーツ一覧
全体デザイン編
- 1カラムレイアウトに
- ティール（
#81D8D0）をメインカラーに - 検索ボックス＆サジェスト
- 記事一覧・カード３列可変型
- フッター カテゴリ別人気記事＆SNSフォローボタン
さらに各カテゴリのセクションをBentoGridにして追加
長年やりたかったレイアウトこれだったんだ！！はてなブログでもできるじゃん！！
埋もれていたカテゴリの記事も見やすくなったので、TOPページに行ってみてください！
記事本文ページ
- Amazon・楽天アフィリエイトカード一新
- オーソリティー作成
- 関連記事のデザイン一新
頭の中でやりたかったこと、でも実現できなかったことガリガリやってもらいました！
Claudeを使ったカスタマイズの実際の流れ
いざやりたいと思っても、どう指示していいかは全くわからないAI初心者です。
上手い人だとサクッと行くのだろうけど、自分なりの方法で模索。
STEP 1：デザインコンセプトの決定
- 目指すイメージを言語化
- 参考サイトのスクリーンショット
- Claudeへの指示
実際にどんなサイトにしたいのか、ここは写真と同じ感覚で好きなサイトレイアウトを探しまくり、参考サイトのスクリーンショットやURLを読み込ませて、できるだけ言語化して伝える。
STEP 2：既存デザインの分析
- 現在のCSSを確認
- 改善点の洗い出し
- Claudeに現状を共有
現場のCSS ヘッダー、フッターなどをアップして改善でできるか、作り直しか聞きながら修正。
一個づつだと細かいので一気にやってって言ったら割と結構的外れなこともあり苦労しました....。
STEP 3：カスタマイズの実装
- Claudeからのコード取得
- はてなブログ「デザインCSS」への追加
- プレビューで確認
指示を出すと「完璧です！」とサクッと仕上げてくるClaude
1箇所であれば割と精度高く仕上げてくれたり、得意不得意があるのかあげてくれないことも。
何度も同じ指示をしたり、検証からコンテナの位置を指定して再度指示したり試行錯誤
H3: STEP 4：細かい調整・修正
- 微調整の指示
- レスポンシブ対応チェック
- ブラウザ間の互換性確認
何度か修正案を指示してだんだん近いたりどっかが競合して壊れたり、はてなブログだとやっぱりどっか妥協が必要なようで、このブログも今ツッコミどころがあるのはそのあたり。
PCで確認してこれでいけると思ったら、スマホで大事件がおきてて修正指示したら振り出しに戻るも何度くらったことか.....!!
厳密にやるとどこか壊れるので大体3日かけて作ったのが現在の状態です！
自分では作れない範囲なので概ね満足してます。
Claudeカスタマイズのメリット・デメリット
メリット
- コーディング知識不要
- 何度でも修正可能（セッション制限解除を待つか課金すれば）
- 自分だけのオリジナルデザイン
- コスト0円（無料プランでもOK）
- 最新のデザイントレンドを反映
最初のうちは無料で改修していたものの、途中から短期で終わらせたくなり課金。
それでも月三千円くらいなら安い改善なのかなと。
デメリット・注意点
- CSSの基礎知識があると調整が楽
- はてなブログの仕様制限あり
- Claudeの回答が必ずしも完璧ではない
- ブラウザ間の互換性チェックは必要
はてなブログならではなのか、コード上は動作確認できていてもはてなブログに入れると何かが起きること多数。
やっぱり根気は必要なのかなと。
とはいえClaudeでのカスタマイズの魅力
・自分好みのやりたいブログになる
・googleSEO対策も相談して実装できる
・記事やコードこれでいいのかなが相談できる
この三つの利点が大きいんじゃないかと思います。
何かとサブスクの世の中ですが月３千円くらいでブログの記事やデザインの相談を
好きなタイミングでできるのはメリットなんじゃないかと
しばらく使ってみて、実際どれくらい流入や回遊率が上がるのか試してみたいと思っております。
そろそろカスタマイズしたいな〜っと思ってる方は、無料版使ってみてはいかがでしょうか。
それではまた！
