サイト制作秘話シリーズ 第2弾
不定期でお届けしている Web制作ドキュメンタリー『サイト制作秘話』。
今回ご紹介するのは、京都府向日市にある水野眼科様の制作事例です。
いまや病院は、受診前にWebで検索し、病院の雰囲気やクチコミを把握してから予約することが一般的になりました。Web上で積極的に情報発信をすることが、特に求められている業界です。
Webサイトという限られた枠組みで、雰囲気や特徴をどうやって発信していくのか？ そのために必要なこととは？ そんな「企業・お店の顔としてのWebサイトづくり」に重きを置いてお伝えします。
目次
1.プロジェクト紹介
2.コンセプト決定・デザインへの展開
3.WF作成
4.デザイン
5.コーディング
6.プログラミング
7.撮影
8.プランニング/ライティング
9.ディレクターのコメント
10.お客様からの声
11.最後に
プロジェクト紹介
お客様について
水野眼科様からのご依頼のきっかけは、口コミの内容でした。
実際に受診した方からの口コミは賛否両論。ところが、ネガティブなコメントの原因の多くは「病院側からの情報提供が不十分だった」ことにありました。
病院側でできないこと・診察前に必要なことが、受診前にわかる状態になっていれば、患者さんも安心して受診してもらえるのではないか。そのために、Webサイトを通して積極的に情報発信していきたい！ という思いで、今回弊社にご依頼をいただきました。
仕上がったデザインはこちら！
病院紹介や診療内容の情報量を大幅に増やし、目にまつわるお悩みや症状から、診療内容を探せるように。また、リニューアルを機にWeb予約システムを導入し、診察までのハードルが下がる仕組みを設計・構築しました。
表現については、曲線や角丸、そしてイカのキャラクターを使った、やわらかな雰囲気に。病院の硬い・真面目な印象からは少し離れたポップな印象も……？
なぜポップに、なぜイカに？ こうしたサイトが出来上がるまでのストーリーについて、詳しくお伝えしていきます。
案件について
サイトカテゴリ：コーポレートサイト
サイト制作の目的：医院・症状の理解深化、Web問い合わせの確保
ターゲット：向日市・長岡京市・京都市西京区周辺で、眼科の受診を検討している人（すべての年代）
制作期間：6か月
プロジェクトメンバー
奥川拓海、片山杏映、国吉縁造、高松竜、田中知也、谷口正樹、西川武志、西本智裕、舩岡海斗（五十音順）
コンセプト決定・デザインへの展開
コンセプトについて
水野眼科は水野院長が一人で診察されている個人医院です。そのため、打ち合わせも休憩時間などの限られた時間でお願いする必要があり、コンセプト設計やデザイン制作は社内メンバーを中心に行い、院長に提案する形で行いました。
コンセプトを設計していく中でキーワードとなったのは、水野先生がおっしゃったふたつの言葉でした。ひとつ目は「地域に根付いた、密着した眼科」であること。そしてもうひとつは「スタッフ含めてあたたかい気持ちでお迎えして、あたたかい気持ちで帰ってもらう」ことを目指していること。また、デザイナー同席で実際に水野先生とお話を重ねていく中で、水野先生のユニークなキャラクターにも触れ、そのおもしろさをサイトのデザインにもぜひ反映しようという話になりました。そうして決まったのが、「やさしくて、ちょっと面白い。通いたくなる眼科」というコンセプト。この方針を元に、Webサイトのコンテンツづくりやデザインを進めていくことになりました。
水野眼科を多角的に表現する
水野先生からお話をお伺いする中で、案件のターニングポイントとなった言葉があります。
「病院のキャラクターを作りたい」。この言葉は、「やさしくて、ちょっと面白い」の方針にもぴったり。当初の想定にはなかった要件でしたが、ぜひ作りたい！ と社内メンバーも前のめりで話は進みました。
やり取りが盛り上がるにつれ、アイデアはどんどん膨らみます。キャラクターを新たに作るのなら、これを機にロゴも刷新し、キャラクターを活用していくのはどうだろう。キャラクターを紹介するためのページも作りたい。Webサイトという枠組みを超えて、水野眼科の雰囲気をめいっぱい表現するための制作物をどんどん提案していくことになりました。
WF作成
キャラクター・ロゴの制作を並行して始まったのが、WF制作です。
※WF（ワイヤーフレーム）：実際の制作に入る前に、サイトの仕様や構成を決めるものになります。設計図のようなものです。
今回は、診察前に病院や病気についての理解を深めてもらうことが目標にありました。そのため、前述の「症状に関するページを拡充させる」ことや「Web予約をしてもらうまでの導線を設計する」といった、サイト全体の骨組みや内容はこの段階で決まっていきました。
デザイン
キャラクターデザイン
まず始まったのが、キャラクターとロゴの制作。水野眼科の雰囲気を伝える鍵となるクリエイティブであるため、水野先生とも丁寧にやり取りを重ねながら調整を進めていきました。
水野眼科がある洛西地区は、マンション建設が進みファミリー層も急増したエリア。そのため、キャラクターも動物をモチーフにした親しみやすいものを中心に提案を進めました。最終的に採用されたのは、目が良い生き物・イカをモチーフにしたイカくん。イカはすこし不気味さを感じる生き物ですが、かえってその独特なモチーフが水野先生にも大好評。こうした些細なワンシーンでも水野先生のキャラクターを感じながら、社内メンバーで楽しく作業を進めていきました。
キャラクターが生まれるまでのストーリーは、水野眼科サイト内の「イカくんの部屋（https://www.mizuno-eye.jp/character/）」に詳しく掲載しています。
眼科にちなんだものからコミカルなものまでたくさん制作しました
イカすだろ？このキャラクター！
キャラクターデザイン担当した国吉です。
先方からのご要望で子供達に好かれるキャラクターでとのことでした。もちろんキャラクターで眼科といえば目の良い動物ですよね。そこであえてのイカです。もちろんキャラクターを作成する上で複数の案を持ち寄りました(上記にある目の良い動物のキャラクターです)が水野先生にはこちらの思惑通り「いや、なぜイカ？」がブッ刺さりました。
大筋はこの流れでイカくん採用に至ったわけですが、もちろんプロジェクトメンバーから意見も頂きながらブラッシュアップを重ね今のイカくんが誕生しました。メイン担当は僕ですがこのイカくんはプロジェクトメンバーみんなの意見が入っており、みんなで作り上げたと思っています。
ボツキャラたちも見てあげて下さい。
喜びます。
（デザイナー：国吉 縁造）
ロゴ
ロゴもイカをモチーフにし、よりデフォルメすることでロゴらしい象徴的なデザインに。「あのイカの病院に行こうね」なんて会話を親子がしている様子を想像しながら、シンプルで愛嬌のあるロゴを制作しました。
最終的に決定したロゴデザイン
サイトデザイン
キャラクターとロゴが決定し、次はいよいよサイト制作。
水野先生のお名前とイカのキャラクターから、全体のキーカラーを明るい水色に設定。水滴をイメージした波状の図形やドットの背景をアクセントに使いながら、「やさしくて、ちょっと面白い」雰囲気を表現しました。
サイトのあちこちにいるのは、新キャラクターのイカくん。デザインを進める中で「めがねのイカくんがほしい！」「アクセスを紹介するイカくんは走っていたらかわいいよね」といった会話をイラストレーターと行い、キャラクターのバリエーションの制作も進めていきました。
コーディング
デザインが決定したあとは、実際のサイト環境で再現していくコーディングの作業に入ります。
動きの部分でも「やさしくて、ちょっと面白い」を表現できるよう、細かな調整を重ねていきました。
トップページの写真は水の波のようにやさしくスライドしていき、予約ボタンのイカくんはコミカルに「ぽいんっ」と跳ねてくれます。コーディングはまさに、Webデザインに命を吹き込んでいくような作業。動きがつくことで、よりサイトの雰囲気の深みが増していきます。
新人コーダーの片山です。
イカくんの部屋、院内ツアー、院長からのメッセージのページをを担当しました。
こうしたお楽しみ要素の強いページを作成するのは初めてでしたので、ワクワクしながらコーディングさせていただきました。
もちろん楽しいだけでなく、制作途中では実装で難しい箇所もあり挫けそうになったのですが、デザイナーさんやディレクターの方と沢山ご相談いただき、無事形にすることが出来ました。
改めてサイトはチームで作るものだと感じましたし、水野眼科様とサイトを訪問される方の双方にとって、よいサイトが作れたのではないかと思います。
私の推しポイントは「イカくんの部屋」の残念！没キャラ発表です。
ボツになってしまったキャラクター達を紹介しているのですが、1キャラずつ
デザイナーさんの哀愁漂う素敵なコメントが入っているのでぜひご覧ください！
（コーダー：片山 杏映）
プログラミング
お知らせのサイトは、サイトの納品後に水野眼科のスタッフの方に日々更新をお願いするページです。Webに関する知識があまりない方でも簡単にテキストの入力や編集ができるよう、最適な方法を相談しながらシステムを構築していきます。
今回、水野先生から「大事なお知らせが休診のお知らせで流れてしまうのが困る」とお伺いしていたことから、休診とそれ以外のお知らせが別の一覧で確認できるよう、デザインとシステムの両方で工夫をしながら実装していきました。
今回の水野眼科様の案件では、開発のサポートとして参加させていただきました。
また、今回のイカくんを作るにあたり、元々は新しいロゴをということで、プロジェクトメンバー全員で一人一案以上持ち寄ってのコンペを行ったりして、本来の役割とは違う部分にも携われたりして、とても楽しい案件でした。
また、本業の開発のサポートに関してですが、今回WPの実装が初めての方でしたが、やはり切れ者であったのか、ほとんどサポートすることなく、実装して下さったので、僕の仕事は最後のちょっとした調整くらいしかありませんでしたね。。。
ですが、こんな素敵なサイトの作成に少しでも携われたことを僕自身誇りに思います。
（エンジニア：田中 知也）
みなさま、ご機嫌イカが？くコ:彡
コーダーの奥川です！
今回の水野眼科様のサイト制作では、下層ページ一部とWordpress実装（お知らせ投稿機能）を担当いたしました！
Wordpress実装は実案件では初めてで、緊張でゲッソリ（ゲソ）してしまったのですが、チームメンバーの支えもあって完成にこぎつけることができました！
皆さんはもうリニューアル後のサイトはご覧になりましたか？
眼科さんらしく清潔感がありつつもポップで親しみやすく、イカくんを各所に散りばめて世界観も面白い、素敵なサイトになっております！
こんなイカしたサイトの制作に携わることができて、本当に良かったと思います！
チームメンバーと水野眼科様に感謝を込めて。
（エンジニア：奥川 拓海）
撮影
全ページの制作が進み、撮影が必要なカットが決まればカメラマンとビジュアルの撮影を行います。
撮影カットのイメージはデザイナーがデザインに合わせて考え、撮影の香盤表（撮影を進めていくための当日の進行表）はディレクターが作成します。
サイトの雰囲気に合わせて、少し青みがかった、やさしい空気感を目指しながら、水野先生のやさしい表情や、院内の様子を撮影。はじめての患者さんにも、病院の雰囲気を想像してもらえるようなカットを目指しました。
6月の雨あがりで撮影を行いました。 撮影前に、イメージボードを見せてもらうのですが、あのかわいいイカくんが散りばめられたデザインに「なんだか私の持っている眼科さんのイメージと違うぞ…」と惹き込まれたのを覚えています。 完成したウェブサイトは、まるで水の中にいるようなかわいいデザイン！ 病院って、不安な時に行く場所だからこそ、こんなに明るく、オープンな眼科さんがある地域の皆さんがうらやましくなるほど。 また、普段フォトグラファーは撮影現場にいるだけですが、撮影日はブリッジに立ち寄って、イカくんがデザインされ、サイトを生み出す「チームの力」を実感できたのもよかったです。 ありがとうございました！
（カメラマン：前田奈海）
プランニング/ライティング
押忍！プランナー兼ライターの宮下です！ サイトの企画と、「院長からのメッセージ」の取材執筆を担当しました。 企画では、初診の方に安心して水野眼科を訪れてもらえるように「目のお悩み」「院内ツアー」コンテンツを追加。再診の方や地域の皆さんに愛着を持ってもらえるよう、水野眼科のキャラクター爆誕。 取材執筆では、先生の地域医療への思いはもちろん、趣味や好きな漫画、実はヘヴィメタがお好きなことなど、プライベートなお話盛りだくさん。さらにイカダジャレとおじさん構文のスパイスを加えて、気分は最＆高。 水野先生、そして案件メンバーの情熱と才能がクセの強い元気玉になり、宇宙を照らす唯一無二の眼科サイトが出来上がりました。すべからく刮目せよ！m9( ・ω・) ﾄﾞｰﾝ
（プランナー/ライター：宮下知子）
ディレクターのコメント
どうも、イカディレクターの谷口です。
（イカスミ発射）
今回のサイト進行は終始めちゃめちゃふざけて、じゃなかった楽しんでディレクションしました。
ぼくがどれくらい楽しんだかというと、エルサレム入城のときにイエスがなんかめちゃめちゃするじゃん、
ほら商人たちの机や台などをひっくり返して回ったりなんかそういうことをしてるときのことだけど。
まあ、あれくらいテンション上げて取り組みました。冗談抜きで。
成功要因は3点あって、そのうち最も大きかったのはクライアントの水野先生が最高のクライアントだったってこと。
しゃれがわかるというか、めちゃめちゃノリノリで制作にコミットしてくれて、ぼくたちが提案したほとんどなんでも「それおもしろいね！」と肯定してくれたこと。
忙しいなか、何時間も撮影につきあってくれたこと、何度も自転車でいったりきたりしてくれたこと、とても感謝しています。
いつのころからか案件連絡チャットには「OKいかせんべい！」とか、「ご都合イカがでしょうか？」や、「イカでいきましょうくコ:彡〜」、「以下略」のようなイカギャグがあふれかえり、ぼくたちは水野先生と昭和てきな固いきずなで結ばれました。
こういうのってほんとに大切。
ぬるぬるしたイカスミが最高の潤滑油になって案件をスムーズに回してくれました。
2点目はチーム編成。 召集したチームメンバー全員に（営業からプランナー、エンジニアすべて）必ず1人1案ロゴデザインを持ち寄ってもらい、社内コンペにかけました。 「なんだかよくわからないけれどこのチームではクリエイティブなことをするぞ」という暗黙の了解というか苛烈なプレッシャーが、メンバーのポテンシャルを実力以上に引き出してくれました。 これもほんとに大事。 人は言われてやるのと自分から進んで考え工夫を凝らすのではアウトプットの質に倍以上の開きがあるとされています。
そして3点目はもうわかるよね。
そう、イカくん。
病院のマスコットキャラクター案を出しまくってるときに一度は「クラーケンを想起させるから怖い」と却下されたイカモチーフが奇跡の逆転返り咲きを果たしました。
「目がいい（とされている）」、「心臓が3つある」、「実は貝の仲間」など、あまり知られていないイカ雑学にも詳しくなりました。
なにより、クマやネコなど、いかにもな病院動物キャラクターから見ると極北の位置にあるその存在感は際立ってオンリーワンで、イカすWEBサイトになったと思います。
まあ、なんていうか軸ができたし、それってとっても重要な要素。
ああ、でもぼくがこんなにふざけていられるのも、締め切りや素材管理、撮影ディレクション品質チェックをしてくれた優秀なアートディレクターがいたからというのも最後にさらっと付け加えておきますね。
ぼくはディレクターとかそういうのよりも、モチベーターとか鼓笛隊みたいなことのほうがよほど向いてるのかもな。
（ディレクター：谷口 正樹）
ディレクターアシスタントの高松です。
初期のWF作成から携わりました。 このプロジェクトはデザイン重視でWF作成から特殊でした。 社内コンペで選ばれたキャラクターデザインもプロジェクトの魅力のひとつで、 会社全体でクリエイティブなアイデアを出し合い、最適なキャラクター「いかくん(仮)」が選ばれました。
そのイベントでプロジェクトへの共感と協力意欲が高まったと思います。 私自身普段はお客様との対話が少ないですが、今回は水野先生とコミュニケーションを取る機会があり、非常に愛着のある仕事となりました。
（ディレクターアシスタント：高松 竜）
お客様からの声
クリニックのホームページに期待する役割っていろいろあると思うんです。診療内容や設備を紹介したり、医学情報を提供することは重要なことなのですが、閲覧する患者さんやこれから受診を考えている人にとっては欲しい情報の半分なんじゃないかなって。どんな雰囲気なの、どんなドクターがいるの？ってのが気がかりだから、ページを開いてくれるんじゃないのかって。初代のHPは、開院準備と並行しながら制作していただいたので、当たり障りない無難なまとまり方ではあったのですが、あまり温度感がないなと感じていました。いかがなものかと。
開院から9年が経ち、思い切ってリニューアルを考えました。2代目の制作にあたって、なんとなくこういうのがいいなって頭の中にあったのですが、うまく表現できないんですよね。以前からマスコットキャラクターは欲しいなとか、ごちゃごちゃしない清潔感のあるものにしたいなとかはあったのですが、それ以上の言葉が浮かんでこない。はてさて、うまくいくものかなと不安な気持ちを抱えたまま、制作チームの皆様とお会いしました。ところがどっこい結論から言うと、あれよあれよと形になったんです。聞く力って耳を傾けるだけじゃないんですよね。チームの皆様から、「なんでもいいので言ってください」「なるほど！では、こんな雰囲気でいきましょう！」「じゃ、こういうのはどうでしょう？」「こんなことまでやっちゃいましょう」と、形のなかったものが次々と目の前に現れました。こちらが出力した漠然としたイメージをうまく咀嚼して、具体化し提案する力・・・ディレクターの谷口さんを筆頭にチームの皆様の熱意に圧倒されつつも、そのパワーにこちらもどんどんテンションがあがっていました。悩むスキさえなかったですね・・・「イカでいいのか？」と。
イカをマスコットにするなんて異色だと思います。普通はクマやゾウみたいに可愛げな動物がセオリーなのでしょう。正直言うと、普通じゃないと判断し一旦却下にしましたが、いま思えば、その時は理性的な医師を演じなきゃいけないと思ったのかもしれません。仕事が終わり白衣も脱いで、あらためて提案された幾多のマスコットを眺めていると、明らかにイカくんだけタッチが強かったんです。もともと、無難なものは面白みがないと考えるほうでもあるので、まるで吸盤に吸い付かれるかのようにイカくんにしか目がいかなくなりました。一夜明けて谷口さんにチャットしてました・・・「イカで行こう」。
リニューアルをお願いしたときには想像もしなかったイカ基軸。完成してみると、自分のなかでは違和感がまったくなく、目指していたものに仕上げていただいたなと感服しています。産みの苦しみというより、スイスイ泳ぐように展開していきました。これもひとえに素晴らしいチームに担当していただいたおかげです。あらためて感謝申し上げます。
漠然としたものが形となり、瞭然の世界に橋がかかりました（ブリッジコーポレーションだけにね！）
（水野眼科 ：水野 秀信院長）
最後に
以上、水野眼科さんの案件ストーリーをお届けいたしました。
個人病院のように、Web上での情報が生活者との最初の接点になるお店や企業は数多くあります。こうした状況では、Webサイトで発信する情報や、Webサイトのデザインで表現する世界観が第一印象になります。
「企業・お店の顔としてのサイトづくり」には、コンセプト設計（＝生活者に何をどう発信するか）から丁寧に進めていくことが何より重要です。弊社ではコンセプト設計からクリエイティブ制作まで社内で一貫して行う体制があり、ブレないものづくりが可能です。サイトづくりで迷っている方は、ぜひ一度お問い合わせください。
この記事が、Webサイト制作の不安・迷いを払拭するきっかけになれば幸いです。
それでは、また！
