Figma UI Design / Learning Work

住宅リフォームサイト
UI Design

SAMURAI ENGINEERでの学習課題として制作した、住宅リフォーム会社サイトの Figmaデザインです。
高齢夫婦を想定し、安心感・信頼感・わかりやすさを重視して設計しました。

01. Overview

デザインの概要

制作区分
SAMURAI ENGINEERでの学習課題 / Figmaデザイン
想定サイト
住宅リフォーム会社のWebサイト
ターゲット
60〜80代の夫婦・セカンドライフを考える世代
担当範囲
情報設計 / ワイヤーフレーム / UIデザイン / プロトタイプ
使用ツール
Figma
制作意図
大きな文字、落ち着いた配色、迷いにくい導線を意識し、 高齢層でも安心して読み進められる構成を目指しました。

02. Design Overview

サイト全体モックアップ

PC版・スマホ版の主要画面を並べ、全体のページ構成とレスポンシブ設計を確認できるようにしています。

住宅リフォームサイトのPC版とスマホ版の画面を一覧で並べたFigmaモックアップ
PC / SP 各ページの全体構成 原寸で開く

03. PC Screens

PC画面デザイン

住宅リフォームサイト PCトップページデザイン
トップページ 原寸で開く
住宅リフォームサイト PC施工実績一覧ページデザイン
施工実績一覧 原寸で開く
住宅リフォームサイト PC施工実績詳細ページデザイン
施工実績詳細 原寸で開く
住宅リフォームサイト PCお問い合わせ完了ページデザイン
お問い合わせ完了 原寸で開く

04. SP Screens

スマホ画面デザイン

住宅リフォームサイト スマホトップページデザイン
トップページ 原寸で開く
住宅リフォームサイト スマホ施工実績一覧ページデザイン
施工実績一覧 原寸で開く
住宅リフォームサイト スマホ施工実績詳細ページデザイン
施工実績詳細 原寸で開く
住宅リフォームサイト スマホお問い合わせ完了ページデザイン
お問い合わせ完了 原寸で開く

05. Design Points

デザインのポイント

01

安心感のある配色

やわらかいグリーンをベースに、相談しやすい落ち着いた印象を目指しました。

02

見やすい文字設計

大きめの文字サイズと余白を使い、年齢層の高いユーザーでも読みやすい画面を意識しました。

03

わかりやすい導線

トップ、施工実績、お問い合わせへ迷わず進めるように、ナビゲーションとCTAを整理しました。

04

相談しやすい構成

不安や疑問を解消しながら、自然に問い合わせへ進める情報順序を意識しました。