こんにちは！コーダーの小島です。

あっという間に冬になり、今年も終わろうとしていますね。御茶ノ水にもちらほらイルミネーションやクリスマスツリーが出現していて、休憩時間や帰り道に癒されています。

皆さん今年はどんなことがありましたか？私はメディカルデザインに入社し、様々な新しいことに挑戦したとても濃い一年だったなと思います。来年はより成長できるよう精進してまいります！

さて、先月に引き続き今月は私が初めて挑戦した「ベースコーディング」の中で行ったサンプルページのコーディングについてお伝えしていきます。

5.サンプルページを作る②

下層ページ共通で表示されるheaderとfooterが完成したら、サンプルページの中身を作っていきます。サンプルページはあまりクラスをつけすぎずにシンプルな構成かつ、柔軟に作らなくてはいけないのでとても難しいなと感じました。形になればいいというわけではなく、どんな条件でも崩れない、誰が下層ページを作成しても同じ形式になるよう工夫する必要があるということを認識しました。それでは、一つ一つのパーツを作る中で感じたことを書いていきたいと思います！

①キービジュアル

キービジュアルとは下層ページの印象を決める大きな役割を果たしています。キービジュアルがあることにより、サイト全体の統一感が出るなと常々感じております。ページタイトルやパンくずリストがキービジュアルに表示されることも多いので、そのページの顔とも言えるパーツだと思います。

今回私が作成したサイトのキービジュアルはキービジュアルと記事の内容の境目が波状になっていました。トップページも同じようにメインビジュアルが波状に切り取られていたのでとても統一感があって素敵なデザインだと感じました。

この波状の画像ですが、ただ波状のまま書き出すわけではありません。Photoshopから波状のまま書き出すことは簡単なのですが、キービジュアルを更新する際にデザインデータがないと書き出せませんし、何よりとても手間がかかってしまいます。今回も最小限の更新で抑えるためにも、波状のまま画像を書き出すのではなく、背景色に合わせた波状のマスクを作成し、擬似要素で画像に書き出すという方法を取りました。

またそのまま書き出す場合より、スマホやタブレットでの表示に合わせやすいというメリットもあります。今回のキービジュアルの作成を通して色々な立場から考えることが必要なのだと学びました。

②アンカーリンク

アンカーリンクはそのページの目次のような役割をしています。ページの内容の先頭に表示され、見出しの多いページの中から目的の内容を見つける道標、まさにアンカー（錨）の役割をしています。

アンカーリンクを作成する際に苦戦したことはどのように折り返すか、ということです。
見出しのテキストが長い場合やアンカーリンクの数が多い場合でもデザインを保っていなくてはいけません。私はつい、デザインの文字数に合わせてコーディングをしてしまいがちなのですが、色々な場合を想像しコーディングするようにしないとどんどんコードが複雑かつ柔軟性に欠けるものとなってしまうことを痛感しました。

矢印のアイコンの位置はテキストが折り返しても不自然な位置になっていないか、文字が途中で折り返されていないかなどたくさん検証することが重要だと感じました。

③見出し

弊社では大体、h2、h3、h4、h5、h6と６つの種類の見出しを用意します。

内容に合わせて多様な見出しがあると量産の表現の幅も広がり、ワンパターンではないより充実したサイトになります。このように特別なタグの場合はよりシンプルな作りにすることが重要なのだと感じました。見出しのタグを打ち込んだだけでクラスがなくても同じスタイルが表示されるようなコーディングが必要です。

また、見出しと見出しの間余白を作る際も、より柔軟なコードにしておく必要があります。つい、目の前に表示されているサンプルページのデザインにとらわれてしまい、より正確なデザインになるようピクセル単位を多用してしまうのですが、よりレスポンシブなサイトになるよう適した単位を選べるようになるということが今の課題です。

④本文テキスト

本文で使用するテキストのパーツは簡単なようでとても奥が深いと感じました。同じ段落のテキスト同士の行間、違う段落同士の行間、1pxでも違うと見やすさが全く違うことにとても驚きました。実際に量産した際に最も感じた違和感の一つが本文テキストの行間でした。サイトを見た人がストレスなくページを読み進められるよう、簡単に終わらせずここにもこだわることが大切だと認識できました。

また本文テキスト内のリンクのスタイルもつけていきます。どの位置にリンクが表示されても違和感がないようコーディングするのはアンカーリンクと同様にとても難しかったです。ホバーする際のアニメーションの速度など、細かいところにまで気を配ることが洗練されたサイト作りにつながっていくのだと感じました。

⑤テーブル

内容に合わせて適したグラフを表示することができるよう、今回は3つのテーブルのスタイルを用意しました。

一つ目は表がそのまま小さくなるスタイルです。表に入るテキストが少なく表の見出しの数も少ない場合はこのテーブルを使います。とてもシンプルではありますが、このテーブルのスタイルが基準になるのでクラスをつけずに表示したときはこのテーブルが表示されるようにコーディングしました。今までテーブルにスタイルをつけるときはたくさんクラスをつけてしまっていたので最低限のhtmlだけを使ってデザインを再現するのに苦労しました。

2つ目は横の表見出しのないテーブルです。この場合はスマホサイズになったときに縦の表見出しと内容が縦に表示されるようにスタイルをつけました。

