架空旅館サイト【XDデザインからのコーディング】

サイトURL：https://daikilog-p.com/portfolio/ishii-kadan/

なお、サイトにはBasic認証をかけています。
以下のユーザー名/パスワードを入力の上、ご覧いただきますようよろしくお願いいたします。

ユーザ名 ：daiki_20211023
パスワード：daiki_20211023

◯はじめに
制作したサイトは実際にプロのエンジニアの方に表示確認をお願いし、デザインが崩れていないかチェックしてもらっています。

◯使用ソフト
・Adobe XD
・Visual Studio Code
・FileZilla

◯制作期間
2週間

◯特徴
・ファーストビューの画像3枚は、ゆっくりズームしながら切り替わる（CSSアニメーション使用）
・画面をスクロールすると、ヘッダーの背景色・テキスト色・ロゴの色が変化する
・各要素はふわっと出現（AOS.jsを使用）
・下層ページにはパンくずリストを配置

◯意識した点
・ファイルが混同しないように、フォルダは「public（公開用）」「src（sass記述用）」の2種類に分けた
・モーダル出現時と、スマホドロワー出現時の背景を同じにし、一貫性のあるデザインに
・モーダル・ドロワー出現時に、画面をスクロールできないように配慮
・300px以下のデバイスでもデザインが崩れないコーディングを心がけた（Galaxy foldにも対応）
・白文字が見にくい部分の背景に黒いフィルターをかけた
・font-familyの最後にGoogleフォントのNoto Serif JPを追加
（Android端末では明朝体が表示されないため）
・できる限り、セマンティックコーディングを意識
・修正・再利用のしやすさを意識し、Sassを用いてコーディング
・再利用・拡張・修正・予測のしやすさを意識し、CSS設計（FLOCSS）を用いてコーディング

カテゴリー

ランディングページ (LP) 制作

業種

IT・通信・インターネット

場所

香川県

参考価格

100,000 円

最終更新日

2021年12月23日