カリキュラム詳細

Claude Web Master 講座は、

  • 作り込まれた「スターターキット」を使って、
  • Claude Code （および、Claude）でWEBサイトを構築するだけでなく、
  • 実際に公開、運用するためのノウハウ

を学べる講座です。

さらに、独自ドメイン、独自ドメインメール、WordPressやQHM(haik)などからの移行方法などもカバーする総合的な講座です。

1. 全体像

  • 1. はじめに : クロードWebマスター講座の導入として、AI時代のWebサイト制作の全体像をお伝えします。従来の制作手法が大幅に刷新されたこと、新しい方法で得られる多くのメリット、そして今後の伸びしろが大きいことを理解していただきます。

  • 2. 新しい体験 : AI登場以前と以後のWebサイト制作方法の違いを解説します。制作代行会社やWordPress、Wixなどの従来の課題と、Visual Studio CodeとClaudeを使った新しい制作方法のメリット(学習コスト削減、面倒な作業からの解放、圧倒的な費用削減)を具体的に説明します。

  • 3. 具体的な費用感 : AIを使ったWebサイト制作にかかる実質的なコストを明確にします。使用するソフトウェアは完全無料、ホスティングも無料枠で十分対応可能。Claude Proの月額費用(約3,000円)やAPI従量課金制(ワンページ作成で約150〜200円)の選択肢、独自ドメインの活用方法などを説明します。

  • 4. 副次的なメリット : Webサイト制作能力だけでなく、今後の様々なことにつながる副次的なメリットを説明します。仕組みから学ぶことで応用力が身につき、Visual Studio CodeやGitHubなどの本質的な知識が蓄積されます。プロンプト技術やツール連携の理解を深めることで、自分専用の業務効率化アプリを作ることも可能になります。

  • 5. 学習ロードマップ : ワンページサイト作成の全体的な流れと6つのステップ(開発環境構築、スターターキットの準備、プロトタイピング思考でのワンページ作成、ポップアップモーダルでの情報拡張、Cloudflareでの公開と独自ドメイン設定、SEO対策と応用編)を説明します。ワンページに特化しながら、マルチページに匹敵する表現力を実現する方法を習得します。

  • 6. できること、できないこと : Claudeで作成できる静的Webサイト(HTML/CSS/JavaScript)の特徴と制約を明確にします。公開Webサイトの作成は得意ですが、会員サイトやECストアは専用サービス(Shopify、BASE、Thinkific等)を使うべき理由を説明します。オンライン上での直接更新ができないことは、実はエラーを防ぎしっかり確認してからリリースできるメリットであることを理解していただきます。

  • 7. サイトの移行について : 既存サイトから新規サイトへの移行方法を実践的に解説します。独自ドメインはDNSネームサーバー設定を変更するだけでそのまま使えます。既存コンテンツについては、AIに任せてゼロから作り直した方が効率的なケースが多いことを説明します。どうしても残したい場合は、AIにプログラムを書いてもらって変換する方法も紹介します。

  • 8. まとめ : 第一章全体の振り返りと、これから始まる学習の流れを整理します。AI技術は今も進化を続けており、今学ぶことでまだまだ伸びしろのある分野の進化の波に乗ることができます。オンラインコースとドキュメントサイトを行き来しながら、柔軟に実践を通じて学びを深めていくスタイルを推奨します。

