EXERCISE 30分

成果発表の準備

ストーリー

Day 5の午後。全ての成果物が完成し、提出の準備が整った。

「先輩に報告するとき、どう説明しようかな」

月6で学んだコミュニケーションを思い出す。

「何を」「どう作ったか」「結果はどうだったか」を簡潔に伝えられるようにしよう。


ミッション概要

先輩への成果発表の準備として、説明用のメモを作成してください。

達成条件

  • 成果発表の流れを整理できた
  • 説明用メモを作成できた
  • デモの準備ができた
  • 質問への回答を想定できた

Part 1: 成果発表の流れ

発表の構成

#セクション時間目安内容
1挨拶・概要1分依頼内容と完了報告
2成果物の説明3分何を作ったか
3デモ3分実際に動かして見せる
4振り返り2分学んだこと、感想
5質疑応答適宜質問への回答

Part 2: 説明用メモの作成

タスク 2-1: 発表メモを作成

bash
cd ~/projects/internal-tools-page

cat > docs/presentation_notes.md << 'EOF'
# 成果発表メモ

## 1. 挨拶・概要(1分)

「お時間いただきありがとうございます。
依頼いただいた『社内ツール紹介ページ』が完成しましたので、報告させてください。」

### 依頼内容の確認
- 社内で使っているツールの紹介ページをHTMLで作成
- GitHubで公開
- 日報で進捗報告

→ **全て完了しました**

---

## 2. 成果物の説明(3分)

### 作成したもの

1. **社内ツール紹介ページ**(index.html, style.css)
   - 10件のツール情報を掲載
   - 5カテゴリに分類(開発、コミュニケーション、ドキュメント、デザイン、プロジェクト管理)
   - 各ツールに名前、説明、URL、評価を表示

2. **データベース**
   - SQLiteでデータを管理
   - SQLスクリプトで再現可能

3. **ドキュメント**
   - 分析レポート
   - URL疎通確認結果
   - セルフレビュー結果
   - README
   - 完了報告書
   - 日報5日分 + 週報

### 技術的なポイント
- セマンティックHTML(header, nav, main, section, footer)
- Flexboxでカードレイアウト
- ホバーエフェクトでインタラクティブに

---

## 3. デモ(3分)

### デモの流れ

1. **ページを開く**
   - ブラウザでindex.htmlを開く
   - 「これがトップページです」

2. **ナビゲーションを操作**
   - 「各カテゴリへのリンクがあります」
   - クリックして各セクションへジャンプ

3. **ツールカードを見せる**
   - 「各ツールの情報がカード形式で表示されています」
   - ホバーエフェクトを見せる

4. **外部リンクを確認**
   - 「URLをクリックすると公式サイトが開きます」
   - 新しいタブで開くことを確認

5. **GitHubを見せる**
   - GitHubリポジトリを開く
   - 「ソースコードとドキュメントは全てここで管理しています」

---

## 4. 振り返り(2分)

### 計画 vs 実績
- 5日間の計画通りに完了できた
- 環境構築 → データ取得 → ページ作成 → 品質確認 → 報告

### 学んだこと
1. **計画を立てる大切さ**
   - 最初に計画を立てたことで、毎日迷わず作業できた

2. **スキルの統合**
   - ターミナル、Git、SQL、HTML/CSS、ドキュメント
   - 別々に学んだスキルが、実際の仕事で一つにつながった

3. **セルフチェックの重要性**
   - 提出前に自分で確認することで、品質に自信が持てた

### 今後の課題
- HTML/CSSのデザイン力を高めたい
- Gitのブランチ運用を学びたい

---

## 5. 質疑応答

### 想定される質問と回答

**Q: 一番大変だったことは?**
A: 最初の計画を立てるところ。何をどの順番でやるか、依存関係を考えるのが難しかった。

**Q: 工夫したポイントは?**
A: カテゴリ別にセクションを分けて、ナビゲーションで素早く移動できるようにした。

**Q: もっと時間があったら何をしたい?**
A: レスポンシブ対応(スマホ表示)や、検索機能の追加。

**Q: 困ったときはどうした?**
A: まず自分で調べて、それでもわからなければ早めに質問するようにした。

---

## 発表前チェックリスト

- [ ] ブラウザでページが開ける状態になっている
- [ ] GitHubリポジトリのURLを控えている
- [ ] 発表メモを読み返した
- [ ] デモの流れをリハーサルした
EOF

cat docs/presentation_notes.md

Part 3: デモの準備

タスク 3-1: デモ環境の確認

発表前に、以下を確認してください。

#確認項目OK?
1ブラウザが起動する[ ]
2index.html を開ける[ ]
3ナビゲーションが動作する[ ]
4外部リンクが開く[ ]
5GitHubリポジトリにアクセスできる[ ]
6インターネット接続がある(外部リンク用)[ ]

タスク 3-2: デモのリハーサル

  1. ページを開く
  2. ナビゲーションをクリック
  3. ツールカードのホバーを見せる
  4. 外部リンクをクリック
  5. GitHubリポジトリを表示

上記の流れを一度練習してみてください。


Part 4: 想定質問への準備

よくある質問と回答例

質問回答例
作業時間は計画通りだった?はい、5日間の計画に沿って進められました
難しかったところは?CSS のレイアウト調整に時間がかかりました
改善したい点は?レスポンシブ対応を追加したいです
使ったスキルは?ターミナル、Git、SQL、HTML/CSS、日報作成です
一人でどこまでできた?質問は2回しましたが、基本的に自分で進められました

Part 5: 最終チェック

提出物の最終確認

#提出物場所状態
1社内ツール紹介ページindex.html, style.css[ ]
2GitHubリポジトリhttps://github.com/...[ ]
3READMEREADME.md[ ]
4完了報告書docs/report/completion_report.md[ ]
5日報(5日分)docs/daily/day1〜5.md[ ]
6週報docs/report/weekly.md[ ]
7セルフレビュー結果docs/review_result.md[ ]

コミット・プッシュ

bash
git add docs/presentation_notes.md
git commit -m "成果発表メモを追加"
git push

まとめ

ポイント内容
発表の構成挨拶 → 説明 → デモ → 振り返り → 質疑
デモの準備環境確認、リハーサル
質問対策想定質問への回答を準備
  • 発表メモを作成した
  • デモ環境を確認した
  • デモをリハーサルした
  • 想定質問への回答を準備した

次のステップへ

成果発表の準備お疲れさまでした。

次のセクションでは、Step 5のチェックポイント(クイズ)に挑戦します。 報告・ドキュメント作成の内容を振り返りましょう。


推定所要時間: 30分