厳選・オープン・無料

Vouchatlas

クラウドソース型の旅行安全・インフラデータを可視化するインタラクティブマップ。

01

デザイン DNA

デジタルノマドのためのクラウドソース型旅行安全アトラス。

02

カラー

データ駆動型のカラーハイライトを用いた中立的な基盤。

03

タイポグラフィ

humanist-sans

• display24px · 500
• body16px · 400
• caption12px · 400

04

余白

一貫した4pxベースシステム。

05

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

控えめな1pxボーダーと柔らかいシャドウで境界を定義。

rgba(0,0,0,0.1) 0px 1px 3px 0px · rgba(0,0,0,0.1) 0px 1px 2px -1px

06

レイアウト

左側にメインのマップビジュアライゼーション、右側にデータサイドバーを配置した分割レイアウト。

07

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

インタラクティブ要素における滑らかな背景色・ボーダー色トランジション。

ボタンやインタラクティブマップ要素における控えめな色のトランジション。 · サイドバーのデータ更新をトリガー。

08

コンポーネント

• button 控えめなボーダーとホバートランジションを備えた、ミニマルなピル形状ボタン。
• card 控えめなシャドウと緊密なパディングを備えたクリーンなカード。
• chip データステータスを表す、小さなタグ状要素。
• input 丸みのあるボーダーを持つ標準テキストインプット。
• hero インタラクティブマップビジュアライゼーションを中心とした、フル幅セクション。

09

文体と禁止事項

• トーン 客観的で情報を提供する。
• 見出し 直接的で、質問ベースの見出し。
• CTA ミニマルで機能的。

• 装飾的なフォントを使用しない — スクリーンショットではクリーンで可読性の高いサンセリフタイポグラフィが示されています。
• 重いドロップシャドウを追加しない — スクリーンショットでは控えめで柔らかいボックスシャドウが示されています。
• 検証されていない明るいアクセントカラーを使用しない — スクリーンショットではデータに機能的な赤やオレンジが使われています。
• 複雑なグラデーションを使用しない — スクリーンショットではフラットカラーとシンプルなリニアスケールが示されています。
• UIを過剰に詰め込まない — スクリーンショットでは十分なホワイトスペースと焦点を絞ったレイアウトが示されています。
• 角丸を過剰に使用しない — スクリーンショットでは主にシャープまたはわずかに丸みのあるエッジが示されています。
• 避ける: 感情的な言葉
• 避ける: マーケティング誇張
• 避ける: 複雑な専門用語

11

System Prompt

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