厳選・オープン・無料

Silentshark

手描き風のユニークな美学を備えた、暗く雰囲気のある戦術シミュレーションゲームのインターフェース。

01

デザイン DNA

発光するレーダー画面を持つ、潜水艦の静かで暗い司令室。

02

カラー

暗い海洋系背景と、重要なUI要素のための温かく発光するアクセントとの高いコントラスト。

03

タイポグラフィ

casual-script · monospace

• display56px · 600
• body16px · 400

すべてのテキストに手描き風の印象を与えるcasual-script系フォントを使用。 · メニュー項目には大文字を使用し、字間を広める。 · アクセントテキストには、コントラストを高めるための温かい紙色を使用。

04

余白

メニュー項目間に広めの垂直スペースを設け、穏やかで落ち着いたインターフェースを実現。

05

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

ボタンやカードに、暗い背景に対して半透明の明るいボーダーを設定。

rgba(17, 28, 38, 0.2) 0px 10px 20px 0px · rgba(7, 11, 16, 0.35) 0px 12px 26px 0px

06

レイアウト

目立つヒーローイメージと縦長のメニュースタックを持つ、中央揃えのカラムレイアウト。

07

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

hover時の滑らかなtransformとopacityトランジション。 · 派手なアニメーションは使用せず、微細で雰囲気重視。

メニュー項目に対して、背景色の微細な変化とわずかなtransform。 · 視覚的な押下状態はなし。カーソルの変化のみに依存。

08

コンポーネント

• button 半透明の背景と微細なhoverトランジションを持つ、フルワイドの長方形ボタン。
• card 埋め込みアートワーク付きの、ゲームタイトルを表示する大きな角丸カード。
• hero 雰囲気のあるアートワークとゲームタイトルを表示する、劇的な中央揃えカード。

09

文体と禁止事項

• トーン 真剣で、雰囲気があり、戦術的。
• 見出し 暗いテーマにもかかわらず、手描き風で温かく、親しみやすい印象。
• CTA シンプルで、直接的で、控えめ。

• 明るく彩度の高いプライマリカラーを使用しない — スクリーンショットは暗く彩度の低いパレットを示している。
• シャープで幾何学的な、またはモダンなsans-serifフォントを使用しない — スクリーンショットは手描き風のcasual-scriptタイポグラフィを示している。
• 多くの要素が競合する、雑然としたレイアウトを使用しない — スクリーンショットは穏やかで中央揃えのカラムレイアウトを示している。
• 速く、不快なアニメーションやトランジションを使用しない — スクリーンショットは滑らかで微細なhover効果を示している。
• 目立ちすぎ、攻撃的なCTAボタンを使用しない — スクリーンショットは控えめな半透明ボタンを示している。
• 白や非常に明るい背景を使用しない — スクリーンショットは深い暗い海洋背景を示している。
• 避ける: 明るく彩度の高いプライマリカラーを使用しない。
• 避ける: シャープで幾何学的な、またはモダンなsans-serifフォントを使用しない。
• 避ける: 多くの要素が競合する、雑然としたレイアウトを使用しない。
• 避ける: 速く、不快なアニメーションやトランジションを使用しない。
• 避ける: 目立ちすぎ、攻撃的なCTAボタンを使用しない。
• 避ける: 白や非常に明るい背景を使用しない。

11

System Prompt

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