Works

ウェブサイト

2023.04.18制作

Ouchi

スクロール矢印

作品6

作品06デザインカンプ

デザインコンセプト

●店名:Ouchi(おうち)
美容室

●ターゲット:20代~女性

●設定:お客様に家にいるかのようにリラックスしてほしいをコンセプトにしています。パーマやカラーリングの待ち時間には、リラックス効果のあるハーブティーやお肌にもいいローズヒップティーなど多数ご用意し、ティーカップとポットで提供。店内には植物を多く配置し、全体をカントリーな雰囲気(小物、家具など)でまとめました。

制作時間

●お店とWebデザイン構想「2時間」
●素材の選定や写真加工「5時間」
●デザインカンプ「5時間」
●コーディング「12時間」=合計24時間

レスポンシブ

対応

使用ソフト・使用言語

Figmaアイコン

Figma

Photoshopアイコン

Photoshop

htmlアイコン

HTML LS

cssアイコン

CSS 3

Sassアイコン

Sass

JQueryアイコン

JQuery

書体

英語:Dosis
日本語:Noto Sans JP
美容室の柔らかい雰囲気と女性らしい、丸みのある書体を使用しました。

使用色

濃い茶色
写真の色合いに合わせました。

写真

フリー素材
全体のトーンを茶色になるように写真選びと色補正にこだわりました。お店の雰囲気が感じ取れるように店内写真は多く使用し、人物の角度も同じようなものを選びました。体の大きさがバラバラのため顔の大きさに合わせてトリミングしています。オーナーの顔が真ん中の位置でトリミングができていないのは、右側の写真が足りず増殖加工しようとしましたが背景が複雑なため加工をしても自然な写真にならなさそうだったのでやめました。

こだわり

パソコンサイズではナビゲーションを右にし、英語は縦にしました。右にしているのは上から英語を読むときに見やすいからです。これに統一するため、パソコンサイズでは英語をすべて縦にしています。タブレットサイズ、スマートフォンサイズではナビゲーションが横バーガーアイコンとなり、横で配置されるため英語は横に統一しています。ターゲットは20代~ですが文字は大きめにし見やすくしました。スタッフの顔写真を大きくしているのは自分の髪をゆだねる人への顔がはっきりわかるようにすることで私は信頼感が出ると思っています。(トリミング時に写真の横幅が足りずどうしても大きくなってしまう人物がいたというのもありますが)リラックス感が出るようにセクション間の余白を多めにあけてゆとりをつくりました。タブレットサイズからパソコンサイズに移る時にはなるべくメニュー名が読みづらくならないようにしています。予約のアイコン、ロゴの隣にあるおうちのイラストはfigmaで制作しました。

Visit Website