Galactus
Design System

01

Colors

Brand Colors
Primary
#113275
Secondary
#06B6D4
Accent
#DC2626
Background & Base Colors
BG Gray
#f7f7f7
BG Blue
#EFF6FF
Text
#333333
Text Sub
#666666
Border
#d1d1d1
Border Strong
#bdbdbd
White
#ffffff
02

Typography

Font Families
Noto Sans JP
日本語テキストのメインフォント
あいうえお ABCDE 1234
weights: 400, 500, 700, 900
Outfit
English / Numbers
ABCDEFGH 123456
weights: 400, 500, 700, 900
Type Scale
64px / 4rem
→ md: 56px
Hero
48px / 3rem
→ md: 40px
Hero Title
36px / 2.25rem
→ md: 30px
Page Title
32px / 2rem
→ md: 28px
Section Title
24px / 1.5rem
→ md: 20px
大見出し H2 レベル
20px / 1.25rem
→ md: 18px
中見出し H3 レベル
18px / 1.125rem
→ md: 16px
小見出し H4・リード文
16px / 1rem
→ md: 14px
本文デフォルト。行間は2.0、字間は0.05em。読みやすさを最優先したサイズ設定。
14px / 0.875rem
→ md: 12px
本文小サイズ・キャプション・補足テキスト用
12px / 0.75rem
→ md: 12px
注記・ラベル・タグ・メタ情報などの極小テキスト
Font Weight
400
Normal — あいうえお ABCDE 12345
500
Medium — あいうえお ABCDE 12345
700
Bold — あいうえお ABCDE 12345
900
Black — あいうえお ABCDE 12345
Line Height
1
行間なし。見出しや数値など
改行が含まれる場合の密着表示
1.4
タイト。見出し・リード文など
コンパクトに収めたい要素に使用
1.6
標準。ボディテキストの基本行間
読みやすさと密度のバランス
1.8
ゆったり。本文・説明文など
長文の読みやすさを重視する場合
2
ルーズ。日本語長文や
縦方向に余白を与えたい要素
03

Spacing

0px
4px
8px
12px
16px
24px
32px
40px
48px
64px
80px
96px
128px
156px
192px
256px
384px
512px
03b

Border Radius

4px
ボタン・入力欄・バッジ
8px
カード・パネル
12px
大きめカード・チケット/価格パネル
50%
アバター・円形アイコン
03c

Shadow

primary 色を帯びた多層シャドウ。フラットな黒 rgba(0,0,0,…) は直書きせず、必ずこの3トークンから選ぶ。要素の浮き上がり量で段階を選ぶ。

Small
カード静止状態・ヘッダー（控えめ）
Medium
hover・浮遊パネル（中程度の浮き上がり）
Large
チケット・価格・主役カード（強い浮き上がり）
04

Buttons

メインボタン
お問い合わせはこちら
背景: プライマリ → hover: セカンダリ
アウトラインボタン
詳しく見る
背景: 透明 / 枠線: プライマリ → hover: 白背景
ダーク背景用ボタン
無料相談を申し込む
背景: 白 / 文字: プライマリ → hover: プライマリ背景 / 白文字
サイズ修飾子
小さめボタン
padding 12px, max-width 200px
全幅ボタン
width: 100%
種類バリアント（アイコン）
お問い合わせ
メールアイコン付き
外部リンク
外部リンクアイコン付き
PDFダウンロード
PDFアイコン付き
ファイルDL
ダウンロードアイコン付き
06

Cards

汎用のカードコンポーネントは存在しない。カード表現は用途ごとに実装される。代表例を示す。

ブログ記事カード
作品アーカイブカード
image

株式会社サンプル様 コーポレートサイト制作実績

Webサイト制作

image

ネットショップ構築実績サンプル

ECサイト構築

image

採用サイトリニューアル実績サンプル

採用サイト制作

アイコンボックス型カード（トップページ課題選択・LP一覧）
Web制作会社の選び方が
わからない 費用は抑えたいが、
予算に合った提案がほしい 古いホームページを
リニューアルしたい Webサイトで
採用活動を強化したい
06c

Boxes

汎用ボックス

サービスタイトル

サービスの簡単な説明テキストがここに入ります。

リンクボックス

リンク付きで枠線・右下の三角マークが表示される
アイコン付きボックス

