制作期間

  • 企画・デザイン

    約3週間

  • コーディング

    約3週間
    HTML/CSS(1週間)
    JavaScript/WordPress(2週間)

使用ツール

Photoshop / XD / HTML / CSS / JavaScript / WordPress / Visual Studio Code

レスポンシブ対応

PC / SP

デザインの目的

  • 本業であるペンションのHPと配色を似せて関連性を持たせる。
  • 販売商品や配送方法、送料などを1ページで把握できるようにする。
  • ショッピングのページは別ページでもわかりやすいようにメニューボタンの側に配置する。

こだわった点

  • 「shopping」のページを自作できないかと思い、「Contact Form 7」プラグインとPHP、JavaScriptを組み合わせて選んだ商品が自動メールに反映されるように作成しました。

制作してみて

  • 余白やフォントサイズ、画像のサイズなど全体的にデザインの基礎が足りていないと実感しました。
  • 情報を見やすくと思ってシンプルを目指したが、情報が足りない印象になってしまったと感じました。
  • 今後更新しやすいようにと作成した「ショッピング」のページは実際作成したら結果的に商品の更新がやりづらくなってしまったため、今後もっと更新がしやすいようにしていきたいと思います。