Works 一覧へ

PROJECT 01 / CLIENT WORK / WEBSITE RENEWAL / WORDPRESS

オダギリジムWebサイトリニューアル

ジムの魅力と、通い始めるための情報を。
既存サイトを見直し、構成から実装まで整えました。

オダギリジムのリニューアル後のWebサイト

OVERVIEW制作概要

既存サイトの課題を整理し、情報構成・デザイン・導線を見直したリニューアルです。HTML / CSS / JavaScriptで構築した後、WordPressオリジナルテーマとして実装しています。

制作区分
実案件 / リニューアル
サイト構成
複数ページのWebサイト
担当
Planning / Design / Coding / WordPress

BACKGROUND制作背景・目的

旧サイトでは、写真の上にキャッチコピーや料金、実績の数字が大きく重なり、最初の画面に多くの情報が集まっていました。伝えたい内容は残しながら、ジムの特徴を知ることと、体験を申し込むことの順序が分かるように整理しました。

ROLE担当範囲

既存サイトの情報整理から、ページ構成、デザイン、HTML / CSS / JavaScriptでの実装、WordPressオリジナルテーマ化まで担当しました。画面の見た目とサイト全体の導線を、一続きのものとして考えています。

DESIGN / CONCEPTデザイン・設計方針

ファーストビューではコピーと写真の領域を分け、写真に文字が埋もれない配置にしました。青を軸に色を整理し、体験予約のボタンは見つけやすいアクセント色に。見出しや余白の使い方をそろえ、詳しい情報を落ち着いて読める構成を意識しています。

BEFORE / AFTER情報と見せ方を、整える。

既存サイトの内容をもとに、初めての方が知りたい情報の順序、写真の使い方、各ページへの導線を見直しました。旧サイトとリニューアル後の画面を並べてご覧いただけます。

BEFOREリニューアル前
オダギリジムのリニューアル前の画面
AFTERリニューアル後
オダギリジムのリニューアル後のPC画面

POINT工夫したところ

  1. 情報の役割を整理する

    ジムを知るための情報と、利用を検討するための情報を整理。初めて訪れた方が、概要をつかんでから詳しい内容へ進める順序を考えました。

  2. 写真と説明のバランスを整える

    施設の魅力を大きな写真で伝えつつ、料金や利用に関する説明を埋もれさせないよう調整しました。スマートフォンでは、上から順に読み進めやすい配置を意識しています。

  3. 静的な実装からWordPressへ

    まずHTML / CSS / JavaScriptで画面と動きを組み立て、その後WordPressのオリジナルテーマとして実装しました。

SCREENPC / SP画面

DESKTOP
オダギリジムのPC画面を大きく見る
MOBILE
オダギリジムのスマートフォン画面を大きく見る

画像を選ぶと、大きな画面でご覧いただけます。

TECH使用技術

  • HTML
  • CSS
  • JavaScript
  • WordPress

VIEW SITE実際のサイトを見る

静的デモを見る ↗(新しいタブで開きます)

リンク先は、リニューアル後の静的デモです。