seenry-assets

Seenry アセット

実物の素材を使うかどうかで、スタジオで仕上げたような成果物になるか、テンプレートのような見た目になるかが決まります。カバー画像があるべき場所にプレースホルダーのグラデーションを置いたり、アイコンがあるべき場所に絵文字を置いたりすると、周囲のすべてが偽物のように見えてしまいます。Seenry のビルドに使うアセットはすべて、実物で、ライセンスが明確で、アートディレクションが施され、記録されています。

まず素材を決める

検索する前に、アセットごとに用途、被写体、トリミングとアスペクト比、雰囲気（明るさ、色温度、質感）、レイアウト内の配置を1行で書き出します。「アルバムカバー、1:1、暖かい秋色の人物、顔は上から3分の1の位置、136pxと48pxで使用」は、「素敵な画像」よりも具体的です。

次に、品質を満たすものを作れる最初の方法を選びます。

1. 提供素材やブランドアセット。 ユーザーのロゴ、製品写真、写真、フォントを常に優先します。存在する可能性が高い場合は、尋ねてください。
2. コードで作成する。 製品 UI、チャート、図、シンプルな幾何学的マークは、画像よりも HTML/CSS/SVG で作成するほうが鮮明で、実態に即しています。
3. ライセンスが明確なソース。 以下のソースからアセットツールを使って、写真、アイコン、フォントを取得します。
4. 生成する。 ホストに画像生成ツール（MCP 画像ツール、組み込みの画像モデル、seenry/scripts/image.mjs を介した Codex CLI、またはアセットツールで使用する OPENAI_API_KEY / GEMINI_API_KEY）がある場合は、ヒーロービジュアル、3D スタイルのアイコン、テクスチャ、カバー、イラストなど、アートディレクションを施した画像を生成します。生成に従ってください。
5. タイポグラフィを主役にする。 上記のどの方法でも品質を満たせない場合は、画像を取り除き、タイポグラフィ、レイアウト、ひとつのディテールでデザインを成り立たせます。質の低い画像は、画像がないよりも悪くなります。

ソース

用途	ソース	確認するライセンス	ツール
絵画、素描、版画（アートディレクションを施した一式）	The Met Open Access	CC0	assets.py art-set --style <family>
写真	Openverse（Flickr、Wikimedia、StockSnap などを集約）	デフォルトでは CC0 または Public Domain Mark	assets.py images
写真（API キーまたは手動）	Unsplash、Pexels	Unsplash License、Pexels License（商用利用無料、無加工での再販不可）	ホストのブラウザーまたは各サービスの API
UI アイコン	Iconify 経由の Lucide（ISC）、Phosphor（MIT）、Tabler（MIT）、Heroicons（MIT）、Iconoir（MIT）、Radix（MIT）	寛容なライセンス。ツールは一覧にないセットを拒否します	assets.py icons / icon
ブランドマーク	所有者のプレスキット、Simple Icons（ファイルは CC0、マークは引き続き商標）	商標ルール：改変せず、そのブランドを指す用途で使用	assets.py icon simple-icons:<name>
3D アイコン、イラスト風アイコン	3dicons（CC0）、または統一感のあるセットを生成	CC0 / プロバイダーの規約	ダウンロードまたは generate
テクスチャ、HDRI、マテリアル	Poly Haven（CC0）	CC0	ダウンロード
フォント	Google Fonts（OFL）、Fontshare（ITF FFL）、Open Runde（OFL）、Inter（OFL）、Geist（OFL）	OFL ではセルフホストと商用利用が認められています	ダウンロード、WOFF2 をセルフホスト

python3 scripts/assets.py images "portrait autumn" --count 6 --orientation square --out assets/raw
python3 scripts/assets.py icons "calendar" --set lucide --count 4 --out assets/icons
python3 scripts/assets.py icon lucide:play ph:pause-fill --out assets/icons
python3 scripts/assets.py generate "<art-directed prompt>" --size 1536x1024 --out assets/gen
python3 scripts/assets.py sheet --out assets/raw     # contact.html for side-by-side review

Openverse の検索は文字どおりに機能します。「ビニール」「ポートレート」「港の霧」のように、具体的な名詞を1つか2つ使い、検索結果を見極めてください。

アートディレクターの視点で選ぶ

• 候補を6～12点ダウンロードしてコンタクトシートを開き、選ぶ前に実際のアスペクト比とサイズに合わせてそれぞれをトリミングします。フルブリードで使える画像でも、48px ではうまく見えないことがあります。
• 光の向き、色温度、粒子感、カメラとの距離、ページ全体の処理を揃え、一貫性のあるセットを選びます。
• 次のものは除外します。透かし、目に見えるロゴ、権利のない作品（著作権のあるアルバムカバーが写ったパブリックドメインの写真でも、そのカバーの使用権はクリアされません）、推奨を示唆する文脈で描かれた実在の人物、AI の生成痕（手、テキスト、溶けたような縁）、表示サイズに対して解像度が低いもの、そしてありきたりな表現（握手、ノート PC を指差す人、光る脳、アイソメトリックの塊）。
• 選んだ画像からアクセントカラーを抽出し、パレットと素材に統一感を持たせます。

組み込み

• 最大表示サイズの1倍と2倍のサイズで書き出します。写真にはWebPまたはAVIF、透過画像にはPNG、アイコンやマークにはSVGを使用します。width／heightまたはaspect-ratioを設定し、意図したobject-positionとともにobject-fit: coverを指定します。
• アイコンは、セットと線の太さを統一し、16／20／24のサイズにして、currentColorで色を指定します。塗りつぶし版はアクティブ状態またはプライマリ状態に限って使用します。
• 透過PNGのアイコンや切り抜き画像は、想定された背景色に配置します。ライトテーマとダークテーマの両方で確認します。
• フォントはWOFF2をセルフホストし、使用するウェイトだけを用意します。font-display: swapを設定し、ファーストビューに表示されるファイルをプリロードします。

出典を記録する

assetsツールは、ファイルと同じ場所にmanifest.jsonを書き出します（出典ページ、制作者、ライセンス、URL、日付、生成画像の場合はプロンプト）。各エントリーをプロジェクトのDESIGN.mdにあるアセット表に記載し、必要な帰属表示は、クレジットページまたはフッターの小さなリンクとして公開する製品内に含めます。オーナー自身の作品や製品を紹介する画像（ポートフォリオ作品、ケーススタディ、製品写真、チーム写真）に、制作者のクレジットをキャプションや画像上に重ねて表示しないでください。作品の所有者が別の人だと訪問者に伝わってしまいます。公開前に出典ページをもう一度開き、ライセンスが引き続き表示されていることを確認します。

禁止事項

• 実在する企業のロゴ、実在する人物の肖像、顧客の推薦文、報道機関の引用、製品のスクリーンショットを捏造しないでください。
• Seenry MCPやギャラリーの参考画像を最終素材として公開しないでください。参考画像は方向性を示すものであり、使用する素材ではありません。
• ライセンスを確認できない画像を使用しないでください。その旨を伝え、タイポグラフィ主体またはコードで作成した代替案を使用してください。