シフトラ｜AIシフト作成

1. 01

   ヘッダー

   左にロゴ、中央に特徴・機能・導入効果・料金などのナビ、右にログインと「無料ではじめる」の角丸ボタン。SPでは白い角丸バーに CTA とメニューだけを残す。

2. 02

   ヒーロー

   角丸のブルーのグラデーション面に「ことばを理解するAIでシフトづくりをかんたんに」とCTA。右に働く人の写真3枚と「ボクがシフトをつくるよ！」と話すトラのキャラクター、下に99.6%削減・月額250円/人・API部門賞の3指標とTVCMのサムネイル。

3. 03

   悩み

   「シフトの調整に何時間も悩まされていませんか？」の見出しと、吹き出し付きの丸い写真3枚で現場の悩みを示す。

4. 04

   解決

   中央に縦書きの「シフトラが悩みを解決」とキャラクター、左右に6つの解決策カードを振り分ける。

5. 05

   仕組み

   弧を描くブルーの面に「“ことば”だけでシフトが作れる」。入力・AI解析・自動生成・出力の4ステップをイラストと番号付きリストで並べる。

6. 06

   機能

   縦書きの「シフトラの機能」を右端に置き、AI自動シフト生成・SOSシフト・Excel連携など9つの機能を白い角丸カードのグリッドで見せる。

7. 07

   数字で見る導入効果

   キャラクターが指し示す99.6%削減を手書き風の線で囲み、円グラフ風の「00時間10分」と並べる。続けて89%・45%・17%の効果を横に並べる。

8. 08

   料金プラン

   ブルーの背景に白いカードでスタンダードプランを示し、含まれる機能のアイコン一覧と「30日間無料で試す」のCTA、大規模導入向けの問い合わせ帯を置く。

9. 09

   よくある質問・お申し込み

   右に「よくある質問」の見出し、左にQアイコン付きのアコーディオンを並べ、最後にお申し込みへつなぐ。

• よくある質問は「＋」付きのアコーディオン。details / summary 要素か、高さのトランジションで再現可能
• セクションの境目を大きな円弧で切り替える。clip-path: ellipse() や SVG の波形で再現可能
• 数字を囲む手書き風の線はSVGのパスと思われる。stroke-dashoffset をスクロールで0にすると、描かれていく演出も作れる
• ヘッダーは固定表示で、「無料ではじめる」を常に見せる

スクロールのコマ撮り200–7000ms

検出された技術:Google Fonts

• 01見出しは「AI」「かんたん」など要の語を大きく、助詞を一回り小さく組んでジャンプ率をつける
• 02キャラクターに吹き出しでしゃべらせ、ヒーロー・解決・機能・数字の各所に案内役として再登場させる
• 03背景はブルーのグラデーションと淡いグレーを交互に置き、白い角丸カードで情報を束ねる
• 04導入効果は数字を最大サイズにし、単位や説明は小さく添える

1---
2title: "シフトラ｜AIシフト作成 再現用デザイン仕様書"
3source: https://aishift.com/
4katapick: https://katapick.com/sites/shiftra
5category: サービス / SaaS
6region: 国内 (JP)
7tags: [ブルー基調, イラスト, 角丸, 大胆なタイポ, 縦書き, ロングページ]
8launched: 2025-11
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 20
13generator: Katapick
14---
15 
16# シフトラ｜AIシフト作成 — 再現用デザイン仕様書
17 
18> トラのキャラが、AIのとっつきにくさを消してる。AIシフト作成サービス「シフトラ」のサービスサイトは、明るいブルーと吹き出しで話すトラを案内役に、99.6%削減などの数字を畳みかけて“むずかしそう”を先回りで潰している。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22