2. 開発環境づくり

  • 1. はじめよう : AI(Claude)とプロの開発ツールを活用したWeb開発環境の構築について紹介します。エンジニアの仲間入りをし、GitHub、Netlify、Cloudflareなどの無料で使えるプロのツールを使えるようになります。HTMLやCSSの技能はClaudeが代わりにやってくれる新しい開発スタイルを学びます。

  • 2. ClaudeとClaude Code : Claudeの名前の由来(クロード・シャノン)と、Claude AI(Web上のAIエージェント)とClaude Code(ターミナルで動くAIエージェント)の違いを説明します。料金プランとして、Pro版(月額20ドル)とAPI版(従量課金)があり、Pro版の年間契約がおすすめです。

  • 3. Claude登録 : Claudeの有料版登録手順とAPI版の登録方法を解説します。API版では、console.anthropic.comにアクセスし、支払い設定とAPIキーの取得を行います。最低5ドルから入金可能で、自動チャージの設定確認も重要です。

  • 4. ブラウザの準備 : Chrome系ブラウザ(Google ChromeまたはMicrosoft Edge)の選択と、「ChatGPT Control Enter Send」拡張機能のインストールを推奨します。この拡張機能により、Enterキーで改行でき、長い文章を書きながらAIと対話しやすくなります。

  • 5. プロジェクトを作る : Claudeのプロジェクト機能を使って、学習支援用のカスタムAIを作成します。カスタム指示を追加し、使用OS、開発経験レベルなどを設定することで、毎回詳しい説明をしなくても的確な回答が得られるようになります。

  • 6. MacにClaude Code : MacでHomebrewを使ってClaude Codeをインストールする手順を詳しく解説します。Homebrew、curl、Node.js、Gitの順にインストールし、最後にClaude Codeをインストールします。ターミナル操作の基本も学びます。

  • 7. WindowsにClaude Code : WindowsへのClaude Codeインストール手順を説明します。PowerShellを使い、Git for Windows、Claude Code、Node.jsをインストールします。環境変数の設定方法とセキュリティポリシーの変更方法も説明します。

  • 8. Claude Codeログイン : Claude Codeにサブスクリプション型アカウントでログインする方法を解説します。スタイル設定(ライトモード推奨)、アカウント種類の選択、ブラウザでのログイン、推奨設定の適用の流れを説明します。

  • 9. 従量制でClaude Code : API(従量課金制)でClaude Codeを利用する方の設定方法を説明します。ログアウト方法、Anthropic Console Accountでのログイン、課金設定の確認を解説します。サブスクリプション型の方はスキップ可能です。

  • 10. Git、Github : GitHubの役割と初期設定の方法を学びます。ソースコードの保管・共有、変更履歴の管理、複数人での並列開発に役立ちます。ターミナルでの名前とメールアドレスの設定、GitHubアカウントの作成を行います。無料で使えます。

  • 11. Cloudflareを登録 : Cloudflareへの登録方法と3つの主要な用途を説明します。①ネームサーバーとして独自ドメインを管理(反映が速い)、②Cloudflare Pagesでウェブサイトを公開(無料枠が広い)、③自動返信フォームなどのバックエンド処理。ClaudeとCloudflareの連携設定も紹介します。

  • 12. Unsplash登録 : Unsplashのアカウント登録とAPIキーの取得方法を解説します。AIが自動的にUnsplashから画像を検索して配置する機能を使うため、開発者用アカウントでアプリケーションを作成し、アクセスキーを取得します。

  • 13. Visual Studio Code : Visual Studio Codeのインストールから日本語化、GitHubログインによる設定同期、必須拡張機能(VSCode Icons、Live Server、Prettier、HTML CSS Support、Git Graph、Markdown All in One、Claude Coder)のインストールまでを解説します。

3. Visual Studio Code に触れてみよう

  • 1. 複数ファイル前提 : Visual Studio Codeはプログラミングのためのソフトで、複数のファイルとフォルダーを同時に扱うことを前提に設計されています。Webサイトは複数のファイル(HTML、CSS、JavaScript、画像など)で構成されることを理解します。

  • 2. ワンサイト・ワンプロジェクト : ワンプロジェクト・ワンフォルダーの原則を説明します。一つのWebサイトに関連するデータをすべて一つのフォルダーに集約して管理します。基本的には一ドメインに対して一つのフォルダーを作成し、workspaceフォルダーの下で管理します。

  • 3. 本質を理解しよう : 本質的な学びの重要性を説明します。抽象度の高い本質を理解していれば、具体的な操作は応用が効きます。AI時代だからこそ本質的な知識が重要で、MacとWindowsの両方の操作を見ることで本質的な理解が深まります。

  • 4. Macでフォルダ開く : MacのFinderを設定し、ワークスペース用のフォルダを作成する手順を学びます。サイドバーのカスタマイズ、ホームフォルダ直下にworkspaceフォルダを作成、practice/helloフォルダの作成、Visual Studio Codeでフォルダを開く方法を解説します。

  • 5. Windowsでフォルダを開く : Windowsエクスプローラーでフォルダを作成しVSCodeで開く方法を説明します。Cドライブのユーザーフォルダ直下にworkspaceフォルダを作成し、practice/helloフォルダを作成します。Visual Studio Codeで開き、信頼の確認を行います。

  • 6. helloプロジェクト : Visual Studio Codeでフォルダーを開きプロジェクトを作成する基本操作を学びます。フォルダー=プロジェクトという考え方、フォルダーとファイルの作成、インターフェースの観察、ターミナルの見方など、実際に触って学びます。

  • 7. ターミナル操作1 : Visual Studio Codeでターミナルを開き、git cloneコマンドを使ってプロジェクトファイルをセットアップする方法を学びます。ショートカットキーの活用、パネルの切り替え、ターミナルコマンドの実行を習得します。

  • 8. ファイル操作 : Visual Studio Codeのプレビュー機能とファイル操作の基本を学びます。シングルクリックでプレビュー、ダブルクリックで確定して開く。保存管理、ミニマップ、サイドバーの開閉、ウィンドウサイズの調整などを習得します。

  • 9. プロジェクトの開き方 : Visual Studio Codeで複数プロジェクトを効率的に開いて管理する方法を学びます。新しいウィンドウで別のプロジェクトを開く、「最近使用した項目」で素早く再開する、ワークスペース保存機能について説明します。

