Works
Case Study

つくって終わりにしない、育てられるサイトへ。

レジャー・観光施設向けのDXチケットシステム「ウラカタチケット」のサービスサイト。ワイヤーフレームからサイトデザイン、ノーコードツール STUDIO での実装、そしてクライアント自身が実績(連携パートナー)を追加・更新し続けられる CMS の構築まで。設計から運用の仕組みづくりまでを、一貫して担当しました。

Role構成設計(ワイヤーフレーム)・UI/UXデザイン・STUDIO実装・CMS構築
Year2025
Domainサービスサイト(B2B SaaS)
Clientアソビュー!(ウラカタチケット)
SurfacePC / SP(レスポンシブ)
ToolsFigma / STUDIO
注目ポイント

つくって終わりにせず、クライアントが自分で育てられる状態をどう渡したか。デザインだけでなく、実装とCMSまで一人で通した理由がここにあります。

ウラカタチケットのサービスサイトのファーストビュー。「最高の顧客体験を支援するDXパートナー ウラカタチケット」の見出し、PC・スマホのシステム画面、有料人気施設シェア67%・導入施設数1400施設・年間チケット販売数1800万枚の実績
ファーストビュー(PC)— レジャー施設向けDXチケットシステム

実際に公開されているサービスサイトです。ブランド名・ロゴ・掲載企業等は各権利者に帰属します。担当範囲は、WF・デザイン・STUDIO実装・CMS構築です。

01 / Overview

DXチケットシステムの、サービスサイト。

「ウラカタチケット」は、レジャー・観光施設向けのDXチケットシステム。チケット販売から受付・管理・分析までをワンストップで担い、多くの施設に導入されているサービスです。本プロジェクトは、その魅力と導入メリットを伝えるサービスサイトです。

わたしは、このサイトを ワイヤーフレームからデザイン、STUDIOでの実装、CMSの構築まで 一貫して担当しました。とりわけ力を入れたのが、公開後にクライアント自身が育てていける仕組みづくりです。

外部システム連携実績セクション:クラウドDBとWebシステム・現場システムをAPIで連携する仕組みを示した図解と、リアルタイムな一元管理を説明する文章
サービスの要「外部システム連携」を、図解で伝える
02 / Challenge

実績は、これからも増えていく。

このサイトには、「外部システム連携実績(ソリューションパートナー)」という、これからも増えていく情報があります。デザインして実装して納品するだけでは、パートナーが増えるたびに制作側へ依頼が必要になり、更新が止まってしまいます。

だから、クライアント自身が実績を追加・編集し続けられる仕組みが必要でした。加えて、デザインをコードなしで忠実に形にすること。「つくる」だけでなく「渡したあと」までを、設計する必要がありました。

03 / Process

設計から、実装、仕組みまで。

つくって渡すだけで終わらせないための、3つの工程です。

01Design

ワイヤーから、デザインまで。

情報設計・ワイヤーフレームから、トーンを整えたサイトデザインまでを一貫して。伝える順序と見え方を、設計の段階から組み立てました。

02Build

STUDIOで、コードなしに実装。

デザインをノーコードツール STUDIO で実装。PC・SPのレスポンシブまで、デザインを忠実に再現しながら、あとから更新しやすい構造で組み立てました。

03CMS

更新できる仕組みを、渡す。

連携パートナー実績を CMS のコレクションとして設計。会社情報や取扱い商品・施設カテゴリー・ソリューション分類を構造化し、クライアントが管理画面から追加・編集でき、一覧や詳細ページへ自動で反映される仕組みにしました。

04 / CMS

クライアントが、育てていける実績集。

「ソリューションパートナー」を、CMSのコレクションにしました。各社の情報をフィールドで構造化し、一覧ページでは取扱い商品・導入施設カテゴリー・ソリューション分類で絞り込み。詳細ページは共通テンプレートに流し込む形にしています。新しいパートナーが増えても、クライアントが自分で追加・公開できます。

ソリューションパートナーを探すセクション:取扱い商品・導入施設カテゴリー・ソリューション分類のタグで絞り込むフィルターと、エルコム・Fujitakaなどのパートナー企業カードの一覧
一覧 — 絞り込み付きのパートナー実績(CMSコレクション)
パートナー企業の詳細ページ(株式会社エルコムの例):会社名・サイトURL・事業内容・取扱い商品・導入施設カテゴリー・ソリューション分類のタグ・導入事例が、共通テンプレートに表示される
詳細 — 会社情報が流し込まれる共通テンプレート
05 / Responsive

PCとSP、STUDIOで両方に。

デザインからSTUDIOでの実装まで担当したので、PC(1440px)とSP(390px)の見え方も、実装しながら詰めていきました。横に組んだ実績や図解を、モバイルでは縦1列に積み直し、どちらでも読みやすく。デザインと実装がひと続きだからこそ、細部まで整えられました。

ウラカタチケットのサービスサイトTOPの全体像(PC)。ファーストビューから導入実績・お悩み・外部システム連携・機能・導入事例・CTA・フッターまでの縦長1枚
PC — TOP全体(枠内をスクロール)
ウラカタチケットのサービスサイトTOPの全体像(SP)。PC版の内容を縦1列に積み直したモバイル向けレイアウト
SP — TOP全体(枠内をスクロール)
06 / My role

自分が担当したこと。

この案件では、設計から運用の仕組みまでを通しで担当しました。情報設計・ワイヤーフレーム、サイトデザイン、STUDIOでのノーコード実装、そして連携パートナー実績のCMS構築(コレクション設計・フィールド設計・一覧の絞り込み・詳細テンプレート)まで。デザインだけでなく、公開後にクライアントが自走できる状態づくりまでを含みます。

担当した範囲
ワイヤーフレーム 情報設計 / IA UI/UXデザイン STUDIO実装(ノーコード) CMS構築 PC+SP対応 Figma / STUDIO
07 / Reflection

つくるのは、更新される“その先”まで。

Webサイトは、公開してからが始まりです。だから、きれいにつくって渡すだけでなく、クライアントが自分で実績を増やし、育てていける状態にすること。設計・デザイン・実装・CMSを一人で通したからこそ、その「渡したあと」までを地続きで考えられました。

サイトそのものより、その先の運用体験を設計する。cotozuが大切にしている「ことづくり」を、まっすぐ実践できた一枚です。

Contact

感想やご連絡は、気軽にどうぞ。

Contact

ほかの制作を見る(Works)