厳選・オープン・無料

Tomoseattle

ドラッグ＆ドロップのコラージュインターフェースを備えた、エクレティックでインタラクティブな日本料理店のウェブサイト。

01

デザイン DNA

モダンレストランのためのインタラクティブなスクラップブック、またはデジタル・ムードボード。

02

カラー

大胆な黒のタイポグラフィと鮮やかなコーラル色のアクセントが際立つ、温かみのあるニュートラルなキャンバス。

03

タイポグラフィ

didone-serif · transitional-serif · geometric-sans

• display32px · 400
• body25px · 400

ナビゲーション項目は、コラージュやランサムノートのような効果を出すため、さまざまなフォントを使用しています。 · メインタイトル『TOMO』には、太字でハイコントラストなディドン・セリフが使用されています。 · 説明テキストには、モノスペースまたは幾何学的なサンセリフフォントが使用されています。

04

余白

不規則でコラージュ主導。余白は厳格なグリッドではなく、ドラッグ可能な要素の手動配置によって決定されます。

05

サーフェス (角丸 / 影 / 罫線)

目に見えるボックスシャドウは無し。要素はハードエッジまたは画像の透明性に依存します。

06

レイアウト

画像とテキストブロックがオーバーラップし、ユーザーが再配置できる、自由形式で非構造化されたレイアウト。

07

モーションとインタラクション

ドラッグ可能な要素は、標準的な220msのトランジションでカーソルを追跡します。

ドラッグ可能な要素の上でカーソルが『move』アイコンに変わります。 · 要素をクリックし、キャンバス上の新しい位置にドラッグできます。

08

コンポーネント

• button 白い紙のような背景上に、さまざまなフォントでスタイル付けされたテキストラベル。
• card オーバーラップするフォトグラフィックな切り抜きとテキストブロック。
• chip 小さなドラッグ可能なテキストフラグメント。
• input 従来の入力欄は無し。インタラクションはドラッグ＆ドロップで行います。
• hero ページ上半分を支配する巨大な『TOMO』タイポグラフィ。

09

文体と禁止事項

• トーン 遊び心があり、インフォーマルで、少し皮肉めいた調子。
• 見出し 太字で、オーバーサイズ、タイポグラフィックに表現力豊か。
• CTA 遊びへの招待として表現（『BUILD A CUSTOM COMPOSITION』など）。

• 厳格で均一なグリッドを使用しない — スクリーンショットは混沌とし、オーバーラップするコラージュレイアウトを示しています。
• すべてのテキストに単一のフォントファミリーを使用しない — スクリーンショットでは、ナビゲーション項目が少なくとも4種類の異なるタイプフェイスで表示されています。
• クールまたはダークな背景色を使用しない — スクリーンショットは温かみのある明るいベージュのキャンバスを示しています。
• 深度表現に微細なシャドウに依存しない — スクリーンショットはハードエッジのフォトグラフィック切り抜きを示しています。
• 角丸をあらゆる要素に適用しない — スクリーンショットはシャープで矩形のエッジを示しています。
• ミュートされた単色のアクセントカラーパレットを使用しない — スクリーンショットでは、強調に単一の明るいコーラルレッドが使用されています。
• 避ける: 企業風
• 避ける: ミニマリスト
• 避ける: 非常に構造化された
• 避ける: シリアス

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko