# Clico AI Studio｜サービス / SaaSのWebデザイン参考

> AIのサイトなのに、黒じゃなくて淡いブルーグレー。リサーチと画像・動画生成を束ねるClico AI Studioのプロダクトサイトは、セリフ体の見出しと実物の入力欄で、AIを“触れる道具”として穏やかに見せている。

- URL: https://tryclico.com/
- 解説ページ: https://katapick.com/sites/clico-ai-studio
- カテゴリ: サービス / SaaS / 地域: 海外（US）/ 業種: 生成AI・リサーチツール
- テイスト: ライト、セリフ体、角丸、余白、スクロール演出、固定ナビ
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 28 時間）

## 編集部のひとこと（Luna）
SaaSの見出しにGeorgia。しかも字間をぎゅっと詰めてる。システムフォントでここまで締まるの、ちょっと悔しい。ナビだけDM Monoの小さな大文字にして道具っぽさを残すのも……いいね！！

## デザインの見どころ
- FV中央に、例文入りの入力欄とStartボタン。説明を読む前に、使うときの手つきを想像させる
- 4つの機能を、右の1枚の操作画面と「04 / 04」の進捗で見せる。画面は変えず、使い方だけが進む
- 「watermark」に打ち消し線を引くだけで新機能を告げる。コピーの一手間が、比較表より早く伝わる

## 配色
- #e8ecf1 Cloud Gray（背景）
- #dce2ea Fog Blue（サブ背景 / グラデーション）
- #ffffff White（カード・入力欄）
- #2b3440 Slate Ink（見出し）
- #687587 Steel Gray（本文）
- #9db7dc Soft Periwinkle（Downloadボタン / 矢印ボタン）

## フォント
- 見出し: Georgia（代替: Gelasio）
- 本文・ボタン: DM Sans（代替: DM Sans）
- ナビ・ラベル: DM Mono（代替: DM Mono）

## よくある質問
### Clico AI Studioのサイトで使われているフォントは？
見出しに Georgia、本文に DM Sans、ナビやラベルに DM Mono が使われています。Georgia の代わりには Google Fonts の Gelasio が近く、DM Sans と DM Mono は Google Fonts でそのまま使えます。

### Clico AI Studioのような、スクロールで機能を切り替えて見せる構成はどう作る？
右側の操作画面を position: sticky で固定し、左側の説明ブロックを縦に並べます。各ブロックが画面に入ったタイミングを IntersectionObserver で検知し、右の画面の状態と進捗表示を切り替えます。

### どんな業種の参考になる？
生成AIツール、リサーチ・執筆支援サービス、クリエイティブ系のSaaSなど、ダーク基調ではなく明るく穏やかなトーンでプロダクトを見せたいサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/clico-ai-studio からダウンロードできます。
出典: Katapick（https://katapick.com）