見出し画像

【WEBデザイナー】FVの参考事例

とも

WEBデザイナーのともです。
僕は大学卒業してから８年間教育現場で小学生や中学生に理系科目を教えていました。ただ、デザインを作っていくより、僕のようにWEBデザイナーになる人の役に立てたら幸いです。

前置きはここまでとしまして
デザインとコードをセッション毎に公開していきます。

デザイン

PC版デザイン

ペルソナ設定

デザイナーになると良く聞く言葉「ペルソナシート」というものがあります。ペルソナシートとは、「そのページを利用する顧客を細かく設定し、デザインにズレが出ないように書き記しておくシート」のことです。

今回のデザインのペルソナ設定は以下の通りです。

  • ターゲット年齢：20代後半〜30代前半まで

  • ターゲット性別：女性

  • ターゲット者の利用目的：自宅で料理する人＆新居に引っ越しをする人

  • ターゲット者の年数：300万円〜400万円

  • 行動パターン：毎日料理を楽しむ、土日はいろいろな種類の料理を作る

このようにそのページを見て興味を持つ人物像をより明確にします。

色合い

color

〇 ベースカラーは白色を採用
理由：お皿＝高級感＆清潔感を演出します。

〇 あしらいは灰色とオレンジを採用
理由：このFVのメインはお皿の画像を大々的にアピールしたかったので、差し色に2色使っています。

字体について

字体は一種類のみ
シンプルイズベスト！！！
「KoHo」
この字体は、丸みを帯びています。
お皿をより清潔に見せるためには、高級ブランド感を演出したかったのが背景です。

ボタンについて

カーソルを合わせると色が変わるようにコーディングしてあります。
ふわっと変わる印象を演出し、デザインにマッチしたアニメーションを採用しました。

全体の印象について

とにかくシンプルに仕上げ、しつこくないデザインを作成しました。
食器（お皿）のブランディングでは以下のイメージがあります。
・白くて清潔感がある。
・丸い形。
・食べ物をいれるもの。
この３つの条件を全て満たすデザインを作る必要があります。
さらに掘り下げ、核となるのもは白い印象と丸いというところです。

字体を選ぶとき、ワイヤーフレームを組む時に核を探し言語化してからデザインに入ることで、芯がぶれずに完成までたどり着くことができます。

SP版のデザイン

SP Design

PC版のデザインから落とし込む時に、あしらいの部分だけ削りました。
シンプルさを犠牲にしてまで入れるものではないというのが理由です。

画像の演出（アニメーション）について

アニメーション

食器の画像をふんだんに使っています。
5枚以上の表示も可能ですが、あまり多くしてもメリットが得られないと考えています。無難に３～５枚がいいと思います。

コード

今回使用した言語は
HTML・CSS・Jsの3つとなります。

HTML

<body>
  <div class="wrapper">
    <div class="circle circle1"></div>
    <div class="circle circle2"></div>
    <div class="left_wrapper">
      <div class="title">SYOKKI</div>
      <div class="menu_list">
        <div class="list selected">TOP</div>
        <div class="list">ABOUT</div>
        <div class="list">NEWS</div>
        <div class="list">LINEUP</div>
      </div>
      <div class="language_list">
        <span class="language selected">JP</span>
        <span>・</span>
        <span class="language">EN</span>
      </div>
    </div>
    <div class="center_wrapper">
      <img class="show" src="./img/Frame1.jpg">
      <img src="./img/Frame2.jpg">
      <img src="./img/Frame3.jpg">
      <img src="./img/Frame4.jpg">
      <img src="./img/Frame5.jpg">
    </div>
    <div class="right_wrapper">
      <div class="number_list">
        <div class="number selected">1</div>
        <div class="number">2</div>
        <div class="number">3</div>
        <div class="number">4</div>
        <div class="number">5</div>
      </div>
      <div class="language_list">
        <span class="language selected">JP</span>
        <span>・</span>
        <span class="language">EN</span>
      </div>
      <div class="contact">
        <div class="contact_btn">contact</div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="./js/main.js"></script>
