TODAY’S DESIGN · · corporate
Morrow — 課題から選べるサービス案内Morrow — A service directory, straight to the point
課題からサービスを選べる、架空のデザイン会社Morrowのサイト。
大きな宣伝バナーを置かず、具体的な支援内容から読み始める構成です。
Morrow is a fictional design studio directory that begins with services, not a promotional hero.
pop-colorful · card-grid · corporate / service-directory / content-first / colorful / typographic / responsive / css-graphics
デザインの条件Design conditions
- 対象 / Audience
- prospective-clients
- 目的 / Purpose
- service-overview
- トーン / Tone
- trustworthy
- 主な色 / Primary color
- #2563EB
- 補助色 / Secondary color
- #F8FAFC
- 構成 / Sections
- content / 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.
架空のデザイン会社「Morrow」の、見込み顧客向けサービス紹介サイトを作成してください。明るく清潔で前向きな雰囲気と、信頼できる説明を両立します。主色は#2563EB、背景色は#F8FAFC。ライムとピーチをカードの補助色として使います。 大きなヒーローや導入バナーは置かず、小さなブランドヘッダー、コンパクトなサービス一覧の見出し、実際のサービスカードの順に始めます。カードはStrategy、Brand、Digitalの3領域。各カードに番号、CSSによる簡潔な図形、顧客の課題、説明、成果物一覧へのページ内リンクを配置してください。図形は重なる円、積み重なる文字プレート、簡単な画面構成で表現し、写真は使いません。 続いて、領域別の成果物を罫線付きの一覧で示し、会社紹介と3段階の進行方法を配置。末尾は青い相談準備エリアにし、標準のdetails/summaryで開くチェックリストを設けてください。これは静的な案内で、フォームや予約機能はありません。太いシステムサンセリフ、大きめの番号、十分な余白を使い、760px以下ではカードと会社紹介を1列にし、一覧の各行も縦に並べます。サービス名、顧客課題、成果物、チェックリストは実際の事業内容に合わせて編集してください。
Create a service overview for a fictional design company called Morrow, aimed at prospective clients. Make it fresh, bright and approachable, with concrete, trustworthy copy. Use #2563EB as the primary color and #F8FAFC as the background, with lime and peach accents. Begin with a compact brand header, a small directory heading and three substantive service cards, not a promotional hero. The cards cover Strategy, Brand and Digital. Each includes a number, a CSS-built graphic, a client problem, a short explanation and an in-page link to deliverables. Use overlapping circles, stacked typographic plates and a simple interface diagram rather than photographs. Follow with a ruled deliverables list, a company introduction and a three-step working process. Finish with a blue project-preparation section containing a native details/summary checklist. This is static guidance, not a submission form or booking tool. Use bold system sans-serif typography, large numerals and generous spacing. At widths of 760px and below, stack the cards and company content, and arrange each deliverables row vertically. Adapt the service names, client problems, deliverables and checklist to the intended business.
参考プロンプトの使い方・変更例How to adapt a reference prompt
完全な再現を保証するものではありません。 / Exact reproduction is not guaranteed.
構成と活用のポイントComposition and adaptation
小さなブランドヘッダーの直下に、戦略・ブランド・デジタルの3枚のカードを配置。
青、ライム、ピーチの図形と大きな番号が識別を助けます。
見出しは太いサンセリフ、説明は落ち着いた濃紺で統一。
各カードの課題、説明、成果物へのリンクから、下段の詳細一覧、仕事の進め方へと読み進めます。
複数の支援領域を持つ制作会社やコンサルティング会社のサービス紹介に適しています。
760px以下ではカードと会社紹介が1列になり、成果物一覧も縦に展開。
末尾の開閉式チェックリストは相談内容の整理用で、送信機能はありません。
参照プロンプトでは、3つのサービス名と顧客の課題を自社向けに置き換え、各成果物を具体化してください。
図形内の短い言葉、進行ステップ、相談前チェックリストも、対象顧客が使う表現に合わせて変更できます。
A compact masthead leads into blue, lime and peach cards for Strategy, Brand and Digital.
Bold sans-serif headings, numbered labels and CSS graphics establish the rhythm.
Generous spacing separates the cards from ruled deliverables, studio notes and a three-step process.
Suited to studios and consultancies, the layout stacks cards and studio content at 760px and below; deliverable rows also become vertical.
A native disclosure opens a project-planning checklist, with no submission function.
In the reference prompt, replace the three service names and client problems with your own.
Specify concrete deliverables, then adapt the graphic labels, process steps and checklist to your audience’s vocabulary.