KDC : Web演習第7回

2024年6月5日

フクシママサミチ

第7回は、テンプレートのパーツを組み合わせてシングルページ（1ページ物）のWebサイトを作成します。

テンプレートを活用したWeb制作手順を実際に体感しながら、ポートフォリオサイトを作る前の練習として、今期課題制作の流れをつかみましょう。

組み合わせる無料テンプレート

今日の目標

クリック！

今期課題制作時のポイント

今期課題ではシングルページのテンプレートを極力使用すること
- ［CMS］のマークが付いたテンプレートを使うと、構造上、表示崩れが発生します
- ［CMS］に興味のあるひとは、以下記事も読んでみて
  - https://help.studio.design/ja/articles/4175003-studio-cms%E3%81%A8%E3%81%AF
必ずサイト構成を先に決めること
- サイトの全体構成を 1 から作るのはプロでも大変
- まずは既存のテンプレートから「この表現いいな」を見つけよう
- お気に入りのテンプレート（使いたいパーツ）が集まったら、自分のプロジェクトで組み合わせよう
- サイトの全体像（構成）が決まらないときは、手書きでざっくり書いてみるのも◎
- テンプレートを組み合わせて全体像がつかめたら、自分なりのアレンジ（デザイン）をどう表現するか考えよう
- ※サイトの全体像が見えないまま、一番上からボックスを配置して順番に作っていくスタイルは時間の使い方が勿体ないです…
2回目もサイト訪問してもらえるかを考えること
- 面接官の印象に残るためには何が必要なのか？
- 自分の作るサイトとイケてるWebデザイン、何が違うのか？
- アニメーションやかっこいい表現の多用は要注意＝出落ちで終わらないように
- 作り終わった後も、他のアレンジ（デザイン）を模索しよう
あしらいには素材サイトを活用すること
- 自分で素材（パーツ・イラスト）を用意出来なくても、素材サイトを活用することでなんとかなる
- サイトの全体構成を組めたひとは、素材作りに時間に割いても◎
現在選択しているブロックを必ず確認すること
- 違うブロックを編集してしまい、想定していた表現が出来ないシチュエーションが必ず訪れます…
- 選択した箇所には薄い色線が付くので見極める→難しいならレイヤーパネル常時展開がオススメ
- 親ボックスと子ボックス（中身）のどちらを選択しているか、意識しながら作業しよう

サイト構成で参考にしたいリンク集（スマホ編）

【おまけ】

「リンク」に関する設定

要素をクリックした際に右側パネルに表示される「＋」をクリックすると、リンク先の設定が可能

リンク設定の種類

STUDIO U – リンク

別ページへのリンク
- 同じプロジェクト内の別ページに移動するには、移動先ページをキーワードで検索し、リストから選択
アンカーリンク
- 同じプロジェクト内で同じページの特定の地点にスルスル〜っと移動するには、あらかじめ移動先の要素（ボックス等）にIDを設定する必要有り
外部サイトへのリンク
- 外部サイトのURLを最初（https://）から最後までを直接入力
- 「新規タブで開く」を有効にすると、新しいタブで開く設定が可能
モーダルを開く・閉じる
- モーダルページでのみ「モーダルを閉じる」設定が可能
プロパティの選択
- CMSを活用する際に使用