1. HOME
  2. 【美容皮膚科】WordPressサイト制作

【美容皮膚科】WordPressサイト制作

【美容皮膚科】クリニック公式サイト制作

掲載サイト

公式】エクシアクリニック|美容皮膚科|大阪 | 【守口市大日駅徒歩1分】

制作物概要

業務委託にて受注した新規開院する美容皮膚科の公式サイト制作案件です。本案件は先方の都合に伴い、WordPressテーマ「CURE」を古カスタマイズする形でサイトを制作しました。

担当役職

  • ディレクター
  • デザイナー
  • コーダー(マークアップエンジニア)

本案件のポイント

本案件を担当する上で特に重要視したポイントは「わかりやすく確実に効率よく情報を把握する」「納品後にクライアントが不便なくサイト運用をできる」の2点です。
この2点を実際に行うために、「マインドマップ・ヒアリングシートの使用」「サイト更新をしやすく不備が起こりにくい状態を構築」「サイトを運用しやすくわかりやすいダッシュボード・管理画面の構築」を実施したため、詳細をご紹介いたします。

マインドマップ・ヒアリングシートの使用

本案件をご依頼いただく際、より依頼要項を詳しく把握するためにクライアントへヒアリングシートの回答を依頼しました。ヒアリングシートでは基本情報からはじまり、事業情報、依頼背景、依頼要件、サイト上で扱う情報詳細、ターゲットユーザー、デザイン、コンテンツ素材の提供可能・不可能までを記入していただきます。

口頭で確認しても問題ない内容ではありますが、口頭でのやりとりでは抜けが生じやすい点と、クライアント自身に文字としてクライアント側の情報を確認・認識してもらうことで後々発生しやすい齟齬を防ぐ目的でヒアリングシートへの回答を依頼しています。

また、ヒアリングシートに回答していただいた内容と事前に共有されていた情報、こちらからの提案内容をまとめたマインドマップを制作し、情報を全体的に網羅できる状態を整えてからタスク整理・スケジュール調整などを行いました。

以下の画像は実際のマインドマップで記載した「美容皮膚科の集患施策」に関する概要です。基本的には以下の画像のようにメリットや選択肢、実施内容を細かく記載することで、クライアントが「わかる」説明を意識しました。

見た目の印象と分かりやすさを重視したサイト制作

本案件はWordPressテーマ「CURE」をベースとして各所で機能追加やカスタマイズを行って制作しました。カスタマイズ・追加事例の一部をご紹介します。

フォント・見出し・ボタンの見た目変更

お悩み別メニューの表示調整

【美容皮膚科】クリニック公式サイト制作 カスタマイズ例TOPページお悩み別1

TOPページに表示される「お悩み別に探す」の表示をCUREのデフォルトから、細かい要素ではありますが調整しました。CUREのデフォルトでは各メニューの説明文が3行までしか表示されず、それ以降は「…」で省略されます。この部分を4行まで表示できるようにし、その上で「…」で省略されることがないように調整しました。

【美容皮膚科】クリニック公式サイト制作 カスタマイズ例TOPページお悩み別2

またCUREのデフォルトのスマートフォン表示では横2列で各メニュー画像・説明文が並ぶようになっていましたが、4行目まで表示できるように調整した事でデフォルトのままでは縦長になってしまうため、スマートフォン表示では説明文を非表示に調整しました。

施術詳細ページへの「こんな方におすすめ」 「詳細な料金表」 「注意点」追加

【美容皮膚科】クリニック公式サイト制作 カスタマイズ例おすすめ追加

Image 1 of 3

女性であっても男性であっても、美容皮膚科は皮膚科とは違いあまり接点がない方が多い傾向にあります。そんな方でも不安なくクリニックの予約をしていただけるよう、CUREのデフォルトページにはない「こんな方におすすめ」「詳細な料金表」「注意点」の3つを導入しました。

美容皮膚科は提供する施術の特徴柄、施術を検討している方が事前に把握しておくべき、把握しておきたい情報が多いです。CUREのデフォルトページではクライアントが見込み患者様に事前に知っておいていただきたい情報を伝えられないため、きちんと情報を伝えられるページを目指しました。

サイト更新をしやすく不備が起こりにくい状態を構築

ニュース以外で開院までにもっとも更新頻度が高いコンテンツは「施術詳細」です。施術詳細ページに表示する情報としては、以下の4つがあります。

施術詳細ページに記載・表示する情報
  • こんな方におすすめチェックリスト
  • 施術についての説明文・参考画像
  • 施術料金(各施術ごとの詳細料金)
  • 施術を受ける上での注意点

CUREのデフォルトのページ構成を使っていれば入力欄などは既に用意されているため、更新に手間取ることはないでしょう。しかし、本案件の施術詳細ページは半分以上が独自構成になっているため、CUREのデフォルト入力欄は使用できません。

