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

OTHERFORM — 青い時間をつくる光OTHERFORM — Objects for the Blue Hour

架空の照明コレクションを紹介する、青と白のベント型ショーケース。
浮遊感のあるランプと大胆な文字が、夜のデスクに遊び心を添えます。

A blue-and-white showcase for a fictional lighting studio, with a playful after-dark mood.

tech-futuristic · asymmetric · bento-grid / lighting / electric-blue / svg-illustration / product-collection / night-mood / oversized-type / static-commerce

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

冒頭から大小四つのパネルを組み合わせ、左上にコンセプト、右に縦長の製品図、左下に仕様と案内を配置。
大きなサンセリフと小さな等幅ラベル、細い罫線、広い余白で情報の強弱をつけています。
ランプはSVGの楕円とグラデーションで描き、写真を使わずに立体感を表現しています。

デザイン性のある生活用品や小規模な製品シリーズの紹介に向く構成です。
幅1000px以下では導入と製品を全幅、その下に仕様と案内を二列で配置。
640px以下では一列となり、製品図も縮小します。
価格や仕様は架空の静的な表示で、リンクはページ内を移動します。

参照プロンプトを使う際は、ブランド名、製品名、価格、素材、寸法を対象商品に合わせて指定してください。
日本語中心の読者には見出しと本文の言語を変更し、長い製品名には改行位置の調整も求めると、このパネル構成を保ちやすくなります。

Four unequal panels open the page: bold copy at upper left, a tall lamp illustration at right, and compact details and invitation panels below.
Sans-serif headlines, monospaced labels, fine rules and open space set the rhythm.
SVG gradients give the lamp volume.

Suited to design objects and small collections.
At 1000px and below, introduction and product span both columns, with details and invitation side by side; at 640px, all panels stack in reading order.
Prices and specifications are static examples; links stay on the page.

Adapt the reference prompt with your brand, product name, price, materials and dimensions.
Specify your audience’s language and request adjusted headline breaks for longer names while retaining the unequal panels.

デザインの条件Design conditions

対象 / Audience: design-conscious-buyers
目的 / Purpose: collection-introduction
トーン / Tone: playful
主な色 / Primary color: #2563EB
補助色 / Secondary color: #F8FAFC
構成 / Sections: content / 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.

架空の照明ブランド「OTHERFORM」のコレクション紹介ページを制作してください。デザインに関心のある買い手に向け、夜の空気感と遊び心を持つテック・フューチャリスティックな表現にします。主色は#2563EB、副色は#F8FAFC、補助にインクのような暗色を使います。

ページ冒頭そのものを大小四つのベントパネルで構成してください。デスクトップでは12列を使い、左上7列に青いコンセプトパネル、右5列に二段分の縦長製品パネルを配置。左下を4列の暗い仕様パネルと3列の白い案内パネルに分けます。独立したヒーローの下にカードを並べる構成にはしません。上部に簡潔なブランドナビゲーション、下部に短いブランドメッセージとフッターを添えます。

コンセプトは「A little out of this world.」。大きな詰め気味のサンセリフ見出し、等幅の番号や小さなラベル、丸角、細い罫線を組み合わせます。製品は架空の卓上灯「Orbit / 01」で、青い楕円形シェード、細い支柱、円形ベースをSVGとグラデーションで図案化。写真は不要です。価格$180、素材、寸法、光色は静的なサンプルとして表示し、購入や色変更などの動作は設けません。案内リンクはページ内の製品・仕様に移動させます。

1000px以下では二列構成にし、導入と製品を全幅、その下に仕様と案内を配置。640px以下ではすべて一列にし、見出しや製品図の大きさも調整してください。フォントはsystem-ui、Noto Sans JP、Courier Newなどの固定スタックを使用します。

架空の照明ブランド「OTHERFORM」のコレクション紹介ページを制作してください。デザインに関心のある買い手に向け、夜の空気感と遊び心を持つテック・フューチャリスティックな表現にします。主色は#2563EB、副色は#F8FAFC、補助にインクのような暗色を使います。

