制作過程

1. 01.目的・依頼内容

   目的

   新しく開院するので、Webサイトがほしい。

   依頼内容

   • ・Webサイトを作成してほしい
   • ・ファーストビューでも想いが伝わるようにしてほしい。
   • ・患者さんが安心できるような雰囲気にしてほしい。
   • ・洗練された印象でも、親しみやすい印象でも、どちらでも良い。
   • ・長く使えるWebサイトにしてほしい。
   • ・素材は院内と診察室の写真、医院長の写真の支給のみ。その他の写真は、フリー素材で使用してほしい。

2. 02. ターゲット・ペルソナ

   1. 特徴と強みを洗い出し

      ワイヤーフレームから特徴と強みを洗い出し、依頼者も気づかない強みなどを読み取ることを意識しました。立地や理念から、営業時間がこの歯医者の最大の強みになると考えました。

      

   2. 特徴と強みからペルソナを決める

      強みから想定される人物像を決め、そこからより具体的なペルソナを設定。先述で設定した強みから、「仕事柄なかなか歯医者に行く時間が取れない40歳女性」をターゲットに設定しました。

      

3. 03.デザインのトンマナ設定

   設定したペルソナに刺さりそうな雰囲気のサイトを参考にし、配色やフォントの選定をしました。
   配色は誠実で安心感のある青系統の色、そしてアクセントカラーは補色である赤色を選定。
   フォントは柔らかい印象を与えるゴシック体のフォントを使用。優しい雰囲気になるようにイラストを配置いたしました。
   これらのことから、親しみのある優しい雰囲気のサイトに仕上げました。

   Color

   

   Font

   Noto Sans JP

   

   Rounded Mplus 1c

   

4. 04.レイアウト

   メインビジュアルではキャッチピーを強調したかった為、イラストとの差別化を意識して配置。
   ABOUTセクションではデザインにリズムが生まれ、文章が目に入ってくるように縦書きに。FLOWセクションではアイコンを用いて視覚的に理解しやすいようにデザインしました。Doctorセクションでは文字が最初に目に入ってくるように視線誘導を意識してレイアウトを組みました。
   また、レスポンシブ対応では可読性を意識してレイアウト、文字サイズ、余白間などを調整しました。

5. 05.コーディング

   誰がみても理解しやすいようにコードの整理、コードの構造を意識しました。
   レスポンシブ対応ではレイアウトの崩れを修正することに苦労しましたが、試行錯誤を重ね、
   PC、タブレット、スマートフォンそれぞれレスポンシブ対応させることができました。
   最後にJavaScriptを使い、動きのあるサイトに仕上げました。親しみのあるサイトにしたかった為、ふんわり出現する動きをつけました。