7.ORIGAMI サイトレビュー

ORIGAMI | 長野のヘアサロン・美容室

あしらい豊富なナチュラル可愛い
長野にあるヘアサロンのWEBサイト。
ギャラリーサイトのマネるデザイン研究所で見つけた素敵なサイトです。
美容室にちなんだあしらいが多いサイトで真似したい部分がたくさんあるので、素敵なところをピックアップしていきたいと思います。

目的
・サイトの予約

ターゲット
・美容院を探している女性
・年代は幅広い

特徴

余白
コンテンツごとの縦幅140px。余白多めのスッキリとした印象。

配色
#000000 文字色
#DEE4E5 フッターの灰

配色は基本的に白黒で構成されていて、かなりシンプルな印象。
アクセントに彩度が低い水色が時々使われています。

フォント
YuGothic      　日本語
"Open Sans"　英語　 Google Fontで利用可
Asap　　　　  英語　　 Google Fontで利用可
Arial　　　　　英語

游ゴシック
游ゴシックはどんな場面にも使いやすい書体だと思います。私がもしこのサイトのフォントを選ぶとしたら、女性的なフォントを選ぶかなと思いますが、あえて少し硬めのフォントを選ぶことでシンプルさがでている感じがします。

Open Sans
すっきりとした印象のフォント。QやJの形は少し特徴的。使い勝手が良さそうです。

Asap
しばしばアクセントとして使われています。游ゴシックと比べると結構癖が強いので、少し出てきただけでもインパクトがあります。ころころとして可愛らしく、親しみが持てるフォントです。

Arial
有名フォントHelveticaの代用書体として作られたと言われるフォントです。このサイトではボタンなど少しだけ使われています。

メインビジュアル

このサイトはメインビジュアルから写真がカットされていることが特徴。サロン名の折り紙や、美容院のカットする感じが出ていて素敵です。写真は数秒ごとにさりげなく切り替わる感じが上品でサイトにあっているなあと思いました。
下にスクロールするハサミのイラストも可愛い。遊び心が好きです。
ヘッダーはスクロールするとハンバーガーメニューがでてくるようになっています。
リロードすると写真の塗りつぶしの後に写真がでてくる仕掛けも面白いです。

あしらい

このサイトは可愛いあしらいがたくさんあるところが一番の魅力だと思います!
写真に斜線を重ねて切り込みを表現したり、ハサミのイラストをたくさん入れていて面白いでよね。
写真に重なっている斜線は文字の反対側に入れてあるので、左右のバランスを保つ役割にもなります。
あしらいではないですが、ボタンも三角形のところもあるのでシャープさで統一感が出ています。

真似したいポイント

・折り紙やサロンのハサミを表現するため写真がカットされている
→写真をモチーフに合わせてカットするのは応用できそう

・ハサミ、斜線、三角形などカットを表すあしらい
→お仕事に使う道具をアイコン化したり、シンプルな形に落とし込んであしらいにする

・フォントを複数使うことで、アクセントになったり手作り感が出る
→統一性を保ちつつ取り入れられたら武器になりそう

・メインビジュアルの動画がゆっくり変化する
→サイトの雰囲気に合わせて変化の速度も合わせる。

・スクロールすると右にハンバーガーメニュー
→余白を保ちたい時はハンバーガーメニューの方が良いかも。

・ハンバーガーメニューも折り紙みたいに切り取られている
→統一感が出ていてすごくいいなと思った。ヘッダーにまで工夫する気持ちを大切にしたい。

感想

このサイトはあしらいや画像の切り取りなど面白い工夫がたくさんあり、とても勉強になりました!
サイトのイメージをシンプルなあしらいに落とし込むのは難しそうですが、使える場面であればどんどんチャレンジしていきたいです。