Corporate Site

青山・赤坂の美容室 DIFINOの制作実績紹介

東京都青山と赤坂の2店舗経営されている美容室 DIFINO様のWebサイトを制作させていただきました。それぞれの店舗サイトのほかに統括するグループサイトも合わせて設計。クオリティの高い写真を活かすデザイン設計、スクロールアニメーションやhoverアニメーションなどブランドイメージに合わせて実装しております。

Visit the site

青山・赤坂の美容室 DIFINOのデザイン画像
DIFINOグループサイトトップのPCデザイン画像
DIFINOグループサイトトップスマホデザインのメインビジュアルからコンテンツまで
DIFINOグループサイトトップのスマホデザイン画像

動画で印象的なメインビジュアルに

クライアント側でご用意いただいたコンセプトムービーをグループサイトメインビジュアルに設置しました。MP4形式の動画ファイルをvideoタグでマークアップし、自動再生、ループ、ミュートを設定。印象的なファーストビューになっています。

メインビジュアルに動画を設置することでインパクトのあるデザインになることを示す画像を解説するPC Webデザイン画像
スマホでも動画を自動再生していることを示す画像を解説するスマホ Webデザイン画像

ヘアスタイルが見やすいように写真はバストアップでの一覧表示

ヘアスタイルは、頭の形や体系に合わせて決める人が多いので、被写体はバストアップから上半身程度のものがベストとなります。背景など他要素が写り込まないよう、写真が縦長で幅が狭くなるようにカードレイアウトを設計。最低限の情報掲載にし、写真にフォーカスが当たるようにしました。

ヘアスタイル一覧でも写真が見やすくなったことを示す画像を解説するPC Webデザイン画像
スマホデザインでもヘアスタイルが見やすいことを示す画像を解説するスマホ Webデザイン画像

写真をメインに、テキスト情報は最低限に

ヘアスタイル情報で最も重要なのは、ヘアスタイルのクオリティと写真クオリティです。「この髪型にしたい」という気持ちにさせることを最優先にしたので、写真をメインにレイアウト設計。美容室に来店して「この髪型にしたい」と伝えるシーンをイメージしてデザインしました。
また、お客さまにて更新していただくので、投稿しやすいようにテキスト情報は少なめにしても物足りなさを感じないようにデザイン設計しました。

ヘアスタイル詳細ページのPCデザイン画像を解説するPC Webデザイン画像
ヘアスタイル詳細ページのスマホデザイン画像を解説するスマホ Webデザイン画像
印象的な写真を印象的なデザインで作成したことを示す画像
印象的な写真を活かすデザイン
スライダーを実装したデザイン画像
スライダーも印象的に
店舗情報はシンプルなデザインにしたことを示す画像
店舗情報はシンプルなデザインに
フッターデザインの画像
情報を集約したフッター

Data

Cliant
青山・赤坂の美容室 DIFINO
Place
東京都青山・赤坂
Launch
2020.03.01
URL
http://difino.com/
Type
ショップサイト
Specification
WordPress, アニメーション, 動画設置, Hoverアニメーション, メガメニュー, ページ遷移アニメーション, ローディングアニメーション, コンテンツスライダー

Contact

BUILDにご興味をもっていただきありがとうございます。
ウェブデザインやロゴデザイン、その他クリエイティブに関するご相談は、 フォームよりお気軽にご連絡ください。

お問い合わせはこちら