4. ワンページセットアップ

  • 1. 学ぶもの : AIとClaudeを使ってローカル環境でワンページサイトを作る基礎を学びます。基礎編では公開方法は扱わず、ローカル環境での制作・起動・修正に集中します。HTMLやCSSを覚えるのではなく、概念と体験を積み重ねることが重要です。

  • 2. ワンページの活用方法 : ワンページの実践的な活用方法と疎結合による効率的なWebサイト設計を学びます。メインサイトはワンページで作り、詳細は別サービスやサブドメインに分けます。プロダクト別ワンページ、一時的なイベントページなど、様々な使い道があります。

  • 3. 80対20の法則 : AIによるWebサイト制作では、20%の時間で80%のクオリティに到達できます。残り20%を完璧にするには80%の時間がかかるため、上手に妥協することが重要です。顧客視点で判断し、段階的にリリースする考え方を学びます。

  • 4. 全体像 : ワンページ作成のための環境セットアップの全体の流れを理解します。①プロジェクトフォルダを作る、②Visual Studio Codeで開く、③スターターキットを導入、④Git初期化、⑤画像検索ツールのインストール、⑥動作確認の6ステップを説明します。

  • 5. フォルダ作成 : workspaceフォルダを作成し、練習用(practice)と本番用のフォルダ構成を理解します。Macではホームフォルダ、Windowsではユーザーフォルダに作成します。本番サイトはドメイン名でフォルダを管理します。

  • 6. フォルダを開く : Visual Studio Codeの起動方法とフォルダを開く基本操作を学びます。MacではSpotlight検索、Windowsではスタートメニューから起動します。エクスプローラーから「フォルダを開く」、フォルダの信頼設定を行います。

  • 7. スターターキット : git cloneコマンドでスターターキットをダウンロードする方法を学びます。GitHubで公開されているリポジトリから、開発履歴も含めて完全にコピーします。カレントディレクトリ(.)に展開する仕組みを理解します。

  • 8. git 初期化 : gitリポジトリの初期化手順を学びます。MacとWindowsで手順が異なるため注意が必要です。スターターキットの更新履歴を削除し、新しいリポジトリとして初期化します。変更をステージしてコミットします。

  • 9. npm install : npm installコマンドで開発ツール(パッケージ)をインストールする手順を学びます。Node.jsを使った様々なツールをダウンロードします。node_modulesフォルダが作成され、グレー表示されます(リポジトリに保存しない設定)。

  • 10. Unsplashテスト : Unsplashアクセスキーの設定方法とテストを行います。.env.localファイルを作成し、Unsplashから取得したアクセスキーを設定します。テストコマンドで画像検索が正しく動作するか確認します。

