コスメ 美容 ヘアケア

No.071 BEAMS BEAUTY

概要 Overview
”絶対、うそはつかない。
「ほんとのこと」だけでつくる、
ビューティ・コミュニティ。”
をコンセプトにビームスのメンバーで構成された編集部が「ビューティなこと」を体験してみるwebメディア。

ファーストビュー Above the fold
サイトロゴ(アニメーション)
サイトタイトル
キービジュアル(スライダー)、CTAボタン
ハンバーガーメニュー

ターゲット Target
20代~30代を中心とした「ビューティなこと」に興味がある男女

フォント Font
a-otf-midashi-go-mb31-pr6n 14px,18px
neue-haas-unica 24px,140px,

カラー Color
<B>#CDC7C3
<M>#FFFFFF
<A>#222222

デザインの特徴 Design features
文字・写真 共にジャンプ率が高く、テキストは極力少なめな大胆で訴求力の高いデザインになっている。
リンクバナーの各写真も質の高いビジュアルで、オンマウスで拡大縮小アニメーションとキャプションのカラー変更も組み込まれているので、ついバナーを押して各ページへのリンクというアクションにつながる。
各ページでも、イメージ画像が多めで、テキストは写真のキャプションや吹き出し文字、Q&A方式をふんだんに取り入れ、うまく間合いをとることによって閲覧者をうまく記事を読み進めるよう誘導するデザインになっている。
また、伝統的で落ち着きのあるフォントa-otf-midashi-go-mb31-pr6nと、それと相性の良いneue-haas-unicaを採用し、インパクトが強くにぎやかなページに、しっかり落ち着いた印象を与える効果がある。
配色は、ページ全体にカラフルなイメージ画像が配置されているためホワイト・ブラック・グレーのモノトーンでまとめ、イメージ画像がより効果的に映る。
シンプルな構成でありながらも、ジャンプ率やたっぷりとられた余白、効果的なイメージ画像やアニメーションやjQueryなど、非常にバランスの良いデザインで、UI・UXも満足のいくものになっている

https://www.beams.co.jp/special/beamsbeauty/

コメントを残す

*