Service / SaaSOverseas / USPicked 2026.09.26

Clico AI Studio

サービス / SaaSのWebデザイン参考 — 生成AI・リサーチツール

出典: tryclico.com

Editor's note — 編集部の視点

AIのサイトなのに、黒じゃなくて淡いブルーグレー。

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

LunaType & Whitespace

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

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

Color

Clico AI Studioの配色

Typography

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

見出し

Aa あア

使用: Georgia
代替: Gelasio

本文・ボタン

Aa あア

使用: DM Sans
代替: DM Sans

ナビ・ラベル

Aa あア

使用: DM Mono
代替: DM Mono

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

特大見出しKatapick 型46px · 0.98 · 400
見出しKatapick 型54px · 0.94 · 400
小見出しKatapick 型16.6px · 1.25 · 400
本文The quick brown fox — 参考を型にする16px · 1.68 · 400
ボタンKatapick 型10px · 1 · 650
注釈The quick brown fox — 参考を型にする7px · — · 650

Structure

ページ構成（上から順）

01
告知バー
最上部に、新しい画像モデルの提供開始を知らせる1行とリンク。
02
ヘッダー
角丸のカプセル型ナビを中央に浮かべ、PRODUCTS / CREATE / GALLERY / RESOURCES / PRICING、Sign in、Downloadを並べる。
03
ヒーロー
中央揃えのセリフ体見出し「AI Studio for Deep Research, Images & Video」とリード文。生成物や操作画面の角丸タイルを周辺をぼかして敷き、手前にプロンプト入力欄・モデル選択・Startボタン、下に機能アイコンを並べる。
04
生成ギャラリー
「watermark」に打ち消し線を引いた見出しと説明文を左右に置き、生成した画像を大小のタイルで2段に並べて Explore gallery へつなぐ。
05
機能ストーリー
Research something properly / Upload a photo / Send the whole conversation / Pick up where you left off の4つの見出しと説明を左に、右に操作画面のモックと「04 / 04」の進捗表示を置く。
06
拡張機能の流れ
「Found something cool? Turn it into yours.」の見出しと、参照を取り込む → プロンプトを作る → 生成するの3ステップカード、Add to Chrome と Create in Clico Web のボタン。
07
料金
「Unlock more powerful models.」の見出しと、プランを切り替えて見るカード型の料金表。
08
FAQ・CTA
「Questions about Clico Web.」の質問リストと、「Start creating with Clico.」の締めのCTA。
09
フッター
製品、画像・動画ツール、執筆ツール、リソース、比較ページへのリンクを列で並べる。

Interaction

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

機能ストーリーは右の操作画面を position: sticky で据え置き、スクロール位置に合わせて左の見出しと画面の状態を切り替える構成と思われる。IntersectionObserver で再現可能
カプセル型のヘッダーはスクロール中も画面上部に固定され、影で浮いて見える
ヒーロー背景のタイルは周辺ほど薄くぼかし、入力欄に視線を集める。mask-image の放射グラデーションで再現可能
FAQは開閉式のアコーディオン

スクロールのコマ撮り180–500ms

Reproduce

再現するときのポイント

01背景は #e8ecf1 前後のブルーグレーにし、カードと入力欄だけを白と柔らかい影で浮かせる
02見出しは Georgia（代替は Gelasio）を大きく、letter-spacing をマイナスに詰めて組む
03ナビやラベルは DM Mono の小さな大文字で、本文の DM Sans と役割を分ける
04FVには例文を入れたプロンプト入力欄を置き、プロダクトの操作をそのまま見せる

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

clico-ai-studio.katapick.md

1---
2title: "Clico AI Studio 再現用デザイン仕様書"
3source: https://tryclico.com/
4katapick: https://katapick.com/sites/clico-ai-studio
5category: サービス / SaaS
6region: 海外 (US)
7tags: [ライト, セリフ体, 角丸, 余白, スクロール演出, 固定ナビ]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# Clico AI Studio — 再現用デザイン仕様書
17 
18> AIのサイトなのに、黒じゃなくて淡いブルーグレー。リサーチと画像・動画生成を束ねるClico AI Studioのプロダクトサイトは、セリフ体の見出しと実物の入力欄で、AIを“触れる道具”として穏やかに見せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22