Foodnoms
白い磁器に描かれた陽光あふれる果物市場 ― 温かみのあるオレンジ、みずみずしい緑、そしてふっくらとした丸みを帯びた形
Foodnomsは、栄養トラッキングのための軽快なマーケティング言語を採用しています。清潔感のある白いキャンバス、視覚的なアンカーとなる特大サイズのスマートフォンのモックアップ、そして栄養素と進捗状況を色で表現した遊び心のあるカラー語彙が特徴です。2色のヘッダー（キーワードには1色、それ以外には濃いグラファイト色）により、価値提案を素早く把握できます。このシステムは、データ量の多いアプリ画面を柔らかく見せるために、丸みを帯びた幾何学的特徴を持つシングルユーザーディスプレイ（Aquawax Pro）に依存しています。ほとんどの表面は平らで影がなく、均一な角丸がボタン、カード、ラベルに親しみやすく柔らかな印象を与え、健康トラッキングを臨床的なものよりも身近なものにしています。
このページは、縦方向のリズムがゆったりとした、中央揃えの1列全幅レイアウト（約1200px）を採用しています。ヘッダーは、左にロゴ、中央にナビゲーション、右にオレンジ色のアクションボタンが配置された細いトップバーです。ヒーローセクションは中央揃えのスタックで、2色のタイトル、1行のサブヘッダー、App Storeアイコン、そして幅全体に扇状に広がる3～5個のスマートフォンのモックアップが並んでいます。ヒーローセクションの下には、2x3グリッドで中央揃えの「おすすめ」プレスロゴセクションがあります。フィーチャーセクションは、2列のテキストとスマートフォンのモックアップが交互に配置され、オレンジと緑のアクセントセクション見出しが付いた繰り返しパターンになっています。フッターの直前の要素は、全幅のダウンロード可能なCTAカードです。セクション間のガターは広く（96px）、広々としたギャラリーのような印象を与えます。ナビゲーションはミニマルなトップバーで、サイドバーやメガメニューはありません。
アプリのビジュアル言語は、アプリの動作インターフェースを示す高品質なiPhoneフレームのモックアップが中心となっており、これらが主要な要素であり、ストックフォトは使用されていません。モックアップはほぼ完全に透明で表示され、わずかに重なり合いながら滑らかに回転し、白い背景に直接配置されています。モックアップ内のビジュアル要素は、栄養情報、製品写真、マクロリング、カラフルなカテゴリタグなど、アプリ独自のインターフェースによって提供されています。写真コンテンツは、Scan Your Foodアプリのカメラ画面に表示されるユーザーが投稿した食品画像のみです。ライフスタイル写真、抽象的なイラスト、装飾的なグラフィックは一切ありません。ブランディングは、カスタムフォント、オレンジ/グリーン/ダークの配色、そしてアプリ独自のインターフェースによって完全に定義されています。
パレット
ブランド
- Ember Orange
#ff5406— オレンジ色は、装飾的なディテールや、時折現れる重要なポイントを強調するための補助的なアクセントカラーとして使用されます。行動喚起のメインカラーとして使用すべきではありません。
中性
- Graphite
#2f2f2f— メインテキスト、ダークカラーのボタン（App Storeアイコン）、およびアイコンのアウトライン。見出しと本文には、白以外の色が主に使われている。 - Verdant Green
#00b33f— 緑色は、装飾的なディテールを引き立てるアクセントとして、また低周波を強調する役割を果たします。 - Signal Red-Orange
#ff3400— アプリ画面のUI要素や関連するブランディングにおいて、二次的な暖色系のアクセントカラーとして使用されます。エンバーオレンジよりも一段階暖色系で、選択状態やアクティブなアプリの状態を強調します。 - Sky Blue
#00a9dd— アプリ内部のデータカテゴリ（炭水化物／タンパク質／その他の栄養素グループ）との心地よいコントラストを生み出します。スマートフォンのレイアウトにおける、暖色系のメインカラーパレットとのバランスも取れています。 - Mist Blue
#72a2c5— 落ち着いたクールなアクセント - アプリ内の追加データラベルやグラフの背景に使用されるスカイブルーの色を柔らかくします。 - Sunset Orange
#ff6d00— マーケティングページの見出しや強調表示されたテキストに、温かみのあるアクセントカラーを使用します。
タイポグラフィ
12～60ピクセル・7段階
- Aquawax Pro Medium — 交換： Inter · 概要 500 · Aquawax Pro Medium - 抽出されたデータには含まれているが、AIによって説明されていない。
- Aquawax Pro — 交換： Nunito Sans · 概要 700, 500, 600 · 見出しや本文など、あらゆる場面で使用される主要なブランドフォントです。このカスタムデザインフォントは、文字の高さが広く、丸みを帯びた幾何学的な形状で、読みやすいプロポーションが特徴です。太字（700）は、システムのタイポグラフィ上の基準となる見出しやセクションに使用されます。セミボールド（600）は、14～1.8mmの小見出しやボタンラベルに使用されます。中字（500）は、17～1.8mmの文字幅で本文に使用され、読みやすさを考慮して1.6～1.8mmの十分な行間が確保されています。
- System sans-serif — 交換： Inter · 概要 400, 700 · ユーザーインターフェース内の非常に小さなテキストやアイコンテキストには、代替オプションが使用されます。Aquawax Proはマイクロサイズでは使用されず、システムフォントが処理することでレンダリング負荷を軽減します。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 広々とした |
| 基本的なステップ | 20px |
| ボタンの半径 | 26px |
| カード半径 | 26px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 96px |
| ページ幅 | 1200px |
AI がFoodnomsスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Slite — 温かみのある羊皮紙のノートにテラコッタ色の持ち手。表面はすべてクリーム色の紙で、アクセントにはさりげないオレンジ色が添えられている。
- Adora — 曇りガラス越しに見える印象派美術館
- Bento — 陽光が差し込むリノリウムの上に置かれた弁当箱。ライムグリーン、ラベンダー、コバルトブルー、バーガンディの丸みを帯びたステッカーのようなカードが格子状に並べられ、それぞれが太い黒インクで縁取られている。その下には、大胆な幾何学模様のタイトルが添えられた、温かみのあるクリーム色のリネンが敷かれている。
- Payments — 鮮やかな柑橘系の色合いが、ロイヤルパープルの背景に映える。深みのあるエレクトリックパープルは夜空を連想させ、レモンイエローのアクセントは、清潔感のある白い表面に、まるで新鮮な柑橘類の皮のようにきらめく。
- Textla — サニー・レトロ・ボタニカル・アルマナック - クリームイエローのページに濃い緑色で印刷され、サボテンのイラストがシャープなオフセットシャドウで描かれている。
- AI for Business — 温かみのあるグレーの色調で統一された、ブルータリズム建築の編集ショールーム
- Superhuman — ゴールデンアワー編集委員会
- Visitors — 白いエンジニアリング図面
- Vercel — 白い紙に印刷された端末
- Jeton — 温かい大理石に書かれたフィンテックに関する社説
- Say Briefly — クリーム色の紙に描かれたクリエイティブエージェンシーのスケッチブック
- ClickUp — 白い大理石を背景にした、力強いダッシュボード。このページは生産性向上ツールの製品パンフレットなので、視覚的な表現は製品そのものから借用されている。例えば、密度の高いリスト、ステータスインジケーター、アバターのグループ、そしてまるで製品仕様書を展示しているかのような大胆なタイポグラフィなどだ。