夏休みに作れるWebアプリ10選【初心者〜中級者】

夏休みにプログラミングで何か作りたいけど、「何を作ればいいかわからない」と悩んでいませんか？

Webアプリなら、ブラウザだけで動くので特別なソフトは不要です。作った作品はインターネットで公開して、友達に見せることもできます。

この記事では、初心者から上級者まで、レベル別に10個のWebアプリアイデアを紹介します。それぞれ「難易度」「使う技術」「制作目安時間」を書いているので、自分に合ったものを選んでください。

プログラミング学習の全体的な進め方は「プログラミングの始め方」で解説しています。

初心者向け（HTML/CSSだけで作れる）3選

HTMLとCSSだけで作れるWebアプリです。JavaScriptの知識がなくても挑戦できます。

1. 自己紹介ポートフォリオページ

難易度: ★☆☆☆☆ ／ 使う技術: HTML, CSS ／ 制作目安時間: 3〜5時間

自分のプロフィール、趣味、好きなもの、将来の夢などをまとめたページです。写真やイラストを入れると見栄えが良くなります。

作るもの:

• ヘッダー（名前とキャッチフレーズ）
• 自己紹介セクション
• 趣味・好きなもの一覧
• 写真ギャラリー
• フッター（SNSリンクなど）

ステップアップのヒント: レスポンシブデザイン（スマホ対応）に挑戦すると、CSSの実力がつきます。

2. 推し紹介ページ

難易度: ★☆☆☆☆ ／ 使う技術: HTML, CSS ／ 制作目安時間: 3〜5時間

好きなアニメ、ゲーム、アイドル、スポーツ選手などの「推し」を紹介するページです。好きなものだからこそ、楽しく作れます。

作るもの:

• メインビジュアル（推しの画像）
• プロフィール情報
• おすすめ作品・曲リスト
• 名言集
• ファンへのメッセージ

ステップアップのヒント: CSSアニメーションで画像をふわっと表示させたり、ホバーエフェクトをつけたりすると、動きのあるページになります。

3. イベントカウントダウンページ

難易度: ★★☆☆☆ ／ 使う技術: HTML, CSS（＋少しのJavaScript） ／ 制作目安時間: 4〜6時間

文化祭、誕生日、テストまでの残り日数を表示するページです。CSSで見た目を整え、JavaScriptで日数計算をします。

作るもの:

• イベント名の表示
• 残り日数のカウントダウン表示
• 背景のデザイン（グラデーションや画像）
• 複数イベントの一覧

ステップアップのヒント: 秒単位でリアルタイムにカウントダウンする機能をつけると、JavaScriptの練習になります。

HTML/CSSで作れるプロジェクトをもっと知りたい人は「HTML/CSSで作れるプロジェクトアイデア」を参考にしてください。

中級者向け（JavaScript使用）4選

JavaScriptを使って、インタラクティブ（操作に反応する）なWebアプリを作ります。

4. ToDoリストアプリ

難易度: ★★★☆☆ ／ 使う技術: HTML, CSS, JavaScript ／ 制作目安時間: 6〜10時間

やることリストを追加・完了・削除できるアプリです。プログラミングの基本がすべて詰まっています。

作るもの:

• タスクの入力フォーム
• タスク一覧の表示
• 完了チェック機能
• 削除ボタン
• localStorageでデータ保存（ブラウザを閉じても消えない）

学べること: DOM操作（画面の要素を動的に変更する技術）、イベント処理、データの保存。

DOM操作の基本は「JavaScriptのDOM操作入門」で学べます。

5. 電卓アプリ

難易度: ★★★☆☆ ／ 使う技術: HTML, CSS, JavaScript ／ 制作目安時間: 5〜8時間

四則演算（足し算・引き算・掛け算・割り算）ができる電卓です。ボタンをクリックして計算します。

作るもの:

• 数字ボタン（0〜9）
• 演算子ボタン（+, -, ×, ÷）
• 表示画面
• クリアボタン
• 計算実行ボタン（=）

学べること: イベントリスナー、文字列と数値の変換、CSS Gridでのボタン配置。

ステップアップのヒント: 小数点計算、パーセント計算、計算履歴の表示機能を追加してみましょう。

6. タイピングゲーム

難易度: ★★★★☆ ／ 使う技術: HTML, CSS, JavaScript ／ 制作目安時間: 8〜12時間

画面に表示される文字を素早くタイプして、スコアを競うゲームです。

作るもの:

• お題の文字表示
• 入力フィールド
• 制限時間のカウントダウン
• 正解数・ミス数のカウント
• 結果画面（WPM表示）

学べること: キーボードイベントの処理、タイマー（setInterval）、文字列の比較。

ステップアップのヒント: 難易度選択（かんたん・ふつう・むずかしい）、ランキング機能、英語モードと日本語モードの切り替えを追加できます。

JavaScriptでゲームを作る方法は「夏休みJavaScriptゲーム」でも紹介しています。

7. クイズアプリ（複数ジャンル対応）

