◎視点
マガジンサイトを多く観てきたが、今回は海外のマガジンサイトに着目。
中でもAwwwardsでWEB SITE OF THE DAYに選ばれたこちらのサイトをチェック。
UI/UXで高評価ということで、見やすさに特に注目していく。

◎概要
アジアの情報を詰め込んだ海外のマガジンサイト 。
LIFE / FOOD&DRINK / TRAVEL / REALのジャンルごとに記事が分かれている。

◎ターゲット
最新情報に敏感な20~30代女性
人気のコスメやフード情報が満載。
ピンクや黄色など、ビビっとな色を所々に使っており、最新のイメージが出ている。

◎余白
コンテンツ間: [PC] 120px [SP] 100px
見出し下:60px

◎フォント
Domine
大見出し:46px
小見出し:20px
本文:16px
※PCとSP統一。マガジンサイトでは標準文字16pxがbetterが??

◎FV
ピックアップされた記事を表示。
ここで注目したいのが、自動スライドや、よくみるサムネイルを一覧にするのではなく、記事タイトルをメニューとして表示。
PC版では、タイトルをhover すると、サムネイル画像が表示される。(表示時のアニメーションも波立ちお洒落!)
モバイル版は、下にタイトルを表示し、矢印を押せば記事が切り替わる設定。

柿と種とサイトレビュー| Webサイト100選 No.077 Nana | Digital Magazine in Asia

◎記事一覧
何日前の記事かを表記することで、情報の鮮度がわかる。

◎CURRENT OBSESSION
背景が黒になり一気に印象が変わる。化粧品紹介で背景が黒だと一気に高級感が漂う。

柿と種とサイトレビュー| Webサイト100選 No.077 Nana | Digital Magazine in Asia

◎FOOD and DRINKS / TRAVEL
PC版
メインの記事(or最新?)
では右固定で1/2の大きさで設置。左のサムネイルたちはスクロールで記事が出てくる。
左は記事が等間隔でずれて表示

柿と種とサイトレビュー| Webサイト100選 No.077 Nana | Digital Magazine in Asia

◎あしらい
各サムネイルにhoverすると、[read]や[buy]の文字に変わる。
動き:フワッと浮いてくる動き

◎FOOTER
hoverで文字がぐるっと動く

◎ナビゲーション
PC版:hoverすると上からメニューが降りてくる。
縁取り文字でトレンドを掴んでる。
タイトルにhoverでさらにカーソル部にサムネイル表示。

柿と種とサイトレビュー| Webサイト100選 No.077 Nana | Digital Magazine in Asia

柿と種とサイトレビュー| Webサイト100選 No.077 Nana | Digital Magazine in Asia

コメントを残す