3つ目はレスポンシブテーブルです。このテーブルはスマホサイズで表示した時に横にスワイプすると内容が確認できるようにコーディングします。スマホサイズになるとフィルターが表示され、スワイプできることを示す指マークが表示されるようになっています。htmlとcssだけではなくJavaScriptも必要になってくるので他のテーブルのコーディングより少し難易度が高かったです。表現の幅を広げるためにも、もっと勉強してスキルを身につけたいと思います。

⑥リスト

弊社では3種類のリストを作ります。通常使用するulリスト、順番のあるリストに使用するolリスト、リンクがある時に使用するリンクリストです。本文テキスト同様にリストは行間によって読みやすさが大きく変わるパーツになっています。また、リストの先頭に表示するアイコンの位置も適切になるようにする工夫が必要なのでたくさん修正をしました。

初めてのベースコーディングレポート中編まとめ

今回はベースコーディングの中でも特に重要なサンプルページの作成についてお伝えさせていただきました！思った以上に書くことが多く、それだけベースコーディングをする中で得た知見の多さを実感しました。たくさんの実績を持つ弊社だからこそ様々なシチュエーションに対応できる柔軟なサイト制作をできているのだなと改めて実感しました。

次回はベースコーディングレポート最終回をお届けしたいと思います！

弊社ではコーディングだけでなく、取材やデザインなども幅広く行っております。
興味をお持ちの方は是非一度ご相談ください。

ご相談はこちらから↓
https://www.medical-design.co.jp/contact/

お久しぶりです、デザイナーの田中です。

今月も担当したウェブページのデザインについて紹介したいと思います。デザインの過程でイラスト制作にも携わらせていただいたのでwebページにおけるイラストを取り入れることのメリットも少しだけ載せてみました。

LP（ランディングページ）のデザイン

先月依頼を頂いたお客様から新たにwebページ制作の依頼をしていただきました。

今回は、先月制作したページと同じ階層の新規ページ制作と、今後もページを増やしていきたいとのことだったので、下層ページへの導線となるTOPページの作成依頼です。

どのお仕事もそうですが、会社として継続の依頼を頂き、私自身も引き続きお客様のページデザインの担当をさせていただけると決まったときはとても嬉しいです。

次回もまた依頼していただけるように力が入ります。

TOPページの制作

先に下層ページの作成を先月にしているので、雰囲気やパーツを継承しつつ、TOPページということで下層ページより目を引くようなデザインにしました。

今後も下層のコンテンツが増えていく予定のページなので数が増えてもデザインが崩れない長方形のバナーを設置して、下層ページへの移動を促せるようにしています。

下層ページの制作

今回の依頼ではイラスト5点の制作もさせていただきました。

実は田中、絵を描くことが好きでプライベートではよく時間をつくって手を動かしているので、仕事でもイラスト制作の機会をいただけて嬉しいです。

お客様から頂いた下記2点の情報をもとに作成をしていきました。具体例があってとても作業がしやすかったです。

▼イラストの説明

「どんなことを表現しているイラストなのか」の情報です。

参考イラストや写真のつぎはぎで提示していただいてもいいですし、もちろん文章の説明でも大丈夫ですよ！

▼イラストのタッチ

「どんな雰囲気のイラストなのか」の情報です。

リアルな感じ～、シンプルな感じ～などのご希望があれば伝えていただいています。

今回もコーダーさんが完成後のイラストを動かしてくれました！

少し切り分けにくいイラストを作ってしまったなと感じるので、切り分けて動かしてもきれいに見えるイラスト制作を今後は目指していきます。

トップページのイラストビジュアルの引継ぎ作成

先輩デザイナーが先に作成してくれていたイラストを引き継いで続きを作らせていただきました。

少しこった動きをするwebサイトなので最終的に制作したイラストのサイズは約5000px ×2500pxになりました。写真の元画像だと珍しくないサイズですが、横幅がだいたい1000px（PC版）ほどがメジャーなwebサイトに掲載するイラストのサイズとしてはだいぶ大きな部類だと思います。

こちらのイラストも動きを付けるためにパーツの切り分けをさせていただきました。

動きのあるサイトにしたいということは聞いていたので、ここは動かすことになるだろうな～というパーツはもともと切り分けて作成していたのですが、コーダーさんからここをこんな風に動かしたいから切り分けてほしい、方向転換するから横向きと正面のイラストも欲しいと言われたときはそんなところも動かすことができるのか…！と驚きました。

いつもたくさん学ばせていただいています。

三面図や主線のないイラストはあまり制作したことがなかったので貴重な経験になりました！

イラストを取り入れるメリット

写真やイラストを取り入れると文字だけの情報よりもユーザーが飽きずに見ることができるのでページの離脱を防ぐことができる、情景を想像させやすいなどのメリットがありますが今回はwebサイトにおけるイラストを取り入れるメリットについて少し紹介します。

▼情報がわかりやすい

写真だけでは伝わりにくい場面や、文章だけだとかえって情報が多くわかりづらくなってしまう場合があります。そんなときに抽象的な表現を取り入れながら情報を簡略化し表現できるイラストは視覚的にわかりやすく情報を伝えることができます。

デザインの仕事をさせていただく中で特に感情、表情の表現や、手順などの場景説明がイラストは得意だと感じました。

検査の手順やQ&Aページの補助に入れるとわかりやすいです。

▼長く掲載できる

