TODAY’S DESIGN · · editorial
AFTERIMAGE — 余白を読む編集デスクAFTERIMAGE — A Reading Desk for Negative Space
余白と視覚的な間を考える、夜の編集デスク。
記事、読書案内、実践メモを同時に見渡せる静的な誌面です。
An evening reading desk about negative space, bringing an essay, reading route and practical notes into one static journal.
light-clean · hero · editorial / dashboard / typography / negative-space / reading-desk / magenta / css-art / responsive
デザインの条件Design conditions
- 対象 / Audience
- design-enthusiasts
- 目的 / Purpose
- knowledge-sharing
- トーン / Tone
- thoughtful
- 主な色 / Primary color
- #BE185D
- 補助色 / Secondary color
- #FCE7F3
- 構成 / Sections
- content / article / related
参考プロンプトの対象・目的・色・構成を、ご自身の内容に合わせて変更してください。この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.
デザインを学ぶ読者向けに、AFTERIMAGEという架空の編集誌の静的な読書デスクを制作してください。テーマは「余白がつくる視覚的な間」。冒頭は大きな宣伝ヒーローではなく、コンパクトな誌名、号数、誌面内リンク、その下に記事・読書案内・用語解説が同時に見える情報モジュール型にします。白に近い背景と白い角形パネル、#BE185Dのマゼンタ、#FCE7F3の淡いピンク、濃い墨色を使ってください。主記事を左の広いパネルに、番号付きの読む順序と用語カードを右に配置。下には実践課題、読書メモ、関連記事の3項目を並べます。記事見出しはGeorgiaと日本語のセリフ系システムフォント、ナビゲーションや本文はシステムのサンセリフ。小さな大文字ラベル、細い罫線、控えめな番号、十分な本文行間を使います。図版は写真ではなく、マゼンタ地に同心円と光のようなグラデーションを用いたCSSの余白の模式図とし、短い説明を添えます。夜の雰囲気は暗いページ全体ではなく、図版の明暗と編集的な静けさで表現してください。1000px以下では記事を全幅にして補助パネルを2列、680px以下では全パネルを1列にします。本文はサンプルの編集記事で、リンクはページ内移動のみ。保存や購読など未実装の機能を示す操作部品は置かないでください。
Create a static reading desk for AFTERIMAGE, a fictional editorial journal for design enthusiasts. Explore negative space and visual pauses. Open with a compact masthead, issue details and in-page navigation, followed immediately by useful essay, reading-route and glossary modules rather than a promotional hero. Use a near-white background, square white panels, #BE185D magenta, #FCE7F3 pale pink and dark ink. Place the main essay in a broad left panel, with a numbered reading route and glossary stacked on the right. Below, arrange three panels for a practical exercise, an editorial note and a related question. Use Georgia with a Japanese system-serif fallback for article headings, and system sans-serif for body text and navigation. Combine small uppercase labels, fine rules, understated numbering and generous line spacing. Make a CSS diagram using concentric circles and luminous gradients on a magenta field, with a short caption; photography is unnecessary. Express the evening mood through the diagram's contrast and the quiet editorial rhythm, not a dark page background. At widths of 1000px and below, let the essay span the grid and place support panels in two columns; at 680px and below, stack every panel and allow navigation to wrap. Supply sample editorial text and links to page sections only. Do not imply working subscriptions, saving tools or other unimplemented services.
参考プロンプトの使い方・変更例How to adapt a reference prompt
完全な再現を保証するものではありません。 / Exact reproduction is not guaranteed.
構成と活用のポイントComposition and adaptation
コンパクトな誌名とナビゲーションの下に、大小の情報モジュールを配置。
左の記事は明朝系の見出しとマゼンタの図版、右は読む順序と用語解説で構成しています。
細い罫線、角のある白いパネル、ゆったりした本文の行間が、密度のある画面に読むための間をつくります。
デザインの学習ノートや小さな専門誌に適した構成です。
幅1000px以下では記事を上段全幅、補助モジュールを下段の2列に変更。
680px以下では関連項目も含めて1列になり、ナビゲーションは折り返します。
リンクは誌面内の該当箇所へ移動します。
参考プロンプトでは、読者の専門性に合わせて中心テーマ、用語、実践課題を指定してください。
余白の図解を扱う題材に沿った模式図へ置き換え、記事の分量と関連項目の数も具体的に伝えると、自分の編集内容に合わせやすくなります。
A compact masthead opens onto a large essay beside a numbered route and pink glossary.
Serif headings, fine rules and generous text leading set the reading rhythm; a magenta CSS diagram gives the page its atmospheric contrast.
Suited to design study notes or a small journal.
At 1000px and below, the essay spans the grid above two support columns.
At 680px, all panels stack and navigation wraps.
Links lead to sections on this page.
Adapt the reference prompt by naming your audience, topic, glossary terms and exercise.
Specify essay length and related-note count, and replace the circle study with a diagram that explains your own subject.