📝 この記事は 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に渡す前提でフォーマットが整っている」 の組み合わせかなと思っています。
色を決める時間を、もっと中身を考える時間に。よかったら一度覗いてみてください。気に入った配色があれば、明日の資料作りやコーディングからすぐ使えるはずです。
フィードバックや「こういうモチーフが欲しい」という要望もお待ちしています。
リンクまとめ
| 種類 | 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 |