特徴タイトル

アイコンと説明テキストを横並びにするコンポーネント。

リンク付きバージョン

リンクの場合、右下に三角マーク・hoverでアイコンがセカンダリカラーに変化。

アイコン＋タイトルのみ（リンクなし）

アイコン＋タイトルのみ（リンク）
メッセージボックス

ご不明な点はお気軽にお問い合わせください。
専門スタッフが丁寧にご対応いたします。

注記ボックス

※ 表示価格はすべて税込です。詳細は別途お見積もりをご確認ください。

※ キャンペーン内容は予告なく変更になる場合があります。

06d

Lists

通常リスト
  • WordPressサイト制作
  • ECサイト・ネットショップ
  • 採用・コーポレートサイト
  • LP・ランディングページ
チェックリスト
  • 高品質なデザイン
  • SEO対策に強い設計
  • スマートフォン完全対応
  • 運用しやすいCMS
フロー図
01
ヒアリング
ご要望・課題をお伺いします
expand_more
02
企画・設計
サイト構成・デザイン提案
expand_more
03
制作・開発
デザイン〜コーディング
06e

Tables & Definition Lists

汎用テーブル
プラン名月額料金サポート備考
スタータープラン¥5,000メール小規模向け
スタンダードプラン¥15,000メール・電話中規模向け
プレミアムプラン¥30,00024時間対応大規模向け
定義リストテーブル
会社名
合同会社ギャラクタス
設立
2015年4月
所在地
大阪府大阪市
事業内容
Webサイト制作・運用
沿革リスト
2015年
会社設立
2018年
東京オフィス開設
2022年
サービスリニューアル
2024年
新サービス開始
06f

Interactive Components

アコーディオン
サービス内容について
ご回答内容がここに表示されます。
FAQボックス（別スタイル）
見積もりは無料ですか？

お見積もりは無料で承っております。まずはお問い合わせフォームよりご相談ください。

HTML5 details要素
サービスの詳細を確認する
詳細コンテンツがここに入ります。ネイティブの details 要素を使用。開いた時は背景がブルー、文字がプライマリカラー。
タブコンポーネント

誠実さと丁寧さを大切に、一つひとつの案件に真摯に向き合っています。

見た目の美しさだけでなく、成果につながる設計・実装を重視しています。

お客様の「らしさ」を引き出す、二人三脚のパートナーでありたいと考えています。

開閉カラム
bookmark カラムタイトル
料金プランの詳細やよくある質問の回答など、クリックで開閉させたいコンテンツに使用します。
07

Forms

実サイトは Contact Form 7 と連携している。汎用の入力フォームコンポーネントは存在せず、定義リスト形式のレイアウトで実装する。

08

Section Headings

トップページ セクションタイトル
SERVICES
サービス一覧
ページセクション H2（左ボーダー）
サービスのご紹介
英日2段 センター見出し（H2）
Services
サービス一覧
コンテンツ内 H3（ボトムボーダー）
business サービスの特徴
01 番号付きバリアント
コンテンツ内 H4（左ボーダー）
料金プランについて
02 番号付きバリアント
タイトルテキスト 英語サブテキスト
コンテンツ内 H5（ダッシュ）
ダッシュプレフィックス見出し
コンテンツ内 H6（装飾なし）
補足見出しテキスト
09

Backgrounds & Patterns

Dot Gray
背景: BG Gray + ドット柄
Grid
16px × 16px grid、デフォルト #efefef
10

Icons

Material Symbols Outlined を使用。

chevron_right
btn矢印
language
Web
store
EC
person_search
採用
support_agent
サポート
campaign
LP
business
会社
category
カテゴリ
sell
タグ
link
リンク
mail
メール
phone
電話
menu
ハンバーガー
close
閉じる
arrow_forward
進む
check_circle
チェック
star
スター
info
情報
11

Breakpoints & Grid

🖥️
xxl
≥ 1400px
Container: 1320px
💻
xl
1200–1399px
Container: 1140px
🖥
lg
992–1199px
Container: 960px
📱
md ★
768–991px
Container: 720px
📱
sm ★
576–767px
Container: 540px
📱
xs
≤ 575px
fluid
Grid Demo
4カラム分
4カラム分
4カラム分
6カラム分（md以上）
6カラム分（md以上）
12カラム分（全幅）