</body>


CSS

* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.body {
  width: 100%;
}

.wrapper {
  position: relative;
  display: flex;
  gap: 0;
  justify-content: center;
}

.circle {
  position: absolute;
  width: 478px;
  height: 478px;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

.circle1 {
  top: -111px;
  left: -71px;
}

.circle2 {
  top: 144px;
  left: 310px;
}

.left_wrapper {
  flex: 1 1 auto;
  padding-top: 60px;
  padding-left: 58px;
}

.left_wrapper .title {
  font-weight: bold;
  font-size: 24px;
  line-height: 33px;
  letter-spacing: 0.28em;
  color: rgba(0, 0, 0, 0.8);
}

.left_wrapper .menu_list {
  margin-top: 66px;
  display: flex;
  flex-wrap: wrap;
}

.left_wrapper .list {
  flex: 0 0 100%;
  font-size: 16px;
  letter-spacing: 0.08em;
}

.left_wrapper .list:hover {
  transition: all 0.3s;
  cursor: pointer;
  opacity: 0.8;
  text-decoration: underline;
}

.left_wrapper .list.selected {
  text-decoration: underline;
}

.left_wrapper .list:not(:first-child) {
  margin-top: 30px;
}

.left_wrapper .language_list {
  margin-top: 275px;
}

.left_wrapper .language {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.2);
}

