目次
はじめてClaude Codeでプロダクトらしいプロダクトを作った気がします。
きっかけ
最初の記事でもお話しましたが、所持しているサイトを一つに集中させようと考えたとき、
レイアウトにはちょっと凝りたいなと思ってまして。
これまで「Cocoon」というテーマを使ってまして、めちゃくちゃ使い勝手が良かったのですが、
いかんせんかゆいところには手が届かなかったといいますか。もう少しミニマルな方が好みといいますか。
そこでふと思い出すわけです。「Claude Codeってあったことね？」と。
仕事で使えるかと思ってちまちま触ってたのですが、使い勝手を探る程度に留まってたんですよね。
なんでもかんでも作れるらしいことはネットで見てたんですが、
これもしかしてWordPressテーマもいけるんか……？ って着手した次第です。
Claudeに提案してみる
まず、提案してみます。
Claudeには、「超天才の女の子」として振る舞うようにお願いしています。
こういうところからモチベーションを上げていくのが重要なのだ。
なんかもりもりファイルを生産してくれて、テーマの骨子ができてしまいます。想像よりだいぶ速い。
ほんとにできてるわ。
「Local」で、手元でWordPressを動かしながら、Claudeちゃんにオーダーして見た目を整えていきます。
丸一日くらいで、いまご覧になっているサイトくらいのテーマができちゃいましたよ。
これ、一人でやってたらどれだけかかるか考えるの恐ろしいですね。
かがくの ちからって すげー！
このテーマで工夫したこと（現段階）
これまでWordPressを使っていて「これができたらいいのに」と思ったことや、
「どうしてもここはこだわってみたい」という点を詰め込んでみました。
まあ、ここからもアップデートしていきますけど……。
抜粋からmeta descriptionの自動生成
SEO対応の定番です。Web検索に引っかかったとき表示したい説明文をWordPressの投稿画面で書いてしまえます。
「Zen Maru Gothic」のフォントファイル自体をテーマに同梱
外部依存を解消しておこうと思いました。
一定数のカスタマイズ項目のWordPressカスタマイズ画面での用意
サイトのフォント（ゴシック/明朝など）、サイドバー位置、アイキャッチの表示などを、
WordPress管理画面から変更できるようにしています。
なんといっても見た目
ベースとなる色合いは、シックさを意識したブラック/ゴールドカラーで整えました。
半透明カード風のUIパーツで構成のわかりやすさを得ることも意識しています。
アダプティブ固定ヘッダー
メインヘッダーの表示状態を監視し、ヘッダーが見えなくなったときに固定ヘッダーを
スライドインするようにしています。もちろんこの部分もレスポンシブデザインを考慮しています。
最新記事フィーチャー表示
一番好きな部分です。
最新記事を大きく表示。常連さんに配慮した仕組みです。
固定ページ1カラム表示対応
固定ページは、書くことがいっぱいあったりします。そんなときに。
サイドバーを、固定ページに限り非表示にする設定を持っています。
ここはCocoonリスペクトです。
思い切ってコメントを削除
いまどきSNSがありますし、スパムが大量に押し寄せることを防ぐためにも、
コメントに関するファンクションを除去しました。
iPhoneなどのビューポートなどでの表示チェック
CSS Gridの設定を確認して、意図しない横方向スクロールが生じないようにしています。
これからもアップデートしていきます
ある程度形にはなりましたが、まだまだ気になるところが出てくると思うので、
いまClaudeなどで得られているアジリティを活かしてガンガンクオリティアップを図る次第です。
コンテンツも充実させなければなりませんが……。
こういう実験をPHPやpjaxの勉強につなげられたらいいですね。がんばろう。