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

余白 — 本質から、次を育てるYohaku — Room for What Comes Next

大きな言葉と静かな余白で、企業の伴走支援を伝える架空のコーポレートサイトです。

A quiet corporate concept for a consultancy that makes room for the next step.

natural-warm · section-based · corporate / typographic / centered / natural-warm / consulting / serif / monochrome

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

冒頭は中央に据えた二行の明朝体が主役。
小さな英文、細い罫線、控えめなナビゲーションを添え、写真やボタンで視線を分散させません。
その下で支援の姿勢、三つのサービス、相談前の案内へと読み進めます。
サービスはカードではなく、番号と内容を横に並べた一覧です。

経営支援やブランド開発など、対話の姿勢を伝えたい事業に向いています。
画面幅に応じて見出しを滑らかに縮小し、狭い画面でも中央揃えを維持。
紹介文とサービス一覧は縦積みに変わります。
相談欄は確認項目を開く静的な案内で、送信フォームではありません。

参考プロンプトを使う際は、主見出しを自社の約束に、三つのサービスを実際の支援領域に置き換えてください。
対象顧客に合わせて成果物の例や相談前の質問を具体化し、文章量が増えた場合は見出しの改行と行間も確認すると、この余白のリズムを保ちやすくなります。

Oversized Japanese serif type centers the opening, framed by small English labels and generous space.
Fine rules lead into an introduction, three numbered service rows, and a consultation note.
No photography competes with the words.

Suited to strategy or brand advisory work, the layout keeps its heading centered as type scales fluidly.
On narrow screens, the introduction and service rows stack.
The consultation disclosure presents a checklist, not a submission form.

Adapt the reference prompt by replacing the headline with your own promise, naming your actual services, and specifying deliverables for your audience.
Adjust the consultation questions and review line breaks when adding longer copy.

デザインの条件Design conditions

対象 / Audience: prospective-clients
目的 / Purpose: service-overview
トーン / Tone: trustworthy
主な色 / Primary color: #171717
補助色 / Secondary color: #FAFAFA
構成 / Sections: hero / services / about / 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.

架空の伴走型コンサルティング会社「余白 / YOHAKU」の静的なサービス紹介サイトを制作してください。基調は #171717 と #FAFAFA。自然で温かな印象を、明朝体、柔らかなニュートラル背景、広い余白で表現します。写真は使用しません。

冒頭は中央揃えの大きな日本語二行見出し「本質を見つめ、次を育てる。」を主役にしてください。上に小さな英文ラベル、下に短いイタリックの英文を置き、開放的な空間を確保します。ヘッダーには小さな円のロゴ、社名、ページ内ナビゲーション。冒頭に大きな画像や主ボタンは置きません。

続いて支援姿勢の紹介を左右の文章で構成し、三つの重なる円を小さな抽象モチーフとして添えます。サービスは「事業の軸を整える」「伝わるかたちをつくる」「変化を、ともに育てる」の三行。各行に番号、見出し、説明、成果物の例を置き、細い罫線で区切ってください。最後は淡い背景の相談案内と、相談前の確認項目を開閉できるネイティブの詳細要素。フォームや送信機能は実装しない静的な例です。

見出しには Noto Serif JP と Georgia、serif の固定フォールバック、本文には Noto Sans JP と Hiragino Sans、Yu Gothic、sans-serif の固定フォールバックを使用し、外部フォントは読み込みません。画面が狭くなっても冒頭は中央揃えのまま文字サイズを縮小し、紹介文とサービス行は一列に積み替えてください。実際の事業に合わせて約束の言葉、支援内容、成果物、相談時の質問を編集してください。

架空の伴走型コンサルティング会社「余白 / YOHAKU」の静的なサービス紹介サイトを制作してください。基調は #171717 と #FAFAFA。自然で温かな印象を、明朝体、柔らかなニュートラル背景、広い余白で表現します。写真は使用しません。

冒頭は中央揃えの大きな日本語二行見出し「本質を見つめ、次を育てる。」を主役にしてください。上に小さな英文ラベル、下に短いイタリックの英文を置き、開放的な空間を確保します。ヘッダーには小さな円のロゴ、社名、ページ内ナビゲーション。冒頭に大きな画像や主ボタンは置きません。

続いて支援姿勢の紹介を左右の文章で構成し、三つの重なる円を小さな抽象モチーフとして添えます。サービスは「事業の軸を整える」「伝わるかたちをつくる」「変化を、ともに育てる」の三行。各行に番号、見出し、説明、成果物の例を置き、細い罫線で区切ってください。最後は淡い背景の相談案内と、相談前の確認項目を開閉できるネイティブの詳細要素。フォームや送信機能は実装しない静的な例です。

見出しには Noto Serif JP と Georgia、serif の固定フォールバック、本文には Noto Sans JP と Hiragino Sans、Yu Gothic、sans-serif の固定フォールバックを使用し、外部フォントは読み込みません。画面が狭くなっても冒頭は中央揃えのまま文字サイズを縮小し、紹介文とサービス行は一列に積み替えてください。実際の事業に合わせて約束の言葉、支援内容、成果物、相談時の質問を編集してください。

Create a static service-overview website for a fictional collaborative consultancy, Yohaku. Use #171717 and #FAFAFA, with a soft neutral panel, generous whitespace, and warm serif typography. Do not use photography.

Make the opening visibly centered and typographic: an oversized, two-line Japanese headline meaning 'Look to the essence. Grow what comes next.' Place a small English eyebrow above it and a short italic English line below. Keep ample negative space, without a hero image or primary button. The header has a small circular mark, the wordmark, and in-page navigation.

Follow with an introduction arranged as two text columns and a small motif of three overlapping outlined circles. Present three services as numbered horizontal rows, not cards: business foundations, brand expression, and ongoing collaboration. Give each a heading, explanation, and example deliverables, separated by thin rules. Finish with a pale consultation panel and a native disclosure containing questions to prepare before a conversation. This is a static concept without a contact form or submission service.

Use Noto Serif JP, Georgia, and serif for headings; use Noto Sans JP, Hiragino Sans, Yu Gothic, and sans-serif for body text, without downloading fonts. Scale the main heading fluidly while retaining centered alignment. Stack the introduction and service content on narrow screens. Replace the promise, service names, deliverables, and consultation questions with content appropriate to the intended audience.

Create a static service-overview website for a fictional collaborative consultancy, Yohaku. Use #171717 and #FAFAFA, with a soft neutral panel, generous whitespace, and warm serif typography. Do not use photography.

Make the opening visibly centered and typographic: an oversized, two-line Japanese headline meaning 'Look to the essence. Grow what comes next.' Place a small English eyebrow above it and a short italic English line below. Keep ample negative space, without a hero image or primary button. The header has a small circular mark, the wordmark, and in-page navigation.

Follow with an introduction arranged as two text columns and a small motif of three overlapping outlined circles. Present three services as numbered horizontal rows, not cards: business foundations, brand expression, and ongoing collaboration. Give each a heading, explanation, and example deliverables, separated by thin rules. Finish with a pale consultation panel and a native disclosure containing questions to prepare before a conversation. This is a static concept without a contact form or submission service.

Use Noto Serif JP, Georgia, and serif for headings; use Noto Sans JP, Hiragino Sans, Yu Gothic, and sans-serif for body text, without downloading fonts. Scale the main heading fluidly while retaining centered alignment. Stack the introduction and service content on narrow screens. Replace the promise, service names, deliverables, and consultation questions with content appropriate to the intended audience.

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

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