IGNI7E Design Guidelines

ブランド・デザインガイドライン

v1.0.1 — 最終更新日: 2026.03.02
TOKENS
デザイントークン — Design Tokens

デザイントークンはデザインシステムの基礎となる値（カラー・タイポグラフィ・スペーシング・シャドウ・角丸）を一元管理するための変数です。CSS カスタムプロパティとして定義されており、全コンポーネントで参照されています。

COLORS
カラーパレット — Color Palette
Primary Colors
Copied!
Primary Blue
#1855AF
メインブランドカラー
Copied!
Secondary
#328FE5
CTAボタン
Copied!
Dark Navy
#303B4D
テキストカラー
Copied!
Sub Navy
#3E4E66
暗めセクション背景
Accent Colors
Copied!
Orange
#FCB01D
Copied!
Light Blue
#48C0F0
Copied!
Accent Blue
#4353FF
Neutral Colors
Primary Scale
Copied!
900
#1855AF
Copied!
800
#2F66B7
Copied!
700
#4677BF
Copied!
600
#5D88C7
Copied!
500
#7499CF
Copied!
400
#8CAAD7
Copied!
300
#A3BBDF
Copied!
200
#BACCE7
Copied!
100
#D1DDEF
Copied!
50
#E8EEF7
Dark Navy Scale
Copied!
900
#303B4D
Copied!
800
#454F5F
Copied!
700
#596271
Copied!
600
#6E7682
Copied!
500
#838994
Copied!
400
#989DA6
Copied!
300
#ACB1B8
Copied!
200
#C1C4CA
Copied!
100
#D6D8DB
Copied!
50
#EAEBED
White Scale
Copied!
100%
#FFFFFF
90%
W / 90
80%
W / 80
70%
W / 70
60%
W / 60
50%
W / 50
40%
W / 40
30%
W / 30
20%
W / 20
10%
W / 10
TYPE
タイポグラフィ — Typography
Heading Heading Scale — Gabarito
H1 / 64px / 700
Heading 1
H2 / 48px / 700
Heading 2
H3 / 40px / 600
Heading 3
H4 / 32px / 600
Heading 4
H5 / 24px / 500
Heading 5
H6 / 20px / 500
Heading 6
Gabarito English
Regular (400)
The quick brown fox jumps over the lazy dog
Medium (500)
The quick brown fox jumps over the lazy dog
SemiBold (600)
The quick brown fox jumps over the lazy dog
Bold (700)
The quick brown fox jumps over the lazy dog
ExtraBold (800)
The quick brown fox jumps over the lazy dog
Black (900)
The quick brown fox jumps over the lazy dog
Zen Kaku Gothic New Japanese
Light (300)
海外マーケティングのプロフェッショナル
Regular (400)
海外マーケティングのプロフェッショナル
Medium (500)
海外マーケティングのプロフェッショナル
Bold (700)
海外マーケティングのプロフェッショナル
Black (900)
海外マーケティングのプロフェッショナル
SPACE
スペーシング — Spacing
8px ベースグリッド
tiny
4px
content
アイコンの内側、タグの余白など極小要素に使用
xxsmall
8px
content
ボタン内、入力フィールドのラベルとの間隔
xsmall
16px
content
カード内パディング、リストアイテム間の標準余白
small
24px
content
カードパディング、グループ間の余白
medium
32px
content
セクション内コンポーネント間、ヘッダー余白
large
48px
content
フレックス、グリッド間の余白
xlarge
112px
content
セクションの上下パディング
コンポーネント プロパティ 値
カード padding 24px or 32px
ボタン Primary padding 16px or 20px
ボタン Secondary padding 14px 16px
セクション padding 112px 0
コンテナ max-width / padding 1140px / 0 32px
カードグリッド (2col) gap 32px
カードグリッド (3col) gap 24px
サイドバーリンク padding 10px 24px
EFFECTS
シャドウ & 角丸 — Shadows & Radius
Shadow
shadow-small
ツールチップ、ドロップダウン
shadow-md
カード（デフォルト）
shadow-lg
カード（ホバー時）
shadow-xl
モーダル、ポップアップ
Radius
tiny
2px
xsmall
4px
small
8px
Regular
16px
medium
24px
large
32px
full
100px
BUTTONS
ボタン — Buttons
PRIMARY
Default
Hover
Active
SECONDARY
Default
Hover
Active
OUTLINE
Default
Hover
Active
SEND
Default
Hover
Active
FORMS
フォーム要素 — Form Elements
Input
Default
必須項目です
Focus
入力してください
Error
入力項目に誤りがあります
Disabled
この項目は編集できません
テキストエリア & セレクト
Textarea
最大500文字まで入力できます
Select
サービスを選択
サービスを選択してください
チェックボックス & ラジオ
SEO対策
広告運用
コンテンツ制作
スタンダード
プレミアム
エンタープライズ
Toggle switch
On
Off
CARDS
カード — Cards
Value Card
バイリンガル体制
日本語と英語のネイティブスタッフが在籍。ターゲット市場に合わせた自然な表現でコンテンツを作成し、ブランドメッセージを正確に伝えます。
データドリブン戦略
GA4やAhrefsなどの分析ツールを活用し、定量的なデータに基づいたマーケティング戦略を立案・実行します。
Card + Icon
多言語SEO対策
英語・日本語・韓国語・フランス語に対応した検索エンジン最適化を行います。
広告運用代行
Google Ads、Meta Adsなど主要プラットフォームの広告運用を代行します。
コンテンツ制作
ネイティブライターによるブログ記事・ランディングページの制作を行います。
SNS運用
Instagram、LinkedIn、Xなどの海外向けSNSアカウントの運用を支援します。
メールマーケティング
ターゲットセグメントに最適化されたメールキャンペーンを設計・運用します。
マーケティング戦略
データに基づいた総合的なデジタルマーケティング戦略を立案します。
Case Study
インターナショナルスクール
SEO対策とコンテンツマーケティングにより、オーガニック流入を前年比180%増加させました。
詳しく見る →
ECブランド海外展開
多言語対応とリスティング広告の最適化で、海外売上を6ヶ月で2倍に伸ばしました。
詳しく見る →
B2B製造業
英語サイトのリニューアルとSEO施策により、海外からの問い合わせ数が3倍になりました。
詳しく見る →
Blog Card
画像プレースホルダー
海外SEOで成果を出すための5つのポイント
グローバル市場でオーガニック検索からの流入を増やすために押さえておくべき重要なポイントを解説します。
画像プレースホルダー
多言語サイト構築のベストプラクティス
hreflangタグの設定からURL構造の設計まで、多言語ウェブサイトを正しく構築するための実践ガイドです。
画像プレースホルダー
インバウンドマーケティング戦略の立て方
コンテンツを活用して見込み顧客を獲得するインバウンドマーケティングの基本戦略について紹介します。