オーラルケアサロンのwebデザインを担当しました。
今回は、歯科医院の医院長先生が「オーラルケア専門のサロンをオープンする！」ということで、HPを制作させていただきました。審美歯科治療に特化したサロンです。
完成HP：
※納品後は、医院のスタッフさんがコードを触っているため、ちょいズレあり。
今回は、UIデザインだけでなく、どういった女性にどのようなコースが魅力的なのかといった患者さんへのアプローチや、サロンのコース選定なども参画させてもらいました。
どういう状況でスタートさせたのか、という余談。
S先生、Y先生、私を含む3名でHPデザインを進め、エンジニアはishikawaさんにご依頼させていただきました。（全員が優秀すぎて、緊張、、、）
院長のS先生は、歯科免許を取得後、インプラントメーカーに勤務し、ゴリゴリマーケティングを勉強されています。「良い治療を効率よく広めていく」という人生のテーマに、開業後も色々な分野に精通しながら歯科に関わるあらゆる事業を展開、”人生の幅が違いするな” と痛感。。。
マーケを担当してくださってる方もこれまた歯科免許を持っているY先生。
Y先生は教授業務をこなしながらドクターも兼任し、医院のマーケティングを行なっています。（本当にできる人はなんでもできるなと思う）コーディングなどの知識にも精通しており、業務がいつもよりスムーズに進んでいたように感じます。
ということで、非常に勉強になる案件でしたので、noteにまとめていきたいと思います。
情報
使用ソフト：Adobe XD
作業期間：2021年 7月中旬〜9月中旬
オープン予定：9月下旬
ターゲット：（30代）40代〜女性（年齢が上の方が現状多い）
∟安い施術ではないので、どうしてもお財布が潤っている年齢高めのお客様が多い（そして美意識が高い！）
構想段階
今回開院したのは、審美歯科治療をメインに行うサロンです。
ホワイトニング、矯正、リップアートなど。
もともと歯科医院でにやっていた施術でしたが、審美歯科治療に特化した空間を作りたい、ということで始まりました。
（ちなみに私もホワイトニング、矯正、リップアート全てやってみましたw）
この施術は口元と顔の美しさに焦点を当てた医療ですが、最初のヒアリングで以下のような内容が浮き彫りとなりました。
課題：
・予算が高く、歯科治療する以上のメリットを謳いきれない
・どういった施術があるのか患者さんに伝わってない
・女性の美に対するお悩みは多岐にわたるため、把握できていない
どうしていきたいか：
・納得のいく説明をして、衛生的な環境下で施術できるサロン作り
∟それをしっかりとホームページで伝える
・非日常と感じる美容技術をもっと身近に感じてもらう
・細かいインサイトを調べたい
step1（調査）
審美歯科治療においての主な課題は「予算」と「ハードルの高さ」。
高予算であるほど、何かきっかけがないと人は動きづらいものです。
痛みや時間といった施術内容も普通はわからないもの。
そのため、私たちは治療を検討するまでのストーリーを仮定付けていきました。
＜女性が美を意識するきっかけとは？＞
・結婚式
・大好きな彼とのデート前
・産後の時間のなさ
・家事育児で大忙しのママのふとした瞬間
・露出の多い夏前
・疲れている時 ・・・etc
＜「美」を意識した時、どんな理想を考える？＞
・結婚式
∟この日は自分が主役であり被写体となるので、体のスタイルはもちろん、笑顔が綺麗だったり、小顔にしたかったり。
・大好きな彼とのデート前
∟デイリーなことなので、多額の投資は出来ないけど、見合った価格で顔脱毛やホワイトニングをして日々の「綺麗」を維持したい
・産後の時間のなさ
∟産後は本当に女性は時間がない。。。化粧やケアをする時間なんてもってのほか。刻んで寝るのが精一杯。お化粧をしてなくても綺麗でいたい。
・家事育児で大忙しのママのふとした瞬間
∟まずは子供、家事が優先。もはや自分ができる美ってなんなんだろう。。。そこから相談したい。。。
・露出の多い夏前
・疲れている時 ・・・etc
美意識のきっかけはさまざまですが、今回のサロン立ち上げに関わるメンバーが全員女性だったこともあり、ここは多くの意見を吸い上げることが出来ました。
結果的に以下のようなコースに決定。
・ブライダルケア（結婚式）
・デイリーケア（日々）
・スペシャルケア（結婚式以外のイベント前）
・マタニティ（出産）※後日追加
・ママ（家事育児）※後日追加
（こう見ると女性って常に綺麗でいたいんだなって思いますよね）
「美」を意識してから離脱せずに次のステップに進むためには、自分に合ったメニューが一目で伝わることが大切だったので、ストーリーづけてセットメニューを５つに分けました。
人によっては、逆にセットにすると不要なコンテンツも出てくるので、一つ一つ選べる単品対応も加えてカウンセリング付きで選定を可能にしました。
（ここの医院は立地や全個室という優位な条件が揃っていたので、コロナ禍やアクセス面でいっても通いやすいサロンになりそうだな、というのはメリットでした。）
step2（HPの構成）
元々医療をメインにしている歯科医院のサイトをWPで作成していたので、そこのサイトの「サブディレクトリ」にするか、「サブドメイン」にするかを確認。
サブドメインでの運用をすると、医院サイトの影響でアクセス数が増える可能性もあったのですが、
1:このタイミングでseoの評価が変わったこと
2:管理を別にしたい
という2点から今回はサブディレクトリでの運用となりました。
【1】サブディレクトリ：http//www.xxxxxxxxxxxxx/xxxxxxxxx/
既存サイト内に詳細コンテンツのWebサイトを立ち上げるイメージ
（同じ業務やサービス内容の中でジャンルを詳細に分けているサイトなど）
【2】サブドメイン：http//xxxxxxxxx.xxxxxxxxxxxxx
新たな別コンテンツのWebサイトを立ち上げるというイメージ
（同じ会社やブランドでも、別の事業を扱うサイトなど）
ブログのような投稿機能：
入れたほうが集客するにはおすすめだったので、ここはスタッフのみなさんに頑張ってもらうようお伝えしました。（投稿マニュアル等も作ってあげるととても親切）
問い合わせフォーム：
歯科医院のHPでは、スパムや迷惑メールがたくさん来てしまうため、予約は電話or LINEという形にしました。（よくよく見ると確かにエステとかのサイトもそういった予約方法はありますね）気軽に問い合わせができる、というのも一長一短。
step3（デザイン）
希望に近いサイトをピックアップし、先生方とトンマナの方向性を合わせつつ、予算と実装条件をすり合わせていきました。
モーションにこだわりすぎない
パララックスなど希望もあったのですが、モーションにこだわり出すとドツボにハマるのでそこだけ気をつけるように進めていきました。
（▼「パララックス」は要素が動いたり、アニメーションさせたりする挙動
https://web-kanji.com/posts/parallax-design）
本文はできるだけ改行しないこと
SPファーストの時代であり、デバイス・ブラウザも様々。メンテナンスが大変＆全ての環境で都合良く行かないので、改行はできる限り避ける。
（追記：グラフィックの癖で同してもトラッキングなどが気になってしまうけど、テキストにする場合は、「HPはこういうものだ！」と割り切る。KVなど目立つ部分は、画像にしてしまう。）
２行を想定する
1行と2行が混在する際は、2行を想定してデザインすること。
もしくは、全て１行になるようにリライトする。ただし、レスポンシブで結局２行になるタイミングが出てくるので、前者が有効。
スマホの解像度で考える
PC版で見るときは並列も多いけど、スマホは安全性やメンテナンスを考えると積み上げ型のデザインになりやすい（というかほぼそれ）。
また、PC画面で拘りがちですが、今はスマホで見られることが9割。出来るだけスマホファーストでデザインの初稿を考えるようにしています。縦に積み上がっていくことについては意外とそこまでストレスにならない。
step4（SEO、SNS）
集客を意識してHPをデザインするためには、「SEO」と「SNS」の両輪があって初めてWEBサイトが成り立つ、ということ。
SNS運用の価値は高い
今時点では、SEOはSNSからの流入も関係しているので、今後を見据えてInstagramを併用して進めています。
（ちなみに、webデザイナーがこれから息長く生きていくためには、「webデザインできます！」より「SNS運用もできます！」の方が価値が上がっていく時代。SNS中心で仕事の軸を考えることはgoodなんじゃないかと感じています。インスタも、Tik Tokも、ピンタレストも、noteも、もちろんTwitterも。使えるものはどんどん使ってゴリゴリ活用していくのが1番ベスト。（ただ、私はそこまで余力がないので、自分の発信はInstagram、noteに絞っています。Twitterはnoteを書いた時の発信くらい）結論、若干精神論でもあるが、気合と手間が大切w）
ネガティブな発信は画像に
ここは、人それぞれだと思いますが、例えば可能性を伝えるときにどうしてもネガティブな要素が含まれる文章をブログに書かないといけない時があります。その場合は、Googleに認識してもらわないために画像にして添付したりという方法もあリます。
補足：
LPにSEO意識は必要か。
→SNSでバンバン告知したら違うかも？だけど基本的にはデザイン重視でもいいと思われる。
step5（対エンジニア）
ここは常に私の中でも課題ではありますが、この辺りは気をつけておこう、という部分をピックアップしました。
デザインの幅は1020〜1200がベスト
PCでサイトを見るときは100%ブラウザを広げてみることは少なく、常に80%くらいでみて他の作業をしていたりすることがほとんどなので、1020〜1200くらいがgoodです。いろんな環境で見ることを考えるとブレイクポイントを早めにしてスマホに切り替えるなど工夫をする。
現在はタブレットとスマホを一緒にしてタブレットは切り捨ててくパターンもあります。（タブレットユーザーで見る人は1〜５％程度）
「コーダーの工数」と「デザイナーのやりたいデザイン」の戦い
いくらデザインを細かく作っていても、コーダーさんの判断で工数を減らすために（表現しやすいように）少しデザインを変えてしまうこともあります。コーダーの工数を考えると簡易的なデザインになってしまうし、デザイナーの細かいデザインを表現すると時間と手間がかかります。特に、デザイナーがやりたいことだけを詰め込んでいくと予算が上がっていって、クライアントとの予算調整も入ってきます。こういった部分も常にすり合わせが必要なポイントです。
もちろん、コーダーさんの中にはデザインの再現性を重視してくれる人も多くいます！
step6（その他）
HP制作も終盤に差し掛かり、以下の項目も進めていきました。
①ファビコン
ウェブサイトのシンボルマーク・イメージとして、ウェブサイトやウェブページに配置するアイコン
②ページごとのタイトル
カーソルを合わせた時に出てくる文章
③ページごとのメタディスクリプション（ページの説明文 全部作った方がアクセス上がる可能性あり）
④OGP画像
FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素
⑤Googleマイビジネスの設定
備忘録：
・Googleの検索のブロック解除すると→後日登録される（即日ではない）
・WPのログイン情報はデフォルトだと攻撃されやすいので、PWとは別で確認を入れる
まとめ
ここまで私の作業の流れを踏まえてまとめてきました。
HPを作り上げるまで、本当に色々な決定が必要だなと痛感。。。
自分のサイトを見ていくのが勉強になる
今回は、ご依頼いただいた案件でHPを作成しましたが、SEOの勉強についてはすぐに上がるものではないので、作って分析、修正して分析、改善して分析。その積み重ねなので、自分のサイトを作成して長期に亘り見ていくのが1番の勉強になったりします。
デザインとはブランディングの仕事である
今回は、費用をかけて現状のワード検索等も調査。（ここまでするかはその時の温度感にもよりますよね。デザインの良し悪しが重要な時もありますし！ただ、構成や流入まで考えられるデザイナーは少ないので、個人的にはここまで網羅できるデザイナーにはなりたい！）
SNSもデザインもブランディングの仕事である、ということ。自己ブランディングができなくて、他人のブランディングはできるという理屈は通らないと痛感しました。
ここまでお付き合いいただき、ありがとうございました。
今後HPを作成していく上で個々の流れに沿って作ればある程度取りこぼしはないのかな、と思います^^
ぜひ皆さんも参考にしてみてください！
この記事が気に入ったらサポートをしてみませんか？