こんにちは。カミジョウです。

タナカラがWordPressで実現する“モクタツ”のオーダーメイドWebサイトのシステム開発事例、3回目は松本市音楽文化ホールの「料金シミュレーター」です。

松本市音楽文化ホール（音文）のサイトはWordPressで構築し、その中に「料金シミュレーター」を便利な機能として追加しました。

音文はメインホールと小ホールのほか、3つある練習室、音響や照明のほか楽器なども貸し出しています。
これまでは利用料金表をサイトにアップしていましたが、表だけでは総額がいくらになるか分かりづらかったため、「だいたいいくらくらいで借りられるかを分かるようにしたい」「他の施設のサイトで料金シミュレーターを載せているところがあるので、同じような感じで作ってほしい」とご相談いただきました。
そこで、使いやすさを重視し、タナカラならではのUI/UXの工夫を随所に取り入れながら、料金シミュレーターを実装しました。

ポイント① 分かりやすい操作で、料金をリアルタイムに確認

利用目的や施設、曜日などを選んでいくだけで、概算料金がリアルタイムに表示されます。
直感的な操作性と分かりやすい入力画面により、初めての方でもスムーズに利用できる設計です。

ラジオボタンやチェックボックスは、選択時に赤く変化したり背景色が付くなど、視覚的に分かりやすい工夫を施しました。
さらに、施設や練習室の選択肢には画像を取り入れ、利用者が場所をイメージしながら直感的に選べるようにしています。

条件選択でリアルタイムに料金を計算します

ポイント② 必要な項目だけに集中できる画面

初期画面は、練習室や設備などのオプションの詳細項目は非表示にしています。
「利用する」を選ぶと、「練習室1」「練習室2」「練習室3」などの詳細が自動で表示されます。（「利用しない」を選ぶと非表示になるため、常に見やすく整理された画面で操作できます。）
↑初期段階または「利用しない」では練習室や設備のオプション項目は表示されていません

↑練習室で「利用する」を選ぶと、練習室と設備利用料の間に練習室1・2・3と時間の選択画面が表示されます

この動的な表示切替により、利用者は必要な項目だけに集中でき、迷うことなく操作できます。
初めての方でも直感的に使える設計で、UI/UXの工夫により、操作ストレスを最小限に抑えながら効率的に選択できるようになっています。

---

このように対応した料金シミュレーターは、利用者が簡単に概算料金を確認でき、必要な条件だけを直感的に選べるため、スムーズに料金の目安を把握できます。さらに、誰でも使いやすいUI/UX設計もポイントです。
タナカラでは社内にデザイナーとシステムエンジニアがいるため、デザイン面と機能面の両方から相談しながら作り込むことができ、お客様のご要望に合わせて柔軟に調整できるのも大きな強みです。

このような機能は、WordPress以外のホームページでも同様に追加することは可能です。ホームページの環境に合わせて柔軟に導入できますのでご相談ください。