website
架空サイト
美容サロンのサイト
担当: ディレクション/デザイン/コーディング
WEBデザインの勉強として、個人で制作した架空のサイトです。
かわいらしい優しい雰囲気の女性向けサイト
  • 目的と課題

    当サロンのサービスや施術までの流れを紹介し、新規のお客様にお越し頂く
  • ターゲット

    毎日が忙しく、疲れを癒やせるサロンを探している女性。新規顧客向け。
  • デザインのポイント

    ファーストビューのキャッチで謳われている「頑張った自分にご褒美」のように、 日々仕事などで忙しい女性が、疲れを癒やすことができる、架空のエステサロンのサイトです。 初めて利用する人がサイトを読んで安心して申し込みできるように、提供しているサービスやサロンの特徴、 申し込み~施術までの説明、利用者の口コミをサイトに掲載しています。 サイトの印象として、「女性的・透明感」を意識してデザインしています。
    繊細な雰囲気を演出するフォント
    女性的で繊細な印象を与えるため、明朝体・セリフ体のフォントを選んでいます。 ジャンプ率や太字も控えめにしてあります。
    女性的で透明感を感じさせる 明るい配色
    ピンク色で統一することで、女性的な印象をもたせています。 また、背景は「黄色→青みピンク」のグラデーションを施し、空気感を感じられるようにしています。 黄色は「エステによって明るく輝くような肌」、青みピンクは「サイトのテーマ色とラベンダー」をイメージしています。
    施術の流れを紙芝居風に
    スクロールすることで紙芝居のように、次々とステップが切り替わります。 動作はCSSとJavaScriptで制御しています。
    VOICEの表示方法
    Swiper.jsを利用し、左右にスクロールすることで口コミを閲覧することができるようになっています。 ウィンドウの幅に応じて表示枚数が変動するようになっているため、レイアウト崩れが起こりにくいようになっています。
  • 使用ツール・技術

    Photoshop / Illustrator / HTML / CSS / JavaScript / VS Code
  • 制作時間

    デザイン
    22.5時間
    コーディング
    41時間
  • 制作時期

    2023年1月
  • Other Works