被写体の方との相談次第だとは思いますが、ときどき現在のwebサイトに掲載されている写真の被写体の社員が退職することになったので別の写真orイラストに差し替えたいとご相談を頂くことがあります。

イラストの場合、基本的には掲載ができなくなるということはないと思うので、あとから変更をしてサイトのイメージが変わることが極力ないようにしたい…と考える場合には個人的におすすめです。

もちろん新しいお写真が必要となった際には、以前の撮影データの中からページにあった写真を選定させていただくことや、改めて撮影に伺うことも可能なのでご相談ください。

▼イメージの統一

サイト全体のデザインに合わせてイラストのタッチや、カラーを変更できるので印象の統一ができるのはイラストのいいところだと思います。

▼親しみやすい第一印象を与える

タッチの柔らかいイラストを使用することで親しみやすい印象を与えることができます。

病院のwebサイトだとどちらかというとイラストを使い親しみやすさを前面に押し出すことよりは、写真を使いリアリティや信頼感を感じさせるデザインを選択される場合が多いと思うのですが、産婦人科や小児科などお子様がかかわるような部門の特設サイト、新しい人材を取り入れる採用サイトなどで親しみやすさを一番与えたい印象だとする場合などには有効的です。

メインで使用せずに、端のほうにすこしだけあしらいとして入れるだけでも雰囲気が穏やかになります。

ほかにもいろいろありますが個人的には上記の4点がメリットだと思います。Webサイトが与えたい印象や、ユーザーに伝えるべき情報を考えながら写真やイラストをそれぞれの利点を発揮できるシーンに取り入れていきたいですね！

今回はあまり紹介できていないのですが写真や動画にも様々な利点があります。

撮影実績や、どんな風に撮影しているかなども紹介しているので、もし気になったら見てみてください！

▼写真撮影、動画制作実績

https://www.medical-design.co.jp/works/photo.html

▼ブログ：神戸まで動画撮影にいきました！

https://blog.medical-design.co.jp/archives/2630

▼ブログ：ドクターインタビューに行ってきました！

https://blog.medical-design.co.jp/archives/2598

▼サイト制作のご依頼、ご相談は下記ページのフォームからお気軽にお問い合わせください

https://www.medical-design.co.jp/contact/

お久しぶりです、デザイナーの田中です。
今月は、ほかのデザイナーさんがデザインをしたwebページやチラシをもとに別のデザインをするといったお仕事を何点か担当させていただいたので紹介したいと思います

サイトリニューアルで新規フロアマップ作成

以前弊社で作った動物病院様のホームページをリニューアルするということで新規でフロアマップの作製をさせていただきました。
すでに誰かが簡易的なマップに起こしてくれたものにアレンジを加えるマップ作製はしたことはありましたが、業者さんがみるような設計図からマップを起こしたのは初めてでした。知らない略語や単位が沢山です（笑）

このお仕事をしていると依頼されたものを調べる機会が多いので、いろいろな方面の知識が増えていくな～と感じるこの頃です。新しく得た知識はどこかで役立てていきたいですね！

既存チラシからLP(ランディングページ)作成

お客様がすでに作成しているチラシからLP(ランディングページ)のデザインをさせていただきました。メインカラーはそのまま使わせていただいて、フォントは似た印象のwebフォントに置き換え、フォントカラーもページ全体になじむ色にかえてといった感じに進めていきます。

チラシと違うところ①　改行

チラシの時は決定したデザインは変わらないため文章がバランスよく収まっていますが、横幅が可変するwebサイトではずっとそのバランスを保ってくれるわけではないので、紙とのギャップが大きくならないように意識しながら改行位置やテキストの横幅などは調整をしました。

チラシと違うところ➁　アプリへの誘導の位置

チラシの時はアプリへの誘導はQRコードのスペースをチラシ上部に一か所確保していました。縦長のwebページだとスクロールが発生するので上部だけに誘導ボタンを設置するとコンテンツを見るために一度下までスクロールしてからアプリの誘導ボタンを押すためにまた上へといった手間がユーザーに生まれてしまいます。そういった手間をなくしタイトル→各コンテンツ→誘導ボタンという自然な流れでユーザーがページを見ることができるようページ下部にもアプリ誘導のボタンを設置しているのが紙面デザインとの違いです。

紙と違うところ③　動き

Webならではの動きを付けたいとのことだったので作成していただいているイラストのパーツ分けもさせていただいています。コーダーさんがページ全体の動きに加えてそのイラストも動かしてくれました！

お客様の作成したチラシや私の手元では静止画だったイラストが、webページになって動いているのを見ると毎回感動しちゃいますね。コーダーさんすごいです。

既存サイトからチラシ作成

チラシからLPとは反対に先輩デザイナーがデザインしたホームページからチラシの作成をさせていただきました。

Webページももちろんインデントをそろえるときれいに見えるのですが、webページはレスポンシブで横幅が変化して端に来る文字や行数はその時その時で変わるので、見た目がいっさいかわらないチラシデザインは別の緊張感があります。

紙ならではのこだわり①　文字詰め

Webサイトでは文字単位の細かい設定まではできないことが多いので1文字1文字こだわることができるのが紙ならではですよね。

中でも日時や順序などで登場頻度の多い数字は、数字ごとに横幅が違ったり文字の形的に左右の空白部分が偏っていたりするためぱっと見均等になっているように見せるために調整をしました。

