せろりのセオリー | Webサイト100選

Webデザイン未経験の私が、魅力的で優れたWebサイトを見て考察力、表現力を学ぶ学習サイトです。

No.62 関工務店

■概要

長野県にある住宅・リノベーションの設計・施工を提供する工務店のホームページ。

 

■視点

全体的に落ち着いた印象で安心感を与えるこちらのサイトをレビュー。安心・安全を余白や画像、文字の使い分けで上手く表現されている点に着目する。

 

 

■ターゲット

家の建設・リノベーションを検討している人

 

 

■FV

「安全に暮らす。安心して住まう。」という縦文字のキャッチコピーがパッと目に入り、施工例の家がゆっくりとスライドで流れる。温かみのある木造の家と猫の写真が、コンセプトである安全、安心を表している。(猫ものんびり過ごせるお家)

背景をシンプルな白にすることで、木造の温かみが伝わってくる。お店のロゴをあしらいで入れていてアクセントになっているが、色味を抑えているため写真とも馴染んでいる。また、右上テキストの背景に入れることで全体のバランスを取る役割にもなっている。ナビゲーションとsnsは左側に固定。サイトの雰囲気に合わせてか、アイコンは使わず文字での表示となっている。

 

 

 

■特徴

・全体

背景を白や薄いグレーにすることで、施工例の素朴で「安心して過ごせる場所」という雰囲気が際立つ。
訴求点であるコンセプトと関工務店ストーリーの見出しは、ジャンプ率が高くメリハリがあり目に入りやすい。

せろりのセオリー/ Webサイト100選 No.62  関工務店

せろりのセオリー/ Webサイト100選 No.62  関工務店

 

 

 

・関工務店ストーリー

施工例をゆっくりとしたスライドで表示。写真は高低差をつけて配置されていて、緩やかな波のような動線になっている。両隣にテキストが無く余白があるため、読みたい内容に集中しやすい。
施工例の見出しは縦文字を使用、番号を振ることで施工例の多さ=会社の信頼に繋がる。

せろりのセオリー/ Webサイト100選 No.62  関工務店

せろりのセオリー/ Webサイト100選 No.62  関工務店

 

 

 

他のセクションタイトルは縦文字にし、写真・テキストの配置もユーザーの見る動線を意識したデザインになっている。背景色が切り替わる少し前に文字を配置することで、余白をたっぷり取りながらも次のコンテンツへの繋がりをユーザーに確認させることが出来る。

せろりのセオリー/ Webサイト100選 No.62  関工務店

せろりのセオリー/ Webサイト100選 No.62  関工務店

 

 

■フォント

・テキスト:FOT-筑紫Aオールド明朝 Pr6 M
・SNS:Scheherazade

 

 

 

■配色

・ベースカラー:#fff, F2F2ED, 76706A
・文字:#333

せろりのセオリー/ Webサイト100選 No.62  関工務店

せろりのセオリー/ Webサイト100選 No.62  関工務店

 

 

 

 

Webサイト:関工務店

せろりのセオリー/ Webサイト100選 No.62  関工務店

せろりのセオリー/ Webサイト100選 No.62  関工務店

次へ 投稿

前へ 投稿

返信する

© 2025 せろりのセオリー | Webサイト100選

テーマの著者 Anders Norén