
プレビューギャラリー
類似の Skill
すべての Skill を見る手に入るもの
- ホーム、Services、3 つのプランページを持つ Pricing、6 件のケーススタディを載せた Work、About、Process、依頼フォーム付きの Contact、Terms、デザイン済みの 404
- 特徴的なルック:Schibsted Grotesk と Newsreader Italic の組み合わせ、ブルートーンの切り抜きポートレート、実際に動くライト/ダーク切り替え、ピルが落ちてくる帯
- スマートフォンやブラウザのフレームで描いたプロダクト画面入りのケーススタディ、プラン比較、FAQ、実績のフィルターと検索。すべてオフラインで動く 1 つのファイルに収まっています
向いている人
- 定額プランを販売し、大胆でエディトリアルな第一印象を求める独立系デザイナー
- 自分の提供内容をサービス、プラン、ケーススタディに落とし込めるフリーランスの開発者、ブランドデザイナー、コンサルタント
- ローカルからそのまま開ける、または単一ファイルとして今日すぐ公開できる完成済みの複数ページサイトが欲しい方
向いていない人
- 実際の決済や予約:依頼フォームとプランのボタンはページ上で確認表示するだけで、実際の送信には独自のバックエンドが必要です
- 大人数のエージェンシー:レイアウトは 1 人の人物、1 枚のポートレート、1 つの語り口を前提に作られています
- 落ち着いた配色や多色のパレット:スタイルは白、インク、そして単一のコバルトで構成されています
ブランディング・ビジュアルシステムWeb デザイン・デジタル体験ホームページ作成ポートフォリオサイト作成スタイル固定編集可能な出力エディトリアルセリフコバルトモノクロデュオトーンポートレートライト/ダーク切替ピル型タグ
この Skill について

サービス、プラン、プロジェクトを「売れる」デザイナーサイトに仕上げます。Hero ではあなた自身が見出しの中に入り込みます。2 語のイタリックセリフの下に巨大なコバルトの 1 語、それをブルートーンのポートレートが分割し、ヘッダーのピルで実際にライト/ダークを切り替えられます。Services から Terms までサイト全体が 1 つのファイルで届き、どのブラウザでもオフラインで開けます。

手に入るもの
- 白いサービスピルが落ちて積み重なるコバルトの帯、料金グリッド、実績、プロセスの帯、お客様の声を備えたホーム
- 開始価格付きの Services、プランごとのページと横並び比較を備えた Pricing、フィルター・検索と 6 件のケーススタディを備えた Work
- 各プロジェクト画像の上に、スマートフォンやブラウザのフレームで描いたプロダクト画面を重ねたケーススタディ
- About、Process、バリデーション付きの依頼フォームと初回相談の枠を備えた Contact、Terms、デザイン済みの 404
- Schibsted Grotesk と Newsreader Italic をすべての画像とともに埋め込み済みで、ページはネットワークリクエストを一切行いません

使い方
- 名前、専門分野、Hero の単語、サービス、2〜4 個のプラン、いくつかのプロジェクト、連絡先を Skill に伝えます。
- すべてのページを埋め、足りない部分は自信のある一人称の文体で下書きし、確認が必要な下書きを一覧にします。
- 両方のテーマでファイルを開いて全ページを確認し、修正したい点を普段の言葉で伝えます。

ポートレートや新しいプロジェクト画像は、ご自身で用意するか、エージェントの画像ツールで生成します。画像ツールには別途利用料金がかかる場合があります。
始める前に必要なもの
- 用意するもの
- 名前、1 語のワードマーク、専門分野、Hero 用のイタリックの 2 語とコバルトの 1 語 · 価格付きの 6〜12 個のサービスと、価格・期間・内容を含む 2〜4 個のプラン · クライアント、役割、課題、アプローチ、成果を含むプロジェクト、および連絡先と対応可能状況
- 依存関係
- エージェントのマシン上の Node.js 18 以降。単一のオフラインファイルを構築する同梱スクリプトの実行に使用 · ファイル作成時のインターネット接続(フォントを一度ダウンロードして埋め込むため) · ポートレート、プロジェクト画像、スタジオ写真用のエージェントの画像ツール(自分で用意する場合は任意)
- 外部コスト
- ご自身で用意しない画像はエージェントの画像ツールで生成するため、そのツールの利用料金がかかる場合があります。ニュートラルなスタジオ写真は Skill に同梱され、ケーススタディの画面はコードで描かれ、完成したページはネットワークリクエストを行いません。作例の閲覧は無料です。
- 最終検証
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
ユーザーレビュー
レビューを読み込み中…