フォントによってはもとから詰めて調整してくれていたりするので同じ設定を再度使う際には都度確認が必要です。

数字と同じでアルファベットも漢字やひらがななどの日本語と比べてデフォルトの間隔が違うのでこちらも調整しています。1とかは特に他の数字と比べて余白が目立つので目を光らせていますよ ^^

デザイン済リニューアルサイトの作図

こちらも先輩デザイナーがトップページやサンプルページなどをすでにデザインしてくださっているサイトの作図を何点か担当させていただきました。リニューアル前に使用されていた図を新デザインのテイストに合わせて新しく作成する作業です。

リニューアル前は1つの画像だったものも、画像内に配置する文章量によってはスマホで閲覧した際に小さすぎて見えないということがないように、PC用、スマホ用の2種類作成しています。

やはりリニューアルの際はスマホで閲覧する方が多くなってきため、PCだけでなくスマホでページを見たときの見栄えももっとよくしたいといったお客様のご希望は多いです。

そういったご期待に沿えるように、特にフォントサイズを意識しながら作成しました。

既存サイトに新規ページのデザイン

すでに公開されている病院サイトに新しく追加する新規ページのデザインをさせていただきました。

お子様も閲覧することを前提としたページとのことだったのでサイト全体のきっちりとした雰囲気のデザインとは少し異なる「かわいらしさ、やわらかい」を意識してデザインをしています。

フォントを丸みのあるものに変更し、色合いをパステルカラーに変更しましたがサイト全体の統一感はなくならないよう色の系統はそろえました。

最後に

今月は誰かがすでにメインのデザインをしているものにたいし、プラスのデザイン…といった作業に多く携わらせていただきました。

自分で1から担当する際は、これはこんなイメージでどんな印象を与えたいから色はこれ、あれはそれ…と作業をしていましたが付け足しデザインということだったのでいかにすでにあるデザインになじませるか、というのが課題でした。

もちろん1から作るときも力は入れていますが、つけたしデザインをさせていただくのは私のデザインで今あるデザインが壊れないように…という普段とは違ったプレッシャーを感じますね。

いろいろなデザインを見ることで学ぶことが沢山できた月でした。新しい知識を自分のデザインに落とし込めるように今後も取り組んでいきたいと思います。

弊社ではwebサイト制作のほかにもチラシの作成や、動画制作なども行っていますのでぜひお気軽にご相談ください！

▼webサイト

https://www.medical-design.co.jp/works/web.html

▼グラフィック

https://www.medical-design.co.jp/works/graphic.html

▼写真撮影・動画

https://www.medical-design.co.jp/works/photo.html

こんにちは！コーダーの小島です。
10月に入ってどんどん涼しくなってきましたね。特に朝と帰りの通勤時間はちょっと寒いなと常々感じております。このくらいちょうど良い気候はなかなかないのでできるだけ長く続いて欲しいです。

さて、今回初めてベースコーディングに挑戦したので、その様子を感想ベースで共有させていただければと思います。

1.Gitのリポジトリを作る

まずリポジトリの名前を決めます。基本的にサイトをリニューアルするときは現行しているサイトのURLを元に決めます。同じサーバーを使用しているサイトがある場合は一工夫必要なので要注意です！被らないよう命名規則に従ってリポジトリ名を決めていきます。

次にリポジトリの設定をしていきます。このとき”add gitignore”にチェックを入れておくと不要なファイルがGitにアップされずに済みます！この一手間で不要なファイルを削除する手間を省略させることができます。実は今回、初めにこの一手間をスキップしてしまった影響で不要なファイルが生成されてしまい、削除する手間が発生してしましました…
もっと効率よくコーディングを進めるためにも先輩方からどんどん新しい知識を学んで、次に活かしていきたいなと思います！

そして作ったリポジトリに会社のメンバーのアカウントを招待します。開発中のアカウントはプライベートモードになっているのでチームを招待しないと自分だけしかそのリポジトリで作業したり、更新したりすることができません。

Gitはチームで円滑にコーディングするためにとっても重要なツールだなと日々感じています。更新や運営をするときにも重宝するのでその元を作っているという意識をしっかり持って慎重に作業していきたいです！

2.チャットグループを作る

まずはそのサイトを作るチームの皆さんとコミュニケーションを取るためにチャットグループを作ります！弊社ではChatworkというコミュニケーションツールを使用してチームで協力をしてサイト制作に取り組んでいます。

チャットグループにチームのメンバーを招待したら、概要を入力していきます。本アップまでのざっくりとしたスケジュール、ディレクターさんがお客様と相談しながら作成したサイトマップのリンク、テストアップサーバーのサーバー、テストアップサイトのリンク、backlog（お客様とコミュニケーションを取ったり、どのようなサイトを作るかをまとめることが簡単にできるツール）で立てた課題（それぞれのプロジェクトごとに作ることができ、プロジェクトごとに情報をまとめたり、チャット機能を利用してコミュニケーションを取ることができる）のリンクなどを入力します。これをすることにより、各々がそれぞれ担当のページをスムーズに作成することができます。

余談ですが、チャットグループを作った人はチャットのアイコンを決めることができます！（時間に余裕がある時ですが…）サイトに関係のあるかわいいアイコンを見つけて設定することが密かな楽しみにもなっています。笑
デザイナーさんが作ったかわいいアイコンを見るとこんなにシンプルでかわいいのにひと目見ただけでなんのアイコンかわかるのは流石だなといつも感動します！

