Telex を使って WordPress テーマを作成する方法

WordPress のテーマ開発には、ある程度の学習が必要です。

PHP や CSS、テンプレート階層の仕組みを理解し、思いどおりに動かない箇所を修正していくには、どうしても時間がかかります。

Telex を使えば、そのハードルを大きく下げられます。作りたいテーマのイメージを伝えるだけでテーマが生成され、インストールすればサイトのデザインを一新できます。

その手順を見ていきましょう。

1. Telex にテーマの作成を依頼する

まずはプロンプトを作成しましょう。
プロンプトは詳しく書くほど、希望に近いテーマが生成されます。

こちらは、人材紹介コンサルタント向けランディングページの例です。

「人材紹介コンサルタント向けのプロフェッショナルなビジネステーマを作成してください。すっきりとしたレイアウトと、信頼感を与えるタイポグラフィを採用してください。配色は落ち着いたカラーパレットを基調とし、アクセントカラーは1色に絞ってください。求職者と採用担当者の両方に向けた明確な行動喚起（CTA）を設け、サービス紹介セクションはファーストビュー内に配置してください。」

視覚的なスタイルやレイアウト構成に加え、サイトの目的も含めると、よりイメージに近い結果が得られます。

たとえば、人材紹介サービスのランディングページでは、ひと目で信頼感とプロフェッショナルな印象を与えるデザインが求められます。一方、ポートフォリオサイトやブログでは、目指すデザインの方向性や第一印象は大きく異なります。

Telex により多くの情報を伝えるほど、後から修正する手間が少なくなります。

2. 生成する前に、「プロンプトを強化」をクリックします。

テーマを生成する前に、「プロンプトを強化」ボタンをクリックしてください。

入力した内容を、デザインの方向性やレイアウト構成、タイポグラフィ、見落としがちな余白（スペーシング）の設計まで盛り込んだ、より詳細なデザインブリーフに書き換えます。

人材紹介サイトの場合、Telex は信頼感を高める要素や、余白の使い方、情報の階層構造などに関する提案を追加することがあります。明示的に指定しなくても、質の高いデザインには欠かせない要素です。

更新後のプロンプトには、次のような内容が追加されています。

「自信と信頼感を与えるサンセリフ書体を採用し、アクセントカラーを1色だけ使用した、クリーンでミニマルなレイアウトにしてください。ホームページテンプレートには、ファーストビュー内に見出し、サブテキスト、求職者向けと採用担当者向けの2つの目立つ CTA ボタンを配置したヒーローセクションを設けてください。ヒーローセクションの直下には、タレントソーシング、エグゼクティブサーチ、契約スタッフの紹介など、主なサービスをアイコン付きで紹介するサービスセクションを配置してください。さらに、求人一覧ページ、会社概要ページ、お問い合わせページのテンプレートも含めてください。フロントエンドでは、高速な表示性能、レスポンシブデザイン、ロゴとナビゲーションを備えた固定ヘッダー、連絡先情報とソーシャルメディアへのリンクを含むフッターを実装してください。」

これにより、完成度の高いテーマを作るための土台が整います。

3. 参考画像をアップロードする

参考にしたい競合サイトやブランドのモックアップ、ページレイアウトのラフスケッチがあれば、それらを Telex にアップロードしましょう。イメージに近いテーマを生成しやすくなります。

Telex は画像のデザインを解析し、その内容をもとにテーマを生成します。

ブランドの方向性が明確に決まっている場合は、思い描いていたデザインにより早く近づけます。

4. Telex が生成した4つの候補から選択

ブランドイメージやターゲットユーザー、サイトで伝えたい印象に最も近いものを選びましょう。これをベースに、さらにテーマを仕上げていきます。

ビジネス向けランディングページでは、各バリエーションの情報の階層や読みやすさを確認してください。

サイトの強みが最も分かりやすく伝わり、自然に CTA（行動喚起）へ視線を導くデザインがおすすめです。

人材紹介サイト例では、次のテーマを選択しました。

5. 残りのテンプレートを作成する

次に、必要な各ページのテンプレートを追加で作成するよう Telex に依頼します。

デフォルトでは、WordPress はすべてのページで共通のテンプレートを使用しますが、完成度の高いテーマを作成するには、コンテンツの種類に適したテンプレートが必要です。

たとえば、人材紹介コンサルタント向けのサイトであれば、次のように依頼できます。

• 「各サービスをアイコンと簡単な説明付きで紹介するサービスページのテンプレートを作成してください。」
• 「経歴、写真、経験年数、導入実績など、信頼感を高める情報を掲載した会社概要ページのテンプレートを作成してください。」
• 「問い合わせフォームと、訪問者が次に取るべき行動を分かりやすく示したお問い合わせページのテンプレートを作成してください。」
• 「勤務地、給与範囲、応募ボタンを表示する求人一覧アーカイブページのテンプレートを作成してください。」

追加した各テンプレートは、最初に決めたデザインとの一貫性を保ちつつ、完成度の高いテーマに仕上げていきます。

6. テーマをイメージどおりに仕上げる

テーマの基本構成が整ったら、タイポグラフィやカラーパレット、余白（スペーシング）、モバイル表示、ダークモードなど、細かな要素を調整していきます。

たとえば、人材紹介サイトであれば、より信頼感を与えるタイポグラフィに変更したり、モバイル表示を見直したりするとよいでしょう。多くのユーザーがスマートフォンからアクセスすることを考慮する必要があるからです。

7. ZIP ファイルをダウンロードしてインストールする

最後に、「ダウンロード」をクリックすると、Telex がテーマに必要なファイル一式を ZIP ファイルにまとめてダウンロードできるようになります。ファイルには、テンプレート、スタイル、theme.json、レイアウト定義など、テーマに必要なすべてのファイルが含まれています。

ダウンロードした ZIP ファイルを用意し、WordPress ダッシュボードで 「外観」→「テーマ」→「新しいテーマを追加」→「テーマをアップロード」 の順に選択します。その後、ZIP ファイルを選択して、「インストール」、続けて「有効化」をクリックしてください。

テーマを有効化すると、既存のページやコンテンツに新しいデザインが自動的に適用されます。

サービスページや会社概要ページ、求人一覧ページをすでに作成している場合は、手動で設定し直すことなく、新しいレイアウトが自動的に適用されます。

ヒント: 後からデザインを変更したい場合は、Telex に戻って修正を加え、新しい ZIP ファイルをダウンロードしてアップロードするだけです。WordPress は既存のコンテンツをそのまま保持し、新しいテーマのデザインを適用します。

おすすめ: ステージングサイトでテーマをテストする

本番サイトで有効化する前に、ステージングサイトなどの安全な環境でテストしましょう。

WordPress Studio を使うこともできます。サーバーを設定することなく、ローカルの WordPress 環境を PC 上で構築・実行できる無料のデスクトップアプリです。

さあ、始めてみましょう。

思い描いたテーマを形にしてみましょう。「これは難しいかも」と思うようなプロンプトも試し、ナプキンに描いたラフスケッチをアップロードして、どんなテーマが生成されるか見てみましょう。

どんなテーマができたのか、ぜひコメントで教えてください！

Telex は現在も実験的なツールのため、結果は毎回異なる場合があり、問題が発生することもあります。それも開発プロセスの一部です。皆さんが Telex を使って作成したプロジェクトは、このツール改善に役立てられます。