セッション５

ホームページのメインビジュアルを作ったところで、ホームページの全体のデザインを作っていきます♪

ホームページの構成をさらに勉強しよう

ファーストビュー（メインビジュアル）の下はコンテンツが並びます。

・コンテンツ
基本、見出し＋本文の構成になります。場合によってはイメージ画像やイラストも入ります。
・サイドバー
左右どちらかにサイドバーがあることがあります。全てのサイトにあるわけではありません。他のページに移動できるようにボタンやタグが設置されています。
・フッター
全てのページのタグ、会社の情報（住所や電話番号）などの情報が入る場所です。

実際にTOPページを作ってみよう♪

実際にTOPページ全てを作ってみましょう！先日作ったサンテック株式会社様のサイトのTOPページをフッターまで作ってみるという課題です。
作り方は今までと一緒です。メインビジュアルで使用した参考サイトを使うと良いですが必要であれば参考サイトをプラス追加してももちろんokです。

[ 作り方 ]
①クライアント様からオーダーしてもらった情報を整理する。
②参考サイトを探す。
③作成

[ 参考サイトから真似したい場所 ]
・見出しのデザイン
・レイアウト
・装飾の大きさや種類、色、テイスト

[ 課題 ]
・サンテック株式会社様のホームページ、TOPページのデザインを作り替える
・W：1440、H：いくつでもok（人によって変わってくるはずです）

一度作ったら、以下をチェックしてみましょう。
[ チェックポイント ]
チェックポイントは…
✅お客様のオーダーに沿って作られていますか？
色味はお客様のご要望通りですか？
ターゲットは意識できていますか？
お客様の求めるゴールはなんでしょうか？
✅参考サイトはよくよくよ〜〜〜〜く見て作りましたか？
自己流になっていませんか？色味の使い方や装飾、フォントや文字の装飾などなど。
✅文字は読みづらくないですか？
✅写真はターゲットを意識して、目的に沿ったものになっていますか？

アニメーションをつけてみよう♪

文字のホバーアニメーションをつけてみよう

添付画像のように、フレームを作り、文字を入れます。添付画像のように全く同じものを2つ作っておきます。
※フレームのサイズや文字はなんでも良いです。

右側の文字の色味を変更します。色は何色でも良いですが、変化がわかりやすいように、黒やグレー以外で明るい色味が良いです。

左側のフレームを選択した状態で、右上の「プロトタイプ」をクリックします。

左側のフレームの右端、真ん中あたりにカーソルを当てると、「◯」のマークが出てくるので、クリックしながら、右のフレームまで引っ張ります。

矢印をクリックすると、添付画像のような設定画面が出てくるので、上の「クリック時」をクリックします。

「マウスオーバー」を選択し、設定画面の右上の「×」をクリックします。

右上の三角形のプレビューボタンをクリックして、動きを確認してみます。
ホバーした時にアニメーションがついているのがわかります。