今回はサイトができるまでの弊社メディカルデザインで病院のサイトがどのように作られているのかを新人コーダーの小島の目線からご紹介いたします！

サイトができるまでをご説明するために次の3つのステップでご紹介いたします。

1. ディレクション
2. デザイン
3. コーディング

（1） ディレクション

どのようなサイトを作成するかどのようなイメージのデザインにするかなどをディレクターがお客様と相談してディレクションしていきます。
 
お客様と綿密にミーティングし、ヒアリングをした上で、弊社のディレクターからご提案をさせていただきます。
まず、どういったサイトにするか、どのような見積もりになるか、おおまかなスケジュール感をご提案します。
場合によっては病院まで赴き、インタビューや撮影を行うこともあります。弊社では取材・撮影・原稿の作成までワンストップで作成することが可能です。この取材の進行や原稿の作成もディレクターさんが担っています。
次にデザインをご提案いたします。弊社ではデザイナーが作成した案の中からよりお客様の理想に近いページをお選びいただき、そのイメージに沿ってより具体的なページの内容を細かく決定していきます。
 

そしてシステム的なことを決めていきます。どのサーバーを使用するか、どのようなシステムを導入するかをわかりやすくご提案し、お客様にとって最適な方法をご提案します。
その上で最終的な見積書と公開までのスケジュールを作成しご提案させていただきます。
 

また、制作スケジュールを作成し、期日までにサイトを公開できるように全体を管理するのもディレクターのお仕事です。
私もディレクターさんのおかげでサイトの制作が円滑に進み、高いクオリティのサイトを納期までに公開できているのだなと日々実感しております。
制作中も密にお客様とのミーティングを重ね、意見を取り入れつつ、全体のイメージを整える司令塔として弊社のディレクターは活躍しております！

（2） デザイン

サイトの視覚的な部分において大きな役割を担っているのがデザインです。
いただいた原稿を元にディレクターと話し合いながらデザイナーがデザインを作成していきます。
 
まずはお客様からいただいた写真を選定し、写真を現像（Adobe LightroomやAdobe Photoshopを使用して写真の色味やクオリティを整える作業）します。
 

次にお客様のイメージに沿ってサイトの配色を決定していきます。色はなるべく使い過ぎず、ユーザーが情報を得るために邪魔にならないよう工夫をしていきます。
弊社では主に病院のサイトを作成しているため、どんなユーザーにとっても使いやすいことや正確な情報を的確に得られるよう工夫しております！ デザイナーさんとお話させていただいた際におっしゃっていたのですが、色だけでアイコンの違いを作るのは色彩判断の配慮に欠けているため、なるべく控えるようにしているそうです。
そういった細かい配慮がサイトのクオリティを作っているのだなと感じました。
 

そして実際にデザインの作業に入っていきます。弊社ではAdobe Photoshopを使用してデザイナーがデザインを行っております。まずトップページとサンプルページの作成を行います。サンプルページとは下層ページを作成するために必要なパーツ（見出し、リンク、リスト、ボタン、テーブルなど）と下層ページ共通の部分（header、footer、タイトルなど）をまとめたページとなっております。
そしてその次に特別なデザインの入っているページの作成に入っていきます。フォームやスタッフ紹介など、サンプルページで作成した部品だけでは補えないデザイン性のあるページは別にデザインを作成することが多いそうです。
 

コーダーがコーディングするユーザーが使いやすいデザインを作成することも重要なポイントです。そのための工夫としてAdobe Photoshopのグリットを敷いてデザインしているそうです！コーディングはピクセルごとに行っているため、小数点が発生しないデザインになるよう、グリットを敷いているとのことです。また、画像を書き出す際にわかりやすいようレイヤーを部分ごとにグループ化するなどの工夫をしてくださっています。
デザイナーがチームワークを考えながら幅広い視野でよりサイトの基礎を作り上げることでユーザー満足度の高いサイトが出来上がっていきます！

（3） コーディング

実際に公開されるサイトの実装をコーダーがコーディングしていきます。

まず、ベースをコーディングするコーダーはサイトの環境を構築していきます。
新しくサイトを作る際やリニューアルする際は、開発環境のサーバーとドメインで開発環境を作ります。
 

