ハル歯科医院　#サイト模写⑩

昨日の引き続き、歯科医院のサイトを今日は最後まで模写しました。やはりPCサイトを上から下までトレースするのは、それなりの時間がかかりました。目がショボショボしますが、めげずに気づいたことを少しですがまとめてみたいと思います。

◆これまで模写したサイトで、長方形や正方形同士を、あえてぴったりではなく少しずらして配置するデザインをよく見かけた。今回のサイトで言えば例えば
・「お知らせ」の下の「VIEW MORE」の正方形
・「院長について」の「VIEW MORE」の正方形
・「ブログ」の下に配置されたカラフルなカルテの画像と「ブログ」記事の長方形
・ヘッダーの「PAGE TOP」長方形
に、その傾向が見られた。少しずらすことで、抜け感が出て型苦しさが和らぐ感じ…今風のトレンドなのかな。

◆ページ中ほどの「当院について」「診療について」「自費治療について」は、横一列のグリッドレイアウトで見やすい。画像に茶色の透明レイヤーを重ねることにより、視認性が高まるし、茶色をプラスすることにより、画像のイメージはそのままにナチュラルで洗練された印象に格上げしている。

◆フッターは、微妙に明度の異なる3種類の黒を重ねている。一見すると分からないような違いであるが、明度をほんの少し変えることによって、一貫性を持たせながらもセクション区切りがうまくできているなと思った。

◆フッターで、医院の住所とその横の診療時間は、シンプルなグレーの縦線一本で区切られている。枠で囲んだりせずに一本線だけで区切ることにより、ごちゃつかずスタイリッシュな印象。

◆アイコンに使われているピクトグラムがよくできている。例えば、「アクセス」のアイコンは、Googleマップなどで見られる目的地ピンの中に歯のモチーフを入れこんだり、「診療時間」はカレンダーのイラストに歯のモチーフを並べたり。歯科医院ならではの効果的な見せ方だと思った。

◆「お知らせ」「院長について」「ブログ」の下にこじんまりと鎮座する「＋」記号は、何か意味があるのかな？単なる飾り？十字ボタンかと思いきや、押しても反応せず。歯科医院のロゴにも十字のようなモチーフがあしらわれているから、何か関係があるのだろうか。

模写サイト引用元：デンタルステーションハル歯科医院様　（https://www.haru-shika.jp/）

(traced site: fully completed !)

(original site)