すべて自主制作のデモです。店舗の注文・予約・決済は実行されません。業務データはこのブラウザ内に保存されます。

REPORT FLOW は手元のCSVを読み込める業務ツールです。ファイルはこの端末から出ません。

EXPLORE THE WORK

触れる制作例、11の入口。

デモで操作を。制作概要で、設計の理由を。

すべての制作例 / 11 PROJECTS

WebサイトSELF-INITIATED DEMO

KISSA — Cafe Site & Ordersカフェの公式サイトと、注文・席予約

見て終わりではなく、注文と予約まで進める店舗サイト。

触るとこう動く

  1. メニューを選ぶ
  2. 受取時間が出る
  3. 店の画面に届く
AI
使っていません
保存先
このブラウザ
外部送信
なし
Next.jsReactTypeScriptCSS
参考価格 / PRICE GUIDE
50,000円〜
納期目安 / DELIVERY
7〜14営業日
EC・商品ページSELF-INITIATED DEMO

FORME — Shop & Inventoryオンラインショップと在庫管理

色とサイズで写真・価格・在庫が動く、数の決まった店。

触るとこう動く

  1. 色とサイズを選ぶ
  2. 写真と在庫が変わる
  3. 注文で在庫が減る
AI
使っていません
保存先
このブラウザ
外部送信
なし
Next.jsReactTypeScriptCSS
参考価格 / PRICE GUIDE
内容により見積
納期目安 / DELIVERY
5〜10営業日
AI・業務自動化SELF-INITIATED DEMO

RELAY問い合わせ自動化ワークフロー

分類から下書き、人の確認まで。確認した内容はそのまま記録に残る。

触るとこう動く

  1. 相談文を入れる
  2. 分類と返信の下書き
  3. 人が確認して記録
AI
未接続(ルール処理)
保存先
このブラウザ
外部送信
なし
Next.jsReactTypeScriptCSS
参考価格 / PRICE GUIDE
要件により見積
納期目安 / DELIVERY
要件確定後に提示
AI・業務自動化SELF-INITIATED DEMO

CSV AUTOMATORCSV加工から、毎週の集計まで

一度決めた列の意味を覚えて、二回目からは質問しない集計ツール。

触るとこう動く

  1. CSVを読み込む
  2. 列の意味を覚える
  3. 次から自動で適用
AI
使っていません
保存先
このブラウザ
外部送信
なし
Next.jsReactTypeScriptCSS
参考価格 / PRICE GUIDE
要件により見積
納期目安 / DELIVERY
仕様確認後に提示
アプリ・管理画面SELF-INITIATED DEMO

DAYBOOK予約管理ダッシュボード

「埋まっています」で終わらせない。空いている時間まで出す予約。

触るとこう動く

  1. 希望を文章で送る
  2. 日時を読み取る
  3. 埋まっていたら空き候補
AI
未接続(ルール処理)
保存先
このブラウザ
外部送信
なし
Next.jsReactTypeScriptCSS
参考価格 / PRICE GUIDE
要件により見積
納期目安 / DELIVERY
要件確定後に提示
AI・業務自動化SELF-INITIATED DEMO

SMART INBOX — Inbox Workflow問い合わせ管理ツール

分類・優先度・担当・返信下書きを一画面に。受付から顧客台帳まで同じ記録。

触るとこう動く

  1. 分類で絞り込む
  2. 担当を決める
  3. 返信案を確認する
AI
未接続(ルール処理)
保存先
このブラウザ
外部送信
なし
Next.jsReactTypeScriptCSS
参考価格 / PRICE GUIDE
要件により見積
納期目安 / DELIVERY
仕様確認後に提示
アプリ・管理画面SELF-INITIATED DEMO

ADMIN DASHBOARD顧客管理ダッシュボード

顧客も取引状況も、届いた問い合わせも、ひとつの台帳に。

触るとこう動く

  1. 顧客を検索する
  2. 問い合わせを紐づける
  3. 操作履歴が残る
AI
使っていません
保存先
このブラウザ
外部送信
なし
Next.jsReactTypeScriptCSS
参考価格 / PRICE GUIDE
要件により見積
納期目安 / DELIVERY
仕様確認後に提示
修正・改善SELF-INITIATED DEMO

REFINEWebサイト改善 Before / After

情報はそのままに。伝わる順番を、確かめられる形で変える。

触るとこう動く

  1. Before/Afterを比べる
  2. 画面幅を切り替える
  3. 読み順を表示する
AI
使っていません
保存先
保存しない
外部送信
なし
Next.jsReactTypeScriptCSS
参考価格 / PRICE GUIDE
5,000円〜 / 1ページ
納期目安 / DELIVERY
1〜2営業日〜
LP制作SELF-INITIATED DEMO

FLOWSTATE — SaaS LPSaaSサービスLP

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