次に複数のコーダーで作業しても問題が発生しないようにGithub（オンライン上でソースコードや変更履歴を共有・管理できるサービス）のリポジトリーを作成します。Githubを使うと他の人が行ったコーディングとバッティングしてデータが巻き戻ることを防ぐことができます！コーディングはチームで行うことが多いので、とても重要なツールです。
そして、ページのコーディングに入っていきます。ベースをコーディングするコーダーははじめにデザイナーが作成したサンプルページを実装していきます。サンプルページを先に作ることで下層ページが作りやすくなるためです。

更新のあるサイトの場合は、Webに関することについてあまり詳しくないご担当者様でも簡単に更新できるよう、Wordpress（簡単にブログやWebサイトを更新できるソフトウエア）を導入することが多いのですが、サンプルページでコーダーが実装した部品はWordpressを更新する際にも大活躍します。もちろん使い方をわかりやすくご説明したマニュアルをお渡ししますのでご安心ください！
 

準備ができたら、ページのコーディングに入っていきます。必要なデータをPhotoshopから書き出して集めます。この時実際に表示される二倍のサイズで書き出すことで、スマホやタブレットでもきれいな画像を表示することができます！
また画像はWebpというGoogleの新しい形式の画像に変換して使用しております。画像サイズが軽くSEOでも有利に動くというメリットがあるためです。
 

必要な画像をそろえたらheaderやfooterなどの全体で共通の部品を実装していきます。出来上がったらサンプルページのコンテンツのコーディングに入っていきます。
先ほどWordpressを更新する際にも大活躍するとお話したように、Wordpressを導入するサイトの場合はこの部品を実際にWordpressで使用できる部品にするという工程も必要になっていきます。
サンプルページが実装できたらトップページと下層ページのコーディングに入っていきます。多くの場合、ベースを構築したコーダーがトップページを担当し、下層ページは量があるので分担して行っていきます。
 

コーディングする際、コーダーはただデザインを再現するだけでなくUIを考えながらコーディングしております。マウスをホバーした時の変化や選択範囲、アニメーション、スマホサイズの表示など自分で考えてコーディングすることもあります。ディレクターやデザイナーに確認しながらユーザーにとって使いやすいサイトになるよう、私も日々努力しております！
 

ページが作成できたらシステムチェックを行い、本番のサーバーを設定して順次公開していきます！

まとめ

今回は3つのステップに合わせてメディカルデザインのサイトができるまでをご紹介いたしました！それぞれのチームワークがあってこそ、今まで多くの高いクオリティの制作実績があるのだなと感じました。
私自身はまだまだ未熟な点が多いので経験を積みながら先輩方のように活躍できるよう努力してまいります！
弊社の制作実績はこちらからご確認していただけますので、病院のサイトの制作やリニューアルなどをお考えの方はぜひご一読ください。
こちらから

こんにちは、デザイナー兼ディレクター見習いの中野です！

私は普段、三澤のアシスタントとして、クライアント様との打ち合わせや定例会に同席する機会があるのですが、サイト公開後のサポートについて質問をいただいたり、議題に挙がることがしばしばあります。

弊社は医療業界特化のWeb制作会社として、これまでで300件以上のサイト構築実績がありますが、その中の大半のクライアント様と「保守」および「運用」の契約を結んでいます。

Webサイトは制作・公開までがゴールではありません。
適切な措置を行わなければ、折角お金を費やして制作したサイトなのにも関わらず訪問者が伸び悩んでしまったり、場合によってはサイトそのものが表示されなくなる可能性があるのです。

そのように大事な存在である「保守」と「運用」、前者に関してはシステム担当者が主導となって行っていますが、後者に関しては更新やアクセス解析という業務を通して、私自身も高い頻度で携わっています。
そこで今回は、弊社が実際に行っている「Webサイトの運用」についてお話ししたいと思います!

Webサイトの「保守」と「運用」

いきなり運用について触れる前に、そもそも「保守」「運用」とは何かについて軽くご説明します。
 

「保守」とは？
 

「保守」を英訳すると”maintenance”つまり、「メンテナンス」となることから、こちらに関しては何となくイメージしやすい方も多いのではないのでしょうか？