5. ワンページの基本

  • 1. 心構え : ワンページ作成を始める前の心構えや考え方について学びます。完璧主義ではなく、段階的に改善していくマインドセットを身につけます。

  • 2. 概要 : ワンページ作成の全体的な流れを理解します。Claude Codeの起動から、プロンプトの作成、ページ生成、確認、保存までの一連の作業フローを把握します。

  • 3. Claudeの起動・終了・設定 : Claude Codeの基本的な操作方法を学びます。ターミナルでの起動コマンド、終了方法、各種設定の変更方法を習得します。

  • 4. プロンプトの書き方 : AIに指示を出すプロンプトの作成方法を学びます。効果的なプロンプトの構成要素、ビジネス情報の伝え方、具体的な指示の出し方を習得します。

  • 5. ページ作成 : 実際にワンページを作成する手順を実践します。Claudeとの対話を通じて、HTMLファイルを生成し、デザインを調整していく流れを体験します。

  • 6. Webページの確認 : 作成したページをブラウザで確認する方法を学びます。Live Serverの使い方、レスポンシブデザインの確認方法を習得します。

  • 7. 保存 : 変更をGitで保存する方法を学びます。git add、git commitコマンドの使い方、適切なコミットメッセージの書き方を習得します。

  • 8. シンプルな編集依頼 : AIに簡単な修正を依頼する方法を学びます。色の変更、テキストの修正、レイアウトの調整など、基本的な編集指示の出し方を習得します。

  • 9. アイコンの修正 : アイコンの変更や調整方法を学びます。Font Awesomeなどのアイコンライブラリの使い方、アイコンのサイズや色の変更方法を習得します。

  • 10. フィーチャー画像の設定 : メイン画像の設定方法を学びます。ヒーローセクションの画像配置、画像の最適化、適切なサイズと位置の調整方法を習得します。

  • 11. 3つの画像編集方法 : 画像を編集する3つのアプローチを学びます。AIによる画像候補の提示、Unsplashからの検索、自分の画像をアップロードする方法を比較します。

  • 12. 画像候補の差し替え : 画像の候補を選んで差し替える方法を学びます。複数の画像候補から最適なものを選択し、適用する手順を習得します。

  • 13. Unsplashから画像を変更 : Unsplashの画像検索機能を使った画像変更方法を学びます。適切なキーワードで検索し、ライセンスフリーの高品質な画像を取得します。

  • 14. 自分の画像に差し替え : 自分で用意した画像をアップロードして使用する方法を学びます。画像ファイルの配置、パスの指定、最適化について習得します。

  • 15. ナビゲーションリンクの削減 : ナビゲーションメニューの項目を減らす方法を学びます。ワンページに適したシンプルなナビゲーション構造を作成します。

  • 16. レスポンシブナビゲーションの調整 : スマホ対応のナビゲーション調整方法を学びます。ハンバーガーメニューの実装、モバイル表示の最適化を習得します。

  • 17. ナビゲーションの調整 : ナビゲーションメニューの詳細調整を学びます。アンカーリンクの設定、スムーススクロールの実装、デザインの微調整を行います。

  • 18. Googleマップ : Googleマップの埋め込み方法を学びます。Google Maps Embed APIの使い方、地図のカスタマイズ、レスポンシブ対応を習得します。

  • 19. モーダル・ポップアップ・ドキュメントとは : モーダルウィンドウなどの概念を理解します。ユーザー体験を向上させるためのインタラクティブな要素について学びます。

  • 20. モーダルポップアップの実装 : モーダルウィンドウの実装方法を学びます。開閉のアニメーション、背景のオーバーレイ、コンテンツの配置を習得します。

  • 21. モーダルの使い方 : モーダルの活用方法を学びます。詳細情報の表示、利用規約の提示、画像ギャラリーなど、様々な用途での使い方を習得します。

  • 22. まとめ : ワンページ基本編のまとめを行います。学んだ内容を振り返り、次のステップへの準備をします。

  • 23. Claudeのステータス確認 : Claudeの動作状況や使用量の確認方法を学びます。API使用量の確認、エラーログの確認、パフォーマンスの最適化について習得します。

6. プロトタイプ思考

  • 1. プロトタイプ思考 : プロトタイプ思考の概念と重要性を学びます。完璧を目指すのではなく、まず作ってみて改善していくアプローチを理解します。

  • 2. 公開とプロトタイプ : プロトタイプと本番の違いと使い分けを学びます。テスト環境と本番環境の切り替え、段階的なリリース戦略を習得します。

  • 3. プロンプトの作成 : 効果的なプロンプトの作り方を学びます。ビジネスコンテキストの伝え方、デザインの方向性の指示、具体的な要件の記述方法を習得します。

  • 4. 高度なプロンプトの書き方 : より詳細で効果的なプロンプト技術を学びます。複数のバリエーションを生成させる方法、デザインパターンの指定、ブランドガイドラインの反映方法を習得します。

  • 5. プロトタイプ作成を始める : プロトタイプ作成の実践を開始します。複数のデザイン案を生成し、比較検討するプロセスを体験します。

  • 6. 完成品の確認 : 完成したプロトタイプの検証方法を学びます。デザインの一貫性、ユーザビリティ、パフォーマンスなど、多角的な評価基準を習得します。

  • 7. 最小限の改善 : 必要最小限の改善の考え方を学びます。80対20の法則に基づいて、効果的な部分に集中して改善する方法を習得します。

  • 8. 画像の差し替え方法 : 画像を効率的に差し替える手法を学びます。一括置換、パターンマッチング、自動化スクリプトの活用方法を習得します。

  • 9. まとめ : プロトタイプ思考のまとめを行います。学んだ手法を実際のプロジェクトに適用する方法を確認します。

