top logo

Works

タイトル:

仮の工務店
リフォーム専門BuildMap

(school work)

メディア:

Website

ターゲット:

三十代から五十代まで夫婦または婚約者同士

ゴール:

会社情報展示
業務内容と実績展示
連絡方法とアクセス説明

時間:

2ヶ月

ツール:

Figma / Photoshop /
Illustrator / VsCode

BuildMap's showcase image

情報設計:

この作品では、競合サイトを調査し、コーポレートサイトを想定しました。コンテンツはトップページのほかに、会社概要、事業内容、実績紹介、記事といったサブページを設計しました。

トップページ: 工務店の基本情報や業務内容の概要に加え、一部の実績および一部の記事を表示すると構成しました。このページでは工務店の基本情報をまとめて、お客様に必要な情報を整理して掲載、お客様がスムーズに理解できるような構成します。

会社概要:工務店の概要やアクセス情報、さらに詳しい連絡方法の掲載するを構成としました。このページでは、「会社概要」と「連絡方法」という二つのセクションで構成して、詳しい連絡方法では、ほかのページに載せてない内容を追加、またはこの部分にスムーズに遷移できるように設計しました。

業務内容:工務店の主な業務を紹介します。このページでは、工務店の主要なサービスをどのように理解してもらうかを意識して設計しました。主な業務は二つである、各業務の説明には、概要、できること、Before/Afterの変化そして業務の実績で構成しお客様が流れに沿って、自然に情報を受け取るようにします。また、写真を活用して、業務のできることを可視化することで、お客様に事業能力を直感的に感じ取れるように目指します。お客様に業務内容をスムーズに理解し、事業能力を直感的に感じ取れるように設計しました。

記事: 工務店のブログとイベントのお知らせを掲載しています。このページではメインインフォーメーション以外の情報の補足し、お客様により幅広い情報を伝えるため想定しています。また、ブログ自体も工務店のイメージを構築し、親しみやすく、身近に感じられる、町の雰囲気を伝えるようにします。

デザイン:

高級感と清潔感を兼ね備えた雰囲気を表現し、新生活に向かうお客様に安心感を与えるようにするデザインを制作します。

白を基調に、十分な余白を確保して、細めの明朝体フォントを使うことで清潔感と高級感を表現します。タイトル文字部分はやや装飾性を持たせたレトロなフォントを使い、デザイン性を表現します。

さらに、落ち着きのあるウォームナチュラルな色彩を選んで、新生活に向かう際の不安を和らげ、安心感を伝える雰囲気を構築します。

色:

#FFFFFF
#4F2212
#FFE6A7
#7D3836
#BB9457
#99582A
detail img for sp detail img for pc
detail img for sp detail img for pc
detail img for sp detail img for pc
detail img for sp detail img for pc
detail img for sp detail img for pc