Skip to content
Codex Skin Index
応募
createcustombeginnertheme

独自のCodexスキンを作成する方法(初心者向けガイド)

カスタム Codex スキンの作成方法を学びましょう:エンジンを選択し、カラーパレットを選び、テーマプリセットを記述して、ライブでテストします。コーディング経験がなくても大丈夫な、初心者向けの実践的なチュートリアルです。

独自の Codex スキンを作成するのは、意外と簡単です。ほとんどのエンジンでは、背景色、サーフェス色、テキスト色、アクセント色——というわずか 4 色程度のカラーパレットで定義されるテーマを受け付けます。これらはプロンプト文や JSON ファイルとして表現されます。Codex アプリ本体に直接手を加える必要はありません。

ステップ 1:エンジンを選択する

使用するエンジンによって、テーマの形式が異なります。

  • Codex Dream Skin — テーマはプリセットまたはエージェントプロンプトで定義します。最も簡単に始められます:パレットを一文で説明するだけです。
  • Codex Skin Manager — 視覚的なカラーピッカーを備えたテーマ作成ツールを同梱しています。
  • ReTheme — 署名付き・更新可能なテーマ。公開共有したい場合に最適です。
  • Codex Themes (desktop) — .codextheme ファイル形式で、テーマ作成センターは theme.codexguide.ai にあります。

このガイドでは、(Dream Skin で動作する)プロンプト方式を用います。

ステップ 2:カラーパレットを選ぶ

スキンは主に 4~6 色で構成されます。

役割例(ライトモード)例(ダークモード)
Background(背景)#F5F7FA#0A0A0B
Surface(パネル)#FFFFFF#16161A
Text(テキスト)#1A1B26#E4E4E7
Accent(アクセント)#2DD4BF#2DD4BF

アクセント色は 1 色に絞りましょう。複数のアクセント色を使うのは、初心者が犯す最も典型的な失敗です。

ステップ 3:テーマをプロンプト文として記述する

Dream Skin のプリセットは、単なる描写文で構成されます。

Codex、カスタムテーマを適用してください — 暖かみのあるアンバー色の夕暮れパレットで、ダークチャコール色のサーフェス、柔らかなアンバー色のアクセント、薄いクリーム色のテキストを採用。静かで居心地よく、長時間の読書セッションに最適です。

この文をエンジン内でプリセットとして保存し、実際に試してみましょう。結果が意図通りになるまで、言葉を少しずつ調整しながら反復的に試行してください。

ステップ 4:実際のコンテンツでテストする

最終判断を下す前に、コードが長く複雑な画面やパネルが多数ある「忙しい」画面を開いてテストしましょう。ダークテーマはスクリーンショットでは美しく見えても、実際にはパネル間のコントラストが低すぎて使い勝手が悪くなることがあります。以下の点を確認してください:

  • コードエディタ内の文字の読みやすさ
  • サイドバー/パネルの視覚的分離具合
  • ボタンとリンクにおけるアクセント色の可視性

ステップ 5:共有する

ReTheme や Codex Skin Manager などのエンジンでは、テーマをエクスポートできます。このインデックスへは、スキンを提出する ページからご自身のスキンを登録可能です。プレビュー画像とインストール用プロンプトを添えてご提出ください。そうすれば、他のユーザーもワンクリックでそのスキンを使えるようになります。

すぐに使えるスタートポイント

実績のあるパレットからアイデアを借用しましょう:

  • Clear Glass — ガラス質の明るいサーフェス
  • Sakura Pink Dawn — 柔らかなパステル調
  • Amber Dusk — 温かみのあるアンバー色のプログラム生成プリセット

さらに多くのインスピレーションを得たい場合は、全スキン一覧 をご覧ください。また、インストール手順で詰まった場合は、インストールガイド を参照してください。すべての方法が網羅されています。

この記事で紹介したスキン

すべて見る skins .