【webデザイン制作の参考に】1つのwebサイトを研究してみよう!①

勉強させていただくサイト

牧野建設|愛知県清須市・名古屋市で注文住宅の建築、リフォームを行う一級建築事務所。
愛知県清須市でこだわりの詰まった注文住宅の意匠設計から建築、リフォーム、耐震補強をリーズナブルな価格で行う一級建築事務所の牧野建設です。清須市を中心に名古屋市やあま市、津島市、稲沢市、北名古屋市などで一戸建てや建て替えなど、お客様のこだわりの家づくりをお手伝いします。


ファーストビュー

画像を画面幅いっぱいに配置し、スライダーで見せています。

キャッチコピーを中心の下部に配置することで、画像全体が見えやすく、スライダーの邪魔をしないよう考えられた配置となっています。

キャッチコピーは日本語の下に、フォントサイズを下げて英語表記を配置しています。

これだけでシンプルなのにかっこいいスライダーに見えます。

スライダーの表示時間がわかるようにアニメーションをつけているのも、デザインとしてもお洒落ですし、ユーザーにも優しい心遣いですね。

フォントについて

見出しには明朝体の「Noto Serif JP」、テキストにはゴシック体の「游ゴシック」(一部Noto Serif JP)が使用されています。

こちらの「Noto Serif JP」はヒラギノ明朝に比べると、筆が緩やかで柔らかい印象です。

このフォントを取り入れていることで、企業としてのしっかりとした印象を与えながらも、どこか優しさのある親しみやすい印象も感じ取れます。

配色

白、黄緑、ベージュの組合せで、「木の温もり」や「癒し」を感じます。

全体的に優しい配色で、「心地よい住まいでの暮らし」がイメージできます。

構成

「私たちについて」→「事業案内」→「施工事例」→「施工の流れ」→「お知らせ」→「お問い合わせ」という構成でした。

事業案内はの2つは、画像を大きく使い縦に並べています。

「この会社が何を売りにしているのか」「どんな事業を行なっているのか」が分かりやすく、シンプルでユーザーにもアピールしやすいレイアウトですね。

途中、パララックスで住宅の画像を見せているのも素敵だと感じました。

まとめ

今回は1つのwebサイトのフォント、配色、構成などの研究してみました!

普段ユーザーとしてサイトを見るときは、必要な情報を探すため見過ごしてしまいますが、

サイト内の各パーツを見ていくと、いろんな理由があってその答えに辿り着いたことが分かり、大変勉強になりました!

コメント

タイトルとURLをコピーしました