# 株式会社ギフティ（コーポレートサイト）｜コーポレートのWebデザイン参考

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

- URL: https://giftee.co.jp/
- 解説ページ: https://katapick.com/sites/giftee
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: eギフトサービス
- テイスト: 余白、ライト、写真主体、ミニマル、グリッド
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-30 / 最終確認: 2026-10-30
- 再現難易度: 2/5

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

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

## 配色
- #f8f5f4 Warm Beige（FVパネル・事業紹介・採用情報の背景）
- #ffffff White（外枠 / セクション背景 / ロゴタイル）
- #341103 Cocoa Brown（テキスト / 角丸の矢印ボタン / メニューボタン）
- #e76746 Coral（アクセント / カテゴリラベル・リンクの矢印）
- #6c6c6c Gray（日付などのサブテキスト）
- #232323 Charcoal（フッター背景）

## フォント
- 和文の見出し・本文・ナビ（Regular / Medium / DeBold）: ゴシックMB101（MFW-PGothicMB101Pr6N / Morisawa Fonts）（代替: Zen Kaku Gothic New）
- 日付・英字ラベル: Geist（代替: Geist（Google Fonts で無料））

## よくある質問
### ギフティのコーポレートサイトで使われているフォントは？
和文に Morisawa Fonts のゴシックMB101（Regular / Medium / DeBold）、日付や英字ラベルに Geist が使われています。無料で近づけるなら、Zen Kaku Gothic New と Google Fonts の Geist の組み合わせが扱いやすいです。

### ギフティのような「動きを停止」ボタンはどう作る？
自動再生している video 要素をまとめて取得し、ボタンのクリックで pause() と play() を切り替えます。aria-pressed で状態を伝え、prefers-reduced-motion: reduce のときは最初から停止しておくと親切です。

### ギフティのデザインはどんなサイトの参考になる？
個人向けと法人・自治体向けなど複数の事業を持つIT企業や、サービスの機能よりも理念や人の温度感を先に伝えたいコーポレートサイトの参考になります。

### ギフティのサイトの写真や映像は使っていい？
写真・映像・ロゴ・サービス名のロゴタイプ、人物が写った素材は、株式会社ギフティおよび各権利者に帰属します。参考にできるのは余白の取り方や構成などの考え方までで、素材そのものは流用できません。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「デザイン分析MD」は https://katapick.com/sites/giftee からダウンロードできます。
出典: Katapick（https://katapick.com）