Webサイトにおける保守作業を端的に表現すると
「訪問した人がWebサイトを安全かつ正常に閲覧できるように行うメンテナンス」
のようなものだと思います。
 

具体的な業務内容としては、契約済みのサーバおよびドメインの更新や、セキュリティ対策、WordPress等のCMSのバージョンアップ……が挙げられます。
例えば、サーバやドメインの契約更新を怠ると、Webサイトそのものが公開できなくなってしまいますし、セキュリティに欠陥があると、サイトを公開している側のみではなく訪問者側にも被害が及びます。
そのような状態にならないためにも、日々責任をもって保守業務に携わっています。
また、Webサイトにおける重要なパーツの一つに「フォーム」があります。
例えば、ある病院への就職を考えている人がいたとして、そのサイトの応募フォームが正常に機能しなかったとします。
そうすると、その人にとっては「応募ができない」という点で、病院側としては「人材を取りこぼす」というところで、双方にとっての損失となりますよね。
 

このように、フォームはサイトへの訪問者と企業（病院）を繋ぐための存在であり、弊社ではこれらが問題なく機能しているか確認するための「フォームチェック」も毎週実施しています。
さて、ここまでで「保守」について簡単にご説明させていただきましたが、Webサイトを公開し続ける上で非常に重要な存在だということをご理解いただけましたでしょうか。
もちろん、弊社で行っている業務は他にもありますが、こちらに関してはまたの機会に深堀できたらと思います。

 

「運用」とは？
 

次に、今回のメインとなる「運用」についてです。
Webサイトの「運用」と聞いて、具体的に何をすることがすぐに思い浮かびますでしょうか？「保守」との違いが少し曖昧だと思う方もいらっしゃるのではないでしょうか。

運用に含まれる業務は多岐に渡りますので、一言で表すのはちょっと難しく感じますが、個人的には
「サイト制作の目的を達成させるための取り組み」
だと認識しています。
 

というのも、そもそもサイトの新規制作やリニューアルは、大抵何かしらの目的があって行われます。
例えば、弊社はメインとして病院様のサイト構築に携わっていますが、病院そのもののサイトでしたら、「集患・増患」や「知名度の向上」、採用サイトなら「応募者数の増加」などを最終的なゴールとして掲げているクライアント様が多く見受けられます。

ですが、いざ新しいサイトを公開した時点で、すぐにそれらが達成できるケースは稀です。
なぜなら、私たちは訪問してほしいターゲット層を想定し、そこに合わせたサイトを制作しますが、あくまでもそれらは「想定」でしかないからです。
ですので、実際に公開してからでないと分からないユーザーのニーズや動きというものが必ず出てきます。

 

また、日々トレンドやユーザーのニーズは多様化しています。
どれだけその時代の最先端のデザインを用いて最新の情報を載せても、手を加えず放置したまま数年経てば、デザインも情報も「古いもの」と見做されてしまいます。
当たり前のことですが、ユーザーはそのようなサイトよりも、自分にとって有益だと思うサイトを選びますよね。
アクセスが無ければ、目標達成が困難になりますし、そもそもサイトを公開した意味も薄くなってしまいます。
 

つまり、目的を達成するためには、サイトを常に進化し続けるべきなのです。
そのためには、現在のサイトの状況を確認し、そこから課題を発掘して解決策を講じる必要があり、運用業務とは目的達成のために行う様々な作業のことを指します。

 

弊社が行っている運用業務

 

ここからは、弊社が行っているWebサイト運用の詳細についてお話ししたいと思います。
弊社では大きく分けて「更新業務」「アクセス解析」とそれに伴う「コンテンツの追加」を行っておりますので、
これらを深堀りしていきます。

更新業務
 

更新に関しては弊社からご提案する場合と、クライアント様からご依頼いただくケースがありますが、ここでは後者についてお話します。

