成果発表の準備
ストーリー
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.mdPart 3: デモの準備
タスク 3-1: デモ環境の確認
発表前に、以下を確認してください。
| # | 確認項目 | OK? |
|---|---|---|
| 1 | ブラウザが起動する | [ ] |
| 2 | index.html を開ける | [ ] |
| 3 | ナビゲーションが動作する | [ ] |
| 4 | 外部リンクが開く | [ ] |
| 5 | GitHubリポジトリにアクセスできる | [ ] |
| 6 | インターネット接続がある(外部リンク用) | [ ] |
タスク 3-2: デモのリハーサル
- ページを開く
- ナビゲーションをクリック
- ツールカードのホバーを見せる
- 外部リンクをクリック
- GitHubリポジトリを表示
上記の流れを一度練習してみてください。
Part 4: 想定質問への準備
よくある質問と回答例
| 質問 | 回答例 |
|---|---|
| 作業時間は計画通りだった? | はい、5日間の計画に沿って進められました |
| 難しかったところは? | CSS のレイアウト調整に時間がかかりました |
| 改善したい点は? | レスポンシブ対応を追加したいです |
| 使ったスキルは? | ターミナル、Git、SQL、HTML/CSS、日報作成です |
| 一人でどこまでできた? | 質問は2回しましたが、基本的に自分で進められました |
Part 5: 最終チェック
提出物の最終確認
| # | 提出物 | 場所 | 状態 |
|---|---|---|---|
| 1 | 社内ツール紹介ページ | index.html, style.css | [ ] |
| 2 | GitHubリポジトリ | https://github.com/... | [ ] |
| 3 | README | README.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分