7. Cloudflare Pagesで公開する

  • 1. Cloudflareとは : Cloudflareの概要と利点を学びます。CDN、DNS、セキュリティ機能など、Cloudflareが提供する様々なサービスを理解します。

  • 2. 学習目標 : この章で学ぶことの目標を確認します。GitHubとの連携、Cloudflare Pagesでの公開、独自ドメインの設定までの全体像を把握します。

  • 3. リモートリポジトリの作成 : GitHubにリポジトリを作成する方法を学びます。リポジトリ名の決め方、公開・非公開の選択、README作成の基本を習得します。

  • 4. リポジトリの作成方法 : リポジトリ作成の詳細手順を学びます。ローカルリポジトリとリモートリポジトリの紐付け、初回プッシュの方法を習得します。

  • 5. READMEの更新 : README.mdファイルの編集方法を学びます。Markdownの基本記法、プロジェクトの説明の書き方、ドキュメントの構成を習得します。

  • 6. Cloudflareで公開 : Cloudflare Pagesでの公開手順を学びます。GitHubリポジトリとの連携、ビルド設定、デプロイプロセスを習得します。

  • 7. Pagesの設定 : Cloudflare Pagesの各種設定を学びます。環境変数の設定、プレビューデプロイメント、カスタムドメインの設定を習得します。

  • 8. Netlifyからの移行方法 : NetlifyからCloudflare Pagesへの移行方法を学びます。既存サイトの移行、リダイレクト設定、DNS切り替えの手順を習得します。

  • 9. 独自ドメインの設定 : カスタムドメインの接続方法を学びます。DNSレコードの追加、SSL証明書の自動発行、HTTPS化の設定を習得します。

  • 10. メインドメインの特別設定 : メインドメインに関する設定を学びます。wwwあり・なしの統一、リダイレクト設定、正規化の方法を習得します。

  • 11. NetlifyからCloudflare Pagesへ移行 : 移行の実践的な手順を学びます。ダウンタイムを最小限にする方法、段階的な移行戦略を習得します。

  • 12. 今後の運用 : 公開後の運用方法を学びます。更新のワークフロー、バージョン管理、ロールバックの方法を習得します。

  • 13. まとめ : Cloudflare Pages公開のまとめを行います。学んだ内容を復習し、トラブルシューティングの基本を確認します。

8. 独自ドメイン

  • 1. 学習教材 : 独自ドメインに関する学習内容の紹介を行います。ドメインの基礎知識から実践的な設定まで、この章で学ぶ内容の全体像を把握します。

  • 2. 独自ドメインとは : 独自ドメインの概念と必要性を学びます。ブランディング、信頼性、SEOへの影響など、独自ドメインを持つメリットを理解します。

  • 3. どこで取得するか : ドメイン取得サービスの選び方を学びます。価格、サポート、管理画面の使いやすさなど、比較ポイントを習得します。

  • 4. 管理権の移管 : ドメイン管理権の移管について学びます。レジストラ間の移管手順、注意点、トラブル回避の方法を習得します。

  • 5. 3つの関係者を知る : ドメイン、レジストラ、ネームサーバーの関係を理解します。それぞれの役割と、どのように連携して動作するかを学びます。

  • 6. 独自ドメインの選び方 : ドメイン名の決め方を学びます。覚えやすさ、ブランドとの整合性、SEOへの影響、TLDの選択基準を習得します。

  • 7. ドメインの取得方法 : ドメイン取得の実践手順を学びます。検索、購入、WHOIS情報の設定、自動更新の設定方法を習得します。

  • 8. ネームサーバーの変更 : Cloudflareへのネームサーバー変更方法を学びます。DNS設定の移行、反映待ち時間、確認方法を習得します。

  • 9. 検証プロセス : ドメイン設定の確認と検証方法を学びます。nslookupやdigコマンドの使い方、DNS伝播の確認、トラブルシューティングを習得します。