触るとこう動く

  1. プランを切り替える
  2. 週次まとめを書き出す
  3. 本物のファイルが開く
AI
使っていません
保存先
保存しない
外部送信
なし
Next.jsReactTypeScriptCSS
参考価格 / PRICE GUIDE
30,000円〜
納期目安 / DELIVERY
5〜10営業日
デザインSELF-INITIATED DEMO

STILL / STUDIOSNS / 広告クリエイティブ集

ひとつの内容を、いくつもの比率へ。書き換えれば全部が変わる。

触るとこう動く

  1. 文字を書き換える
  2. 3つの比率が同時に変わる
  3. SVGで書き出す
AI
使っていません
保存先
保存しない
外部送信
なし
Next.jsReactTypeScriptCSS
参考価格 / PRICE GUIDE
5,000円〜 / 1点
納期目安 / DELIVERY
1〜3営業日〜
テスト・納品SELF-INITIATED DEMO

SHIP / CHECKQA / 納品工程DEMO

つくって終わりにしない。手の確認と、機械の記録を分けて残す。

触るとこう動く

  1. チェックを付ける
  2. 全項目でマニフェスト
  3. 自動検査の記録を見る
AI
使っていません
保存先
保存しない
外部送信
なし
Next.jsReactTypeScriptCSS
参考価格 / PRICE GUIDE
要件により見積
納期目安 / DELIVERY
対象範囲確認後に提示

掲載作品はすべて自主制作です。企業名・商品・業務データは架空で、受託実績・導入実績ではありません。

設計から実装まで触って確かめられる制作例TETSU WORKSに相談する
WHAT GETS SMALLER

入力する仕事を、減らす。
確かめるだけの仕事を、増やす。

問い合わせ、日程調整、毎週の集計。いま使っている道具をつなぎ、繰り返す作業を先に進めます。すべてが一クリックで終わるわけではありません。初期設定と、人に残る判断がどこかは、下に書いています。

仕事が進むところを見る

いまの実行状態

  • 通常プログラム:稼働中。日時の判定、空き確認、集計、重複判定、数式注入の防止はすべて実際のコードが実行しています。
  • 実AI処理:未稼働(実AIの認証情報がこの環境に設定されていません。)。ルール処理で代替した結果をAIの成果として表示することはしません。
  • 外部への送信・カレンダー登録:公開サンプルでは実行しません。下書きと計画までを表示します。

自主制作の検証であり、顧客導入の実績ではありません。稼働件数・精度・売上改善の数値は掲載していません。

自分の場合で試算する

入力した条件での計算です。体験で計測した値ではなく、導入後の成果を保証するものでもありません。

試算(実績ではありません)

月の純削減時間 17時間

単純な短縮
20時間
− 例外対応
2時間
− 月次運用
1時間
初期設定(別枠)
4時間

初期設定の時間は、この条件なら約 0.2 か月分の 削減時間に相当します。

この計算の前提

月の純削減時間 = 件数 ×(従来の人手時間 − 導入後の確認時間) − 例外対応時間 − 月次運用時間

  • 件数:月 200 件
  • 従来の人手時間:1件 8 分
  • 導入後の確認時間:1件 2 分
  • 例外:10% が 1件 6 分
  • 月次運用:60 分
  • 初期設定:240 分(月次の計算には含めていません)

入力した条件による計算です。体験で計測した値ではありません。実際の効果は対象業務・例外の多さ・運用体制によって変わります。入力値はこのブラウザ内だけで計算し、送信していません。

SMALL, FIXED-SCOPE SERVICES

決まった範囲で、小さく頼む。

サイト全体の制作でなくても。何が届き、何を用意すればよいかを先に決めたメニューです。

メニューの一覧 制作会社・デザイナーの方へ

02 / TETSU WORKS CAPABILITIES

WHAT DO YOU NEED?

8つのサービスから、選ぶ。

案件に近いカテゴリを選ぶと、関連する作品・料金・納品物だけを表示。

コーディング・Next.js・レスポンシブ・既存サイト改善も対応。全12カテゴリから探す

03 / PRICE GUIDE

料金と納期の目安。

必要な範囲からご依頼いただけます。

トップページ

30,000円〜

3〜5営業日

下層ページ

5,000円〜 / 1ページ

1〜2営業日 / 1ページ

LP

30,000円〜

5〜10営業日

Webサイト一式

50,000円〜

7〜14営業日

EC / 商品ページ内容により見積 / 5〜10営業日

Webアプリ・AI業務自動化・API連携料金・納期ともに要件により見積

参考価格・期間です。ページ数、機能、デザイン、素材、API・外部サービス、修正範囲で変動します。仕様と素材の確定後に正式なお見積もり・納期を提示します。

渡したあと困らないように、動かし方はREADMEに残しておく。

04 / WHAT YOU GET

完成品として、渡す。

