以下のページからデザインを確認してください。
サイト制作課題
3 Screens, Last modified on Oct 25, 2022 14:55 GMT
xd.adobe.com
実装のアニメーション指示
実装で使用する画像素材
以下の画像素材を実装で使用してください。
注意事項
- SPのキービジュアルは画面サイズに合わせて幅も高さも可変させるか、もしくは高さを固定にして背景画像だけズームするようにして構いません。（お好みで大丈夫です）
- PCのキービジュアルは画面サイズに合わせて幅も高さも可変させるか、もしくは高さを固定にして背景画像だけズームするようにして構いません。（お好みで大丈夫です）
また、最大幅を設定して中央に寄せてもらって構いません - SPのデザインの半分の値で実装をしてください
- 矢印アイコンのアニメーションはホバー時に左右に動かしてください
- 基本的にアイコンなどはcssで実装してください（矢印など、メールや電話のアイコンは画像を使用する）
- 画像素材が足りない場合は別途問い合わせください。
- レスポンシブで実装してください。
- PCとSPの切り替えは768px以上がPC、767px以下はSPとしてください。
- 画面の幅がデザインのカンバスサイズである1200pxを超える場合はコンテンツは固定にして中央に寄せてください。コンテンツ部分（お知らせなど）は最大幅1000pxになるようにしてください。
- 画面の幅が375px以下でも表示が崩れない（画面が見切れたりしない）ようにしてください。
- 画面幅が広がったり狭まった時もレイアウトが崩れないようにしてください
- 要素が増えたり、減った場合にもレイアウトが崩れないようにする
- ヘッダーがページ上部に固定で追従するようにしてください
- PC/SPともにグレーの背景部分は画面の幅に合わせて伸び縮みするようにしてください。
- widthやmargin、paddingなどの数値の指定で小数が出る場合は四捨五入するようにしてください
- SPでナビが開いた時は背景がスクロールされないように制御してください
- 文字数や要素が増減してもレイアウトが崩れないようにレイアウトしてください。
- フォントファミリーの指定はhtmlやbodyにしてください。
文字の大きさはfont-size: 00px、太さはfont-weight: bold; のように指定しましょう。
各要素に“font: normal normal bold 20px/27px Noto Sans;” のようにそれぞれ書かないように気をつけてください。
コメント