トップページ
ページを見る
制作時のポイント
変更前のページはマージンがほとんどなく、どこを見たらいいのかわからない状態だったのでマージンを大きく設定しコンテンツをそれぞれの塊として認識しやすいようにしました。ヘッダーとドロワーにはアイコンを使用し、文字だけの圧迫感を軽減しています。社内ツールのCMSと連携するようにjsonを取得して、それをもとにHTMLを生成するといったスクリプトを作成しています。これにより誰でも更新しやすく、更新に時間をかけないようになったので運用の改善になりました。また、CLS対策を徹底して画像読み込み前にプレースホルダーを用意しCLSを0に抑えています
使用言語
HTML,CSS,JavaScript
店舗ページ
ページを見る
制作時のポイント
店舗課の意見を反映したデザインになります。店舗スタッフの方で更新ができるように店舗用CMSと連携のスクリプトを作成しています。営業時間の変更などを分かりやすくするために各項目で補足の形で表示するようにしています。
使用言語
HTML,CSS,JavaScript,Vue.js
.png)
店舗詳細ページ
ページを見る
制作時のポイント
店舗スタッフの方で更新ができるように店舗用CMSと連携のスクリプトを作成しています。各店舗ごとのセールの告知、祝日などの営業時間の変更、おすすめ商品などを店舗の方から発信できるようにし、こういった店舗の発信から来店の理由になると思い作成しました。
使用言語
HTML,CSS,JavaScript,Vue.js
.png)
アウトレットページ
ページを見る
制作時のポイント
店舗スタッフの方で更新ができるように店舗用CMSと連携のスクリプトを作成しています。店舗の在庫は店舗スタッフが管理しているため、スタッフの入力によって各商品の売り切れ表示が切り替わるようにしています。このページがあることで店舗に行ったけど欲しかったものが売り切れていたということをなくすことができるので、ユーザー体験の向上に貢献しました。
使用言語
HTML,CSS,JavaScript,Vue.js
.png)
ボクシングジムページ
ページを見る
制作時のポイント
出来るだけ申し込みしやすいように軽めのデザインにしました。最初にサポート面を大きく表示させることで安心感を与えるようにしています。また、文章量を調整してがたつきがなくなるようにしました。実際に営業課の方で活動に使用されており、現在でも定期的に施工を行っています。
使用言語
HTML,CSS,JavaScript
.png)
社内ジムページ
ページを見る
制作時のポイント
全体的に緑色をメインカラーに、コンバージョンカラーとしてオレンジを使用し視線を誘導するように作成しています。プランを4パターン用意することで費用感が分かりやすくなるようにしています。問い合わせフォームをページに用意することでひとつのページで完結するようにしています。また、簡単なバリデーションチェックを用意しました。
使用言語
HTML,CSS,JavaScript
.png)
筋肉ページ
ページを見る
制作時のポイント
基本的にあまり時間をかけずにさっと見れることを意識して作成しました。ストレッチや鍛え方が気になるユーザーが多かったのでそれをもとにサーチコンソールや他社を参考にSEO対策をしています。協調スニペットになることもあるページにできました。
使用言語
HTML,CSS,JavaScript
.png)