CorporateJapanPicked 2026.09.30

株式会社ギフティ（コーポレートサイト）

コーポレートのWebデザイン参考 — eギフトサービス

サイトを見るgiftee.co.jp

giftee.co.jp開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

FVに置く映像は、小さな縦長の1枚だけ。

eギフト事業を展開する株式会社ギフティのコーポレートサイトは、ベージュの余白に街の一瞬を映す縦長の映像を浮かべ、使命にある「体温」を事業説明より先に感じさせる。

LunaType & Whitespace

同じミッションの一文を、FVでは字間をがばっと空けて置き、Missionでは普通の本文として詰めて組んでる。同じ言葉に2回、別の声を与えてるわけ。見出しでも本文でも通る書体を選んだ時点で、勝ちかな。

1FVの映像は画面中央に小さく置く。広い余白が、街角の一瞬を少し離れて眺めるような距離をつくる
25つの事業は、ロゴの白いタイルと説明文を互い違いに組む。対象ラベルで、誰向けのサービスかを先に示す
3FV右上に「動きを停止」ボタン。自動再生の映像を止められる配慮を、いちばん目立つ場所に置いている

Color

株式会社ギフティ（コーポレートサイト）の配色

Typography

使用フォントと無料の代替

和文の見出し・本文・ナビ（Regular / Medium / DeBold）

Aa あア

使用: ゴシックMB101（MFW-PGothicMB101Pr6N / Morisawa Fonts）
代替: Zen Kaku Gothic New

日付・英字ラベル

Aa あア

使用: Geist
代替: Geist（Google Fonts で無料）

実測タイプスケール1440px幅 · 2026-09-30 計測

見出しKatapick 型14px · 2 · 400
本文The quick brown fox — 参考を型にする14px · 2 · 400
ボタンKatapick 型15px · 2 · 400
注釈The quick brown fox — 参考を型にする12px · 2 · 400

Structure

ページ構成（上から順）

01
ヒーロー
白い外枠の内側にベージュのパネル。左上にロゴ「giftee*」、右上に縦並びのナビ5項目と「動きを停止」ボタン。中央に縦長の映像、左に字間を大きく空けた「ギフトを起点に、体温が通った社会をつくる。」、右下に最新のプレスリリース1件。
02
Mission
英字「Mission」と小さな和文「私たちの使命」の見出し、ミッションの一文、こげ茶の角丸の矢印ボタン。右にベージュの額に収めた大きな写真を置く。
03
写真ギャラリー
ろうそくの立ったケーキ、菜の花、若葉、電車の車窓、波しぶき、バッグから顔を出す犬など6枚を、大小のタイルで組む。
04
Business
ベージュの地に、giftee（個人向け）、giftee for Business（法人・従業員向け）、eGift System（eギフト発行企業向け）、STUDIO GIFTEE（法人・自治体向け）、e街プラットフォーム（自治体向け）の5つを、白い正方形のロゴタイルと説明文の互い違いのグリッドで紹介。
05
Company
左上に若葉、右下に手を取り合う写真を配し、中央に見出しと会社情報の説明文、矢印ボタン。
06
News
左に見出しとボタン、右に日付・「プレスリリース」ラベル・タイトルの5件を罫線で区切って並べる。
07
Careers
ベージュの地に見出しとリード文、ボタン。打ち合わせ風景の写真と、アスタリスク形のネオンサインの写真を段違いに置く。
08
フッター
濃いグレーの地にロゴとサイトマップ、awahi magazine・ギフティ採用広報・giftee Tech Blog への外部リンク、右にポリシー類、下にSNSアイコンとコピーライト。

Interaction

アニメーション・インタラクション

FVと Mission の映像は自動再生の mp4（home_1 / home_3 / home_7 など）で、時間やスクロールで切り替わると思われる。「動きを停止」ボタンで一時停止できる
Astro のスクリプト名に MaskReveal / Photos があり、写真がマスクで開くように現れる演出と思われる（clip-path の inset をアニメーションさせる方法が近い）
swup によるページ遷移と思われ、swup-mask-warm という固定のマスク要素で暖色の面が画面を覆う切り替えをしていると思われる
スクロール後はナビが消え、右上にこげ茶の角丸ハンバーガーボタンだけが固定で残る。メニューは dialog 要素で開く
Lenis による慣性スクロールで、写真の間の余白をゆっくり見せている

スクロールのコマ撮りLenis · 200–8000ms

株式会社ギフティ（コーポレートサイト）をスクロールしたときのフレーム1 — 01

株式会社ギフティ（コーポレートサイト）をスクロールしたときのフレーム2 — 02

株式会社ギフティ（コーポレートサイト）をスクロールしたときのフレーム3 — 03

株式会社ギフティ（コーポレートサイト）をスクロールしたときのフレーム4 — 04

株式会社ギフティ（コーポレートサイト）をスクロールしたときのフレーム5 — 05

株式会社ギフティ（コーポレートサイト）をスクロールしたときのフレーム6 — 06

検出された技術:LenisAstroGoogle Fonts

Reproduce

再現するときのポイント

01背景はベージュ（#f8f5f4）と白の2色だけで面を切り替え、写真以外に色を持ち込まない
02FVのミッションは letter-spacing を大きく（0.3em 前後）とり、一語ずつ置くように読ませる
03見出しは「大きな英字＋小さな和文」の組を全セクションで繰り返す
04ボタンはこげ茶の小さな角丸四角に白い矢印だけ。文字を持たない部品で統一する
05事業紹介はロゴタイルと説明文を市松に置き、同じ形のカードの羅列に見せない

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

giftee.katapick.md

1---
2title: "株式会社ギフティ（コーポレートサイト） デザイン分析書"
3source: https://giftee.co.jp/
4katapick: https://katapick.com/sites/giftee
5category: コーポレート
6region: 国内 (JP)
7tags: [余白, ライト, 写真主体, ミニマル, グリッド]
8launched: 2026-07
9verified: 2026-10-30
10measured: 2026-09-30 (Chromium 1440x900)
11difficulty: 2/5
12generator: Katapick
13---
14 
15# 株式会社ギフティ（コーポレートサイト） — デザイン分析書
16 
17> FVに置く映像は、小さな縦長の1枚だけ。eギフト事業を展開する株式会社ギフティのコーポレートサイトは、ベージュの余白に街の一瞬を映す縦長の映像を浮かべ、使命にある「体温」を事業説明より先に感じさせる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-30 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22

Pro の追加ファイル

動くHTMLひな形トークンと構成を反映済みPRO tokens.jsonFigma / Tokens StudioPRO Tailwind @themev4 にそのまま貼れるPRO

株式会社ギフティ（コーポレートサイト）についてよくある質問

ギフティのコーポレートサイトで使われているフォントは？

和文に Morisawa Fonts のゴシックMB101（Regular / Medium / DeBold）、日付や英字ラベルに Geist が使われています。無料で近づけるなら、Zen Kaku Gothic New と Google Fonts の Geist の組み合わせが扱いやすいです。