前回の続きで、カンプとサイトに対する指摘を反映していきます。

 

>・本文の文字はゴシック体にした方がいい(長文を読むのに読みやすいため)

こちらはフォントを変えればいいだけなのでそのまま変更

 

 

 

>・タイトルの「健康堂」が標準フォントでスタイリッシュさを感じない。全体的におしゃれなデザインにしているなら文字をロゴっぽく工夫するか、Googleフォントを使ってほしい

ゴリゴリの明朝体がダサい感じがしてきたので軽い感じのフォントに変更。ついでにフリー素材のシルエットを加えてロゴっぽくしました。

フォントの修正前後

 

 

>・ホバー時のボタンの色が背景色と同化しているため、色合いを変えること

微妙な差だけど、背景と見分けがつくように色合いを変更。

 

 

>・スマホでみたときにグローバルナビゲーションが画面外にはみだしている

こちらは、ロゴとグローバルナビゲーションの横幅がスマホ画面の横幅(320px)を超えていたことが原因でした。
ロゴは「min-width: 120px;」で横幅120px以下にできないようにしていたため、画面を縮めてもサイズが小さくならず、はみ出してしまったみたいですね。

横幅をとらないよう、ロゴとグローバルナビゲーションを横一列→2行に変更することで対応。

 

 

上記の修正を加えたカンプがこちらです:PC版  スマホ版
サイト:http://stellamite.work/site/kenkodo/index.html


また、今回は「新着情報」の広告をアニメーションでスライドさせていたのですが、そちらのコードの詳細については次回のブログで書きたいと思います。


それでは、最後まで読んでくださりありがとうございました!