そこで今回は、カスタムフィールドに値を入力していけば、誤字脱字の可能性を下げた状態で簡単に更新ができる状態を整えました。実際の例としては以下のような状態です。

【美容皮膚科】クリニック公式サイト制作 カスタマイズ事例【こんな方におすすめ】

Image 1 of 2

純粋にテキストだけを入力すればいい項目は数を自由に増減できるテキストボックスのカスタムフィールドで更新できる状態にしました。

施術料金の料金表に関しては、ただテキストを入力するだけではなく、各施術に分類されるそれぞれのメニュー名、料金、料金単位(1回、単発など)を記載する必要があります。また、各施術分類ごとにメニュー数も単位も料金も異なるため、任意の数の各メニューそれぞれの料金・単位を入力できる細かいカスタムフィールドを組んで構築しました。

なお、カスタムフィールドを読み込むためのPHPを記載する際、地味な項目ではありますが「入力された値が文字列なのか数値なのかを分類する」「値に数値が入力された場合には,を入れなくとも自動で,を付与する」「data-labelへの単位自動入力」「入力された値が数値の場合のみ末尾に【円】をつける」という仕様を実装しています。これらを実装することで誤字脱字や入力漏れが発生しなければ幸いです。

先述したのは、料金形態が1パターンのみの場合の構築です。例として挙げると、「高濃度ビタミンC点滴」では「高濃度ビタミンc点滴(6mg)」の料金形態が1回・5回・10回に分類されているため、先述したカスタムフィールドより細かいサブループを組む必要がありました。そのため、サブループが組まれているカスタムフィールドでは、スライド2枚目のように細かく各単位ごとの料金が設定できるようになっています。

【美容皮膚科】クリニック公式サイト制作 カスタマイズ事例【料金表】

Image 1 of 2

サイトを運用しやすくわかりやすいダッシュボード・管理画面の構築

本案件のクライアントは「慣れればいけるものの、現状WordPressには慣れていない」ため、納品後にクライアント側で運用しやすい状態を整える必要がありました。そこで行ったのが「ダッシュボードの構築」「各メニューの表示切り替え及び表示形式調整」「マニュアルページの構築」の3つです。

ダッシュボードの構築

WordPress管理画面にログインすると、一番最初に表示されるのがダッシュボードです。多くのWordPressサイトのダッシュボードの場合、デフォルトのウィジェットや導入しているプラグインのお知らせが表示されていることが多いと思います。このダッシュボードの時点でショートカットとなるメニューを表示すれば、より早く目的のページに辿り着くことが可能です。そこで行ったのが、ダッシュボードに表示するオリジナルウィジェットの追加でした。

使用頻度や更新頻度が多いページの編集画面への直接リンクをウィジェットで組む込むことで、より効率的にサイトの更新・運用ができる状態を整えています。また、本案件のクライアントはGoogleマイビジネスを運用しているため、サイト更新のタイミングでGoogleマイビジネスを更新できるようGoogleマイビジネス編集画面へのリンクもダッシュボードに埋め込んでいます。

各メニューの表示切り替え及び表示形式調整

この画像は、現在ご覧いただいている私のポートフォリオの管理画面です。慣れているからどのメニューか分かるというのと、非表示にした時の再表示の手間を考慮してほぼ無編集の状態となっています。

しかし、WordPressに不慣れな方はこんなに多くメニューがあっては、どのページへのリンクなのか分かりにくいです。また、構築しているPHPコードなどを触ることがなく、サイトに表示している情報の修正・更新のみを行う場合には不要なメニューであることも多い傾向にあります。そのため、今回のサイト構築では権限を分けてクライアントのアカウントでは以下のように表示されるようにしました。

サイトの修正・更新のみでは不要なメニューを非表示にするだけではなく、デフォルトのままでは少しわかりにくい「メディア」というメニュー名を「画像」に変えたり、各メニューアイコンをイメージしやすいものにしたり、不要な更新通知を削除したりと細かく設定することで、わかりやすい管理画面を実装しました。

マニュアルページの導入

本案件はサイト構成の要となる「診療メニュー」「お悩み別に探す」がそれぞれ仕様が異なるカスタム投稿で構築されています。また、他のページやCUREのデフォルト機能の編集方法がわかりにくいため、本案件では細かくマニュアルを作った上で、管理画面からブラウザ上で確認できる各マニュアルをまとめたマニュアルページを構築しています。
メニュー上部にマニュアルページを表示させ、ダッシュボードにも表示することで納品直後にクライアントが不安・不便なく更新できる状態を整えました。

制作期間

2週間

誰よりも「わかりやすい」Webサイト制作を

せりぽよではお客様のご要望を「実現」させるための丁寧な提案を行っております。
「 ちょっとしたリニューアルをしたい」というご要望も承りますので、まずは一度ご相談ください!

制作実績

制作実績一覧