#001 Webサイト『株式会社Ginger』
はじめに
みなさんこんにちは！
今回もブログをご覧くださりありがとうございます。
今回分析するのは、株式会社Ginger様のWebサイトです。
（https://ginger-inc.jp/）
分析結果
-メインカラー ：#DBAA1D
-アクセントカラー ：#B09983
-ベースカラー ：#F4EDD1
-使用フォント ：Sorts Mill Goudy
zen old mincho
中ゴシックBBBJIS2004
まず、使用フォントについてです。
headerのメニューやその他見出しには「Sorts Mill Goudy」、その他の文章には「zen old mincho」が使用されています。どちらも線の太さの強弱がそれほどなく、セリフ帯の高級感を出しながらも柔らかな印象を受けます。
文字色も#000のがっつり黒ではなく、#333の少し柔らかい黒を使用しているため、コントラストを少なくして目が疲れにくく品のある雰囲気を作り出しています。見出しなどは、#c8c8beのブラウンにすることで、本文とのメリハリをつけより読みやすくなっています。
画像のレイアウトは、
左の画像のSEEVICEやJOURNALなどの同じ内容が複数続いているところには、デザインの４原則である「近接」「反復」「整列」がしっかり間もらているデザインになっています。逆に、その他の画像はサイズも配置も不規則にすることで強弱があり、その分余白も多く取られているため見やすい構造になっています。
リンクが埋められている部分はホバーをすると薄くフェードがかるようになっています。
Off-topic
サイト分析第一弾ということで探り探り記事を書いてみました。
サイトに使用されている色などをすぐに見つけるにはどうしたらいいんだろうっていう疑問が生まれ調べてみたところ、
Chromeの拡張機能で『ColorPick Eyedropper』というものを見つけました。
タブの右上にある拡張機能のボタンをタップして、欲しい色のところにカーソルを持っていくと、その部分の色の16進数コード、RGBの数値が明白になります。いい発見です、いっぱい活用します。
そしてなぜ今回このサイトを選んだかというと、
私が進級制作で作ったカフェサイトのデザインの参考にさせていただいたサイトの一つだからです。カフェサイトでありながら美術館の落ち着いた高級感ある雰囲気を出したく、調べていたらこのサイトに出会い、画像の配置や配色のバランスなど、たくさん参考にしていただきました。
-COMMENT
-Category.
-Archive.
