TODAY’S DESIGN · 2026-10-31 · lp

NOCT — 個性を際立たせるクリエイティブスタジオNOCT — A studio for the unmistakable

独立したクリエイターのための、架空のブランドデザインスタジオ。
静かな黒と鮮烈な紫で、作品の個性を主役に据えたサービス紹介です。

A fictional branding studio for independent creators, framed in black, violet and editorial typography.

dark-luxury · article · dark-luxury / creative-studio / violet / editorial / serif / abstract-art / split-hero

構成と活用のポイントComposition and adaptation

冒頭は、幅広いテキスト領域と縦長の抽象作品を横に並べた非対称構成。
大きなセリフ体の見出しから説明文、サービスへのリンクへと読み進めます。
右側には紫の面、軌道線、巨大なNを重ね、写真なしで奥行きを表現。
細い罫線と広い余白が、下段のサービス一覧まで誌面のリズムをつなぎます。

作家、映像制作者、個人スタジオの紹介に向く構成です。
760px以下では見出し、作品の順に一列化し、サービス行も縦に展開します。
最下部の案内はサービスへ戻るページ内リンクで、問い合わせフォームや予約機能は備えていません。

公開参照プロンプトを使う際は、対象となる制作者、中心となる一文、三つの支援内容を具体的に差し替えてください。
抽象作品の文字を活動名の頭文字に変え、対応範囲や納品物を実際のサービスに合わせると、独自の内容へ展開できます。

A wide text region sits beside a narrower abstract artwork.
Oversized serif lines lead into a compact introduction and service link.
A violet plane, orbital lines and a large N give the visual depth without photography; fine rules carry its rhythm into the service rows.

Suited to artists and small creative studios, the page stacks copy before artwork below 760px.
Service rows also become vertical.
The final invitation links back to the services; it is not a booking or enquiry tool.

Adapt the reference prompt by naming your audience, replacing the headline and specifying three real deliverables.
Change the artwork’s initial to your own and align the service descriptions with what you offer.

デザインの条件Design conditions

対象 / Audience: independent-creators
目的 / Purpose: service-promotion
トーン / Tone: confident
主な色 / Primary color: #7C3AED
補助色 / Secondary color: #F5F3FF
構成 / Sections: hero / features / cta

参考プロンプトの対象・目的・色・構成を、ご自身の内容に合わせて変更してください。このpreviewは静的な参考作品です。

Adapt the audience, purpose, colors and sections in the reference prompt to your own content. This preview is a static example.

MAKE IT YOUR OWN

参考プロンプトReference prompt

似たWebデザインを作るための参考プロンプト

A reference prompt for creating a similar web design.

独立したクリエイター向けの架空のブランドデザインスタジオ「NOCT」の静的ランディングページを作成してください。黒に近い背景、メインカラー#7C3AED、文字色#F5F3FFを使い、夜の映画のような空気感と自信のある編集的な表現を目指します。

冒頭は横並びの非対称な二領域にします。左は約58%のテキスト領域で、小さなカテゴリ表記、大きなGeorgia系セリフ体の「Good work. / Unmistakable / presence.」、短い説明、サービス一覧へのページ内リンクを配置。右は約42%の縦長の抽象作品にし、紫の光、傾いた長方形、軌道線、巨大な斜体のN、作品番号をCSSとSVGで構成してください。写真は不要です。上部にはコンパクトなロゴとページ内ナビゲーションを置きます。

その下はカードではなく記事のようなサービス一覧です。左側に小見出しと導入文、右側に番号、サービス名、簡潔な説明を罫線で区切った三行として配置します。内容はPositioning、Visual identity、Digital presence。最後に大きなセリフ体の招待文と紫のリンク、簡潔なフッターを置いてください。リンクは実在するページ内セクションへ移動するものとし、予約や問い合わせ機能を示唆しないでください。

角丸は使わず、細い罫線、広い余白、控えめな等幅ラベルを組み合わせます。760px以下では冒頭をテキスト、抽象作品の順に積み、サービス一覧と最終案内も一列にしてください。小さい画面では見出しと余白を縮め、固定幅による横はみ出しを避けます。対象となる制作者、見出し、サービス内容、作品の頭文字は、自分の活動に合わせて変更できます。

