見出し画像

WEBデザイン記録_DAY4

なんとかWEB分析が4個め突入。なかなか毎日は難しいけど、続けていきます!

フェリシモ  WELCOME MARVELの特設サイト

URL:https://www.felissimo.co.jp/marvel/


第一パッと見印象

マーベルの世界観に合わせたゴツゴツハデハデサイト!!

サイト構成

①ヘッダー
②MV
③MARVEL COLLECTION
④DIGITAL CATALOG
⑤フッター

使用フォント

・日本語:游ゴシック Medium、メイリオ
・英語:Poppins、Inter

日本語は游ゴシックを中心にサンセリフのゴシック体を使用しており、マーベルのロゴのフォントに近いので、世界観にあっているなーという印象。あと読みやすい。
商品説明のところはイタリックになっているので、文字数多いところでもただ羅列するより読みやすいかな…?と思った。
英語はPoppinsというフォントを使用しており、初めて聞いたフォントなのでぜひ覚えておきたい!(GoogleFontでした)

配色

・使用カラー:レッド#E50211、薄めレッド#FF6161、ブルー#0049FE、薄いブルー#0fa2ff、薄いブルー2#01FFF7、イエロー#FEEA00、グリーン#00BA29、パープル#9555FF、グレー#DBE2EC、ピンク#FE25E8、オレンジ#FD8816
(見逃しているのもありそう)
・フォントカラー:ブラック_#000000、ホワイト_#FFFFFF

マーベルキャラクター別カラーを使用して世界観が見事に表現されている。たくさん色は使われているけどビビットトーンで揃っているので統一感がある。コレクションごとが派手なので、文字やボタンはホワイト✖️ブラックのシンプルめで読みやすい。

デザインポイント

・メインビジュアル:
マーベル商品の写真を大きく配置しており、また太めのフォントのあしらいでとてもインパクトがあるFVだと思った。文字のあしらいが日本語も英語も縦書きにしている所や、縦に長めの文字列だったりするので、ついスクロールしたくなるのかな…?
PC版で見た時の右のあしらいがヘッダーだと思ってクリックしてしまった!笑
私以外にもいるはず…。笑 勘違いしやすそう。

・フッター:
Twitterのボタンの周りをくるくる回っているあしらいがかわいい。

最近こんな感じのあしらい見るので、これはみんな好きなデザインなのかも?


・ボタン:
色はシンプルだけど、押している感があり、黒塗りだからか存在感があるボタン。あと、文字が「MORE DETAIL」と書いてあるの珍しい気がする。

POPなボタンで後ろのホワイト部分に柄が入っているのがかわいい!


・あしらいポイント:

とにかく大きく太く、そして見切れていている。存在感が大きい文字のあしらい。マーベルの強さやアメコミのド派手な雰囲気を見事に表現していると思いました!



感想

なかなか更新できず、久々のサイト分析でした。
今回はキャラクターもののサイトをやってみたく探していたところ、フェリシモさんのサイトを見つけ、「この色数多くてイケイケなサイト最高!」と思い分析をやってみました。
このLP以外にもいろんなキャラクターもののデザインがあるのでとても参考になるな〜と思います!また他のでチャレンジしてみたいです!

この記事が気に入ったらサポートをしてみませんか?