INDEX
目次
前の章に戻る1章：AIと最終作戦会議！
この章の目安学習時間：50分
この章で到達できるゴール：
- 提供された要件定義書とデザインカンプの内容を正確に理解できる。
- AIを活用し、プロジェクトのゴールと実装タスクを具体的かつ明確に言語化できる。
【1-1】今回のミッション：プロジェクトの全貌を掴む
目安の学習時間：20分
今回の架空案件と制作物
ここからは、実際のクライアントワークを想定したプロジェクトに取り組みます。
今回の題材は、サステナブルなファッションブランド「LYNA（リーナ）」を紹介するLP（ランディングページ）の制作です。
このプロジェクトでは、以下の資料がクライアントから提供されたと仮定します。
これらの資料は、「AI×デザイン」教材で、AIと共に作成したものです。
設計から実装まで、一貫したAI活用ワークフローを体験していきましょう。
今回の題材は、サステナブルなファッションブランド「LYNA（リーナ）」を紹介するLP（ランディングページ）の制作です。
このプロジェクトでは、以下の資料がクライアントから提供されたと仮定します。
これらの資料は、「AI×デザイン」教材で、AIと共に作成したものです。
設計から実装まで、一貫したAI活用ワークフローを体験していきましょう。
-
要件定義書:
プロジェクトの目的、ターゲット、コンテンツの要件などがまとめられたドキュメント。 -
デザインカンプ:
Webサイトの完成見本図。
この章のゴールは、これらの資料をAIと共に読み解き、何をどのような順番で実装していくかという具体的な計画を立てることです。
AIで要件を分析！タスクを具体化する
それでは早速、AIを活用してプロジェクトの解像度を上げていきましょう。
このステップの目的は、提供された資料から「何を」「どの順番で」作るべきかというタスクリストを作成することです。
このステップの目的は、提供された資料から「何を」「どの順番で」作るべきかというタスクリストを作成することです。
入力例（デザインカンプと要件定義書を添付）
あなたはプロのWebディレクターです。 添付したデザインカンプと要件定義書の情報を基に、 このLPを実装するための具体的なタスクリストを作成してください。 タスクは実装する順番で、大きなセクションごとにまとめてください。
入力例
出力例
-----
## LYNA ブランドサイトLP実装 タスクリスト
このタスクリストは、実装のワークフローに基づき、
各担当者がスムーズに作業を進められるよう構成されています。
### 1\. プロジェクト準備・環境構築
コーディングに着手する前の準備段階です。プロジェクトの土台を固めます。
* **開発環境のセットアップ**
* Gitリポジトリを作成し、バージョン管理を開始します。
* Node.js、Sass、PostCSSなどの開発環境を構築します。
* コードの品質を保つため、リンター（ESLint, Stylelint）やフォーマッター（Prettier）を導入します。
* **アセットの準備と管理**
* デザインカンプから、ロゴ、キービジュアル、商品画像などの画像アセットを全て書き出します。
* 画像のWebP変換や圧縮を行い、Web表示用に最適化します。
* [cite\_start]要件定義書に基づき、指定のWebフォントファイル（WOFF2形式推奨）を準備します [cite: 49]。
### 2\. HTML / CSS コーディング（レスポンシブ対応込み）
[cite\_start]要件定義書 [cite: 38] [cite\_start]のセクション順に、
HTMLの構造化とCSSによるスタイリングを**レスポンシブ対応 [cite: 47] を含めて**進めます。
* **基本設定（共通パーツ）**
* HTMLの基本テンプレートを作成し、メタタグ（description, OGPなど）を設定します。
* CSSのリセット（Reset CSS / Normalize.css）を適用します。
* [cite\_start]Webフォントを読み込むための`@font-face`を設定します [cite: 49]。
* サイト全体で共通して使用する色、フォントサイズ、余白などをCSS変数として定義します。
* **セクション別コーディング**
1. [cite\_start]**ヒーローセクション**: キービジュアルとキャッチコピーを配置します [cite: 39]。
2. [cite\_start]**コンセプト紹介 (CONCEPT)**: テキストと画像のレイアウトを組みます [cite: 40]。
3. [cite\_start]**私たちの物語 (OUR STORY)**: 背景画像の上にテキストを重ねるデザインを実装します [cite: 41]。
4. [cite\_start]**オンラインストア (ONLINE STORE)**: 商品をグリッドレイアウトで配置し、
各商品へのリンクを設定します [cite: 42, 48]。
5. [cite\_start]**お客様の声 (VOICE)**: ユーザーレビューのセクションを実装します [cite: 43]。
6. [cite\_start]**メールマガジン (MAIL MAGAZINE)**: ニュースレター登録を促すセクションを作成します [cite: 44]。
7. [cite\_start]**フッター**: ブランドロゴ、SNSリンク、ナビゲーションを配置します [cite: 45]。
### 3\. 動的機能の実装
JavaScriptを用いて、LPに動きやインタラクションを追加し、ユーザー体験を向上させます。
* **ページ内アニメーション**
* [cite\_start]「上質さ」や「自然体」といったトーン＆マナー [cite: 33, 35] を演出するため、
スクロールに応じたフェードインなどのアニメーションを各セクションに実装します。
* **ナビゲーション機能**
* ページ内リンクのスムーススクロールを実装します。
* （必要に応じて）スマートフォン表示時にハンバーガーメニューを実装します。
* **フォーム機能**
* メールマガジン登録フォームの入力値バリデーション（エラーチェック）機能を実装します。
### 4\. テスト・最終調整
公開前に、あらゆる環境で品質を担保するためのテストと調整を行います。
* **表示・動作確認**
* **クロスブラウザテスト**: 主要ブラウザ（Chrome, Safari, Firefox, Edge）の最新版で表示崩れや
動作不良がないか確認します。
* [cite\_start]**デバイス実機テスト**: PC、タブレット、スマートフォンの主要な実機で、
レスポンシブ表示が正しく機能しているか検証します [cite: 47]。
* **品質チェックと最適化**
* [cite\_start]**リンクチェック**: ページ内の全てのリンクが正しく遷移するかをツール等で確認します [cite: 48]。
* **パフォーマンス最適化**: Google PageSpeed Insightsなどを用いてページの表示速度を計測し、
画像の遅延読み込み（Lazy Loading）やCSS/JSファイルのminify化（圧縮）などを行い、改善します。
* **アクセシビリティチェック**: 全ての画像に適切な`alt`テキストが設定されているか、見出しタグが
適切に使用されているかなど、基本的なアクセシビリティ項目を確認します。
### 5\. 公開準備と納品
最終的な公開作業とプロジェクトの完了です。
* **本番環境へのデプロイ**
* テストが完了したファイルを本番サーバーにアップロードします。
* **最終確認**
* 本番環境のURLで、全ての機能や表示が問題ないか最終確認を行います。
* **納品**
* クライアントに最終成果物を納品し、プロジェクト完了となります。出力例
AIの出力は鵜呑みにしない！正解は常に資料にある
- AIが生成するタスクリストは、あくまでプロジェクトの全体像を把握するための強力な「たたき台」です。
- しかし、これはAIによる解釈の一例であり、そのまま鵜呑みにしてはいけません。実際の作業では、必ず原本であるデザインカンプや要件定義書と常に照らし合わせ、タスクの過不足や内容の齟齬がないかを確認しながら進めることが非常に重要です。
- この「AIの提案を疑い、正解（資料）に立ち返る」というプロセスこそが、AIを使いこなす上で最も重要な思考法です。
- 例えば、今回のプロジェクトを例に上げると、クライアントによっては「本番環境へのデプロイ」などの対応は不要な場合があります。また、デザインと照らし合わせてみると、『フォーム機能』の実装は不要そうなことが分かるでしょう。
AIに上記の作業を行わせることで、プロジェクトの全体像と、これから何をすべきかが明確なリストとして可視化されます。
このタスクリストが、今後の実装作業のロードマップとなります。
このタスクリストが、今後の実装作業のロードマップとなります。
【1-2】1章 -章末課題- [実装計画のレビュー]
目安の学習時間：10分
問題
AIが生成したタスクリストを見て、実装を始める前に「不足している」または「もっと具体的にすべき」と感じるタスクはありますか？
もしあれば、それは何か、またその理由も考えてみましょう。
もしあれば、それは何か、またその理由も考えてみましょう。
解答解説
この課題は、AIの生成物を鵜呑みにせず、自身の知識と照らし合わせてクリティカルに思考する訓練です。
AIは全体像からタスクを洗い出すのは得意ですが、細かな仕様や開発者としての観点が抜け落ちることもあります。
最終的な計画に責任を持つのは制作者自身であるという意識を持つことが重要です。
以下に解答の一例を示します。
AIは全体像からタスクを洗い出すのは得意ですが、細かな仕様や開発者としての観点が抜け落ちることもあります。
最終的な計画に責任を持つのは制作者自身であるという意識を持つことが重要です。
以下に解答の一例を示します。
-
不足している、または具体性が低いと感じるタスクの例：
「レスポンシブ対応の計画」 -
理由：
AIは「ヘッダーを作成する」といったタスクはリストアップしてくれますが、PC版とスマホ版のデザインをどの画面幅（ブレークポイント）で切り替えるか、というレスポンシブ設計の具体的な計画までは言及しない場合があります。この計画を実装開始前に立てておかないと、終盤で大規模なCSSの修正が必要になるリスクがあります。
もし、他にどんな視点があるか分からなければ、「このタスクリストで実装を進める上で、プロのWeb開発者として他に考慮すべき点はありますか？」とAIに追加で質問してみるのも良い訓練になります。
これで「1章：AIと最終作戦会議！」の解説を終わります。
次の章に進みましょう。
次の章に進みましょう。