01
BEFORE｜コードを直接編集して更新
お知らせや画像などを変更する際にHTML等を直接編集する必要があり、Webの知識がない状態では更新しづらい運用になっていました。
WEB DESIGN / GRAPHIC / MOTION
club iD
PROJECT OVERVIEW
店舗運営と並行し、企画・Webデザイン・コーディング・WordPress化・運用まで一人で担当したグループ内案件です。現場で感じていた更新・運用上の課題をもとに、店舗側で扱いやすいWebサイトへ改善しました。
01 BACKGROUND & DESIGN POINTS
BACKGROUND
店舗運営を行う中で、Webサイトの更新にはコードを直接編集する必要があり、日々の情報更新に手間がかかる状態でした。
運営側として感じていた課題を、自らWeb制作によって改善する形でリニューアルを進めました。見た目の刷新だけでなく、日々の更新を店舗側で行えることを目的にしています。
DESIGN POINTS
02
改善方針｜店舗側で更新できる設計
デザインの刷新だけでなく、日常的に発生する情報更新を店舗側で行えることを重視しました。WordPress化と更新項目の整理によって、コードを編集せずに必要な情報を変更できる構成を目指しました。
03
AFTER｜WordPressから文章・画像を更新
更新項目をWordPress管理画面から操作できるようにし、日常的な情報変更でコードを直接編集する必要がない運用へ変更しました。
02 WEB DESIGN
イベントスケジュールを中心に、料金システム、アクセス、営業情報へ迷わず進める構成にしました。
TOPページには直近1週間分のイベントを表示し、スマートフォンでは縮小されたカレンダー表示ではなく、縦に読み進められるスケジュール形式へ変更しました。
SCHEDULE MANAGEMENT
WordPress運用設計
更新する人がコードを触らなくても運用できる構造を重視し、文章と画像を管理画面から変更できるようWordPress化しました。
イベント日、曜日、タイトル、出演者、画像、料金、フロア数などを入力項目として整理し、店舗運営で必要になる情報を更新しやすい投稿画面に設計しました。
公開後に自動反映
03 GRAPHIC DESIGN
店舗運営の中で必要となる告知物として、
出演者、イベント内容、ターゲットに合わせて、
多彩なビジュアルを制作。
SNSや店頭で短時間で内容が伝わるよう、
写真・日付・タイトルなどの優先順位を意識したデザインにしています。
SELECT POSTER
04 MOTION DESIGN
SNSでの告知を想定し、イベント内容をテンポよく伝える短尺モーションを制作。
静止画に動きや切り替えを加え、タイムライン上でも目に留まりやすい表現にしました。
05 BRAND TOOLS
- メニュー
- 割引券
- 名刺
- ショップカード
06 EXPERIENCE
店舗運営と制作の両方に関わったことで、見た目を整えるだけでなく、実際に誰がどう更新するかまで含めて設計する重要性を学びました。
現場で感じた課題をWebの仕組みとして改善し、グラフィックやモーションも含めて告知から情報確認、来店までを一貫して考えられたことが、この案件での大きな経験です。
告知
OPERATION
現場で必要な
情報を整理
情報確認
DESIGN
媒体ごとに
伝わる形へ展開
来店
PROMOTION
告知から来店までの
流れを設計
告知
情報確認
来店