aistyles
日本のWebサイトから抽出した DESIGN.md を、AIエージェント向けに配布するギャラリー
例： ··
LUUP
日本の電動マイクロモビリティシェアリングブランド。「街じゅうを『駅前化』するインフラをつくる」をミッションに掲げ、ティール系グリーンと白を軸にしたクリーン&テクノロジカルなビジュアルアイデンティティ。
MUJI(無印良品)
「ブランドなき品質」を掲げる日本のライフスタイルブランド。ベージュ×チャコール×白を基軸にした徹底的なミニマリズムと、Ma(間)の概念に基づく余白の設計が特徴。
サントリーホールディングス (SUNTORY)
「水と生きる」をコーポレートメッセージとする日本の総合飲料・食品企業。「ウォーターブルー」を基軸に、透明感・躍動感・信頼感を表現したグラデーション主体のビジュアルアイデンティティ。
Nintendo Japan (nintendo.com/jp)
日本のコンシューマー向けポータルサイト。ゲームアートワークを主役とした白基調のクリーンなデザインに、ブランドレッドをアクセントとして用いる。内部デザインシステムは nc3 と呼ばれ、BEM 命名規則を採用。
Snow Peak (スノーピーク)
「人生に、野遊びを。」- 自然との共生を哲学とする日本の高級アウトドアブランド。モノクロームのロゴ、クリムゾンのアクセント、アーシーなニュートラル、高品質な自然写真で構成されたミニマリスト・ネイチャー系デザインシステム。
ホットペッパーグルメ (HotPepper Gourmet)
リクルートが運営する日本最大級のグルメ・レストラン予約サービス。赤を基調としたブランドカラーと実用的な検索UIが特徴。検索アクションだけ青グラデーションを使い、ブランドレッドと意図的に色分けして行動促進している。
ONICHA
YouTuber HIKAKIN が手がけた麦茶ブランド。「日本の麦茶、変える」をスローガンに、シンプルでかわいいデザインと遊び心あふれる企画で、地味だった麦茶をイケてる飲み物へと刷新する。
Hulu Japan (hulu.jp)
HJ Holdings, Inc. が運営する日本のストリーミング・デジタルコミックサービス。ダーク背景に鮮やかな Hulu Green (#1CE783) アクセントを用いたコンテンツファースト設計で、2021年に DixonBaxi が再設計したグローバル Hulu ブランドシステム『The Vessel』を踏襲している。
Cookpad (クックパッド)
「毎日の料理を楽しみにする」をミッションとする日本最大のレシピ検索・共有プラットフォーム。温かみのあるブランドオレンジ (#ff9933) を CTA に集中させ、ユーザー生成コンテンツ (UGC) の料理写真を主役に据えたシンプルなカードベース UI。発見体験を最優先する構造設計。
日本郵便 (Japan Post)
「送る・受け取る・サービス・買う・銀行・保険」を束ねる日本の総合インフラ企業。スローガン『進化するぬくもり。』のとおり、赤 (行動・ブランド) と紺 (信頼・落ち着き) を 2 色軸とし、Noto Sans JP でやわらかさを加えた実用本位のデザイン体系。CSS 変数が :root に一元定義された堅牢な設計トークン。
Yamaha Japan (jp.yamaha.com)
Yamaha Music Japan Co., Ltd. (ヤマハ株式会社の国内販売子会社) が運営する日本語コーポレートサイト。楽器・音響機器・音楽教室・サポートを軸とし、コーポレートカラーであるヴァイオレット (#48217A) を基点に、白ベースの清潔なレイアウト上でパープルのロゴとアクセントが機能する構成。
FamilyMart (ファミリーマート)
日本国内に約16,000店以上を展開する大手コンビニエンスストアチェーン。タグライン『あなたと、コンビに、ファミリーマート』のとおり、地域に寄り添う家族的な親しみやすさと日常の利便性をブランドの核に置く。ロゴの緑 (#00ab4e) + 青 (#0095da) 2色ブロックを軸にしつつ、UI 上では緑をアクセント・青を CTA に役割分離した実用本位のリテール向けデザイン。
Panasonic Holdings (パナソニック ホールディングス)
1918 年創業、2022 年に持株会社体制へ移行した日本を代表する電機・テクノロジーコングロマリットのコーポレートサイト。深い『パナソニックブルー (#0041C0)』と Noto Sans JP を基軸に、過剰な装飾を排した余白・タイポグラフィ・青の一点集中で『信頼性・有能さ・未来志向』を表現する。デザインフィロソフィー『Future Craft』のもと、日本的美学と前向きな技術革新を融合させたミニマルなコーポレート ID。
LION Corporation (ライオン株式会社)
「今日を愛する。LION」をタグラインに掲げる日本の生活用品・衛生用品メーカーのコーポレートサイト。ライオングリーン (#007a46) を唯一のブランドカラーとして全面展開し、清潔感・信頼感を表現。最大の視覚的特徴は『右下のみ角丸 (border-radius: 0 0 Xpx 0)』というブランドシグネチャー形状で、ボタン・コンテンツブロック・セクションラッパーに繰り返し登場する。
LINE
LY Corporation が運営するメッセージングプラットフォーム。タグライン『Life on LINE』のとおり、コミュニケーションを日常の一部に溶け込ませることを目指す。ビジュアルアイデンティティは専用書体『LINESeed』と『Forest Green (#06C755)』を核に構築されており、清潔感と国際対応 (日本語・英語・韓国語・中国語・タイ語・インドネシア語) を両立させたデジタルファーストの設計。2021 年に LINE Design System (LDSM) が発表され、30 色のコアカラーパレットに統一された。
SK-II Japan
Procter & Gamble 傘下のプレミアムスキンケアブランド。コアアイデンティティは『ピテラ™ (ガラクトミセス培養液) の発酵美容科学』で、その純粋さと高級感を反映した視覚言語を持つ。シグネチャーレッド (#EA0429 / Pantone 185 C) と白の二色構成のみで、ラグジュアリーと親しみやすさを両立。広い余白・細ウェイト日本語・角丸なし全大文字 CTA という極端なミニマリズムを徹底。Next.js + Contentful CMS 構成。
セブン-イレブン・ジャパン (Seven-Eleven Japan)
日本最大のコンビニチェーンのコーポレートサイト。グリーン (#008833) を主要インタラクション色として全 UI を統一し、赤 (#FF0000) はロゴマーク専用に限定。2022 年リニューアル (rn202304) で 1200px 中央レイアウト + モダン JP フォントスタックへ移行し、2025 年リニューアル (rn202601) ではトリカラーグラデーション見出し下線・グラスモーフィズムカード・グリーン系グラデーションヒーローが追加された。商品写真・カードグリッド・ピルボタン・グラスモーフィズムで構成するコンテンツファースト設計。
花王 (Kao Corporation)
花王株式会社のコーポレートサイト。ブランドフィロソフィー『きれいを こころに 未来に』を視覚的に体現し、緑/ティール系のブランドカラーを軸にしたクリーンなコーポレートデザイン。Adobe Experience Manager (AEM) を CMS として使用し、UD 対応の有償ヒラギノフォント (FP-ヒラギノUD角ゴ) を全ページに採用。ロゴカラー (#00ac8f) と UI 主役色 (#005856) を厳密に分離する役割設計が特徴。
カオナビ (Kaonavi)
「個の力を最大化する」をミッションとするタレントマネジメントシステム。4,500 社以上に導入されシェア No.1。ブランドカラーは Sun (黄) / Water (青) / Night (濃紺) の 3 軸を核とし、自然をモチーフにした詩的な命名規則 (Lyrical / Passion / Avocado / Purple / Sand) でカラーパレットが構成されている。日本語 UI には Noto Sans JP + YakuHanJP (約物半角化)、欧文・数値には Inter を使い分けるバイリンガル組版が前提。CSS Custom Properties で全トークンが :root に一元定義された堅牢な設計。
Cybozu (サイボウズ)
日本の中堅〜大企業向けグループウェア・SaaS 企業 (kintone / Garoon / Office) のコーポレートサイト。シアン系 2 色 (#139cb7 / #64bdd4) を主軸にしつつ、ブランドの最大の特徴である『3 色放射グラデーション (ピンク #e94f90 / ブルー #287bf4 / ピーチ #f5c39e)』をヘッダーアクセントバー・パンくず・ページヘッダーに一貫して使用。情報密度を高く保ちながら、アクセシビリティを重視したクリーンな構成。22,001 行の単一 CSS + BEM 亜種 + 12 種の名前空間プレフィックスというエンタープライズグレード設計。
freee (フリー)
「スモールビジネスを、世界の主役に。」をミッションとする統合型クラウドバックオフィス SaaS ブランド。会計・人事労務・請求書・開業支援など複数製品を統合するため、ビジュアルアイデンティティは『5 段階のディープブルー階層 (#2864f0 → #143278)』とウォームグレー (#f7f5f5 / #e1dcdc 等) の組み合わせで構成され、親しみやすさと専門的な信頼感を両立。クールグレーを意図的に避ける独自の色温度設計が特徴。ロゴは SVG 純パスのみ (テキスト要素なし)、フォントは Noto Sans JP を第一言語とするグローバル対応設計。
デジタル庁 (Digital Agency Japan)
「誰一人取り残されない、人に優しいデジタル化を」をミッションとする日本のデジタル庁公式デザインシステム (DADS) v2.13.0。WCAG 2.2 AA / JIS X 8341-3:2016 準拠の政府向け UI 言語で、Noto Sans JP 単一フォントスタックと 13 段階のブルースケール (#e8f1fe → #000060) を基盤に、装飾より情報階層を重視したクリーンでミニマルなレイアウトを定義。最小タッチターゲット 44px、テキストコントラスト 4.5:1 以上、色覚多様性 (C/P/D 型) 検証済みなど、アクセシビリティ制約を設計レベルで組み込んでいる。デザインデータは Figma Community で公開、実装は Tailwind CSS プラグイン + React / 素の HTML コンポーネントの両形態で提供。日英バイリンガル対応。
Vaundy / VAWS Members
日本のシンガーソングライター Vaundy の公式ファンクラブ「Vaundy ART Work Studio Members (VAWS)」のビジュアルアイデンティティ。#121212 × 白を基盤としたミニマル UI に、バッジ系のオレンジ (#ff6c00) と、ツアー/キャンペーンごとに入れ替わる飽和した単色アクセント (赤 / 橙 / 黄 / シアン / ゴールド) を重ねる劇場的デザインシステム。写真・映像・ツアービジュアルが色彩の主役を担い、サイト UI 自体は完全モノクロームに徹する『劇場の額縁』的役割。VAUNDY ワードマークは有機的な筆致のカスタムレタリング SVG で代替不可。CSS カスタムプロパティ (--変数) は意図的に使用せず、ボタン・カードは radius 0 のシャープコーナー、入力欄のみ radius 2px と例外的な差異を持つ。