見て、読み解いて、自分のページへ。See a design. Understand it. Make it your own.
Webデザインの見本と参考プロンプトを公開しています。作品の解説や同じ内容の構成比較を使って、自分の目的に合う見せ方を探せます。
Explore web design references and prompts. Use the design notes and same-content layout studies to find an approach that fits your own purpose.
まちの、いい日。— ご近所アクションデーA Good Day Together — Neighborhood Action Day
ご近所の小さな活動を、気軽に見つけられるイベント案内。
クリーム色とブラウンを軸にした、明るい掲示板のようなデザインです。
A sunny neighborhood noticeboard for discovering small ways to take part.
端末の再現ではなく、表示幅による構成の違いを確認できます。Compare composition at different widths; this is not device emulation.
デザインの条件Design conditions
- 対象 / Audience
- community-members
- 目的 / Purpose
- campaign-introduction
- トーン / Tone
- welcoming
- 主な色 / Primary color
- #854D0E
- 補助色 / Secondary color
- #FEF3C7
- 構成 / Sections
- content / program / details / cta
参考プロンプトの対象・目的・色・構成を、ご自身の内容に合わせて変更してください。このpreviewは静的な参考作品です。
Adapt the audience, purpose, colors and sections in the reference prompt to your own content. This preview is a static example.
参考プロンプトReference prompt
似たWebデザインを作るための参考プロンプト
A reference prompt for creating a similar web design.
地域住民向けの「まちの、いい日。ご近所アクションデー」を紹介する日本語の静的イベントページをデザインしてください。大きなヒーローではなく、コンパクトなブランドヘッダーのすぐ下に、開催趣旨・開催日・集合場所の実用的なカードを並べ、地域の掲示板のようなダッシュボードにします。メインカラーは#854D0E、サブカラーは#FEF3C7。オフホワイトの背景に、コーラル、淡いグリーン、黄色を少量加え、明るく親しみやすい朝の雰囲気にしてください。太い日本語サンセリフ、大きな日付、丸角のカード、細い区切り線、余裕のある内側余白を使います。写真は使わず、小さな花の図形や幾何学的なモチーフで軽やかに。2026年11月15日の例示イベントとして、まち歩きと清掃、持ち寄り交換会、おしゃべりの時間を時刻付きの行で表示。右側には参加費、予約の要否、持ち物、雨天時の案内をまとめます。最下部には当日受付の手順を示してください。ナビゲーションと案内リンクはページ内移動のみで、申込や送信機能は設けません。900px以下ではプログラムと参加案内を縦積みにし、600px以下では冒頭のカードも一列に。地域名、日時、会場、参加条件は用途に合わせて変更してください。
Design a Japanese-language static event page for A Good Day Together, a neighborhood action day. Open with a compact brand header and useful dashboard cards for the event overview, date and meeting point, not a promotional hero. Use #854D0E and #FEF3C7 with an off-white canvas, small coral, pale-green and yellow accents, and a fresh, welcoming morning mood. Use bold Japanese sans-serif typography, oversized date numerals, rounded cards, thin rules and generous internal spacing. Avoid photography; use a small flower symbol and simple geometric details. For the illustrative November 15, 2026 event, show timed rows for a neighborhood walk and cleanup, a sharing table, and conversation. Place practical information about cost, reservations, supplies and rain arrangements beside the schedule. Finish with clear walk-in arrival steps. Navigation and guide links only jump within the page; do not suggest a registration or submission service. Stack the schedule and practical guide below 900px, and put the opening cards in one column below 600px. Adapt the neighborhood, date, venue and participation guidance to the actual audience.
参考プロンプトの使い方・変更例How to adapt a reference prompt
完全な再現を保証するものではありません。 / Exact reproduction is not guaranteed.
作りたいページから探すStart with your page’s purpose
構図の違いと使い分けを、公開作品で比較するCompare compositions using published examples
構成と活用のポイントComposition and adaptation
冒頭から開催趣旨、日付、集合場所を独立した情報モジュールで表示。
太めのゴシック体と大きな日付、細い罫線で読む順序をつくり、続くプログラムは時間・活動・参加条件を行ごとに整理しています。
コーラルと淡いグリーンが活動の違いを示します。
地域の交流会やボランティア募集の紹介に適しています。
広い画面ではプログラムと参加案内を左右に配置し、900px以下では縦積みに、600px以下では冒頭のカードも一列になります。
リンクはページ内の関連情報へ移動し、申込フォームは設けていません。
参照プロンプトでは、地域名、開催日、集合場所、活動内容を実際の情報へ変更できます。
親子向けなら対象年齢を、清掃活動なら持ち物を具体的に指定すると、案内の内容を用途に合わせられます。
Cream and brown anchor useful modules for the event, date and meeting point.
Bold sans-serif type, oversized numerals and thin rules set the hierarchy.
Schedule rows pair times with activities; coral and pale green distinguish activity types.
Suited to community days and volunteer introductions, the schedule and practical guide sit side by side on desktop.
Below 900px they stack; below 600px the opening cards also become one column.
Links jump to page sections, with no registration form.
Adapt the reference prompt with your neighborhood, date, venue and activities.
Specify age guidance for family events or a precise packing list for cleanups, keeping the practical information as prominent as the invitation.