.left_wrapper .language:hover {
  transition: all 0.3s;
  color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.left_wrapper .language.selected {
  color: #000 ;
  text-decoration: underline;
}

.center_wrapper {
  flex: 0 1 692px;
}

.center_wrapper img {
  width: 100%;
  height: auto;
  display: none;
}

.center_wrapper img.show {
  display: inline;
  animation-name: show_anime;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

@keyframes show_anime {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.right_wrapper {
  position: relative;
  flex: 0 0 60px;
  padding: 60px 19px 0;
}

.right_wrapper .number_list {
  display: flex;
  flex-wrap: wrap;
}

.right_wrapper .number {
  flex: 0 0 100%;
  font-weight: bold;
  font-size: 14px;
  line-height: 19px;
  color: rgba(0, 0, 0, 0.2);
  text-align: center;
  user-select: none;
}

.right_wrapper .number:hover {
  transition: all 0.3s;
  color: #DC8400 ;
  opacity: 0.8;
  cursor: pointer;
}

.right_wrapper .number.selected {
  color: #DC8400 ;
}

.right_wrapper .number:not(:first-child) {
  margin-top: 17px;
}

.right_wrapper .language_list {
  display: none;
}

.right_wrapper .contact {
  position: absolute;
  margin-top: 275px;
}

.right_wrapper .contact .contact_btn {
  width: 43px;
  padding: 13px 16px;
  font-size: 14px;
  text-align: center;
  color: #DC8400 ;
  background: #FFFFFF ;
  border: 1px solid #DC8400 ;
  border-radius: 4px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  word-wrap: break-word;
  word-break: break-all;
}

.right_wrapper .contact .contact_btn:hover {
  transition: all 0.5s;
  color: #FFFFFF ;
  background: #DC8400 ;
  cursor: pointer;
}

@media (max-width: 500px) {
  .wrapper {
    flex-wrap: wrap;
  }

  .circle {
    display: none;
  }

  .wrapper > div {
    flex: 0 0 100%;
  }

  .left_wrapper {
    flex: 0 0 100%;
    padding-top: 32px;
    padding-left: 0;
    margin: 0 auto;
    text-align: center;
  }

  .left_wrapper .menu_list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: calc(100% - 80px);
    margin: 16px auto 0;
  }
  
  .left_wrapper .list {
    flex: 0 0 25%;
    text-align: center;
  }

  .left_wrapper .list:not(:first-child) {
    margin-top: 0;
  }

  .left_wrapper .language_list {
    display: none;
  }

  .center_wrapper {
    flex: 0 0 100%;
    margin-top: 47px;
  }

  .right_wrapper {
    flex: 0 0 100%;
    padding: 0;
  }

  .right_wrapper .number_list {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    justify-content: start;
    margin-top: 8px;
    margin-left: 24px;
  }
  
  .right_wrapper .number {
    flex: 0 0 auto;
    text-align: center;
  }

  .right_wrapper .number:not(:first-child) {
    margin-top: 0;
  }

  .right_wrapper .language_list {
    display: block;
    margin: 40px auto 0;
    text-align: center;
  }

  .right_wrapper .language {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.08em;
    color: rgba(0, 0, 0, 0.2);
  }

  .right_wrapper .language:hover {
    transition: all 0.3s;
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
  }

  .right_wrapper .language.selected {
    color: #000 ;
    text-decoration: underline;
  }

  .right_wrapper .contact {
    position: static;
    margin-top: 44px;
    margin-bottom: 128px;
  }
  
  .right_wrapper .contact .contact_btn {
    width: 102px;
    padding: 13px 16px;
    font-size: 14px;
    text-align: center;
    color: #DC8400 ;
    background: #FFFFFF ;
    border: 1px solid #DC8400 ;
    border-radius: 4px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    word-wrap: normal;
    word-break: normal;
    margin: 0 auto;
  }
}


Js（Javascript）

{
  // 表示中の画像、選択状態の数字の値を格納
  let img_index = 0;

  // 画像切り替えタイマーを始動(3sごとに切替)
  let id = setInterval(changeImage, 3000);

  function changeImage() {
    let image = document.querySelectorAll('.center_wrapper img');
    let number = document.querySelectorAll('.right_wrapper .number');

    // 現在表示している画像を消す
    image[img_index].classList.remove('show');
    // 選択状態の数字を解除
    number[img_index].classList.remove('selected');
    img_index += 1;
    if (img_index>=5) {
      // 最後の数字の場合は最初に戻す
      img_index = 0;
    }
    // 次の画像を表示
    image[img_index].classList.add('show');
    // 対応する数字を選択状態にする
    number[img_index].classList.add('selected');
  }

  // メニューリストの選択状態切り替え
  document.querySelectorAll('.left_wrapper .list').forEach((list, index) => {
    list.addEventListener('click', () => {
      let select_list = document.querySelector('.left_wrapper .list.selected');
      select_list.classList.remove('selected');
      list.classList.add('selected');
    });
  });

  // 言語切り替え(PC用)
  document.querySelectorAll('.left_wrapper .language').forEach((language, index) => {
    language.addEventListener('click', () => {
      let select_language = document.querySelector('.left_wrapper .language.selected');
      select_language.classList.remove('selected');
      language.classList.add('selected');
    });
  });

  // 数字クリック時の画像切り替え
  document.querySelectorAll('.right_wrapper .number').forEach((number, index) => {
    number.addEventListener('click', () => {
      // タイマーを停止
      clearInterval(id);

      let show_image = document.querySelector('.center_wrapper img.show');
      let select_number = document.querySelector('.right_wrapper .number.selected');

      // 現在表示している画像を消す
      show_image.classList.remove('show');
      // 選択状態の数字を解除
      select_number.classList.remove('selected');

      // クリックした数字に対応する画像を表示
      let image = document.querySelectorAll('.center_wrapper img');
      image[index].classList.add('show');
      // 対応する数字を選択状態にする
      number.classList.add('selected');

      // タイマー再起動
      id = setInterval(changeImage, 3000);
      img_index = index;
    });
  });

  // 言語切り替え(SP用)
  document.querySelectorAll('.right_wrapper .language').forEach((language, index) => {
    language.addEventListener('click', () => {
      let select_language = document.querySelector('.right_wrapper .language.selected');
      select_language.classList.remove('selected');
      language.classList.add('selected');
    });
  });
}


注意事項

コードの使用については、あくまで勉強用になります。
それ以外の使用はやめてくださいね！

この記事が気に入ったらサポートをしてみませんか？