9. 独自ドメインメール

  • 1. 概要 : 独自ドメインメールの概要を学びます。ビジネスメールとしての重要性、信頼性の向上、ブランディング効果を理解します。

  • 2. メール管理の原則 : メール管理の基本的な考え方を学びます。受信メールの整理、送信メールの設定、セキュリティ対策の基本を習得します。

  • 3. メールサービスの基礎 : メールサービスの仕組みを学びます。SMTP、IMAP、POP3などのプロトコル、メールサーバーの役割を理解します。

  • 4. メールルーティングの仕組み : Cloudflare Email Routingの動作原理を学びます。転送の仕組み、SPF、DKIM、DMARCの設定を習得します。

  • 5. Gmailアカウントの作成 : 独自ドメインメール用のGmailアカウント作成方法を学びます。アカウントの設定、2段階認証、アプリパスワードの生成を習得します。

  • 6. メールルーティングの設定 : Cloudflareでのメール転送設定を学びます。メールアドレスの追加、転送先の設定、キャッチオール設定を習得します。

  • 7. メール受信の確認 : メール受信のテストを行います。テストメールの送信、受信確認、トラブルシューティングの方法を習得します。

  • 8. メール送信設定 : 独自ドメインからのメール送信設定を学びます。Gmailの「別のアドレスから送信」機能、SMTPサーバーの設定を習得します。

  • 9. インボックスゼロ : 効率的なメール管理手法を学びます。フィルター、ラベル、自動アーカイブなど、生産性を高めるテクニックを習得します。

10. フォーム設置

  • 1. おすすめのフォーム : フォームサービスの選び方を学びます。無料・有料の違い、機能比較、静的サイトに適したサービスを理解します。

  • 2. フォームの仕組み : Webフォームの動作原理を学びます。フロントエンドとバックエンドの役割、データの送信と処理の流れを理解します。

  • 3. SSGフォームの登録 : 静的サイトジェネレーターでのフォーム登録方法を学びます。Formspree、Netlify Forms、Web3Formsなどのサービスの使い方を習得します。

  • 4. フォームの準備 : フォーム実装の準備作業を学びます。必要な項目の洗い出し、バリデーションルールの設定、デザインの検討を行います。

  • 5. フォームの修正 : フォームの調整と修正方法を学びます。入力項目の追加・削除、レイアウトの調整、スタイリングを習得します。

  • 6. フォームバリデーション : 入力検証の実装を学びます。必須項目のチェック、メールアドレス形式の検証、エラーメッセージの表示を習得します。

  • 7. サンキューページ : フォーム送信後のページ作成を学びます。送信完了メッセージ、次のアクション提案、トラッキングコードの設置を習得します。

  • 8. フォームのまとめ : フォーム設置のまとめを行います。学んだ内容を復習し、実際のプロジェクトへの適用方法を確認します。

11. ワンページの活用

  • 1. ワンページ開発ガイド : ワンページ開発の実践的なガイドを学びます。効率的な開発フロー、よくある課題と解決策、ベストプラクティスを習得します。

  • 2. ファイルパスとURL : ファイルパスとURLの関係を学びます。相対パスと絶対パス、ルート相対パス、リンクの記述方法を習得します。

  • 3. マルチページ作成のアイデア : ワンページから複数ページへの展開方法を学びます。サブページの作成、ディレクトリ構造、ナビゲーションの設計を習得します。

  • 4. 複数ページのリンク : ページ間のリンク設定を学びます。内部リンク、外部リンク、アンカーリンク、パンくずナビゲーションの実装を習得します。

  • 5. まとめ : ワンページ活用のまとめを行います。学んだテクニックを実プロジェクトに適用する方法を確認します。