3.サイトの骨組みを作る

Gitとチャットの準備ができたらサイトの骨組みを作っていきます。
そのサイトがワードプレスで簡単に更新できるようにするか、ファイル納品（弊社でサーバーを用意せずにデータのみの納品をすることも稀にあります！）にするか、何の言語でコーディングするかを参考に以前弊社で作成したサイトを元に新しいサイトを作っていきます。

この参考にするサイトを見つけるという作業が意外と難しく、より効率良くベースコーディングに取り組むためにとても経験が必要な作業だと実感しました。初めてということもあり、今回は先輩方にアドバイスをいただいて元にするサイトを決めましたが、自分で広い視野で先読みをして自分の力で判断できるよう経験を培っていければと思います。

元にするサイトを決めたらそのデータを複製して元になったサイトの気配を消す作業に入ります。不要なデータを削除し、必要最低限の情報を残します。古いバージョンのプラグインがローカルに保存されている場合は最新の物をダウンロードし直し、差し替えます。日々アップデートされるプラグインをより良い状態で使うためです。ダウンロードしたプラグインを使うことでアップデートによるバグなどを防ぐこともできます。

サイトの骨組みを作る工程における一つ一つの心がけによってお客様が安心して運営できるサイトの基礎を固めるとても重要なポイントだと今回改めて認識いたしました！

4.サンプルページを作る①

骨組みを作ったら、実際のコーディングに入っていきます。今回私がベースコーディングに挑戦したサイトはファイル納品かつhtmlのみで作成するサイトだったのでイレギュラーな部分が多かったのですが、とても良い経験ができたなと感じています！

サンプルページを作る手順は前回の記事でも軽く触れたかと思いますが、まずはデザインから画像を書き出すことから始まります。その中で今回特に苦戦したのがストライプ模様の背景の素材を書き出すことです。
規則性のある画像は一部を切り取って反復させて表示させるやり方があるのですが、その反復させる画像の書き出しに苦戦しました。いつものように画像を書き出すと画像の周りに余白ができてしまい綺麗なストライプにならないという現象が起きてしまいました。
選択範囲を利用してクリッピングマスクを作成していたことが原因で、オブジェクトを使用してクリッピングしたところ余白のない綺麗な画像を書き出すことができました。一つのやり方に固執せず、場合によって柔軟に対応できるようPhotoshopの知識の幅も広げていきたいなと思います！

画像が書き出せたらまずはheaderとfooterを作っていきます。今回はheaderが途中まで表示されて消えるというUIだったのでユーザーが使用したときに心地よいスピード感になるようJavaScriptを使用して調整しました。速すぎず遅すぎない心地よいスピード感が身につけられるよう色々なサイトを見て研究していきたいです。

また元にしたサイトがPHPで記述されていたのでheaderとfooterの記述を直接書き直し、htmlでも表示されるよう工夫しました。
headerとfooterを作ることができたらサンプルページの中身を作っていきます。

その詳細は来月のブログで書かせていただきたいと思いますので、どうぞよろしくお願いいたします！

初めてのベースコーディングレポート【前編】　まとめ

今回は私の初めてのベースコーディングについて共有させていただきました。
先輩方にご教授いただきながら挑戦する中でより良いサイトの開発をするための工夫やその先の運営への配慮を知り、とても勉強になりました。
弊社では長く運営できるだけでなく細かいUIにも配慮し、離脱率の低いサイトを作成しています。少しでもご興味をお持ちの方はお気軽にご相談ください！

ご相談はこちらから↓
https://www.medical-design.co.jp/contact/

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

サイトができるまでをご説明するために次の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/
 

それでは、失礼します。

はじめまして、デザイナー及びディレクター見習いの中野です。
8月初頭に神戸の病院様へ撮影行ってきましたので、その様子についてお伝えしたいと思います！

はじめに

今回の撮影の趣旨は、病院様の創立100周年を記念する動画制作です。
弊社はWeb制作会社なのですが、動画制作も承っており、実は2年前にも同病院様の新築・移転10周年を記念した動画をお任せいただいた経験があります。

▼ 弊社の動画制作実績
https://www.medical-design.co.jp/works/photo.html

ですので、こちらの病院様では2回目の撮影ということになりますが、今回は「創立100周年」というスケールの大きさも相まって、病院様側も弊社撮影メンバーも打ち合わせの段階から一層気合が入っている様子でした。

病院様側にもご協力いただきながら、撮影は約2日間半かけて行います。
医局での撮影に加えて、ドクターインタビューやドローンを用いた空撮など内容もさまざまなのですが、その全てについて述べると非常に長い文章になってしまいますので、今回は要点をピックアップしてお伝えします！

メンバー

撮影の様子をお伝えする前に、まずは今回の撮影メンバーをご紹介します。
基本的にはほとんど毎回同じなのですが、

1人目は病院ディレクターの三澤です。

病院案件をメインとして、クライアント様との連絡や制作のスケジュール管理など、社内でもひときわ重要な役割を担っています。
現場ではスムーズに撮影が進むよう指揮をとったり、ドクターインタビューのインタビュアーを務めるなどしており、表方・裏方どちらの面でも活躍されている方です。

