TODAY’S DESIGN · 2026-10-22 · lp

FOLIO — 仕事の流れから選ぶ業務ツールFOLIO — A Content-First Work Toolkit

小さな事業の見積・案件・請求を、実際の業務サンプルから紹介するFOLIOの静的製品ページです。

FOLIO introduces a small-business toolkit through concrete work samples, not a promotional hero.

dark-luxury · card-grid · content-first / dark-luxury / violet / product-catalog / small-business / typographic / static-demo

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

大きな導入コピーを置かず、コンパクトなブランド帯から３枚の製品カードへ直結します。
紫の見積カードには明細と合計、隣には案件の進捗と請求一覧を掲載。
明朝のカード見出し、等幅の番号、細い罫線と広めの余白が、情報の密度に静かな緩急をつけています。

機能を先に比較してほしい小規模事業向けサービスに適した構成です。
900px以下でカードと機能説明を１列にし、600px以下ではナビゲーションと導入案内も縦に並べます。
表示データは架空の例で、操作画面や申込フォームではありません。
ページ内リンクで機能と導入案内へ移動できます。

参考プロンプトを使う際は、３つの業務名、見積明細、案件名を対象業種の言葉に置き換えてください。
カード数を増やす前に比較したい業務を絞り、導入案内のリンク先や利用条件は実際の提供内容に合わせて指定すると、構成の意図を保てます。

Three cards lead with an itemized estimate, project milestones and an invoice list.
Violet anchors the first card; serif titles, monospaced labels and fine rules give the dense content a measured rhythm.

The layout suits products that benefit from showing tasks first.
At 900px, cards and feature explanations become a single column.
At 600px, navigation and the closing invitation also stack.
All records are fictional static examples; links move within the page, not through a working app.

Adapt the reference prompt by replacing the three workflows, sample line items and project names with your audience’s tasks.
Specify real onboarding destinations and terms before turning the closing information into a live service.

デザインの条件Design conditions

対象 / Audience: small-business
目的 / Purpose: product-introduction
トーン / Tone: confident
主な色 / Primary color: #7C3AED
補助色 / Secondary color: #F5F3FF
構成 / Sections: content / features / 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.

小規模事業向け業務ツール「FOLIO」の日本語製品紹介ページを制作してください。ヒーローや大きな宣伝見出しは置かず、細いブランド・ナビゲーション帯のすぐ下から、見積・案件・請求という３つの業務を具体的な静的サンプルで紹介します。最初のカードの見出しをページのh1として扱い、セクション名は小さなカタログラベルにしてください。

背景は黒に近い紫、主色は#7C3AED、文字と紙面サンプルは#F5F3FF。夜の落ち着きと強いコントラストを持つ、端正で大胆な表現にします。角をほぼ丸めないカード、細い罫線、番号、余白を使い、写真には頼りません。見出しにはGeorgiaとNoto Serif JPを含む明朝系、本文にはNoto Sans JPなどの固定サンセリフ、補助情報には等幅書体を使います。

デスクトップでは最初を少し広くした３列のカードグリッドにします。紫の見積カードに白い明細表と合計金額、黒い案件カードに工程リスト、淡いカードに請求項目を配置。データは架空の表示例であることを明記し、操作可能なアプリ画面と誤認させないでください。下部は３項目の製品設計説明、続いて導入前の確認事項を開けるdetailsとページ内リンクを配置します。フォームや実際の決済・送信機能は付けません。

900px以下ではカードと説明を１列にし、カードの順序を維持。600px以下ではヘッダーと導入案内を縦に並べ、余白を縮めます。業種に合わせて業務名、明細、案件内容を変更できますが、実例から読み始める構成と読みやすい情報幅は維持してください。

小規模事業向け業務ツール「FOLIO」の日本語製品紹介ページを制作してください。ヒーローや大きな宣伝見出しは置かず、細いブランド・ナビゲーション帯のすぐ下から、見積・案件・請求という３つの業務を具体的な静的サンプルで紹介します。最初のカードの見出しをページのh1として扱い、セクション名は小さなカタログラベルにしてください。

背景は黒に近い紫、主色は#7C3AED、文字と紙面サンプルは#F5F3FF。夜の落ち着きと強いコントラストを持つ、端正で大胆な表現にします。角をほぼ丸めないカード、細い罫線、番号、余白を使い、写真には頼りません。見出しにはGeorgiaとNoto Serif JPを含む明朝系、本文にはNoto Sans JPなどの固定サンセリフ、補助情報には等幅書体を使います。

デスクトップでは最初を少し広くした３列のカードグリッドにします。紫の見積カードに白い明細表と合計金額、黒い案件カードに工程リスト、淡いカードに請求項目を配置。データは架空の表示例であることを明記し、操作可能なアプリ画面と誤認させないでください。下部は３項目の製品設計説明、続いて導入前の確認事項を開けるdetailsとページ内リンクを配置します。フォームや実際の決済・送信機能は付けません。

900px以下ではカードと説明を１列にし、カードの順序を維持。600px以下ではヘッダーと導入案内を縦に並べ、余白を縮めます。業種に合わせて業務名、明細、案件内容を変更できますが、実例から読み始める構成と読みやすい情報幅は維持してください。

Create a Japanese product introduction page for FOLIO, a small-business work toolkit. Start with a compact brand/navigation strip followed immediately by three substantive workflow cards: estimates, projects and invoices. Do not add a hero or oversized introductory headline. Use the first card title as the page h1 and keep the catalog context in a small label.

Use near-black violet surroundings, #7C3AED as the primary color and #F5F3FF for light text and paper-like samples. Make the atmosphere cinematic, restrained and high-contrast through typography, fine rules and mostly square corners, without photography. Pair Georgia and Noto Serif JP headings with a fixed Noto Sans JP sans-serif body stack and monospaced metadata.

Build a desktop three-column grid with a slightly wider first card. The violet estimate card contains a light itemized document and total. The dark project card contains milestones; the pale invoice card contains a short invoice list. Explicitly label the fictional records as static samples, not an interactive application. Follow with three concise product principles and a closing introduction area with an expandable onboarding checklist and in-page links. Do not imply working submission, payment or account features.

Below 900px, stack the cards and feature explanations in their original order. Below 600px, also stack the header and closing invitation and reduce padding. For another audience, replace workflow names, line items and project details while retaining the content-first opening and comfortable reading widths.

Create a Japanese product introduction page for FOLIO, a small-business work toolkit. Start with a compact brand/navigation strip followed immediately by three substantive workflow cards: estimates, projects and invoices. Do not add a hero or oversized introductory headline. Use the first card title as the page h1 and keep the catalog context in a small label.

Use near-black violet surroundings, #7C3AED as the primary color and #F5F3FF for light text and paper-like samples. Make the atmosphere cinematic, restrained and high-contrast through typography, fine rules and mostly square corners, without photography. Pair Georgia and Noto Serif JP headings with a fixed Noto Sans JP sans-serif body stack and monospaced metadata.

Build a desktop three-column grid with a slightly wider first card. The violet estimate card contains a light itemized document and total. The dark project card contains milestones; the pale invoice card contains a short invoice list. Explicitly label the fictional records as static samples, not an interactive application. Follow with three concise product principles and a closing introduction area with an expandable onboarding checklist and in-page links. Do not imply working submission, payment or account features.

Below 900px, stack the cards and feature explanations in their original order. Below 600px, also stack the header and closing invitation and reduce padding. For another audience, replace workflow names, line items and project details while retaining the content-first opening and comfortable reading widths.

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

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