12. SEO、アクセス解析

  • 1. 概要 : SEOとアクセス解析の概要を学びます。検索エンジンの仕組み、ランキング要因、アクセス解析の重要性を理解します。

  • 2. AIとSEO : AI時代のSEO戦略を学びます。AIによる検索結果の変化、コンテンツ作成の最適化、E-E-A-Tの重要性を習得します。

  • 3. ワンページのSEO : ワンページサイトのSEO対策を学びます。タイトルタグ、メタディスクリプション、見出しタグの最適化、構造化データの実装を習得します。

  • 4. プラットフォームの活用 : 各種プラットフォームの使い分けを学びます。SNS、ブログプラットフォーム、動画サイトとの連携戦略を習得します。

  • 5. Webアナリティクス : アクセス解析の基礎を学びます。指標の見方、ユーザー行動の分析、コンバージョン追跡の方法を習得します。

  • 6. 詳細データ取得設定 : Google Analyticsの詳細設定を学びます。イベントトラッキング、カスタムディメンション、eコマース設定を習得します。

  • 7. Google Search Console : Search Consoleの設定と活用方法を学びます。サイトの登録、検索パフォーマンスの確認、クロールエラーの対処を習得します。

  • 8. サイトマップの作成 : XMLサイトマップの生成と登録方法を学びます。自動生成ツールの使用、Search Consoleへの登録、更新管理を習得します。

  • 9. アクセス解析の実装方法 : 解析ツールの実装手順を学びます。トラッキングコードの設置、プライバシーポリシーの作成、GDPR対応を習得します。

  • 10. Google Analyticsの仕組み : Google Analyticsの動作原理を学びます。データ収集の仕組み、セッションの定義、レポート生成のプロセスを理解します。

  • 11. Google Analyticsの設定 : Google Analytics 4の設定方法を学びます。プロパティの作成、データストリームの設定、コンバージョンの定義を習得します。

  • 12. 共有設定 : 複数サイトでの設定共有方法を学びます。タグマネージャーの活用、テンプレート化、効率的な管理手法を習得します。

  • 13. 404エラーページの作成 : カスタム404ページの実装を学びます。ユーザーフレンドリーなエラーページ、代替リンクの提示、トラッキングの設定を習得します。

  • 14. 設定の移行 : 設定情報の移行方法を学びます。新しいサイトへの設定コピー、自動化スクリプト、バックアップ戦略を習得します。

13. 伝わるWebデザインの実践

  • 1. 概要 : 伝わるWebデザインの概要を学びます。ユーザー中心設計、情報設計、視覚的階層の重要性を理解します。

  • 2. UI/UXとは : UI/UXの基本概念を学びます。ユーザーインターフェース、ユーザーエクスペリエンス、ユーザビリティの原則を習得します。

  • 3. WebのUI/UXデザイン : Webにおけるデザインの考え方を学びます。レスポンシブデザイン、アクセシビリティ、パフォーマンス最適化を習得します。

  • 4. Webデザイン用語 : デザインに関する用語を学びます。レイアウト、タイポグラフィ、カラースキーム、グリッドシステムなどの基本用語を習得します。

  • 5. 基本的な作業スキル : デザイン作業の基本技術を学びます。セクションの配置、余白の調整、視覚的バランスの取り方を習得します。

  • 6. ダミーファイルの作成 : テスト用のダミーコンテンツ作成方法を学びます。Lorem Ipsum、ダミー画像、仮データの生成ツールの使い方を習得します。

  • 7. お知らせ : お知らせセクションの実装を学びます。最新情報の表示、日付フォーマット、アーカイブ機能の実装を習得します。

  • 8. バナー : バナーのデザインと配置を学びます。CTA(Call to Action)の作成、視覚的な注目の集め方、効果測定を習得します。

  • 9. スタッフ一覧 : スタッフ紹介セクションの作成を学びます。プロフィールカード、グリッドレイアウト、レスポンシブ対応を習得します。

  • 10. 相談しながら実装 : AIと対話しながら実装する方法を学びます。段階的な改善、フィードバックの与え方、効果的なプロンプトの書き方を習得します。

  • 11. まとめ : 伝わるWebデザインのまとめを行います。学んだデザイン原則を実際のプロジェクトに適用する方法を確認します。

14. 知識編 その他

  • 1. ドメイン管理の仕組み : ドメイン管理の詳細な仕組みを学びます。レジストラ、レジストリ、ICANN、WHOISデータベースの役割と関係性を深く理解します。

  • 2. セカンドディスプレイガイド : 2画面での作業環境の構築方法を学びます。効率的なウィンドウ配置、マルチモニター設定、生産性向上のテクニックを習得します。

15. 知識編(1) Webを理解しよう

  • 1. はじめに : Web理解の導入を行います。インターネットとWebの違い、Webの歴史、現代のWeb技術の概要を学びます。

  • 2. Webの仕組み : Webの基本的な動作原理を学びます。クライアント・サーバーモデル、HTTP/HTTPS、リクエスト・レスポンスの流れを理解します。

  • 3. 事例 : 具体的な事例を通じて理解を深めます。実際のWebサイトがどのように動作しているか、裏側の仕組みを観察します。

  • 4. 複数要素の組み合わせ : 様々な要素の統合方法を学びます。HTML、CSS、JavaScript、画像、API、データベースがどのように連携するかを理解します。

  • 5. 現代のWebの仕組み : モダンなWeb技術の解説を学びます。SPA、PWA、JAMstack、サーバーレスアーキテクチャなどの最新技術を理解します。

  • 6. サブドメインとは : サブドメインの概念と使い方を学びます。サブドメインの作成、DNS設定、用途別の使い分け戦略を習得します。

  • 7. ディレクトリでの整理 : フォルダ構造による整理方法を学びます。URLパス、ファイル配置、サイト構造の設計を習得します。

  • 8. メールサービス : メールサービスの詳細を学びます。メールサーバーの種類、プロトコル、セキュリティ設定、スパム対策を理解します。

  • 9. CDNとは : CDNの概念と利点を学びます。コンテンツ配信の高速化、負荷分散、グローバル展開のメリットを理解します。