2人目はデザイナー兼カメラマンの大和田です。

弊社の優秀なデザイナーでありつつ、現場ではカメラマンとして写真や動画の撮影を行っています。私自身、彼の撮影した写真の現像作業を行う機会が多いのですが、こちらで修正する必要がほとんど無いくらい、毎度クオリティの高い写真を撮ってくださります。

3人目はコーダー兼カメラアシスタントの西田です。

普段はコーダーとして、社内でさまざまなサイトの制作に携わっていますが、現場では大和田に次ぐカメラマンとして活躍されている方です。また、操縦の難しいドローンのメインパイロットでもあり、通常のカメラでは収めることのできない画角や、インパクトの大きい動画を撮影することができます。

最後に私を加えた4名が今回の基本メンバーとなります。
また、3-4日目には弊社社長も同行し、院長や副院長へのインタビュー等を務めてくださりました。
さて、前置きはここまでにして、さっそく撮影の様子をお話ししたいと思います！

1日目

初日は東京から神戸までの移動に費やしました。
午前10時半頃に御茶ノ水のオフィスを出発し、休憩をはさみつつ車で約9時間かけて神戸へ移動します。
「新幹線や飛行機を利用しないのか？」と思う方もいらっしゃるかもしれませんが、弊社ではよりクオリティの高い映像を撮るために、毎回多くの撮影機材を持って行きますので、基本的に社用のハイエースで現地へ向かいます。
今回は下記の機材を持ち込み、院内では台車に積み込んで移動しました。

▼ 使用した機材

・動画撮影用カメラ
Sony ILME-FX6V

・一眼カメラ
CANON EOS R3
レンズ（標準）：CANON RF24-70mm F2.8 L IS USM

・ドローン（２台）
DJI FPV

・その他
照明やインタビュー用のピンマイク等

カメラは2台を持ち込み、撮影内容や現場の状況によってそれぞれを使い分けます。
ドローンは空撮に特化したDJI FPVを用いるのですが、このFPVとはFirst-Person View（一人称視点）の略で、専用のゴーグルを装着することで、ドローン視点の映像を確認しながら撮影することができます。
ラジコンのように、機体そのものを目視しながら操縦する一般的なドローンと比べて、よりリアルで没入感のある映像が撮れるところが大きなメリットです。

また、このドローンのバッテリー時間は15〜20分程度なのですが、屋外での撮影はどうしても、その日の天候や環境によって撮影にかかる時間が左右されます。ですが、弊社ではドローンを複数台所持しておりますので、長時間の撮影にも対応できるのです。
一般的なWeb制作会社が扱うには、どれも比較的高価な類ではありますが、素材として使用する写真や動画一つ一つが制作物の出来栄えを大きく左右します。

より魅力的な物を提供するために、撮影機材への投資を惜しまないのが弊社のスタイルです！

神戸に到着した頃にはもうすっかり夜でしたので、その日は皆で夕飯を食べながら明日の撮影に向けた軽いミーティングをして終わりました。

2日目

２日目になりました。本日からいよいよ撮影が始まります。
病室でのシーンから始まり、ドクターインタビュー・空撮・セミナー風景の撮影など初日から盛りだくさんな内容です。

▼ タイムテーブル例（画像をクリックすると拡大表示されます）

撮影の際はこのように、事前に病院様と打ち合わせをして組んだタイムスケジュールに沿って動くのですが、当日のオペや患者さんの状況によって行程が前後することが多々あります。（実際に今回もそうでした）
もちろん、その際は病院様のご都合にあわせて臨機応変に対応させていただきますのでご安心ください！
また、スケジュールを組むにあたって、数週間～１ヶ月ほど前にスタッフが現地に伺いロケハンを行いますので、撮影自体は比較的サクサクと進みます。

ドクターカーの撮影

２日目に行った撮影の中で、個人的に最も印象に残ったのはドクターカーの空撮です。
というのも、今回ご依頼を承った病院様は、厚生労働省発表の「救急救命センターの評価結果」において9年連続全国1位を獲得されており(2023年現在)、救急部門に大変力を注いでいらっしゃるのです。
そのような病院様にとって、ドクターカーは極めて重要な存在ですので、私たちも一層気合が入りました。

撮影の内容は、実際にドクターカーを運転していただき、走行する様子をドローンで俯瞰しながら追跡するといったものです。
私自身入社してまだ日が浅く、初めて生でドローンを見たのですが、病院様側も同じだったようで、空撮に興味を持っていらっしゃる様子だったのを覚えています。
専用のゴーグルとスマホから見える映像を頼りに、機体を水平に保ちながら一定の速度で車体を追うのですが、風の影響もありこれがなかなか難しく、限られた時間の中で奮闘しました。

▼ ドローンをセッティングする様子

また、撮影したデータは、その場でパソコンへ移してお見せすることができるので、病院様と弊社の間でイメージの齟齬を防ぐことができ安心です。
色々と試行錯誤を繰り返しながらも撮影は進み、病院様のご厚意で3日目も撮影させていただいた結果、非常に臨場感のあるドクターカーの素材を撮ることができました。
ご協力いただいた運転手やスタッフの皆様、本当にありがとうございます！

ドクターカー以外にも、研修医がセミナーを受講している風景や、総合案内での応対シーンなどの撮影を行い、2日目は院内をたくさん巡った一日でした。

