合同会社ソラコード

制作サンプル / シフトリー

シフトリー|SaaSのサービスサイト・LP

架空のシフト管理 SaaS を想定して制作したサンプルです。機能を並べる前に読み手が自分の業務を思い浮かべられるよう、「Excel と LINE の往復」という具体から入り、そこから機能へつなぐ順序で構成しました。

概要

種別
サービスサイト / SaaS
想定した業種
シフト管理 SaaS(多店舗の飲食・小売・介護向けを想定)
想定した対応範囲
構成設計 / ワイヤー / デザイン / 実装 / 計測設計
使用技術
Next.js(App Router), TypeScript, Tailwind CSS, Vercel
ページ構成
トップ(LP) / 機能 / 料金 / よくある質問 / 資料請求
想定した制作期間
4週間
Next.jsTailwind CSSフォーム連携計測タグ設計LP

画面

デスクトップ(全体)
シフトリーのページ全体
スマートフォン
シフトリーのスマートフォン表示

想定した課題

  • 機能一覧が先頭にあり、何を解決する製品なのかが伝わらない
  • 料金が問い合わせ後にしか分からず、比較検討の段階で候補から外れてしまう
  • 申し込みフォームの項目が多く、入力途中で離脱されやすい

コンセプト

機能より先に、自分の業務を思い浮かべてもらう

冒頭を「シフト作成の3時間を15分に」という結果の提示から始め、その根拠を課題 → 機能の順に並べる。管理画面のイメージを実寸に近い形で載せ、導入後の姿を文章より先に見せています。

社内で回覧されることを前提にする

BtoB の SaaS では、意思決定に複数の人が関わります。料金とセキュリティを独立して読めるセクションに置き、担当者が上司へそのまま転送できる形にしました。

掲載しているのはすべて、架空の企業・店舗を想定して制作したサンプルです。実際に受注・納品した案件ではありません。記載している課題・コンセプト・制作期間は、同じ規模のサイトをお受けする場合の想定です。

同じような構成のご相談

構成の考え方や費用感について、この画面をお見せしながらご説明します。まずはご連絡ください。

contact@soracodeworks.com