# シフトラ｜AIシフト作成｜サービス / SaaSのWebデザイン参考

> トラのキャラが、AIのとっつきにくさを消してる。AIシフト作成サービス「シフトラ」のサービスサイトは、明るいブルーと吹き出しで話すトラを案内役に、99.6%削減などの数字を畳みかけて“むずかしそう”を先回りで潰している。

- URL: https://aishift.com/
- 解説ページ: https://katapick.com/sites/shiftra
- カテゴリ: サービス / SaaS / 地域: 国内（JP）/ 業種: SaaS・シフト管理
- テイスト: ブルー基調、イラスト、角丸、大胆なタイポ、縦書き、ロングページ
- 公開・リニューアル: 2025-11 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 20 時間）

## 編集部のひとこと（Bruno）
機能一覧の前に、入力→AI解析→自動生成→出力の4ステップを挟んでるんだよね。仕組みを先に掴ませるから、9個並ぶ機能カードが“なるほど”で読める。これはうまい。

## デザインの見どころ
- 見出しは「AI」「かんたん」を大きく、助詞を小さく組む。ジャンプ率で、読むべき語だけを拾わせる
- 縦書きの「シフトラが悩みを解決」を中央に、左右へ解決策のカード。悩みと答えを1枚の図で見せきる
- 99.6%は手書き風の丸囲みと黄色い下線で強調。グラフより先に、数字そのものが目に飛び込む

## 配色
- #0381ef Shift Blue（CTA / アクセント / 見出しの強調）
- #35b5e6 Sky Cyan（ヒーロー・機能セクションのグラデーション背景）
- #151b3c Night Navy（テキスト）
- #edeef0 Cloud Gray（悩み・解決セクションの背景）
- #cde6fc Pale Sky（FAQ背景・淡色面）
- #e6d41a Marker Yellow（数字を囲む手書き風の線・下線）

## フォント
- 見出し・ナビ・UI: NewCezannePro-DB（代替: M PLUS 2）
- 本文: NewCezannePro-M（代替: M PLUS 2）
- 数字・強調: NewCezannePro-B（代替: M PLUS 2）

## よくある質問
### シフトラのサイトで使われているフォントは？
見出しから本文まで NewCezannePro（DB・M・B）のウェイト違いで組まれています。有料フォントのため、無料で近い雰囲気にするなら Google Fonts の M PLUS 2 をウェイト違いで使うのがおすすめです。

### シフトラのようなSaaSのLPはどんな構成？
悩み → 解決策 → 仕組み（入力から出力までの4ステップ）→ 機能一覧 → 数字で見る導入効果 → 料金 → よくある質問、という順番で、比較検討中の担当者が知りたい順に並べています。

### どんな業種の参考になる？
飲食・小売・医療など現場向けの業務SaaS、中小企業向けのAIツールなど、ITに詳しくない利用者にも“かんたんさ”を伝えたいサービスサイトの参考になります。

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