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

今回も医療系なのですが、歯科医院のサイトを模写してみました。今回はスマホサイトではなく、PCサイト。やはりPCサイト模写はスマホサイトの倍ぐらいの時間がかかってしまいます。今日はページの半分ぐらいまで。今回もXDを使用したのですが、ひとつ問題発生！XDは縦書きに対応していないのですよねぇ。プラグインで"Tategaki for Adobe XD"というものを入れたら解決するそうなのですが、なぜだかプラグインを検索してもヒットしない。。。私のやり方が悪いのか、はたまたTategaki自体がもうなくなってしまったのか。そのあたりは分からないのですが、早いとこPhotoshopのように縦書き横書きを自由自在に切り替えられるようになるといいなぁ。ですので、今回のサイト、一部縦書きの記載がありますが、そこは割愛させていただいています。
サイト模写をして気づいたことを、いくつかまとめてみたいと思います。

◆ファーストビューにはナビゲーションメニューが表示されず、少しスクロールダウンすると、縦書き表示のメニューが出てくる。そのかわり、ファーストビューでは右上に、正方形であしらわれたFacebookアイコンと、"RECRUIT"ボタンが！医院のロゴが正方形をモチーフにしているので、ページの随所に正方形が散見され、いいアクセントになっている。

◆ページ右端にスクロールダウンの矢印があるが、矢印の矢の部分が上下に動いていて、静的なページのなかで唯一動的なはたらきをしている。何気ないシンプルな演出だけど、シンプルだからこそ余計に目を引く。

◆使用フォントは"Noto Sans JP" "Noto Serif Japanese" "Overpass"の三種類。セリフつきのNoto SerifとシンプルなNoto Sansを効果的にうまく使い分けている。縦書きのナビゲーションやキャッチコピーには、やはりNoto Serifがしっくりくるなぁと思った。

◆「お知らせ」「院長について」などのヘッダーは、26ピクセル。授業で先生がおっしゃっていた、ヘッダーの文字サイズと一致する！やはりいちばん適切なサイズなのだなぁ。

◆配色は白をベースに濃淡の違う茶色が数種類。ナチュラルながらも、フォントをシンプルにして余白をたっぷりとってあるため、現代風、しかも茶色が醸し出す高級感が漂う品格あるページに仕上がっている。

明日また続きを頑張ろうっと！

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

(traced site:  completed 50%)

(original site)