No.037 G.F.G.S. – webサイト分析

G.F.G.S.公式サイト(https://gfgs.net/)分析

G.F.G.S.(“Good Feel, Good Style.”の頭文字)のオンラインショップは、ボーダーのカットソーをオーダーメイドできるサイトです。デザイン、生地の厚さ、サイズ、袖丈、ボーダーの幅、色の組み合わせを選べます。
今回は勉強のために、デザインを分析しました。

 

PCメインビュー

 

font

‘MuseoSans-500’,”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif
文字:黒
読みやすい文字です。

 

color

黒・ピンク・黄色系
背景:白・黄色

 

メニュー

PCでは上部にメニューがあります。ヘッダーはグレーの背景で高さ70px、マウスオーバーで白い背景色になります。このメニューはスマートフォンでは左上のハンバーガーメニューになっています。
ハンバーガーメニュー内は各リンクにアイコンがついています。

スマートフォンハンバーガーメニュー内

 

PCフッターメニュー

 

スマートフォンフッター

 

画面について

サイズや袖の長さを選ぶと、イラストのボーダーが変わり、色も組み合わせることが出来ます。
とてもかわいいイラストで、実際に仕上がった時のイメージがよく分かります。

 

PCオーダーメイド画面

 

スマートフォンオーダーメイド画面

 

まとめ

G.F.G.S.のサイトは、オーダーメイドの仕組みがとても分かりやすく、画像もたくさん掲載されています。デザインがお洒落でカッコいいサイトです。

初回は簡単に書かせて頂きました。分析内容はこちらのページか新規のページに不定期に追記をするかもしれません。

 

PCトップページスクリーンショット

 

webサイト100選 | 雨とホットケーキ