サイトレビューをしてみた【graniph編】
今回は、ワタシが大好きなアパレルブランド「graniph」を取り上げたいと思います。
このブランドはとてもカジュアルだけどセンスがいい感じなんですよね。
様々なクリエイターさんがデザインをしているので飽きがこない。
最近もワタシはこのお店で帽子を２つも買ってしまいました。
１つ買うのか、２つ買うのかを約30分も迷った挙句の購入でした。笑
そんなわけでお世話になっております、graniph様のサイトレビューを始めましょう！
ターゲット予想
・カジュアルな装いが好きな人物
・おしゃれ好きの親子
・芸術センスの高い人物
・10～40代くらいの幅広い世代
コンバージョン
・「graniph」を知ってもらうこと
・商品を見てもらって購入につなげる
CVまでの導線
・「ブランドについて」「企業情報」のセクションを配置する
・お買い物チャネルを設け、購入方法をユーザーに提示する
配色
#60646E #E5E6E6 #DC0916 #FFFFFF
使用フォント
日本語フォント：ヒラギノ角ゴシック
欧文フォント：futura-pt
サイトのトップページにおけるfont-familyは、
"futura-pt","Futura","ヒラギノ角ゴシック","Hiragino Sans","Hiragino Kaku Gothic ProN","Meiryo","sans-serif"
下層ページのfont-familyでは、
"hiragino sans","ヒラギノ角ゴ pro w3","hiragino kaku gothic pro","メイリオ","meiryo","sans-serif";
このように各ページで優先されるフォントが異なっていました。
なお、hiragino Sansはヒラギノ角ゴシックのことであり、”Hiragino Sans","Hiragino Kaku Gothic ProN”を並列して設定することがあるようですね。
ヒラギノはMacOSに搭載された日本語の標準フォントです。ワタシはWindowsなので反映されないんですよね。
そして、Futuraは昨年で生誕100年、今年は101年目です。生まれてきてくれてありがとう！！
自分が感じたサイトの印象
大好きなアパレルブランド。
カジュアルさがありつつも、シンプルにまとまったデザインです。
印象的なのはロゴの赤がサイト全体のアクセントカラーになっていることですね。とても目立つけど、色がうるさくない感じ。
そして、ホワイトからブラックまでの無彩色による配色。
無彩色だからこそ、写真やクリエイターさんのデザインが映えると感じました。
自分が感じたサイトの工夫ポイント
今回の印象に残った工夫ポイントは、、、
まずファーストビューの切り替えとそれに伴う効果です。
６枚のスライドショー、一定の時間で切り替わります。
その都度、右下の画像切り替えボタンが変化します。
ファーストビューに反映される画像は赤く、かつ少し長細い楕円（？）になります。切り替わっていることが分かりやすくて良いですね！
次に、ボタンのデザインです。
とてもシンプルな疑似要素を用いたボタン。
ホバーをすると一瞬で奥行きがでます。なぜならば…シャドーが入っているからです！「おおおお！！影やん！！！」ってなりました。
最後に、企業の沿革セクションです。
ここはシンプルにとてもシンプルな丸と線で構成されながらも、カワイらしさを見ることができた部分です。
沿革の時系列の丸って、パワーポイント資料だと結構小さめに配置しちゃいます。（ワタシだけ？）だから、こんなに丸が大きいのに驚きました！そして悪目立ちはしていない。
また、コーディングにおいては個人制作に使えそうなHTML＆CSSのコードを見つけました。
<ul class="history-description">
<li class="row"><span class="year">2000</span>
<div class="description">
<span>
グラニフ1号店としてグラニフ下北沢店オープン
</span>
<img src="https://graniph.co.jp/wp-content/uploads/2021/08/2000-tenpo-simokitazawa-1.jpg" class="photo">
</div>
</li>
はい、今日はここまで。
いかがだったでしょうか。いつもよくアクセスするサイトもちょっと違う視点でみると面白かったりしますね。
今回はfont-familyを１つずつ調べていたので、めっちゃ時間がかかりました。ここまで読んでいただきありがとうございました。
この記事が気に入ったらサポートをしてみませんか？