DESIGN IT YOURSELF.

BUROKI


top

design

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

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

web

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

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

2024.05.23.

スポンサーリンク

スポンサーリンク

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

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

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

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

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

  • 何を使って制作されたwebサイトなのか
  • プラグインの使用状況
  • 構成されているファイル構造
  • wordpress管理画面の状況
  • webサイトのページ構成

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

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

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

下層ページデザイン
写真を大きく見せる下層ページのファーストビュー
コンテンツ一覧ページデザイン
更新するコンテンツ一覧ページデザイン
性能ページデザイン
家の性能を伝えるページデザイン

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

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

ヤマモト工務店さまのスマホ版webページデザイン その1
スマホの縦長モニター用に最適化したwebページデザイン その1
ヤマモト工務店さまのスマホ版webページデザイン その2
スマホの縦長モニター用に最適化したwebページデザイン その2

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

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

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

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

ヤマモト工務店のアイコンデザイン
ヤマモト工務店のアイコンデザイン

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

ヤマモト工務店の挿絵デザイン その1
ヤマモト工務店の挿絵デザイン その1
ヤマモト工務店の挿絵デザイン その2
ヤマモト工務店の挿絵デザイン その2

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

ASOLIEのバナーデザイン
ASOLIEのバナーデザイン(PC用とスマホ用)

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

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

production list

今回の制作で対応した項目
  • ロゴアレンジ
  • webデザイン
  • コーディング
  • アイコンやファビコン、矢印などのグラフィックデザイン
  • 挿絵や図のインフォグラフィック制作
  • バナーデザイン
  • wordpressでのサイト構築、メールフォーム設置
  • instagramフィード投稿表示
  • PC、タブレット、スマホ表示対応(レスポンシブデザイン)
  • サイト構造、プラグイン調査

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

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

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

design list

デザイン作品一覧

web

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

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

2024.05.23.

web

小細工不要。誠実さを伝えるBEAR'S WORKSのwebサイトデザイン

2024年最初のwebサイト制作実績です。 これまでもwebサイト制作をメインにして活動させていただいておりますが、サイトデザインのみの対応だったり大…

2024.04.10.

goods

のぼり刃物店さんの創業53周年記念ロゴデザインと缶バッジ&ステッカー

きたる4月1日、いつもお世話になっている大阪府茨木市にあるのぼり刃物店さんが創業53周年を迎えられます。 今年も昨年に引き続き、創業53周年記念の…

2024.03.27.

logo

プライベート銭湯・サウナが楽しめる松の湯のロゴデザイン

昨年の制作実績になりますが、友人が現在進めているプライベート銭湯(サウナ?)のロゴデザイン制作を担当させていただきました。 8月ごろにご依頼…

2024.02.25.

graphic

2024年は辰年。中日ドラゴンズをパロディした年賀状デザイン

BUROKI design的に新年の制作といえば、毎年恒例になっている福岡の木工集団ナノナノファクトリーさんの年賀状デザイン。 はじめて依頼をいただいて…

2024.01.22.

graphic

久しぶりにイラスト制作。カエルのキャラクターデザイン

昨年の制作実績となりますが、友人のプライベート銭湯を盛り上げるべく、ポスターやポストカードに使用するためのカエルのキャラクターを制作しまし…

2024.01.10.

designをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル