Web サイト大解剖

2024 年のゼミでの成果物を Github にアップロードしたものとなります。 「正しい Web サイトとはなにか」をテーマにした、初心者向け Web サイト学習プロジェクト デモ動画：　https://www.notion.so/Web-2a28d2990ed380138999f95d9d945e92?source=copy_link

プロジェクト概要

このプロジェクトは、初心者が Web サイトを作りたいと思ったときに、このサイトを見れば理解できて作れる！ というコンセプトで制作されました。

3 部構成で作られており、1 部では HTML、CSS、Javascript など Web サイトを作るうえでの基本的な内容の解説、2 部目はこのセクションで、Web サイトのよく使われている要素を分解して、それらが Web サイトにある意味や具体的な使い方、コード例を載せています。 3 部目は Web サイトがどうあるべきか、例えば反応が速い、安全である、見つけたい情報に誘導するなどのトピックについての記事が載せてあります。

Web サイトの各要素（ヘッダー、ハンバーガーメニュー、カルーセル、検索ボックスなど）を分解し、インタラクティブな UI ボタンとして配置。各ボタンをクリックすると、その要素の詳細な解説と CodePen での実例を確認できます。

コンセプト

• わかりやすさ重視: 初心者でも直感的に理解できる UI/UX 設計
• 実践的な学習: 実際のコード例を CodePen で確認しながら学べる
• 体系的な構成: Web サイトの構成要素を網羅的に解説

プロジェクト構成

Website-Breakdown/
├── src/
│   └── images/          # 画像ファイル（PNG、SVG）
│       ├── header.svg
│       ├── hamburger.svg
│       ├── slider.svg
│       └── ...
├── top.html             # トップページ
├── header.html          # ヘッダー解説ページ
├── hamburger.html       # ハンバーガーメニュー解説ページ
├── search.html          # 検索ボックス解説ページ
├── slider.html          # カルーセル解説ページ
├── article.html         # 記事コンテンツ解説ページ
├── faq.html             # FAQ解説ページ
├── query.html           # 問い合わせフォーム解説ページ
├── footer.html          # フッター解説ページ
├── style.css            # 共通スタイルシート
└── README.md            # このファイル

使い方

1. top.html をブラウザで開く
2. 学びたい Web サイト要素のボタンをクリック
3. 各要素の詳細ページで解説とコード例を確認
4. CodePen のリンクから実際の動作を確認

担当セクション: 「Web サイト大解剖」

このプロジェクトでは、以下の作業をすべて一人で担当しました：

• 企画立案: コンセプト設計とサイト構成の考案
• デザイン: UI/UX デザイン、ビジュアルデザイン
• コーディング: HTML/CSS/JavaScript による実装
• コンテンツ制作: 各要素の解説文の執筆
• サンプル作成: CodePen での実例作成

制作のこだわり

1. 初心者目線の解説: 専門用語を避け、わかりやすい言葉で説明
2. 実践的な内容: すぐに使える実用的なコード例を提供
3. 視覚的なわかりやすさ: 図解やアニメーションで理解を促進
4. 統一感のあるデザイン: 全ページで一貫したデザインシステム