TODAY’S DESIGN · 2026-10-30 · commerce

FRAME — デスクのための小さな未来FRAME — A little future for your desk

デスク周りの架空のデバイスを紹介する、明るく精密なプロダクトカタログです。

An airy concept catalog for three fictional desk devices.

tech-futuristic · hero · product-showcase / sidebar-content / tech-futuristic / blue / css-illustration / desk-accessories / airy / catalog

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

左の細いレールにブランド、ページ内ナビゲーション、シリーズ情報を集約。
右側は大きな見出しから３つの製品、仕様比較へと読み進める構成です。
青と淡い白を基調に、細い罫線、小さな等幅の番号、余白のあるサンセリフ体で技術的な表情をつくっています。
製品の立体感は写真ではなくCSSで描いています。

少数の機器やデザインコンセプトの紹介に適しています。
幅1000px以下では製品を１列にし、700px以下では追従する左レールを通常フローのコンパクトな上部帯へ変更。
仕様比較も縦積みに切り替えます。
価格や仕様は例示で、購入機能はありません。

参考プロンプトは、製品カテゴリー、３つの用途、表示価格、比較項目を自分の読者に合わせて書き換えてください。
実在製品を紹介する場合は図の形や仕様も置き換え、リンク先がページ内の説明なのか外部の販売先なのかを明記すると意図が伝わります。

A slim identity rail anchors the page beside a wide catalog.
Oversized sans-serif type leads into three CSS-drawn objects and a specification comparison.
Blue surfaces, fine rules and small monospace labels give the generous spacing a technical edge.

Suited to a small hardware collection or design proposal.
Below 1000px, products stack; below 700px, the sticky rail becomes a compact, non-sticky top band and comparison columns stack.
Prices and specifications are illustrative; there is no checkout.

Adapt the reference prompt by changing the product category, three use cases, prices and comparison criteria.
For real products, replace the object drawings and example specifications, and state whether links lead to on-page information or a shop.

デザインの条件Design conditions

対象 / Audience: product-explorers
目的 / Purpose: product-showcase
トーン / Tone: refined
主な色 / Primary color: #2563EB
補助色 / Secondary color: #F8FAFC
構成 / Sections: hero / products / details / 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.

FRAMEという架空のデスクデバイスブランドの静的な製品紹介ページをデザインしてください。明るく清潔で洗練されたテック表現とし、メインカラーは#2563EB、背景は#F8FAFC。左には約210pxの細いブランド・ナビゲーションレール、右には幅広いカタログ領域を置きます。レールにはブランド記号、Collection／Specifications／Your setupのページ内リンク、シリーズ情報を入れ、デスクトップでは上部に追従させます。右側の冒頭は小さなコレクション番号と大きな『Less friction. More flow.』の見出し。その直下にDock 01、Dial 02、Beam 03の３製品を並べ、見出しと単一画像を左右に分けるヒーローにはしないでください。製品の形はCSSによる立体的な図で表現し、青いドック、円形のコントローラー、細長いデスクライトを淡い背景上に置きます。細い罫線、等幅の品番、小さな価格表記、広い余白で統一。各製品には用途、例示価格、仕様へのページ内リンクを付け、下部に３列の仕様比較と青い案内帯を設けます。価格・仕様が架空の例であることを明記し、購入フォームや機能するカートは設けません。1000px以下では製品を縦積み、700px以下ではレールを通常フローの上部帯にし、比較項目も１列にしてください。サンセリフ体と等幅体のシステムフォントを使い、写真には依存しない構成にしてください。

FRAMEという架空のデスクデバイスブランドの静的な製品紹介ページをデザインしてください。明るく清潔で洗練されたテック表現とし、メインカラーは#2563EB、背景は#F8FAFC。左には約210pxの細いブランド・ナビゲーションレール、右には幅広いカタログ領域を置きます。レールにはブランド記号、Collection／Specifications／Your setupのページ内リンク、シリーズ情報を入れ、デスクトップでは上部に追従させます。右側の冒頭は小さなコレクション番号と大きな『Less friction. More flow.』の見出し。その直下にDock 01、Dial 02、Beam 03の３製品を並べ、見出しと単一画像を左右に分けるヒーローにはしないでください。製品の形はCSSによる立体的な図で表現し、青いドック、円形のコントローラー、細長いデスクライトを淡い背景上に置きます。細い罫線、等幅の品番、小さな価格表記、広い余白で統一。各製品には用途、例示価格、仕様へのページ内リンクを付け、下部に３列の仕様比較と青い案内帯を設けます。価格・仕様が架空の例であることを明記し、購入フォームや機能するカートは設けません。1000px以下では製品を縦積み、700px以下ではレールを通常フローの上部帯にし、比較項目も１列にしてください。サンセリフ体と等幅体のシステムフォントを使い、写真には依存しない構成にしてください。

Design a static product showcase for FRAME, a fictional desk-device brand. Use a bright, airy, refined tech aesthetic with #2563EB and #F8FAFC. Place a narrow, approximately 210px identity/navigation rail beside a wide catalog. The desktop rail sticks at the top and contains a brand symbol, in-page links for Collection, Specifications and Your setup, plus collection context. Open the content area with a small collection number and oversized 'Less friction. More flow.' typography, followed immediately by three product entries, not a headline/image split hero. Show Dock 01, Dial 02 and Beam 03 using dimensional CSS illustrations: a blue hub, a circular controller and a slim desk light. Use fine dividers, monospace item numbers, restrained prices and generous spacing. Include each product's role, illustrative price and an anchor to its specifications. Follow with a three-column comparison and a blue closing invitation linking back to the collection. Clearly identify the products, prices and specifications as fictional examples; do not imply checkout or working commerce. Stack product entries below 1000px. Below 700px, turn the rail into a compact top band in normal document flow and stack specification columns. Use fixed system sans-serif and monospace stacks without photography.

Design a static product showcase for FRAME, a fictional desk-device brand. Use a bright, airy, refined tech aesthetic with #2563EB and #F8FAFC. Place a narrow, approximately 210px identity/navigation rail beside a wide catalog. The desktop rail sticks at the top and contains a brand symbol, in-page links for Collection, Specifications and Your setup, plus collection context. Open the content area with a small collection number and oversized 'Less friction. More flow.' typography, followed immediately by three product entries, not a headline/image split hero. Show Dock 01, Dial 02 and Beam 03 using dimensional CSS illustrations: a blue hub, a circular controller and a slim desk light. Use fine dividers, monospace item numbers, restrained prices and generous spacing. Include each product's role, illustrative price and an anchor to its specifications. Follow with a three-column comparison and a blue closing invitation linking back to the collection. Clearly identify the products, prices and specifications as fictional examples; do not imply checkout or working commerce. Stack product entries below 1000px. Below 700px, turn the rail into a compact top band in normal document flow and stack specification columns. Use fixed system sans-serif and monospace stacks without photography.

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

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