3日目

出張の折り返し、３日目になりました。
この日はオペ室とドクターインタビューの撮影が多く組み込まれていおりましたので、この2つについてお話したいと思います。

▼ 朝の神戸

オペ室での撮影

今回はダヴィンチやhinotoriといった手術支援ロボット用いた手術風景を撮影しました。
オペ室での撮影は、人数を必要最小限に絞る必要があったため1～2名体制で臨み、スタッフは手術着を着て入室します。
緊張感のある雰囲気の中、周りの機材に触れないように細心の注意を払ってカメラを回します。
私自身は部屋の外で待機していたのですが、その後見せてもらった映像では、現場特有のリアルな風景を色濃く感じることができました。

ドクターインタビュー

ドクターインタビューは、お話を聞かせていただく先生や看護師さんに合わせた場所へ移動して撮影します。
中庭・廊下・血管造影室・リハビリ室 ……と本当に様々ですが、どの場所も先生方それぞれの特色を感じることができて興味深かったです。
インタビューといってもその場で突然始まるのではなく、事前に質問内容が決まっているので、ある程度答えがまとまった状態で話していただきます。
質問については制作の趣旨やターゲット層に合わせて、ディレクターの三澤が考えることが多いのですが、今回は病院様が指定された内容で進めました。
（前回のブログ記事に三澤が考えたインタビュー内容の詳細が載っておりますので、よろしければ こちらからご覧ください）

カメラのセッティングが完了し、先生方にピンマイクをお付けして、「いざインタビュー開始！」となると、やはり最初は緊張される方が多く見受けられました。
数人に囲まれながら、カメラの前で話す機会というのもなかなか稀有だと思いますので、無理もないです。
ですが、一つ二つとインタビューに答えていただくうちにだんだんと皆さんの緊張も解け、最終的には楽しげにお話を聞かせてくださりました。
撮影している側としても、そのような様子を見ていると嬉しい気持ちになりますね。

これらの他にもNICUや社員食堂を巡ったり、先生方のカンファ風景の撮影をして3日目の撮影は終了しました。

4日目

いよいよ出張最終日です。
この日は院長の撮影と正面玄関の空撮がメインのスケジュールでした。

院長の撮影

院長の撮影は病院の内側にあるお庭と、講堂でインタビューを行いました。
実は２日目にも撮影を試みたのですが、日照や天候の影響もあり、なかなか双方の満足する画が撮れませんでしたので、4日目に改めて撮影をさせていただくことになったのです。
この日は晴天かつ風も控えめでしたので、空撮のコンディションも良く、カメラとドローンを用いて、インタビューや院長のお姿をたくさん撮影させていただきました。
院長も一つ一つの質問に真摯に向き合って下さり、病院に対する熱い思いが伝わってくる、とても素敵なインタビュー映像を撮ることができました。

▼ 院長がお見えになる前に画角を確認する様子

正面玄関の撮影

さて、約2日半に及んだ撮影ですが、こちらでラストになります。
正面玄関は病院の顔でもありますので、他の空撮以上に時間がかかるのではないか？と個人的には思っていたのですが、想像以上にすんなりと撮影が進み、なんと20分ほどで終了してしました。
その場でデータをチェックしたのですが、立派な病院の外観と、その横を空港と三宮を繋ぐモノレールが沿うように駆け抜けていく、神戸市内を支える病院様らしさを強く感じることができる映像が撮れていました。
カメラマンと操縦者も含めた全員が「いい画が撮れた！」と満足そうな表情をしていたのを覚えています。

以上で撮影の全行程が終了しました！
打ち合わせから撮影まで、ご協力いただいた病院側の皆様には感謝の気持ちでいっぱいです。おかげさまで素敵な素材をたくさん撮ることができました。

さいごに

個人的に印象に残った場面をピックアップしてお伝えいたしましたが、いかがでしたでしょうか？
私自身初めて撮影に同行させていただいたこともあり、まだまだ書き足りないくらい多くのエピソードがありますが、本当に長くなってしまうのでこのくらいにさせていただきます。

動画が完成するのはもう少し先ですが、私も待ち遠しい気持ちでいっぱいです！
実際に公開された際には改めてお知らせをさせていただきますね。

ここまでお読みいただきありがとうございます。
来月から当ブログの更新頻度が増える予定ですので、ぜひ次回の記事もお読みいただけると嬉しいです！それでは。

こんにちは！
コーダーの西田です！

私は普段サイトのコーディングを主な業務としているのですが、その傍ら動画や写真の撮影スタッフもさせてもらっています。

先日、長野県の病院様へドクターインタビュー+院内撮影に行ってきましたので、その様子をお伝えしたいと思います！

メンバー

まずはメンバーのご紹介です。

ディレクター

1人目は病院ディレクターの三澤です。
病院案件を束ねてゴリゴリ社内を回している優秀な方です。西田は頭が上がりません笑

撮影スタッフ

2人目はデザイナー兼カメラマンの大和田です。
サイトのデザインはもちろんのこと、現在の弊社の動画や写真は全て彼が担っています。動画も写真も素晴らしい仕上がりにするこれまた優秀なスタッフです。

大和田が撮影編集をした動画製作実績の一部です。
コマツ栃木株式会社 様
https://komatsu-tochigi.co.jp/

森下記念病院 様
https://www.youtube.com/watch?v=xw7h-Oei-No

