ホームページ制作（デザイン・実装）

【作品概要】

デザインカンプ（Illustrator）

【PCデザイン】

【制作意図】

地域に愛されるというコンセプトと提供された資料をもとに、30代~40代で小学生くらいのお子様がいるママ層をターゲットとして設定しました。また、ママだけではなく家族みんなで通える美容室という雰囲気が伝わるよう意識しました。

「人を前面に出したい」という要望があったため、写真を主役にした構成にしました。写真が埋もれないよう使用する色数を抑え、希望カラーである黄色をアクセントとして使用しながら、全体を白・ブラウンを中心とした柔らかいトーンで統一しました。

また、写真を主役にしたかったため、装飾はシンプルなものを選定し、全体の柔らかい雰囲気を演出する脇役として最小限に抑えました。
一方で、全体が柔らかくなりすぎないよう、図形は長方形を中心に使用し、きちんと感や安心感も感じられるように意識しました。

お子様の写真を多く使用することで、文字を読まなくても視覚的に「お子様と一緒に通える美容室」であることが伝わるようにしました。また、男性やご年配の方の写真もさりげなく使用することで、家族みんなで通える安心感を表現しました。

各ページのトップには大きく写真を配置し、統一感を持たせながらも、FVの主役感を損なわないよう背景の黄色は控えめに使用しました。
文字にはゴシック体を使用し、行間や字間を広めにとることで、ゆったりと過ごせる雰囲気を意識しました。
また、予約しやすいよう各ページに予約導線を配置しました。

実装（STUDIO）

【PC実装】

【制作意図】

制作したデザインをもとに、STUDIOでホームページ全体を実装しました。レスポンシブ対応を行い、お問い合わせフォーム、ページ遷移、電話リンク、予約リンクなど、ホームページとして必要な機能を設定しています。

実装では、PC・タブレット・スマートフォンそれぞれの画面サイズに合わせてレイアウトを調整しました。画面サイズによって画像やテキストの見え方が変わることを考慮し、配置や余白を確認しながら、各デバイスでも見やすいレイアウトとなるよう調整を行なっています。

また、写真や装飾はデザインに合わせて配置方法を使い分け、無理に同じ設定へ統一するのではなく、デザイン性と見やすさのバランスを意識して実装しました。レスポンシブ対応では数値だけで判断せず、実機でも表示や操作性を確認しながら調整を行い、各画面サイズでも見やすく操作しやすいレイアウトとなるよう仕上げました。