📝 この記事は ameyanagi.com のブログからのクロスポストです。

はじめに

AIを使ってアプリやUIを作るとき、ChatGPTやClaudeに「いい感じに作って」とお願いすると、どこかで見たような無難な配色が返ってくることがあります。

PowerPointで資料を作るときも、Wordでレポートをまとめるときも、内容より先に「色どうしよう」で手が止まる。デザインの専門家ではない人間にとって、配色決めはいつまで経っても消えないボトルネックです。

今回作った Morphos は、その悩みを丸ごとスキップするためのサイトです。

🔗 関連リンク

サイト: https://morphos.ameyanagi.com
GitHub: Ameyanagi/morphos
ポートフォリオ: Projects / Morphos

Morphosとは

Morphosは、自然界のモチーフをベースにした配色・デザインシステムを集めたコレクションサイトです。

蝶の翅、鉱物、深海、苔、夕焼け、鳥の羽。自然はすでに何億年もかけて洗練されてきた色彩設計の宝庫です。Morphosでは、そうした自然物からインスピレーションを得たカラーパレットを、すぐに使える複数のフォーマットで配布しています。

サイト名のMorphosは、ギリシャ語の μορφή（morphē、「形」「姿」） が語源です。自然が見せるさまざまな「形」を、配色やデザインシステムという別の「形」へと変換していく。そんなコンセプトを名前に込めました。

きっかけは虫の写真展で見た色

このサイトを作ろうと思ったきっかけは、子供と一緒に東京都写真美術館の「養老孟司と小檜山賢二の虫展」を見に行ったことでした。

小檜山賢二氏が深度合成という技法で撮影した、数百倍に拡大された虫たちの写真。その作品群を眺めていて、ふと「この配色、想像以上に綺麗だな」と感じたんです。

蝶の翅、甲虫の金属光沢、蛾の渋い階調。人間がデザインに悩んで捻り出すような色の組み合わせを、虫たちはとっくに身にまとっている。何億年もの自然淘汰がチューニングしてきた配色は、当然ながら破綻しないし、独特の説得力がある。

展覧会のキャッチコピーは「こたえはぜんぶ、虫にある。」でしたが、こと配色に関しても本当にそうかもしれない、と思いました。

だったら、こうした自然界の色をそのままコレクションして、すぐ使える形にしたら面白いんじゃないか。これがMorphosの出発点です。

なぜ自然モチーフだけに絞ったのか

UIテーマを生成・編集する文脈では、すでにtweakcnのような優れたツールがあります。shadcn/uiのテーマを直感的にいじれる、とても便利なサービスです。

Morphosがそうしたツールと違うのは、ソースを自然界に完全に限定しているところです。トレンドのトーンや人工的な色設計ではなく、自然がすでに持っている調和をそのまま借りてくる、というコンセプトに振り切っています。

汎用性の最大化ではなく、「外したくないときに、自然から借りる」という選択肢を提供するサイト、と言ってもいいかもしれません。

使い方はとてもシンプル

使い方は3ステップです。

Morphos にアクセス
ピンと来たモチーフ・配色を選ぶ
必要なフォーマットでダウンロード

ダウンロードできる形式は、主にこの4種類です。

AI用カラーパレット (Prompt-ready)

ChatGPTやClaudeにそのまま貼り付けられる形式です。「この色でUIを作って」と一行添えるだけで、曖昧な雰囲気ではなく具体的な色の方向性を渡せます。

CSS変数 (Web-ready)

WebサイトやReactアプリにそのまま組み込めるCSS変数として配布しています。shadcn/uiやtweakcnのテーマ調整にも使いやすい形にしています。

PowerPointテンプレート (Deck-ready)

配色を適用したスライドファイルです。提案資料や社内資料で、最初の色決めに時間を使わずに済むことを狙っています。

Wordテンプレート (Doc-ready)

配色を適用したドキュメントファイルです。レポート、仕様書、社内文書のトーンを自然モチーフから整えられます。

たとえばAIにチャットUIを作らせたいとき、これまでは「青系で爽やかに、でも少しエッジを効かせて」と曖昧な日本語で説明していました。Morphosを使えば、カラーコードのリストを貼るだけで方向性を一発で伝えられます。

💡 基本の考え方

配色を考えるタスクを丸ごとアウトソースして、本来集中したい中身の検討に時間を使う。Morphosはそのための道具です。

想定している使い方

Morphosは、次のような場面を想定しています。

AIにUI/UXを作らせるときの色指定
プレゼン資料、提案書、社内ドキュメントの配色テンプレート
個人開発やブランディングのインスピレーション源

特にAIへの指示では、「いい感じ」のような曖昧な言葉を減らせるのが便利です。自然モチーフとカラーコードをセットで渡すと、出力の方向性がかなり揃いやすくなります。

使った技術

実装では、次の2つを軸に据えました。

Codex: コード生成・実装の主軸
ChatGPT Images 2.0: モチーフとなる自然物のビジュアル生成

自然のビジュアルを生成し、そこからカラーパレットを抽出し、CSS、PowerPoint、Wordの各フォーマットに展開するパイプラインを組んでいます。AIを「コードを書く道具」だけでなく「素材を生む道具」としても使えるのが、いまの開発の面白いところだと感じています。

ソースコードはGitHubで公開しています

画像生成に使ったプロンプトや、配色抽出・各フォーマットへの変換に使ったスキル・スクリプトは、すべてGitHubに公開しています。

🔗 GitHub: https://github.com/Ameyanagi/morphos

「自分でも似たコレクションを作ってみたい」「このパイプラインを別テーマに応用したい」という方は、ぜひ覗いてみてください。実装の中身もそのまま参考にしていただけると思います。

もし気に入ったら、リポジトリに ⭐️ Star をいただけるととても励みになります。

最後に

世の中にカラーパレット集はたくさんありますが、Morphosの特徴をひと言でまとめるなら、「自然限定 × AIに渡す前提でフォーマットが整っている」 の組み合わせかなと思っています。

色を決める時間を、もっと中身を考える時間に。よかったら一度覗いてみてください。気に入った配色があれば、明日の資料作りやコーディングからすぐ使えるはずです。

👉 Morphosを開く

フィードバックや「こういうモチーフが欲しい」という要望もお待ちしています。

リンクまとめ

種類	URL
🌿 Morphos (サイト)	https://morphos.ameyanagi.com
💻 GitHub リポジトリ	https://github.com/Ameyanagi/morphos
👤 作者ブログ (元記事)	https://ameyanagi.com/blog/morphos-nature-design-systems
📂 ポートフォリオ	https://ameyanagi.com/projects#morphos