16. 知識編(2) Gitを学ぼう

  • 0. コースでのGitとGitHubの関係 : この講座におけるGitとGitHubの位置づけを理解します。バージョン管理の重要性、協業での役割を学びます。

  • 1. Gitを学ぼう : Gitの基本概念を学びます。分散型バージョン管理システム、Gitの特徴、Gitを使うメリットを理解します。

  • 2. Gitを始める : Gitの初歩的な使い方を学びます。Git Bashの起動、基本的なコマンド、ヘルプの見方を習得します。

  • 3. Gitの概要 : Gitの全体像を理解します。リポジトリ、コミット、ブランチ、リモート、タグなどの主要概念を学びます。

  • 4. リポジトリの初期化 : Gitリポジトリの作成方法を学びます。git initコマンド、.gitディレクトリ、初期設定の確認を習得します。

  • 5. Git AddとCommitの基本 : ステージングとコミットの操作を学びます。変更の追跡、ステージングエリア、コミットメッセージの書き方を習得します。

  • 6. 複数ファイルのAddとCommit : まとめてファイルを管理する方法を学びます。git add .、git add -A、.gitignoreの使い方を習得します。

  • 7. リモート協業 : GitHubとの連携方法を学びます。リモートリポジトリの追加、push、pull、クローンの操作を習得します。

  • 8. ブランチとは : ブランチの概念を学びます。並行開発、機能ブランチ、ブランチ戦略の基本を理解します。

  • 9. ブランチの作成 : ブランチの作成と切り替え方法を学びます。git branch、git checkout、git switchの使い方を習得します。

  • 10. ブランチのマージ : ブランチの統合方法を学びます。マージコミット、Fast-forward、コンフリクトの解決を習得します。

  • 11. 前のコミットに戻る : コミット履歴を使った復元方法を学びます。git checkout、git reset、git revertの使い分けを習得します。

  • 12. 前のコミットへの復元 : 特定のコミットへの戻し方を学びます。コミットハッシュの指定、HEAD、相対参照の使い方を習得します。

  • 13. 実験的なコミットの作成 : 試行錯誤のためのコミットを学びます。一時的な変更の保存、実験ブランチの活用、履歴の整理を習得します。

  • 14. コミットを元に戻す方法 : コミットの取り消し方法を学びます。git revert、git reset –soft、git reset –hardの違いと使い分けを習得します。

  • 15. まとめ : Gitのまとめを行います。学んだコマンドと概念を復習し、実際のワークフローへの適用方法を確認します。

17. 知識編(3) はじめてのVS Code

  • 1. はじめよう : Visual Studio Codeの導入を行います。エディタの特徴、インストールの準備、学習の進め方を理解します。

  • 2. インストールと日本語化 : VSCodeのインストールと言語設定を学びます。公式サイトからのダウンロード、インストール手順、日本語拡張機能の導入を習得します。

  • 3. ワークスペースの理解 : ワークスペースの概念を学びます。プロジェクトフォルダ、マルチルートワークスペース、設定の範囲を理解します。

  • 4. 概要 : VSCodeの全体像を学びます。ユーザーインターフェース、パネルの配置、基本的な操作方法を習得します。

  • 5. 最初のファイルを作成 : ファイル作成の基本操作を学びます。エクスプローラーパネル、新規ファイル作成、保存、自動保存の設定を習得します。

  • 6. フォルダの作成 : フォルダの作成と管理方法を学びます。ネストしたフォルダ構造、ファイルの移動、名前の変更を習得します。

  • 7. 色とアイコンのカスタマイズ : テーマとアイコンの設定を学びます。カラーテーマの変更、ファイルアイコンテーマ、見やすい環境の構築を習得します。

  • 8. まとめ : VSCode入門のまとめを行います。学んだ基本操作を復習し、次のステップへの準備をします。

Webinar録画

開催したウェビナーの録画を後からでもみられるようにストックしています