そして、3人目に私西田です。

以上の3名で向かいます！

使用機材・セッティング

今回は2日間の日程で2名の研修医の先生のインタビューと、4ヶ所の部門の写真撮影になります。

インタビューは病院の本サイトではなく、採用サイトに掲載をするもので、採用活動中の学生さんに向けた内容です。

では行きます！

病院到着後、まずはインタビュー用のセッティングをしていきます。

動画用カメラ

SONY ILME-FX6V

一眼レフカメラ

Nikon D6
カメラは2台体制で、それぞれ違うレンズを搭載しています。
標準口径で広角から望遠までマルチに対応できるものと、単焦点でポートレートなど大きくぼかしを取り入れたい際に使用する物の２つです。

その他にも
照明3台を使って明るさを調整し、インタビューを受けていただく先生にはピンマイクも付けて貰います！

セッティング後の会場はこんな感じです。

インタビュー中は動画を回しつつ、様々な角度から写真を撮ります。
「想像より機材が多くて緊張する！」という声をよくいただきますが、その分仕上がりのレベルもグッと良くなります！

セッティングが完了したら早速インタビュー…！の前に、部門ごとの写真撮影をしていきます。

写真撮影①

初日は看護部、栄養科、臨床検査科を撮影します。

看護部

看護部長、副看護部長の方お一人ずつの単体写真と集合写真の2パターンを撮影しました。
単体写真では真面目な顔パターンと笑顔パターンを撮影します。皆様笑顔がとても素敵で、優しいお人柄が伝わる良い写真を撮ることができました！

栄養科

今回は入院患者様のお食事を作る調理場に入らせていただき、実際にそこで働いている方と「お祝い御前」を撮影しました。
調理場に入る際は髪の毛が落ちないように帽子を被り、靴も履き替えて、衛生面に最大限注意を払っています。

衛生面から、調理場内の物に触れる事は出来ないのですが、「この食器邪魔よね！どけるよ！」ととてもご協力いただき、スムーズに撮影することが出来ました。
ありがとうございました！

午前の撮影はここまでです。
調理場でご飯の匂いに包まれていた私と大和田くんはもう空腹でした。
お昼は近くのお蕎麦屋さんへ。
すごく美味しかったです。

そして午後のスタートです。

臨床検査部

こちらでは最新鋭の機器を撮影しました。

ドクターインタビュー

そしてその後、いよいよドクターインタビューです。
今回は初期研修1年目の先生お2人からお話を伺います。

インタビュー前に事前に質問票をお渡ししていて、ある程度内容を考えていただいてから実際のインタビューをする流れになります。

インタビュアーの三澤にインタビュー時に心掛けている事を聞いてみました。
「インタビューをする目的や載せる場所をしっかりとご説明することを心がけています。」との事。
サイトのどのページにどの様に載って、誰に向けた内容なのかを知っていただく事で、より効果的なインタビュー記事にする事が出来ます。

前述した通り今回は学生向けの採用サイトに載せるので、実際に研修医としてご入職されてどのように日々を過ごされているかなど様々お話を聞かせていただきました。

具体的な質問内容はこの様な感じです。
・簡単な自己紹介
・現在目指している診療科
・初期研修にこの病院を選んだ理由
・研修生活について
・現在の1日の流れ
・休日の過ごし方
など。

こういったベーシックな質問をもとにインタビュアーと会話をしていく中で、本音に近いリアルなお話を聞かせていただきます。

今回も研修医のお2人からリアルな研修生活や病院の魅力など、初期研修の病院を悩まれている学生さんにとって非常に有益なお話をお聞きできました。
インタビュー内容は弊社でライティングをして、サイトを訪れた方により伝わりやすく、分かりやすい文章へと整えます。

インタビューの後は医局内でパソコンやデスクに向かうシーンの写真を撮らせていただき、終了となります。

写真撮影②

次の日、リハビリテーション科の写真をたくさん撮影しました。
施術中のスタッフさんの優しい雰囲気がしっかりと撮れました。

今回は2日間に及ぶ撮影でした。
両日とも非常に素晴らしい素材が撮れたと思います。

実際にサイト上で公開出来るのが楽しみです！
公開された際にはまたブログにてお知らせをしたいと思います。

実際に公開されたページがこちらです！！
https://recruit.imh.jp/medical_internship/interview/interview13
https://recruit.imh.jp/medical_internship/interview/interview14

ここまでご覧いただきありがとうございました。
ではまた次の記事でお会いしましょう！

メディカルデザインのドクターインタビュー制作実績例

飯田市立病院 様　採用サイト
https://recruit.imh.jp/

茨城県立こども病院 様　専攻医募集サイト
https://www.ibaraki-kodomo.com/recruit-sr/

仙台厚生病院 様
https://www.sendai-kousei-hospital.jp/

水戸済生会病院 様
https://www.mito-saiseikai.jp/

鎌ヶ谷総合病院 様
https://www.kamagaya-hp.jp/

サイト制作のご依頼、ご相談は下記ページのフォームからお気軽にお問い合わせください。
https://www.medical-design.co.jp/contact/

GW休業日

誠に勝手ながら、弊社は、上記の期間をGW休業とさせていただきます。
5月8日（月）より、通常営業を開始いたします。
お手数をおかけいたしますが何卒宜しくお願い致します。