DESIGN

このファイルは、VWorkの設計思想をまとめたものです。

設計の目的

VWorkは、経営者がCodexと会話しながら、業務改善を進められるようにするための作業基盤です。

そのため、デザインの中心は派手な画面ではなく、次の3つです。

• 経営者が理解できる
• Codexが作業できる
• 改善履歴が残る

大切にする体験

お客様に感じてもらいたいこと:

• どこに何があるか分かる
• 自分の業務課題が文書化されている
• Codexに次の改善を頼める
• 作ったコードがブラックボックスではない
• 小さく動かしながら改善できる

ドキュメント設計

VWorkでは、ドキュメントは単なる説明書ではありません。

Codexに仕事を依頼するためのコンテキストです。

• BUSINESS.md: 経営課題、目的、期待する効果
• RULES.md: Codex/Claudeが守る作業ルール、出力品質、データ変更前の確認
• SERVERS.md: PC、データ、サーバー、API、.env、公開先
• TASKS.md: 今やること、次にやること、やらないこと
• WORKLOG.md: 実行結果、エラー、次回依頼文

出力設計

最初の成果物は、大きなアプリでなくてよいです。

用途に応じて、小さく確認できる形式を選びます。

• Markdownレポート
• CSV
• HTMLページ
• 簡易Webツール
• SNS投稿案
• PDF化しやすい説明ページ
• HyperFramesで動画化しやすい1テーマ1ページ

UI設計

業務ツールでは、見た目の派手さよりも、繰り返し使いやすいことを優先します。

• 見るべき結果を上に出す
• 入力欄と実行ボタンを明確にする
• 説明しすぎず、迷わない画面にする
• スマホで崩れないようにする
• 文字が重ならないようにする
• 結果を保存、コピー、共有しやすくする

案件別のDESIGN.md

顧客環境ではMarkdownを増やしすぎないため、標準テンプレートには DESIGN.md を常設しません。

ただし、ホームページ、ランディングページ、サービス紹介ページ、UI、営業資料など、見た目の品質が成果物の価値に直結する案件では、実装前に案件用の DESIGN.md を作ります。

案件用 DESIGN.md には、対象ユーザー、ページの目的、伝えたい印象、参考デザイン、避けたい表現、ファーストビュー、CTA、色・フォント・余白・画像方針、スマホ表示方針を書きます。

コンテンツ設計

AIで文章やページを生成する場合、次を揃えます。

• タイトル
• 要約
• 元データ
• 生成した説明
• CTA
• OGP画像
• canonical URL
• simpletrack.php / Google Analytics
• SNS展開やサイトマップ登録の導線

動画化を意識した設計

VWorkの説明ページや業務紹介ページは、PDF化やHyperFrames動画化もしやすい構成にします。

• 1ページ1テーマ
• 見出しを明確にする
• 長すぎる段落を避ける
• 重要な文を先に出す
• OGP画像を設定する
• 専門用語を必要以上に増やさない

HTML生成時の品質確認

HTMLページを作るときは、依頼者が細かく指示しなくても、Codex側から次の確認を行います。

• SEO向けのtitle、description、canonical、OGP画像を設定する
• Google Analyticsとsimpletrack.phpなど、対象サイトの計測タグを既存ページに合わせて入れる
• PCとスマホでヘッダ、メニュー、本文、ボタン、画像が崩れないか確認する
• PDF化しやすいように、@media print の印刷用CSSを入れる
• 印刷時はナビ、フッター、CTAボタンなど不要なUIを非表示にし、A4で読みやすい余白と文字サイズにする
• HyperFramesで動画化しやすいように、1セクション1テーマ、見出し先行、短めの段落にする
• OGP画像、リンク先、計測タグ、公開URLをアップロード後に確認する
• 作業後に変更したファイル、公開したURL、未確認事項を報告する

これらは、HTMLを「画面で見える」だけでなく、検索、SNS共有、PDF配布、動画化、計測まで含めた成果物にするための共通チェックです。

引き渡し設計

VWorkの引き渡しでは、「完成しました」ではなく「ここから改善できます」と伝えることが大切です。

引き渡し時に残すもの:

• 今動くコマンド
• 入力データ
• 出力場所
• 既知の制限
• 次にCodexへ頼むこと
• 注意点

これにより、お客様が外部依存せずに改善を続けやすくなります。