制作物だけでなく、使い始めるために必要なファイルと手順まで。
案件の範囲に合わせて、整理して納品します。

01 / PRODUCT

完成した制作物

スマートフォンでも使える画面。合意した機能を実装し、修正・動作確認まで対応。

02 / SOURCE & ASSETS

ソース・画像・設定

ソースコード、納品対象の画像データ、設定ファイルを整理。

03 / README

迷わない引き継ぎ

READMEに起動・設定・更新方法を記載。必要に応じて操作手順書も用意。

04 / QUALITY

QA済み成果物

表示・操作・リンクを確認し、確認項目と注意点を共有。

納品物・確認環境・修正範囲は、着手前に合意します。

05 / FROM BRIEF TO DELIVERY

依頼から納品まで、
見通しのある進め方。

全10工程を4つのフェーズで進めます。ご利用中のクラウドソーシングサービスのメッセージだけでも進行できます。

  1. PHASE 01

    相談・確認

    作るものと必要な素材を先に確定します。

    • 募集内容・仕様確認
    • 必要素材確認

    DELIVERABLE相談メモ・制作範囲

    ご確認いただく場面作るものと範囲を、着手前に合意します

  2. PHASE 02

    設計

    画面と構造を決めてから手を動かします。

    • 設計

    DELIVERABLE画面構成・仕様

  3. PHASE 03

    制作・検証

    実装しながら確認し、共有して直します。

    • 制作・実装
    • 内部QA
    • 確認用共有
    • 修正
    • 最終QA

    DELIVERABLE触れる画面・検証記録

    ご確認いただく場面確認用URLを共有。見て、直す指示をいただきます

  4. PHASE 04

    納品

    使い始められる形にまとめて渡します。

    • 成果物整理
    • 納品

    DELIVERABLEソース・引き継ぎ資料

    ご確認いただく場面納品物を確認いただいて完了です

制作範囲・確認日・納品形式を最初に共有。AIも活用して効率化し、動作確認・修正・成果物の整理まで責任を持って対応します。修正回数と対象範囲も着手前に合意します。

06 / BUILT WITH CARE

AIを活かして、
人が使える完成品へ。

AIで調査や実装を効率化しながら、要件整理・設計の判断・テスト・修正には責任を持って対応します。画面ができた段階で終わらず、実際の操作と納品後の使い方まで確認します。

  • Desktop / Mobileの表示・操作確認
  • フォーム、エラー表示、リンクの確認
  • キーボード操作・読みやすさ・納品ファイルの確認
QA・納品工程のデモを見る
07 / FAQ

BEFORE
YOU ASK.

依頼前の不安を、ひとつずつ。

Zoomなしでも、メッセージ中心で依頼できますか?

はい。要件整理から進捗共有・修正確認・納品まで、メッセージ中心で進められます。記録を残しながら、ご都合のよい時間に確認できます。オンライン会議は必須ではありません。

原稿がまだありません。何から用意すればよいですか?

目的・伝えたい内容・参考サイトがあれば、構成の整理から相談できます。原稿作成が必要な範囲と費用は、着手前に確認します。

写真や画像素材が揃っていなくても大丈夫ですか?

必要な素材を整理し、支給・撮影・利用許諾のある素材などから方法を提案します。有料素材やAI生成画像の使用は事前に相談し、権利と用途を確認します。

修正はどこまで対応できますか?

修正回数・対象範囲・確認日を着手前に合意します。途中でページや機能が増える場合は、追加費用と納期を先にお伝えします。

納品形式は? ソースコードも受け取れますか?

完成した制作物に加え、合意したソースコード・画像・設定・READMEを整理して納品します。ZIPやGitリポジトリなど、運用しやすい形式を相談できます。外部素材のライセンス条件も共有します。

スマートフォンにも対応していますか?

はい。PC・タブレット・スマートフォンで、読み順・画像・タップ領域を調整します。対象の画面幅やブラウザは事前に決め、表示と操作を確認します。

WordPress / Next.js / Shopifyは相談できますか?

はい。更新方法や既存環境を伺い、適した構成と対応範囲を提案します。テーマ・プラグイン・外部連携が必要な場合は、仕様と費用を確認してから見積もります。

短納期の案件も相談できますか?

希望公開日と必要なページ・機能をお知らせください。素材の準備状況と作業量を確認し、優先範囲を絞るなど、実現できる進め方を相談します。

AIを使う場合、品質はどう確認しますか?

生成結果をそのまま納品せず、要件との一致・実際の操作・表示・エラー処理を確認し、修正します。機密情報の扱いとAIの利用範囲も事前に確認します。

公開まで対応できますか?

はい。公開作業を含む範囲で合意した場合は、環境設定の案内から公開後の表示・リンク確認まで対応します。契約・決済・本人認証・ドメインの権限操作は、ご本人にお願いする場合があります。

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 お返事先

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

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

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

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