Portfolio
The Beauty
2023
Website
Web Design, Coding, Writing
Tools
Photoshop, Visual Studio Code, Adobe XD
Codinglanguage
HTML, CSS, JavaScript
overview
美容室のWebサイトをポートフォリオとして制作しました。
I created a hair salon website as part of my portfolio.
Target
20～40代の女性
Women in their 20s to 40s.
The Purpose
美容室の情報をユーザーに向けて伝えるため、お店のコンセプトをWebサイトデザインでも伝えていくため
To convey information about the salon to users and to express the salon’s concept through the website design.
Design Concept
美容室に来て髪を切る、髪型を変えてみる、髪をセットしてもらうなど、それぞれ目的があると思います。
髪を整えて美容室を出た後、爽やかな気分になる。そうした爽やかな髪型と気持ちの変化を、清潔感ある色調でデザインに落とし込みました。青と白の清潔感で、髪を整えた後の爽やかな変化をイメージしています。
必要最低限の情報を掲載し、全体的にスッキリとシンプルな雰囲気でまとめることによって、より爽やかなイメージを持てるようにしています。
When people visit a hair salon, they each have a purpose—whether it's to get a haircut, try a new hairstyle, or have their hair styled for a special occasion.
After getting their hair done and leaving the salon, many feel refreshed and uplifted. I aimed to capture that fresh feeling and transformation through a clean and soothing color palette in the design. The use of blue and white evokes a sense of cleanliness and represents the refreshing change one feels after a salon visit.
By including only the essential information and keeping the overall layout clean and minimal, I designed the site to enhance that fresh and simple impression.
Idea
デザイン制作からコーディング、Webサイトの公開までを一貫して行いました。
美容室のペルソナをつくりデザインコンセプトを決めた後、AdobeXDにてサイトデザインを制作。その後、HTML/CSSでWebサイトをコーディングしました。
オープニングアニメーションやフェードインアニメーションはJavaScriptで実装しています。美容室のWebサイトには欠かせないSNSとの連携や地図も入れると共に、お問い合わせフォームも入れています。
美容室の雰囲気をWebサイトでも伝える役割と情報を伝える役割を両立させるために、デザインと機能にもこだわりをもっています。
handled the entire process—from design and coding to the website's deployment.
After creating a persona for the salon and establishing a design concept, I designed the website using Adobe XD. I then coded the site with HTML and CSS.
The opening animation and fade-in effects were implemented using JavaScript. I also integrated essential features for a salon website, such as social media links, an embedded map, and a contact form.
To balance both the atmosphere of the salon and the delivery of key information, I paid close attention to both design and functionality.
