plannotator

いま話している内容を、大きなビジュアルと短い文章で伝えるHTMLにまとめます。重要な詳細を残しつつ、初めて読む人にも分かる説明を目指します。

• 初めて触れるテーマを図で理解したいとき
• 文章中心の説明をビジュアルにしたいとき
• 重要な詳細を残して短く伝えたいとき

構成要素のつながりや処理の順序、状態の変化を、目的に合う図で表現します。必要に応じて操作を加え、単体で開けるHTMLファイルにまとめます。

• 構成要素と接続関係を説明したいとき
• 工程や引き継ぎを可視化したいとき
• 状態の変化と条件を整理したいとき

製品の文脈や既存デザインに合わせ、画面の見た目を確認するモックアップや操作を試すプロトタイプを、単体で開けるHTMLファイルにまとめます。

• 画面レイアウト案を確認したいとき
• 画面移動やフォーム操作を試したいとき
• パソコンとモバイルの表示比較

元の計画の範囲や約束事項を保ちながら、作業の順序・担当・依存関係を読み取りやすく整理し、確認や実行に使える単体のHTML文書にまとめます。

• 実装計画をレビュー用にまとめたいとき
• 作業の担当と依存関係を整理したいとき
• 決定事項・仮定・未解決事項の整理

HTMLの資料やページを作る際に、題材や読者に合う配色・書体・レイアウトを設計します。既存のデザイン方針を尊重し、内容に即した見た目へ整えます。

• HTML資料の配色や書体を決めたいとき
• 題材に合うランディングページへの改装
• ライト・ダーク両テーマの設計

レポートや解説、プレゼン、簡単なツールを、単体で開けるHTMLファイルにまとめます。用途や読者に合わせて見た目と操作を設計するスキルです。

• レポートを読みやすいHTMLにしたいとき
• プレゼンやランディングページの作成
• 計算ツールなどの小さな道具の作成

画面の情報配置やナビゲーション、操作の流れを検討する、簡素なHTMLワイヤーフレームを作ります。複数の構成案をパソコンとスマホの幅で比較できます。

• 画面配置やナビゲーションの案を比較
• クリックで短い操作の流れを確認
• パソコンとスマホで情報の順序を確認