Webスクール実技試験(デザイン・コーディング)
1Fはカフェ、2F〜5Fは美容関連のサロンやショップが集まるという女性向けの架空の施設です。認知拡大・予約を促すためのサイトです。 ◆工夫をした点◆ 【全体】 ・全体的にはセクションが変わることを分かりやすく伝えるために、セクションごとに背景色を変えました。変化をつけることで飽きずに一番下までスロールしてもらえることも期待しています。 ・セクションごとのタイトルにあしらいで四角を加えていますが、色を変えたり、文字によって配置を変えて遊び心を加えました。 ・サイトの目的の一つは予約を促すことなので、リザーブのボタンはスクロールしても追従するようにしました。 【メインビジュアル】 ・メインビジュアルやコピーも順番に出てきて、画像もふんわり切り替わることで優しさや癒しを表現しました。 ・あえて画像を全面に配置せず、左と下に余白を持たせることでデザイン性を高め、こなれた印象にしました。 【フロア】 ・アニメーション入れ、横から出てくるだけでなく数字の部分は下から出てくる様にし、動きに変化をつけました。 ・数字の横のアルファベットを斜めにして遊び心を加えました。 ・サイトの目的の一つは認知拡大なので、より詳しくサロンのことを知ってもらうためにはLPだけでなくその先の詳細ページに飛んでもらうことが重要だと思ったので、view-more(もっと見る)のボタンのホバーの反応する範囲を少し広めに取って、その先に遷移先ページがあることに気付いてもらいやすくしました。 【ニュース】 ・写真をホバーすると浮き出るような動きをつけ、クリックできることを分かりやすくしました。 【ギャラリー】 ・スリックを用いてスムーズに流れる様にし、より多くのイメージを見てもらえるようにしました。