TSUDOWATETSU WORKSCLIENT SERVICES
相談する
MENU
FLOWSTATE流れにのって、一段上へ。イメージイラスト
← 制作例一覧

SELF-INITIATED DEMO / 自主制作

FLOWSTATE — SaaS LP — SaaSサービスLP

OVERVIEW

機能の紹介だけで終わらせず、実際に出るファイルまで見せるLP。

Next.jsReactTypeScriptCSS
Live Demoを操作する

架空サービスのLPです。掲載プランは想定価格で、申込や決済はできません。書き出しだけは本物で、押すと実際にファイルが作られます。外部サービスへは接続していません。

AI
使っていません計算と決まった規則だけで動きます。
保存先
保存しないプランの切り替えはページの中だけにあり、再読み込みで最初の状態に戻ります。
外部送信
なし入力した内容は、このブラウザの外へ送られません。
MAIN VISUAL / LIVE DEMO
FLOWSTATEの実装済みDesktop画面
実際に操作できる自主制作デモ
SCOPE
Design + Build + QA
EST. DELIVERY / 納期目安
5〜10営業日
PRICE GUIDE / 参考価格
30,000円〜

01THE PROBLEM

抽象的になりがちな機能を、使う場面と出てくる成果物で示すこと。

想定したクライアント
タスク管理のSaaSを始めるスタートアップ（架空）
想定依頼
タスク管理サービスの機能とプランの違いを、初めての人にも伝えたい。
起きていること
機能の一覧を並べても、初めての人には何が楽になるのか伝わらない。
困りごと
申し込み前に「実際に何が出てくるのか」を確かめる方法がない。
制作コンセプト
明快な情報設計と、軽やかなライムのアクセント。

想定のクライアントと依頼は、この自主制作のために設定した架空のものです。実在の企業・店舗からの受託ではありません。

02SIGNATURE JOURNEY

機能の説明で終わらせず、実際に出てくるファイルまで見せるLP。

使用前後、実際に書き出せる週次まとめ、導入手順、そして接続していないものを接続していないと書く対応範囲表を並べました。

  1. FLOWSTATEのLPのファーストビュー

    使う前と後を見る

    導入前の手作業と、導入後の流れを並べて示します。

  2. FLOWSTATEの週次まとめと書き出しボタン

    週次まとめを書き出す

    表と同じ内容の週次まとめを、Markdownのファイルとして実際に保存できます。

  3. FLOWSTATEの料金プランと対応範囲の表

    プランを比べる

    月額・年額を切り替えて想定価格を比べます。接続していないものは、対応範囲の表に「未接続」と書いています。

画像は、公開しているデモを実際に操作して撮影した画面です。同じ手順を自分で試す

VISUAL DIRECTION

機能を、使う場面で伝える。

FLOWSTATE / WORKSPACEUI CONCEPT
PROJECT OVERVIEW

Launch, together.

担当と次のアクションを、ひとつの場所に。

01 / PLAN

要件を整理

DESIGN

サイト構成を確認

01担当と進捗を共有
02 / BUILD

制作を進める

DEVELOPMENT

商品ページを実装

02担当と進捗を共有
03 / REVIEW

チームで確認

QUALITY

モバイル表示を確認

03担当と進捗を共有
ONE WORKSPACE. CLEAR NEXT STEPS.架空のプロジェクト表示例

03KEY INTERACTIONS

触って確かめられる操作

見た目だけのボタンは置いていません。押すと状態が変わり、関連する画面にも反映されます。

04BEHIND THE SYSTEM

画面の裏で、何が決まっているか

データの持ち方、状態の進み方、事故を防ぐための決まりごと。本番化するときに引き継ぐ設計です。

データ

  • 週次のタスク表と、同じ内容のMarkdown
  • プランと想定価格
  • 対応範囲と接続状況

状態の流れ

  1. 閲覧
  2. プランの比較
  3. 書き出し

安全のための決まりごと

  • 接続していないものは「未接続」と書く
  • 掲載価格は想定であると明記する

05RESPONSIVE & ACCESSIBILITY

ひとつの体験を、どの画面でも。

PCは情報の比較しやすさ、タブレットはカラム幅、モバイルは読む順番とタップ領域を調整。下の画像は、実際のデモを各画面幅で撮影したプレビューです。