独立したクリエイター向けの架空のブランドデザインスタジオ「NOCT」の静的ランディングページを作成してください。黒に近い背景、メインカラー#7C3AED、文字色#F5F3FFを使い、夜の映画のような空気感と自信のある編集的な表現を目指します。

冒頭は横並びの非対称な二領域にします。左は約58%のテキスト領域で、小さなカテゴリ表記、大きなGeorgia系セリフ体の「Good work. / Unmistakable / presence.」、短い説明、サービス一覧へのページ内リンクを配置。右は約42%の縦長の抽象作品にし、紫の光、傾いた長方形、軌道線、巨大な斜体のN、作品番号をCSSとSVGで構成してください。写真は不要です。上部にはコンパクトなロゴとページ内ナビゲーションを置きます。

その下はカードではなく記事のようなサービス一覧です。左側に小見出しと導入文、右側に番号、サービス名、簡潔な説明を罫線で区切った三行として配置します。内容はPositioning、Visual identity、Digital presence。最後に大きなセリフ体の招待文と紫のリンク、簡潔なフッターを置いてください。リンクは実在するページ内セクションへ移動するものとし、予約や問い合わせ機能を示唆しないでください。

角丸は使わず、細い罫線、広い余白、控えめな等幅ラベルを組み合わせます。760px以下では冒頭をテキスト、抽象作品の順に積み、サービス一覧と最終案内も一列にしてください。小さい画面では見出しと余白を縮め、固定幅による横はみ出しを避けます。対象となる制作者、見出し、サービス内容、作品の頭文字は、自分の活動に合わせて変更できます。

Create a static landing page for NOCT, a fictional branding studio for independent creators. Use a near-black background, #7C3AED violet and #F5F3FF text. The mood is cinematic, atmospheric and confident, with editorial restraint.

Open with two unequal neighboring regions: approximately 58% text and 42% abstract artwork. The text includes a small category label, a large Georgia-style serif headline reading 'Good work. / Unmistakable / presence.', a short introduction and an internal service link. The narrower artwork combines a violet glow, an angled rectangular plane, orbital lines, an oversized italic N and a small artwork index using CSS and SVG, without photography. Add a compact wordmark and internal navigation above.

Follow with an editorial service section, not a card grid. Place an introduction at left and three numbered, rule-separated service rows at right: Positioning, Visual identity and Digital presence. Finish with a large serif invitation, a violet internal link and a restrained footer. Links navigate to existing sections; this is a static presentation with no booking or enquiry functionality.

Use square edges, thin rules, spacious margins and small monospace labels. Below 760px, stack the opening text before the artwork, then stack the service layout and closing invitation. Reduce headline sizes and padding for smaller screens without fixed-width overflow. Adapt the creator audience, headline, artwork initial and actual service deliverables to your own practice.

Create a static landing page for NOCT, a fictional branding studio for independent creators. Use a near-black background, #7C3AED violet and #F5F3FF text. The mood is cinematic, atmospheric and confident, with editorial restraint.

Open with two unequal neighboring regions: approximately 58% text and 42% abstract artwork. The text includes a small category label, a large Georgia-style serif headline reading 'Good work. / Unmistakable / presence.', a short introduction and an internal service link. The narrower artwork combines a violet glow, an angled rectangular plane, orbital lines, an oversized italic N and a small artwork index using CSS and SVG, without photography. Add a compact wordmark and internal navigation above.

Follow with an editorial service section, not a card grid. Place an introduction at left and three numbered, rule-separated service rows at right: Positioning, Visual identity and Digital presence. Finish with a large serif invitation, a violet internal link and a restrained footer. Links navigate to existing sections; this is a static presentation with no booking or enquiry functionality.

Use square edges, thin rules, spacious margins and small monospace labels. Below 760px, stack the opening text before the artwork, then stack the service layout and closing invitation. Reduce headline sizes and padding for smaller screens without fixed-width overflow. Adapt the creator audience, headline, artwork initial and actual service deliverables to your own practice.

参考プロンプトの使い方・変更例How to adapt a reference prompt

完全な再現を保証するものではありません。 / Exact reproduction is not guaranteed.