厳選・オープン・無料

Atlas Obscura

世界の最も非凡な隠れた場所を、美しくキュレーションされたエディトリアルガイド。

01

デザイン DNA

ヴィンテージの探検家の日記と、モダンなデジタルディスカバリーの融合

02

カラー

ブランド認識と強調のため、鮮やかな赤のアクセントを1色使用した、白地に黒のハイコントラストエディトリアルベース

03

タイポグラフィ

transitional-serif · humanist-sans

• display56px · 700
• subtitle14px · 700
• body16px · 400
• caption14px · 400

見出しにはクラシックなエディトリアル感を出すため、セリフ体を使用 · 本文とUI要素には可読性を重視し、Open Sansを使用 · 強調テキストには、トラッキング（字間調整）を施した大文字を使用

04

余白

エディトリアルセクションに十分な余白を備えた、標準4pxベースグリッド

05

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

カードと入力欄には1px solid rgba(0,0,0,0.1)を使用

rgba(0,0,0,0.24) 0px 0px 5px 0px

06

レイアウト

クリーンなトップナビゲーションバーの後に、検索機能を備えたフルワイド中央揃えのヒーローセクション

07

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

hover状態のためのスムーズなトランジション · ページナビゲーションのためのスムーズなスクロール

インタラクティブ要素上の微細なカラートランジション · 視覚フィードバックを伴う即座の応答

08

コンポーネント

• button 「近くのスポット」などのプライマリアクション用の、白テキストとアイコンを持つ黒いピル形状ボタン
• card 最小限のボーダーを持つ、画像重視のエディトリアルカード
• chip 「ランダムなスポット」などのセカンダリアクション用の、アウトライン付き丸型ボタン
• input プレースホルダーテキストと統合検索アイコンを持つ、フルワイドの丸型検索入力欄
• hero 強調テキスト、説明文、および目立つ検索バーを備えた、大きな中央揃えの見出し

09

文体と禁止事項

• トーン 権威がありつつも、歓迎的で好奇心をそそるトーン
• 見出し 好奇心をかき立てる、壮大で叙情的なセリフ体の見出し
• CTA 記述的なラベルを持つ、明確で行動指向のボタン

• ダークモードやダークな背景を使用しない — スクリーンショットでは主に白（#ffffff）の背景が示されている
• コンテナに遊び心のある丸みのある角を使用しない — スクリーンショットではヒーローセクションのシャープな矩形のエッジが示されている
• 複数の競合するアクセントカラーを使用しない — スクリーンショットでは単一の支配的な赤（#E21F26）のアクセントが示されている
• 見出しに細く、ライトなサンセリフフォントを使用しない — スクリーンショットでは太く、ウェイトのあるセリフ体のタイポグラフィが示されている
• 過度なシャドウでインターフェースを雑然とさせない — スクリーンショットではドロップシャドウが最小限の、非常にクリーンでフラットなデザインが示されている
• 小さく、窮屈なテキストを使用しない — スクリーンショットでは快適な読書のための十分な行間とパディングが示されている
• 避ける: 過度にカジュアルな言葉遣い
• 避ける: 過度な感嘆符の使用
• 避ける: 一般的な旅行の定型句

10

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

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

11

System Prompt

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