弊社で行っている更新業務の中で、一般的な企業様と共通するようなものですと、サイト上のテキスト修正やPDFの差し替え、お知らせの更新などが挙げられます。
これらに加えて、病院サイトで掲載している外来担当表の情報を更新したり、先生方のブログやコラムの管理なども承っており、もう少し大きめのものですと、新規ページやドクターインタビューの追加、フォームの作成などもございます。
これらの更新は通常、Backlogというプロジェクト管理ツールを介し、「課題」という形でクライアント様よりご依頼いただきます。
この「課題」は弊社とクライアント様の間で管理され、依頼から完了報告までのやりとりの全てをBacklog上のコメント機能で行っています。

Backlogを使用するメリットはいくつかありますが、メインとしては下記の三点でしょうか。
 

・送受信したコメントは全て履歴が残り、関係者全員が見ることができるので、双方での情報の食い違いが防げる
・弊社担当者と直接やりとりをすることができるため、ご不明点や追加のご要望等が出た際も柔軟に対応することが可能
・立てた「課題」の進捗状況や納期が一目で分かるようになっているので、漏れを防ぐことができる
 

このように透明度の高い環境で「課題」を管理しておりますので、どなたでも安心してご依頼いただけます。
また、軽微な更新でしたら基本的に即日対応させていただきますので、スピード感のある対応が可能です。
（※内容によっては少々お時間をいただくことがございます）

以上が弊社の更新業務の特徴となります。

 

アクセス解析
 

前述したように、Webサイトをより良いものにするためには、サイトの現状について客観的なデータを集めて分析し、改善すべき点を見つける必要があります。
これら一連の流れをアクセス解析といいます。
ここでは、弊社がどのようにアクセス解析を行っているか説明します。
弊社ではアクセス解析ツールとしてGoogle Analytics 4（GA4）※を使用しています。
※2023年7月1日までは同じくGoogleが提供していたUniversal Analytics（UA）を使用

GA4を使用して得られる情報の一部として、下記が挙げられます。
 

「リアルタイム（過去30分間）にサイトにアクセスしたユーザー」
「どのようなユーザーが何の端末でサイトを閲覧しているか？」
「ユーザーがそのページで起こした行動（スクロール・クリックなど）」
 

これらを分析することで
「訪問者数の推移」「狙いのユーザー層がサイトに訪問しているか？」
「サイト内で見て欲しいページがしっかりと訪問されているか？」
等の情報を把握することができます。
結果が想定と異なった場合は、コンテンツの新規追加や特定のページへの導線の調節などをご提案させていただきます。
 

また、こちらに加えて弊社ではヒートマップを活用しています。
ヒートマップとは、Webページ内においてユーザーが行った行動を「色」で可視化する手法の事です。
実際の画像を載せることができないのですが、ページ上で赤色で表示されているエリアほど反応が多く、青色などの寒色になるにつれてその逆を表すものになります。

弊社では、「ページ内でユーザーが多くクリックしている箇所」を確認することができる「クリックヒートマップ」と、「どの箇所が多く見られていて、逆どこで離脱されてしまっているか？」が分かる「アテンションヒートマップ」の2種類からユーザーの行動を解析しています。

ヒートマップを用いることの大きなメリットは、ただ数値を確認するのと比べて、視覚的に分かりやすくデータを把握できるところです。
「クリックして欲しいところに反応が来ているか？」「ここは目を通して欲しいという所がしっかり読まれているか？」といった情報が直観的に分かり、もしも想定と異なった場合は、配置や見せ方を変えたり、コンテンツ量を調節するなど改善策を考えます。
 

弊社では毎月これらの情報を纏めた、「アクセス解析レポート」を作成しており、保守プランによっては、二か月に一回程度の頻度で定例会を開きます。
この定例会は基本的にZoomを用いたオンライン上で行い、長くても約30分程度で終わります。
メインとしてレポートをお見せしながらアクセス状況をご説明することで、サイトの現状について理解を深めていただきつつ、その中で課題が見受けられた場合は、より少ないコストで効果を期待できる改善策をご提案させていただきます。
また、前述したようにクライアント様とは普段、Backlog上でやりとりをさせていただいておりますが、この場で直接ご要望やご質問を伺うこともできますので、定例会をご希望されるクライアント様は多くいらっしゃいます。

 

コンテンツの追加
 

さて、「更新業務」および「アクセス解析」についてご説明する中で、「コンテンツ」の更新や追加という言葉がちらほらと登場してきましたが、具体的にはどのようなものでしょうか？
 

