勉強させていただくサイト
ファーストビュー
画像を画面幅いっぱいに配置し、スライダーで見せています。
キャッチコピーを中心の下部に配置することで、画像全体が見えやすく、スライダーの邪魔をしないよう考えられた配置となっています。
キャッチコピーは日本語の下に、フォントサイズを下げて英語表記を配置しています。
これだけでシンプルなのにかっこいいスライダーに見えます。
スライダーの表示時間がわかるようにアニメーションをつけているのも、デザインとしてもお洒落ですし、ユーザーにも優しい心遣いですね。
フォントについて
見出しには明朝体の「Noto Serif JP」、テキストにはゴシック体の「游ゴシック」（一部Noto Serif JP）が使用されています。
こちらの「Noto Serif JP」はヒラギノ明朝に比べると、筆が緩やかで柔らかい印象です。
このフォントを取り入れていることで、企業としてのしっかりとした印象を与えながらも、どこか優しさのある親しみやすい印象も感じ取れます。
配色
白、黄緑、ベージュの組合せで、「木の温もり」や「癒し」を感じます。
全体的に優しい配色で、「心地よい住まいでの暮らし」がイメージできます。
構成
「私たちについて」→「事業案内」→「施工事例」→「施工の流れ」→「お知らせ」→「お問い合わせ」という構成でした。
事業案内はの２つは、画像を大きく使い縦に並べています。
「この会社が何を売りにしているのか」「どんな事業を行なっているのか」が分かりやすく、シンプルでユーザーにもアピールしやすいレイアウトですね。
途中、パララックスで住宅の画像を見せているのも素敵だと感じました。
まとめ
今回は１つのwebサイトのフォント、配色、構成などの研究してみました！
普段ユーザーとしてサイトを見るときは、必要な情報を探すため見過ごしてしまいますが、
サイト内の各パーツを見ていくと、いろんな理由があってその答えに辿り着いたことが分かり、大変勉強になりました！
コメント