Wise
深い苔と石灰岩の緊張感。ほぼ黒に近い森の地面には石灰岩の火花が散り、巨大で角張った岩肌があらゆる動きを物語る。
Wiseフォントは、自信に満ちた、やや力強い印象を与えます。テキスト、ナビゲーション、暗いセクション、アイコンなど、画面の大部分は深いフォレストグリーン（#163300）で占められ、アクションボタン、アクティブなタブ、キー要素には、鮮やかなライムグリーン（#9fe870）がアクセントとして使われています。このフォントは、やや攻撃的な印象を与えます。Wise Sansのラインウェイトは900で、文字が密集しており、ホーム画面では大きな文字（100px以上）で際立っています。システムの残りの部分は、オフホワイトのキャンバスに柔らかなグレーの表面（#e8ebe6）が配され、控えめな印象です。ボタン、ナビゲーションセグメント、チェックボックスのサムネイル、画像マスクなどのコンポーネントは、デフォルトでピル型で、カードや入力フィールドには小さな半径（10px）が確保されています。カラーグラデーションはほとんど使われておらず、代わりに、サラマンダーとフォレストグリーンの組み合わせが、セクションが暗くなるにつれて滑らかに変化し、過剰な装飾なしにリズムを生み出しています。
最大幅1200ピクセルのコンテナが中央に配置され、上部と暗いセクションがページの全幅に広がっています。ヘッダーレイアウトは、白い背景に中央に配置された大きな見出しが特徴で、大きなイラスト（地球儀）がビューポートの下端を超えて広がっています。セクションのリズムは、白、薄緑、そして「森の墨」のような暗いセクションが交互に現れ、自然な色のリズムを生み出しています。コンテンツレイアウトは主に中央に配置されており、上部にはテキストと画像のブロックが2列に、セカンダリセクションには主要要素が3列に並んでいます。国旗付きの5列グリッドを使用して国のリストが表示されます。ナビゲーションは、セグメント化されたトグルを備えた単一の固定トップバーです。QRコードは、スクロール位置に関係なく右下隅に固定されています。
金貨が散りばめられた地球儀を描いた3Dイラストが、ブランドのビジュアル世界を創り出している。触覚に訴えかけるような、ややシュールな雰囲気で、柔らかなグラデーションと温かみのある照明が用いられている。写真はミニマルなスタイルで、使用される場合でもハイキーでカジュアルな雰囲気だ。国旗は5列のグリッドに円形のサムネイルとして表示され、唯一の「象徴的な」要素は各国のアイデンティティである。抽象的なグラフィック要素や標準的なテンプレートは一切使用されていない。地球儀と金貨はマスコットのモチーフとして繰り返し登場し、モンタージュではなく、温かく楽観的な単一のオブジェクトを通して、グローバルな広がりを表現している。
パレット
ブランド
- Forest Ink
#163300— ブランドの強みは、ナビゲーションテキスト、暗いセクションの背景、明るい表面上の本文テキスト、アイコンのアウトライン、塗りつぶされたナビゲーション要素など、ブランドを特徴づけるダークなスタイルにあります。重厚感や権威が求められる場面では、Forest Inkが選ばれるのです。 - Lime Voltage
#9fe870— 緑色は、装飾的なディテールの補助色として、また使用頻度の低い検索クエリを強調するために使用されます。行動喚起のメインカラーとして使用すべきではありません。 - Spruce
#054d28— カードの表面、小さな図像、そしてフォレストインクが濃すぎる暗い部分に深みを加えるために、二次的な濃い緑色が使用されます。
中性
- Linen Mist
#e2f6d5— 表面の柔らかなハイライト、色付きのカード背景、ナビゲーションバーのホバー状態などに適した淡い緑色。控えめなコンテナデザイン要素に最適な、さりげないシグネチャーグリーン。 - Signal Blue
#0b4c72— 青色は、装飾的なディテールを引き立てるアクセントとして、また低周波を強調する役割を果たします。 - Alarm Red
#cb272f— 赤は装飾的なディテールを引き立てたり、珍しい色を際立たせたりする補助的なアクセントカラーとして機能します。ステータスカラーとしてではなく、あくまで補助的なアクセントカラーとして使用してください。 - Charcoal
#454745— 本文、本文テキスト、リッチUIなどには、白い背景に純粋な#000よりも柔らかく感じられる、やや温かみのある黒色を使用する。 - Obsidian
#0e0f0c— 見出しは高コントラストで、ナビゲーションとメインメニューには純粋な黒色の要素を使用します。ただし、ニュートラルなグレーではなく、わずかに緑がかった黒色にしてください。 - Pebble
#868685— 控えめな色合いの補助テキスト、プレースホルダーテキスト、アイコンの輪郭、および入力フィールドの境界線。中程度の灰色で、遠景へと続いています。
タイポグラフィ
12～105ピクセル・10ステップ
- Inter — 交換： Inter (native Google Fonts) · 概要 400,500,600,700 · 製品全体を通して、本文、ユーザーインターフェース、キャプション、小見出しにフォントを使用しています。中レベルの見出し（36～45ピクセル）には700ポイント、小見出しとキャプションには500～600ポイント、本文とキャプションには400ポイントのフォントを使用しています。Interフォントは控えめな印象を与え、Wise Sansフォントは力強い印象を与えます。
- Wise Sans — 交換： Inter Black (900) with -0.04em tracking · 概要 900 · 見出しはブランドの顔とも言えるものです。900ポイントの高密度フォント、89～105ピクセルのピッチ、そしてタイトな文字間隔によって、それぞれの見出しは大胆でインパクトのある広告へと変貌します。見出しは、本文、セクションの見出し、キャンペーンのハイライトなど、必要最小限の場面でのみ使用されます。
- monospace — 交換： Inter · 概要 400 · 等幅フォント - 抽出されたデータには含まれているが、AIによって記述されていない。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 8-12px |
| ボタンの半径 | 9999px |
| カード半径 | 10px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 64-80px |
| ページ幅 | 1200px |
AI がWiseスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Integrated Biosciences — 真夜中の生物発光実験室
- Huly — 真夜中の天文台で見るオーロラ ― 主役は紫から珊瑚色へと変化する垂直の光線で、その下の静かな各セクションは、より落ち着いたトーンで語られる同じ2色の物語を借用している。
- Dia Browser — 暗室のようなギャラリー空間が、新聞の社説と融合している。真っ暗な空間の中に、陽光が差し込む新聞の見開きページが浮かび上がり、各セクションにはセリフ体の見出しが一つずつ記されている。
- Mintlify — ガラスのテーブルの上に広がる雲の庭園。手描きの空とドキュメンタリー映像が共に額装されている――ページが修道院のような白へと消えていく前に、色彩とコンセプトがぶつかり合う唯一の場所だ。
- Gleap — 温かみのあるクリーム色を基調に、グラファイトのアクセントを効かせたワークスペース。マットブラックのインクのドットが、リネンの建築の上に浮かんでいるように見えるスタジオ。
- ClickUp — 白い大理石を背景にした、力強いダッシュボード。このページは生産性向上ツールの製品パンフレットなので、視覚的な表現は製品そのものから借用されている。例えば、密度の高いリスト、ステータスインジケーター、アバターのグループ、そしてまるで製品仕様書を展示しているかのような大胆なタイポグラフィなどだ。
- monday — パステルカラーのステッカーが貼られた白い工房
- Portal — トワイライトセリフエディトリアル - iOSスタイルでデザインされた、独立系雑誌のプレミアムページ
- Slack — 舞台はナス色で、白いスポットライトが照らされている。暗い部分は濃いプラム色で覆われ、オフホワイトのキャンバス地が、大きく前衛的なタイトルを際立たせている。
- Base44 — ライム色のマーカーで描いた、陽光あふれるノート
- Letters — 屋外診療所での午前中の診察――柔らかな青い天井の下、清潔な白い診察台には、青い手術器具が散乱している。
- Duolingo — 太いマーキングラインのある緑の遊び場