Studio課題：テンプレートを使って作成

公開日:2024年10月01日更新日:2025年10月27日

その他

課題内容

無料テンプレート「MICRO BIZ」を使用して下記URLのサイトを模写してください。

制作期間：約1日を予定

https://studio-task.studio.site

制作時の注意！

「ライブプレビュー」は変更内容が自動で反映されますが、「公開後の実サイト」は「更新」しないと変更内容が反映されません。サイトを公開した後に変更を加えた場合は必ず「更新」してから確認してください。

Step01:テンプレートを利用してプロジェクトを作成

下記URLにアクセスして「無料で始める」をクリックします。

https://studio.design/ja/store/templates/pBVqXo4ORd

プロジェクト名は「名前-課題サイト」（例：田中-課題サイト）としてください。講座修了後は自由にプロジェクト名を変更して構いません。

Step02:ヘッダーを模写

ロゴ画像を以下の画像に差し替えてください。

ナビゲーションはリスト化（機能付き）されています。左パネルのリスト用テーブルを使って「項目名」と「ページ内リンク」を変更してください。変更後、ページ内リンクが機能するか確認し、機能しない場合は「ID名」を変更して対応してください。

SNSのアイコンに対する設定はありません。

Step03:メインイメージ作成

メインイメージの写真を「unsplash」から選定してください。ただしコーヒーショップ兼カフェにふさわしい写真であり、かつ写真上に表示するキャッチコピーが読みづらくならないものを選んでください。キャッチコピーに「シャドウ」を適用すると読みやすくなるので調べて対応すること。

写真の上に英語と日本語のキャッチコピーを表示します。ChatGPTなどのAIを用いてキャッチコピーを作成し対応してください。模写サイトと同じキャッチコピーは使わないでください。

キャッチコピーに使用するフォントはお店に合わせて自由に決めて構いません。

英語キャッチコピーと日本語キャッチコピーの間に「ギャップ」を使って適切な間隔を設定してください（間隔に使用する数値は制作者に任せる）。

「↓」のホバー時デザインを上記の画像のようにしてください。色番号は「#db601e」を使用します。

Step04:「ABOUT」の文章を変更

模写サイトから文章をコピーし、3つのテキストボックスを使って上記の文章内容に変更してください。

3つのテキストボックスの間隔を「ギャップ」を使って設定してください（間隔に使用する数値は制作者に任せます）。

Step05:カルーセルを追加

「ABOUT」と「MENU」の間にカルーセルを追加してください。

「unsplash」から今回作成するサイトにふさわしい画像を8枚選定して設定してください。

画像の高さは「270px」とします。上下のコンテンツのバランスを見て余白を設定してください。

「再生間隔」や「送り時間」などの設定は以下とします。

Step06:「MENU」作成

見出しを「MENU」に変更し、4列構成のレイアウトにしてください。

メニューに使用している文章は模写サイトからコピーして使用しましょう。

メニューに応じた写真を「unsplash」から選んでください。

メニューはリスト化（機能付き）されています。「price」の列を作成して価格を表示してください。追加した「price」列のデータを表示する方法がわからない場合は調べて対応してください。

Step07:「NEWS」作成

背景色を「#fff2da」にしてください。

ダッシュボードの「CMS」を利用して5件のお知らせを登録し、不要なお知らせは削除してください。

お知らせの日時や文章は模写サイトから流用して下さい。各お知らせのスラッグは自由に決めて構いません（デフォルト値でも構いません）。

お知らせは公開日時の新しい順に並べて表示します。

注意！公開後のサイトはステータスが「公開中」になっているお知らせしか表示されません。

Step08:「SHOP」作成

「中野区」で検索したGoogleMapを表示してください。GoogleMapをどのように表示すればいいかわからない場合は調べて対応しましょう。GoogleMapの幅は「650px」高さは「400px」にします。

店舗情報はリスト化（機能付き）されています。模写サイトから文章をコピーして上記の内容にしてください。

Step09:「CONTACT」作成

すべての項目を必須にしてください。

お問い合わせ種別は以下の項目にしてください。

フォームを送信してダッシュボードにお問い合わせ内容が届いていることを確認しましょう。

ダッシュボードの列の名前が以下のようになっていることを確認してください。

お名前
メールアドレス
お問い合わせ種別
ご来店経験
お問い合わせ内容
プライバシーポリシー
回答日時

Step10:フッター作成

コピーライトを「NAKANO COFFEE SHOP」に変更してください。

Step11:サイトの設定

サイト設定内の「タイトル」を「NAKANO COFFEE SHOP」にし、「説明文」を以下の文章にします。サイト設定の方法がわからない時は調べて対応してください。

自家焙煎のコーヒー豆を使用し、豆本来の香りと味わいを最大限に引き出したこだわりの一杯を提供しています。また、やわらかな照明と心地よいBGMが流れる店内では、週末を中心にアコースティックライブや読書会などの小さなイベントも開催。コーヒーを片手に、素敵な音楽や人との出会いを楽しめる場所として、地域の皆さまに愛されるカフェを目指しています。