ページ冒頭そのものを大小四つのベントパネルで構成してください。デスクトップでは12列を使い、左上7列に青いコンセプトパネル、右5列に二段分の縦長製品パネルを配置。左下を4列の暗い仕様パネルと3列の白い案内パネルに分けます。独立したヒーローの下にカードを並べる構成にはしません。上部に簡潔なブランドナビゲーション、下部に短いブランドメッセージとフッターを添えます。

コンセプトは「A little out of this world.」。大きな詰め気味のサンセリフ見出し、等幅の番号や小さなラベル、丸角、細い罫線を組み合わせます。製品は架空の卓上灯「Orbit / 01」で、青い楕円形シェード、細い支柱、円形ベースをSVGとグラデーションで図案化。写真は不要です。価格$180、素材、寸法、光色は静的なサンプルとして表示し、購入や色変更などの動作は設けません。案内リンクはページ内の製品・仕様に移動させます。

1000px以下では二列構成にし、導入と製品を全幅、その下に仕様と案内を配置。640px以下ではすべて一列にし、見出しや製品図の大きさも調整してください。フォントはsystem-ui、Noto Sans JP、Courier Newなどの固定スタックを使用します。

Create a collection-introduction page for the fictional lighting studio OTHERFORM, aimed at design-conscious buyers. Use a playful, cinematic after-dark tech-futuristic mood with primary blue #2563EB, off-white #F8FAFC and supporting ink-dark surfaces.

Make the opening itself a four-panel bento composition. On a 12-column desktop grid, place a blue concept panel across seven columns at upper left and a tall product panel across five columns at right, spanning both rows. Divide the lower left into a four-column dark specifications panel and a three-column pale invitation panel. Do not put a standalone hero before the grid. Add restrained brand navigation above and a short studio statement and footer below.

Use the headline “A little out of this world.” in oversized, tightly spaced sans-serif type. Contrast it with monospaced numbering, small labels, fine rules and rounded panel corners. Illustrate the fictional Orbit / 01 table lamp using inline SVG: a blue elliptical shade, slim stem and circular base, with gradients for volume. No photography is needed. Show $180, material, dimensions and light temperature as static example content. Do not imply checkout or interactive color selection. Navigation links lead to the product and specifications within the page.

At 1000px and below, switch to two columns with the introduction and product each full width, followed by specifications and invitation side by side. At 640px and below, use one column and reduce the headline and illustration scale. Use fixed system font stacks such as system-ui, Noto Sans JP and Courier New.

Create a collection-introduction page for the fictional lighting studio OTHERFORM, aimed at design-conscious buyers. Use a playful, cinematic after-dark tech-futuristic mood with primary blue #2563EB, off-white #F8FAFC and supporting ink-dark surfaces.

Make the opening itself a four-panel bento composition. On a 12-column desktop grid, place a blue concept panel across seven columns at upper left and a tall product panel across five columns at right, spanning both rows. Divide the lower left into a four-column dark specifications panel and a three-column pale invitation panel. Do not put a standalone hero before the grid. Add restrained brand navigation above and a short studio statement and footer below.

Use the headline “A little out of this world.” in oversized, tightly spaced sans-serif type. Contrast it with monospaced numbering, small labels, fine rules and rounded panel corners. Illustrate the fictional Orbit / 01 table lamp using inline SVG: a blue elliptical shade, slim stem and circular base, with gradients for volume. No photography is needed. Show $180, material, dimensions and light temperature as static example content. Do not imply checkout or interactive color selection. Navigation links lead to the product and specifications within the page.

At 1000px and below, switch to two columns with the introduction and product each full width, followed by specifications and invitation side by side. At 640px and below, use one column and reduce the headline and illustration scale. Use fixed system font stacks such as system-ui, Noto Sans JP and Courier New.

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

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