制作のポイント

• 1.変数を活用したコーディング

  

  繰り返し使用する色やフォントサイズなどは変数として管理し、デザイン変更時にも柔軟に対応できるよう設計しました。可読性と保守性の向上を意識しています。

  ▾コードを表示

  Sass

                            
  繰り返し使用するカラー
  $color-base: #333333;
  $back-ground-base: #ffffff;
  $color-key1: #3ea1d1;
  $color-key2: #707070;
  
  ブレークポイント
  $breakpoints: (
    sm: "screen and (min-width: 600px)",
    md: "screen and (min-width: 768px)",
    lg: "screen and (min-width: 900px)",
    xl: "screen and (min-width: 1200px)",
  );
  
  @mixin mq($breakpoint: md) {
    @media #{map.get($breakpoints,$breakpoint)} {
      @content;
    }
  }
                            
                          

• 2.見やすいコンタクトフォーム

  

  hoverやfocusを使用して、ユーザーが操作しやすく視認性の高いフォームを実装しました。
  また、ラジオボタンや入力欄はデフォルトからカスタマイズし、疑似要素を用いてサイトのテーマに合ったデザインを実装しました。

  ▾コードを表示

  HTML

                            
  ラジオボタン
  
  <div class="contact__item contact-control">
    <div class="contact-control__head">
      <span class="form-label"
        >法人/個人の選択
        <span class="form-label__required">＊</span>
      </span>
    </div>
    <div class="contact-control__input">
      <div class="contact-control__radios">
        <label class="form-radio">
          <input
            type="radio"
            name="your-type"
            id="type-corporate"
            class="form-radio__input"
            checked
          />
          <span class="form-radio__text">法人</span>
        </label>
        <label class="form-radio">
          <input
            type="radio"
            name="your-type"
            id="type-personal"
            class="form-radio__input"
          />
          <span class="form-radio__text">個人</span>
        </label>
      </div>
    </div>
  </div>
                            
                          

  CSS

                            
  .form-radio {
    position: relative;
  }
  
  .form-radio__input {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
  }
  .form-radio__input:checked + .form-radio__text {
    background-color: #3ea1d1;
    color: #fff;
  }
  .form-radio__input:focus + .form-radio__text {
    outline: #3ea1d1 auto 1px;
    -webkit-box-shadow: 5px 6px 16px 0 rgba(62, 161, 209, 0.32);
            box-shadow: 5px 6px 16px 0 rgba(62, 161, 209, 0.32);
  }
  
  .form-radio__text {
    font-size: 16px;
    letter-spacing: 0.026px;
    color: #3ea1d1;
    border: 1px solid #fff;
    background: #fff;
    width: 80px;
    height: 40px;
    display: grid;
    place-items: center;
  }
                            
                          

• 3.デザインカンプの再現

  

  Figmaのデザインカンプをもとに、PC・スマートフォンそれぞれに対応したコーディングをおこないました。
  PerfectPixelを使用し、余白やサイズ感を確認しながら、デザインの再現性を高めることを意識しました。