SaaSサービスLP / Desktop Preview
Desktop Preview
SaaSサービスLP / Tablet Preview
Tablet Preview
SaaSサービスLP / Mobile Preview
Mobile Preview

06SCOPE & BOUNDARIES

できること・していないことを、先に書く

自主制作のデモと、実際の案件で納品するものの差を、項目ごとに分けています。

実装済み

このデモで実際に動くこと

  • LPの各セクション
  • 月額・年額の切り替え
  • 週次まとめのファイル書き出し
  • FAQ

デモ限定

見せ方のために簡略化していること

  • サービス・価格はすべて架空
  • 書き出す内容はサンプルの表

未接続

公開版では接続していないもの

  • 申し込み・決済
  • 外部サービス
  • アクセス解析

本番化に必要なこと

実案件で追加で設計・実装するもの

  • 実際のサービスの画面・料金・利用規約の反映
  • 申し込みフォームと計測（同意の取り方を含む）

07DELIVERY & QUOTE

納品物と、見積もりの目安

参考価格 30,000円〜／納期目安 5〜10営業日。範囲と素材が決まってから、正式なお見積もりと納期をお出しします。

もっと詳しく見る？使用技術・実装した機能・納品物・確認項目
TECH STACK / 使用技術

Next.js / React / TypeScript / CSS

対応範囲

設計・デザイン・実装・内部QA・ドキュメント整理

制作期間目安

5〜10営業日

参考価格

30,000円〜

実装した機能
  • 月額 / 年額プラン切り替え
  • 実際に開ける週次まとめの書き出し
  • 対応範囲・必要な権限・接続状況の一覧
  • キーボードで開閉できるFAQ
DELIVERABLES / 納品可能物
  • ソースコード・設定ファイル
  • 起動・更新手順のREADME
  • 画面仕様・検証項目一覧
QA内容・確認項目
  • PC / Tablet / Mobile表示
  • キーボード操作・コントラスト
  • リンク・入力・エラー状態

見積もりが変わるところ

  • セクションの数と、原稿・画像を用意するか
  • フォーム・計測・広告タグの設置
  • 公開後の更新のしやすさ（CMSなど）

参考価格・期間です。ページ数、機能、デザイン、素材、API・外部サービス、修正範囲で変動します。仕様と素材の確定後に正式なお見積もり・納期を提示します。 納品物は契約範囲に合わせて確定します。QA内容は確認対象を示すもので、実運用環境の適合保証ではありません。

RELATED SERVICES

この制作に近いサービス

LP制作Webサイト制作TypeScript / Next.jsレスポンシブ対応HTML / CSS / JavaScript

08CONTEXTUAL CONTACT

このデモのような制作を相談する

近いと感じた機能に印をつけてください。相談フォームに「FLOWSTATEを参考にした」ことと、選んだ機能が入った状態で開きます。送信前にすべて編集・削除できます。

参考にしたい機能（任意・複数可）

この時点では何も送信されません。フォームを開くだけです。

MESSAGE-ONLY OK

メッセージだけでも、進められます。

仕様確認・進捗共有・修正確認・納品まで、クラウドソーシング上のメッセージを中心に対応。Zoom / Google Meetは必須ではありません。

相談内容をまとめる
A GOOD PLACE TO START / TETSU WORKS

つくりたいものを、
聞かせてください。

まだ要件が曖昧でも大丈夫。
いま困っていることから、一緒に整理します。

相談内容を入力する ↓
まずは文章で。
打ち合わせの前に、相談できます。
  1. 01相談を送信
  2. 02内容を確認
  3. 03メールで返信
  4. 04合意して制作開始

金額・納期・制作範囲は、内容を確認してご相談。
送信した時点で契約や発注にはなりません。

案件サイトからのご相談は、そのサービス内メッセージでも進められます。

YOUR NEXT PROJECT必須はお名前・メール・ご相談内容
01 何を相談したいですか？ 未定でも大丈夫
02 いま、考えていること

困っていること、つくりたいものを自由に。10〜2,000文字。秘密情報・パスワードは入力しないでください。

予算・希望時期・参考資料を添える 任意

予算・時期はご希望の目安です。制作範囲を確認してお見積もりします。

03 お返事先

送信内容はお問い合わせ対応のために利用します。

受付状況を確認しています。

案件サイトのメッセージで相談したい方へ

入力内容をコピーして、ご利用中のサービスへ貼り付けられます。ここからは送信しません。