Studio課題：ポートフォリオサイトを作成

公開日:2024年10月03日更新日:2025年10月28日

その他

課題内容

以下の内容をもった自己紹介サイトを作成してください。

好きなものを3つ以上紹介
ブログ（CMS）
お問い合わせページ

作成のルール

制作日数：約2日を想定しています。
サイトチェックと修正：半日～1日を想定しています。
教科書「Chapter１」を読んで全体デザインをどうするか検討してみましょう
教科書「Chapter６」を読んで「モーション」や「モーダル」、「ボックス内スクロール」も検討してみましょう
今回はPCサイト版（幅1280px：basic）の作成を目指してください。
※時間のある時はタブレットとスマホの調整やハンバーガーメニューを作成してください。
無料公開した後URLを講師に伝えてください。
制作したサイトを皆が閲覧できるようにします。
注意点：公開されることを念頭に置いて素材や文章を配置してください。

サイト構成

トップページ：通常ページ（ブログ一覧：CMSを含む）
構成図を参考に作成

お問い合わせ：通常ページ
パス /contact
- お問い合わせ項目
  名前
  メールアドレス
  お問い合わせ内容
  プライバシーポリシーへの同意：チェックボックス
Thanksページ：通常ページ
パス /thanks

ブログ詳細ページ：動的ページ（今回はタグフィルタリングページは作成しない）
- CMSモデル
  BLOG：記事タイプ
  BLOGタグ：カテゴリータイプ
  ※カテゴリーはブログに書きそうなタグを3つ以上作成する
  例）学習、本、音楽、お店など

グループ構成図

デザインは自由で構いませんが、初めての作成でガイドが必要な場合は教科書の構成をベースにした以下の参考サイトとグループ構成を参考に作成してください。

参考サイト：https://akutsu-web.studio.site/

トップページのグループ構成：セクションと表示領域

トップページの各パーツグループ構成

自己紹介セクション

好きなものセクション

ブログセクション

作業内容

「Studio」で「空白から始める」で新規プロジェクトを作成
プロジェクト名「名前-自己紹介サイト」
例）「田中-自己紹介サイト」
訓練修了後にプロジェクト名を変更して構いません。
使用するフォント、色を登録する
サイト構成に沿ってページを作成
左パネル「追加」>「セクション」のパーツを使っても構いません。
- 「ヘッダー」「フッター」を作成してコンポーネント化
- 「メインコンテンツ」を作成
  - コンテンツの「グループ枠」と「表示領域」を作成してパーツの大枠を作成する
    ※グループ構成図「トップページのグループ構成：セクションと表示領域」を参考
  - 用意した文章や画像を配置
    ※グループ構成図「トップページの各パーツグループ構成」を参考
  - 縦配置、横配置を決めて余白やギャップを設定
  - 必要に応じてパーツをコピペしたりコンポーネント化して流用する
「お問い合わせ」を設定する
「ブログ」をCMS化して実装する
「リンク」を設定して「ライブプレビュー」で確認・修正
URLを指定して公開

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

サイトのチェック

公開した後、再度不備がないか確認して、URLを講師に伝えてください。

チェックポイント１：リンクチェック

サイト名をクリックした時に「HOME」が表示されるか確認する
ヘッダーのリンクが機能しているか確認する
※トップページだけでなく配下ページのヘッダーリンクが機能しているか確認すること
フッターのプライバシーポリシーリンクが表示されるか確認する
上記以外のリンクが機能しているか確認する

チェックポイント２：メインビジュアル

キャッチコピーが読みやすいか確認する（背景写真と文字のコントラスト）
キャッチコピーに誤字脱字がないか確認する
見た目におかしな点がないか確認する

チェックポイント３：好きなもの３つ紹介

適切な写真を選定しているか、文章に誤字脱字がないか確認する
適切な余白が設定されているか確認する
見た目におかしな点がないか確認する

チェックポイント４：ブログ一覧

ブログ一覧に適切な写真（カバー画像）やテキスト表示して閲覧者に必要な情報を提供しているか確認する
※ブログ詳細に遷移してもらえるブログ一覧になっているか確認する
ホバー時デザインを設定してリンクであることがわかるようになっているか確認する
クリックしてブログ詳細ページに遷移するか確認する
適切な余白が設定されているか確認する
見た目におかしな点がないか確認する

チェックポイント５：ブログ詳細

ブログ一覧から遷移してきたときに適切なブログ詳細が表示されているか確認する
ブログ詳細に必要な情報が表示されているか確認する
- タイトル
- 本文
- 公開日時　など
ブログ本文（リッチテキスト）の各タグ（h1,h2,h3,p,ul,ol等）にデザインが設定されているか確認する
※各タグのデザインを確認するための本文を用意しておく
ブログを読み終えた後に閲覧者を誘導するCTAセクションがあるか確認する
適切な余白が設定されているか確認する
見た目におかしな点がないか確認する

チェックポイント６：お問い合わせ

指定された入力欄や選択項目が表示されているか確認する
必須項目が入力・選択されていない状態で「送信」ボタンを押し、エラーメッセージが表示されることを確認する
必須項目を入力・選択された状態で送信できることを確認する
送信後に「THANKS」ページが表示されるか確認する
適切な余白が設定されているか確認する
見た目におかしな点がないか確認する

チェックポイント７：THANKSページ

「THANKS」ページから「HOME」ページに戻るリンクがあるか確認する
コンテンツが少ないためにフッターが不自然な位置に表示されていないか確認する
適切な余白が設定されているか確認する
見た目におかしな点がないか確認する

チェックポイント８：全体確認

サイトタイトルやページタイトルが適切に設定されているか確認する
教科書「Chapter１」を読んで全体デザインに調整が必要ないか検討してみましょう
教科書「Chapter６」を読んで「モーション」や「モーダル」、「ボックス内スクロール」も検討してみましょう
サイト全体を閲覧者視点で見直して「色」や「フォント」、「余白」などを調整しましょう
※「情報を伝えるためのデザイン」を念頭に置いて確認しましょう
- 背景色とテキストが読みやすいコントラストになっているか
- 色数が多くないか（多くてもサイトとしてまとまっていればOK）
- 文字の大きさや太さ、余白にルールがあるか
- 角丸の使いどころや角丸の数値がバラバラでないか
- ボタンデザインがバラバラでないか（同じデザインのバリエーション違いなどはOK）
- リンクとわかるようにホバーデザインが設定されているか
閲覧者視点でサイトを利用してみて必要な情報が閲覧者に提供されているか確認する
- 関連する情報は近場に配置する
  例）ブログタイトルとカテゴリ名、公開日時と更新日時　など
各ページの情報の導線（情報の並びやCTAの設置）が適切か最終確認する
モーション（出現時アニメーション）が適切か確認する