架空の水族館のWebサイトを制作しました。mogaBlogで配布されているワイヤーフレームをもとに、デザイン〜コーディングまで行いました。
＜制作したサイト＞
URL：https://kamo-sample.capoo.jp/
※アクセス制限しています。お手数ですが下記の入力をお願いいたします。
ユーザー名：kamo-sample パスワード：kamokamo
▪️制作年月：2023年12月
▪️制作期間（時間）：
[デザインカンプ] １週間（約24時間）
[コーディング (レスポンシブ含む) ] ２週間（約32時間）
▪️使用ツール：Photoshop、Visual Studio Code、HTML、CSS、Javascript(jQuery使用)
【要件】（概要、ターゲットは、ワイヤーフレームに基づく）
・概要：新規オープンする水族館の公式サイト
・ターゲット：ファミリー層
【工夫した点】
デザイン
・ターゲットがファミリー層であり、楽しさを求めて来館することが多いと思うため、全体的に楽しい雰囲気が出るように、ポップなイラストやデザインを使用しました。
・メインコピーが「海を、もっと身近に」であることから、海の波や潮の流れをモチーフにデザインしました。
・幅広い年代が見ることを想定し、文字サイズは16px以上としました。
コーディング
・楽しさを出すため、CSSアニメーションによる動きを取り入れました。
・レスポンシブ対応では、セクションごとにブレイクポイントを適宜追加し、多様な画面幅に対応するよう留意しました。（デザインカンプを再現しつつも、必要に応じ、画面幅に合わせてデザインがよく見えるよう、サイズや余白を調整しました。）
・ハンバーガーメニューの開閉、ホバー時の動きは、jQueryを使用して実装しました。（その他の動きはCSSアニメーションを使用）
【制作したデザインカンプ】
PC版
SP版
以上