難易度: ★★★☆☆ ／ 使う技術: HTML, CSS, JavaScript ／ 制作目安時間: 8〜12時間

複数のジャンルから問題を選んで出題するクイズアプリです。

作るもの:

• ジャンル選択画面
• 問題表示と選択肢ボタン
• 正解・不正解のフィードバック
• スコア集計と結果画面
• もう一度遊ぶボタン

学べること: 配列とオブジェクトの操作、画面遷移の実装、条件分岐の応用。

ステップアップのヒント: 問題データをJSONファイルに分離する、ランダム出題機能、制限時間をつける。

上級者向け（API連携・データ保存）3選

外部のAPI（エーピーアイ：他のサービスからデータを取得する仕組み）を使ったり、データを保存したりする本格的なアプリです。

8. 天気表示アプリ

難易度: ★★★★☆ ／ 使う技術: HTML, CSS, JavaScript, Weather API ／ 制作目安時間: 10〜15時間

地名を入力すると、その場所の天気・気温・湿度を表示するアプリです。

作るもの:

• 地名の入力フォーム
• 現在の天気アイコン表示
• 気温・湿度・風速の表示
• 週間予報の表示

学べること: fetch（外部データの取得）、JSON（データ形式）の扱い、非同期処理。

使うAPI: OpenWeatherMap（無料プランあり）

ステップアップのヒント: 位置情報を使って自動で現在地の天気を表示する、背景を天気に合わせて変える。

9. メモ帳アプリ（マークダウン対応）

難易度: ★★★★☆ ／ 使う技術: HTML, CSS, JavaScript, localStorage ／ 制作目安時間: 12〜18時間

メモを書いて保存できるアプリです。マークダウン記法でメモを書くと、プレビューが表示されます。

作るもの:

• メモの入力エリア
• マークダウンプレビュー表示
• メモの一覧（複数メモ管理）
• 保存・削除機能
• 検索機能

学べること: テキスト処理、正規表現の基本、localStorageでの永続化、リアルタイムプレビュー。

ステップアップのヒント: カテゴリ分け、エクスポート機能（テキストファイルとしてダウンロード）。

10. 家計簿アプリ

難易度: ★★★★★ ／ 使う技術: HTML, CSS, JavaScript, Chart.js, localStorage ／ 制作目安時間: 15〜20時間

収入と支出を記録して、グラフで可視化するアプリです。

作るもの:

• 収入・支出の入力フォーム
• カテゴリ選択（食費、交通費、娯楽費など）
• 月別の一覧表示
• 円グラフ・棒グラフでの可視化
• 合計・残高の自動計算

学べること: データ構造の設計、グラフライブラリの使い方、日付の処理、CRUD操作（作成・読取・更新・削除）。

ステップアップのヒント: 予算設定と超過アラート、CSV出力機能、月ごとの比較グラフ。

作品を完成させるコツ

アイデアを選んだら、次は完成させることが大切です。途中で挫折しないためのコツを紹介します。

コツ1: 小さく始める

最初から全機能を作ろうとしないでください。まず最小限の機能だけ作って動かしましょう。ToDoアプリなら「タスクを追加して表示する」だけで最初はOKです。動くものができてから、機能を追加していきます。

コツ2: 期限を決める

「夏休み中に完成させる」ではなく、「8月10日までに完成させる」のように具体的な期限を決めましょう。期限があると集中力が上がります。

コツ3: 完璧を目指さない

デザインが少しダサくても、バグが1つ残っていても、「動くもの」を完成させることが最優先です。完璧を目指すと永遠に完成しません。80%の完成度で公開して、あとから改良しましょう。

コツ4: 毎日少しずつ進める

1日30分〜1時間でも、毎日コードを書きましょう。週末にまとめて10時間やるより、毎日1時間を10日続けるほうが身につきます。

コツ5: 困ったら検索する

エラーが出たら、エラーメッセージをそのまま検索しましょう。同じ問題で困った人の解決策が見つかります。

夏休みの学習計画の立て方は「夏休みプログラミング学習ガイド」を参考にしてください。

作った作品を公開しよう

作品が完成したら、インターネットに公開しましょう。

GitHub Pagesで無料公開

GitHub Pages（ギットハブページズ）を使えば、HTMLファイルをアップロードするだけで無料でWebサイトとして公開できます。URLが発行されるので、友達や先生に共有できます。

公開のメリット:

• 友達に遊んでもらえる
• フィードバックがもらえる
• ポートフォリオとして使える
• 推薦入試でアピールできる

ポートフォリオに追加する

作った作品は、ポートフォリオ（作品集）に追加しましょう。作品ごとに「何を作ったか」「どんな技術を使ったか」「何を学んだか」を書いておくと、入試や就職活動で役立ちます。

公開前のチェック:

• 個人情報が含まれていないか
• 著作権に問題のある画像を使っていないか
• スマホでも正しく表示されるか
• リンク切れがないか

まとめ

まずは自分のレベルに合ったものを1つ選んで、夏休み中に完成させましょう。小さく始めて、動くものを作ることが大切です。