オリジナルテーマ作り

どんな見た目にしたいかを言葉にして、テーマを作らせます。トップ、カテゴリ、記事、固定ページ、スマホまで、ページごとに見せ方を伝えて直していきます。

どんなデザインにしたいかを言葉にする

テーマを作り始める前に、どんな見た目にしたいかを言葉にしておきます。デザインの専門用語は要りません。コンセプトを伝えるだけでも形になること、好みがあるときの伝え方を、ハナさんの例で紹介します。

オリジナルのテーマの作り方は3通りあります。1つ目は、何もないところから言葉だけで Claude Code にテーマを丸ごと作らせる方法です。ハナさんの実際の頼み方と、Claude Code からの報告を紹介します。

手描きのラフ案や、Photoshop・Illustrator で作ったデザインの画像があるなら、それを Claude Code に見せてテーマにしてもらう方法もあります。仕組みと、画像と一緒に言葉で伝えたいことを紹介します。

今あるテーマや、HTML と CSS で作ったデザインがあるなら、それを Claude Code に渡して直させる方法もあります。HTML や CSS、WordPress をある程度分かっている人に向けて、仕組みと、筆者の使い方を紹介します。

Claude Code が作ったテーマは、zip のファイルにしてもらえば、WordPress の管理画面から入れられます。ハナさんのブログにテーマを入れて、初めて表示するまでの手順と、直したテーマを入れ直す方法を紹介します。

テーマがブログに表示されたら、ページごとに見せ方を整えていきます。最初はトップページです。ハナさんが気になったところを言葉で伝え、思っていたのと違ったときに頼み直した様子を、実際の画面で紹介します。

カテゴリページは、気分を選んだ人が記事を見比べる場所です。ハナさんのブログで、説明文、2列のカード、ほかのカテゴリへ移る道、パンくずリストを Claude Code に頼んだ様子を、実際の画面で紹介します。

記事ページは、読者がいちばん長く過ごすページです。本文のあとに目に入る部分を中心に、ハナさんのブログで本の情報を貸出カード風にし、同じ気分のほかの本をすすめ、コメント欄をなくした様子を、実際の画面で紹介します。

固定ページは、プロフィールのように日付に関係なく置いておくページです。ハナさんのブログで、メニューやパンくずリストを入れ、プロフィールらしい見た目にし、プライバシーポリシーを作った様子を、実際の画面で紹介します。

タグページは、同じタグの記事をまとめて見せるページです。ハナさんのブログで、ジャンルのタグページをカテゴリページと同じ2列のカードにし、ほかのジャンルへ移る道とパンくずリストを入れた様子を、実際の画面で紹介します。

パソコンで整えたブログも、スマホで開くと見え方が変わります。ハナさんのブログをスマホで確かめ、細切れになったカードや、言葉の途中で切れるタイトルを Claude Code に直してもらった様子を、実際の画面で紹介します。

Claude Code には、ふだんの言葉で直したいところを伝えられます。一度で伝わるように、具体的に書くこと、画面の写真を見せること、箇条書きで分けることなど、伝え方のコツをハナさんの頼み方を例に紹介します。