余白と罫線を意識する。ヤマモト工務店のwebサイトデザイン

京都の舞鶴市にある、デザイン性に特化した注文住宅をつくられているヤマモト工務店さまのwebサイトをリニューアルさせていただきました。

今回もサイトリニューアルで、稼働しているwebサイトがある中でテストサーバー環境を用意し、その環境内で新しいwebサイトを制作していきました。

サイトリニューアルに取り掛かる前の準備

サイトリニューアルの目的はクライアントさまによって様々です。
問い合わせを増やしたい、ゴールに向けて再設計したいという目的の場合もあれば、古く感じるサイトデザインを一新したい、バラバラになっているコンテンツに統一感を持たせたいといった目的の場合もあります。今回は後者でした。

webサイトのリニューアルはすでに公開されているwebサイトを作り変えることになるので、まずは現サイトがどのような構造でつくられているかを調査するところからはじまります。確認するのは下記の項目です。

などなど。
家を建てることをイメージするとわかりやすいのですが、新規でwebサイトをつくる場合は更地に新築の家を建てるイメージです。サイトリニューアルの場合は元々建っている家があって、その家を建て替えるイメージに近いです。

なのでサイトリニューアルの事前調査は元々建っている家があるので、どこにどんな部屋があるのかや家の構造を確認し、どの部屋を残すのか、どこを建て替えるのかを決める工程です。

今回のケースでは施工事例やお知らせなど、社内のスタッフさまが高頻度で更新されているようだったので、その辺りはあまり変えないように気を配りながら（変えてしまうと更新手順も変わってしまい、混乱を招く恐れがあるため）、新しいデザインに作り変えていくことを意識しました。

タブレット、スマートフォンでも違和感のないレスポンシブデザイン

もはや記載する必要がないくらい当たり前の工程ですが、様々なモニターサイズに柔軟に対応したレスポンシブデザインでのwebサイト制作。

ページ数は約30ページほどの中規模webサイトでしたが、基本的にすべてのページ（記事の中身以外）をご要望に沿った形で作り変えさせていただきました。

オリジナルで制作するアイコンや挿絵のデザイン

今回のwebサイト制作ももちろん必要なアイコンや挿絵・図もヤマモト工務店さまのトンマナに合わせて制作させていただきました。

罫線を使うwebサイトデザインの雰囲気に合わせ、アイコンも細い罫線を心がけて制作。
実際に表示するサイズを何度も確認しながら試行錯誤して線の太さを決めました。

ページ内に表示させる図も罫線を意識し、細い線と太い線の2種類を使って制作していきました。

TOPページに表示させるバナーもPC用とスマホ用それぞれ制作。

デザインにこだわりのある工務店さまなのでwebサイトもリニューアルのタイミングでさらにデザイン性を上げたいとおっしゃっていましたが、新しくなったwebサイトをすごく気に入ってくださり、非常に満足していただけました。

制作させていただき、ありがとうございました。

ヤマモト工務店のwebサイトはこちらから

実際のサイトは下記のリンクよりご覧ください。
※webサイトによっては変更・クローズしてることもありますので、その際はご容赦ください。