Studio課題：AIとノーコードツール「Studio」でサイトをリニューアル

課題内容

AIを活用して既存のサイトを分析し、ターゲットやゴールを明確にした上で、ノーコードツール「Studio」を使って新しいサイトを制作します。

AIに指示する力（プロンプト作成）と、ノーコードによる構築力を身につけることを目的とします。

リニューアル対象ジャンル

1. 動物病院
2. 小児科
3. 弁護士事務所

Step01:リニューアルサイトを決める

ネットを使ってリニューアル対象ジャンルのサイト10サイト以上見てください。その上でリニューアルサイトを決めてください。

サブ課題：参考サイトをみつける

デザインや構成のよいサイトがあればURLを控えて、制作時に参照できるようにしてください。

1. 【個人】リニューアル対象サイトと参考サイトを3つ以上決める
2. 【グループ】グループで1つリニューアルサイトを決める
3. 【グループ】参考サイトを共有する

Step02:リニューアル対象サイトの現状を分析

現在（リニューアル前）のサイトターゲットやゴールを考えます。

1. 【個人】リニューアル対象のWebサイトURLをAIに伝える
2. 【個人】AIに以下を質問して、現状を整理する
   
   ■プロンプト例
   • このサイトのターゲットは誰だと思いますか？
   • 現在のサイトの目的（ゴール）は何だと思いますか？
   • 改善できそうな点を3つ挙げてください。
   • – 必要に応じて上記以外の質問を考える
3. 【個人】AIの回答をもとに、自分なりに「誰のためのサイトか」「何を伝えるサイトか」をまとめる。

Step03:リニューアルの方向性を決める

リニューアル後のターゲットとゴール、コンセプトを明確にします。

1. 【個人】リニューアルすべき箇所はどこかを考える
2. 【個人】リニューアル箇所をAIと考える
   
   ■プロンプト例
   • この動物病院のWebサイトをリニューアルするとしたら、どんな目的・ゴールを設定すると良いですか？
   • どんな印象のデザイン・構成にすれば利用者に安心感を与えられますか？
   • – 必要に応じて上記以外の質問を考える
3. 【個人】回答を参考に、自分の言葉で「サイトの目的・方向性」をまとめる。
4. 【グループ】「3」の内容をもとにリニューアルすべき箇所はどこかグループで話し合って共有する

Step04:サイト構成をAIと考える

「Step03」を踏まえてページ構成（サイトマップ）を決めます。
※ページ構成に必ず「お知らせ」を入れてください

1. 【グループ】AIに依頼してページ構成例を提示してもらう
   
   ■プロンプト例
   • リニューアルすべき箇所は「○○」です。上記の内容をもとに、新しいWebサイトのページ構成（サイトマップ）を提案してください。
   • 各ページの目的と役割を教えてください。
   • – 必要に応じて上記以外の質問を考える
2. 【グループ】提案されたページ構成を確認し、必要があれば追加・削除を行う。
   　（例：「ホーム」「診療案内」「スタッフ紹介」「アクセス」「お問い合わせ」など）

Step05:各ページの文章をAIを使って作成

1. 【個人】各ページに必要な文章をAIに作成してもらう。
   
   ■プロンプト例
   • ホームページに掲載するキャッチコピーと、病院の紹介文を作成してください。
   • 診療案内ページに掲載する内容（診療時間・対象動物・特徴など）をわかりやすく書いてください。
   • – 必要に応じて上記以外の質問を考える
2. 【個人】生成された文章を必要に応じて自分で調整・加筆する。

Step06:「Studio」でサイト作成

【個人】参考サイトを手本にしながら「Studio」でサイトを作成します。

作成のルール

「トップページ」「配下ページ（1ページ必須）」「お知らせ」を作成してください。配下ページは課題時間の関係でお好きな1ページのみで構いませんが、時間がある方はそれ以外のページも作成をお願いします。

• 制作日数：約3人日を想定しています。
• 無料公開した後URLを講師に伝えてください。
• 制作したサイトを皆が閲覧できるようにします。
• 今回はPCサイト版（幅1280px：basic）の作成を目指してください。
  ※時間のある時はタブレットとスマホの調整やハンバーガーメニューを作成してください。
• 無料公開した後URLを講師に伝えてください。
• 制作したサイトを皆が閲覧できるようにします。
  注意点：公開されることを念頭に置いて素材や文章を配置してください。
  サイト名や電話番号、住所などは架空のものに必ず変更してください。
• テンプレートや以前作成したページからパーツをコピペしても構いません。
  ※注意！モデルと紐づいたパーツをコピペするとモデルの再設定をしないとうまく表示されないことがあります。

作業内容

1. 「Studio」で「空白から始める」で新規プロジェクトを作成
   プロジェクト名「名前-課題サイト」
   訓練修了後にプロジェクト名を変更して構いません。
2. 使用するフォント、色を登録する
3. 「Step04」のサイト構成に沿ってページを作成
   左パネル「追加」>「セクション」のパーツを使っても構いません。
   • 「ヘッダー」「フッター」を作成してコンポーネント化
   • 「メインコンテンツ」を作成
     • コンテンツの「グループ枠」と「表示領域」を作成してパーツの大枠を作成する
     • 「Step05」で用意した文章や画像を配置
       ※関連する情報が近い場所にあることを確認する
       　例）電話番号・営業時間・定休日
       　　電話する時に必要な情報が近くにまとめられているか
     • 縦配置、横配置を決めて余白やギャップを設定
     • 必要に応じてパーツをコピペしたりコンポーネント化して流用する
4. 「お知らせ」をCMS化して実装する
5. 「リンク」を設定して「ライブプレビュー」で確認・修正
6. URLを指定して公開

公開したURLを講師に伝えてください。