自主練の記録

Webデザインのトレース #2. ハルイロ歯科クリニック

今回は、ハルイロ歯科クリニックさんのWebサイトをトレースさせて頂きました。
左がお手本、右がトレースです。Photoshopを使用してます。
 

選んだ理由

  • 良い意味で医療系施設のサイトに見えなかった
  • 診療情報や予約の部分がシンプルでわかりやすいデザイン
  • セクションが並行で練習しやすそうだった
  • 医療関係のサイトに興味があった 

 

デザインの観察

トーンを抑えたナチュラルな配色

ベージュや白を基調としたシンプルな配色。
トーンを抑えて自然で優しい雰囲気があります。
文字やボタンには茶色を使い、メリハリがついて見やすいです。
 

テキストの観察

 

フォント

主に使用されているフォントは以下の2種類でした。
游ゴシックの特徴は字面が小さく文字間にスペースができるため、ゆったりとした明るい印象になるそうです。Futura幾何学的、近代的といった印象を持つフォントです。游ゴシックの落ち着いた印象にFuturaの未来的な印象が加わって、大人向けの明るく楽しい雰囲気になっています。
 
全体的にフォントサイズは小さめで、ジャンプ率も控えめ。
強調したい部分は太字を使ったり、余白を大きめにとったりしてメリハリをつけています。
字間や行間が広めで一行の文字数も少ないため、見ていてストレスを感じにくいです。
  • body・h2  :13px
  • お知らせ    :12px
  • 院長の名前 :20px

 

背景とオブジェクトでコンテンツの区切りを明確に

各コンテンツごとに背景色が違うので、区切りがわかりやすいです。
また写真、表、地図などコンテンツごとに大きめのオブジェクトがあり、スクロールして流し見しただけでも簡単に目当てのコンテンツが見つけられます。小さめの文字がオブジェクトの存在感を引き立ててくれています。
 

ページ上部に戻るボタン

画像には写っていないのですが、実際のサイトにはこのボタンがあります。
丸くて可愛いらしい、シンプルなデザイン。
ただ「白+背景透過」された画像のため表示する場所によっては見えにくいです。
見えにくいですが画像が2枚あります。
左のように茶色いフッター部分にあるときは見やすいのですが、その他の部分では右のように色がかぶって認識しにくいです。
 
他の色にするなら…と考えてみたのですが、
茶色にするとフッターのところで色がかぶって見えないし、
他の色も背景に使われているから場所によっては結局、見えない。
今回使用していない別の色にするとアクセントカラーみたいになって目立ち過ぎる。
圧迫感のない自然なデザインにするには、結局これが適しているのだと思いました。
 

ターゲットを予想してみる

全体的に安心感のあるナチュラルで落ち着いた雰囲気と、小ぶりなかわいらしい文字から、「大人の女性(30代前後)」向けのデザインだと思いました。また、フォトギャラリーに「小児向けのおもちゃ」や「ポップな色の歯ブラシ」の写真があることから「小さい子どもがいる女性」とその「家族」もターゲットと考えられます。 
 

最後に

今回は「ハルイロ歯科」さんのWebサイトをトレースしました。
余白の使い方やコンテンツの区切り、メリハリのつけ方、フォントの印象など、たくさん勉強できました。
前回に続いてナチュラルな雰囲気のサイトをトレースしたので、次回は違ったデザインに挑戦したいです。
ABOUT ME
fuyu_na
独学でデザインを学びフリーランスのデザイナーになった元理学療法士。グラフィック・Webデザインの仕事を中心とし、SEO・Webライティングの腕も磨いてます。とにかくデザインに夢中。