更新業務のご説明をした際にも触れましたが、一般的な企業様のサイトと共通するコンテンツですと、お知らせの追加などがあります。こちらに加えて、医療業界に特化した弊社が扱うものとして主流なものは、ドクターや研修医を対象としたインタビューやブログ記事です。
これらを定期的に更新・追加するメリットはたくさんありますが、まずはSEO対策として非常に有効という点が挙げられます。
 

SEOとは”Search Engine Optimization”「検索エンジン最適化」のことを指し、GoogleやYahoo!などのサイトでユーザーが検索した際、自社サイトを上位に表示させるためにサイトを最適化することを指します。
そして、これを目的とした一連の施策のことをSEO対策と呼んでいます。
検索エンジンは、ユーザーにとって良質なコンテンツを定期的に排出するサイトを高く評価します。
ですので、ユーザーが求めている内容+検索でヒットさせたいキーワードを盛り込む+ある程度まとまった量のあるコンテンツの1つとして、インタビューやブログといった文字のコンテンツは非常に相性が良いのです。
実際にアクセス解析をしていても、インタビューやブログ等をしっかりと更新している病院様は、数値も良好なケースが多く見受けられます。
加えて、訪問者がより長く文章を読んでくれるほど、サイト内滞在時間が伸びる点や、SNSと連携することで拡散性を高めることが出来るところにもメリットがあります。
 

さて、ここまでコンテンツの更新・追加がサイト運用において非常に重要だとお話しましたが、実際にはどの程度のボリュームが必要かご存知でしょうか？
一般的にSEO対策として有効な文字数3000字以上といわれています。
ですが、ただ文字数が多いだけで、中身が薄いものや、文章の構成やレイアウトが読み辛いものだと、途中でページ自体を離脱されてしまう可能性があります。
そうなると、せっかく費やした時間や労力も水の泡となってしまいますよね。
結局のところ大切なのは、いかにユーザーが求めている内容や、閲覧する価値のある文章を書けるかということなのです。
 

とはいえ、質の高いコンテンツを作り、定期的に発信し続けることは、それなりの労力と時間を消費します。
その点、弊社は医療業界に特化したWeb制作会社として、これまで多くのサイト運営に携わってきましたので、そこで培ったノウハウを生かしたコンテンツ作りを得意としています。
特にドクターインタビューはご好評をいただいており、これまで100名を超える先生がたを取材してきました。
 

▼ 弊社のドクターインタビュー制作例です

・鎌ケ谷総合病院様 「ドクターインタビュー」
https://www.kamagaya-hp.jp/interview/

・水戸済生会総合病院様 採用サイト 「研修医の声・インタビュー」
https://recruit.mito-saiseikai.jp/junior/interview

・太田記念病院様 看護部サイト 「先輩の言葉」
https://nurse.ota-hosp.or.jp/interview/
 

インタビューの内容はもちろんのこと、ユーザーを飽きさせないレイアウトも重要だと考えていますので、ページに挿入する写真・動画の撮影も全て弊社で行っています。
特に採用サイトですと、先生の人柄や病院の雰囲気を知るためにインタビューページを訪れる方が多いので、このようなメディアに力を入れることは有効だといえます。

このように、コンテンツ一つ一つに丁寧に向き合っているところが、弊社の強みの一つなのです。

 

さいごに

 

さて、弊社が行うWebサイトの運用についてお話ししましたが、いかがでしたでしょうか？
今回ご紹介した業務はサポート内容のごく一部ですが、Webサイトをよりよりものにするために、日々力を注いでいることが少しでも伝わりますと幸いです。
 

ここまで読んでくださりありがとうございます！
もしも弊社が提供しているサービスにご興味が湧きましたら、ぜひこちらからご覧ください。
また、「ホームページは既にあるけれど運用に困っている」「訪問者が伸び悩んでいる」などのお悩みを抱えている方、弊社には「運用のみ」を代行するサービスもございますので、ぜひぜひお気軽にご相談くださいね！

・ホームページおまかせサービスパック「HOSP」
https://www.medical-design.co.jp/hosp/
 

それでは、失礼します。