No.035「アットコスメ」のからくり

No.035 アットコスメ- ワンピースの楽譜 | Webサイト100選

サイト概要
アットコスメの公式ウェブサイトです。日本最大級のコスメ・化粧品・美容の総合情報サイトです。口コミで話題の人気商品をランキングで探せたり、スキンケアやメイクの最新トレンドに出会えます。

No.035 アットコスメ-ワンピースの楽譜 | Webサイト100選

ここが魅力！
・「新製品カレンダー」では、様々なブランドの新商品情報が一覧になっており、一度にまとめて見ることができる！

No.035 アットコスメ-新製品カレンダー-ワンピースの楽譜 | Webサイト100選

・月に4回、限定プレゼントが当たるチャンスがある！　※「プロデュースメンバー（会員）登録」は必要

No.035 アットコスメ-ブランドファンクラブ限定プレゼント-ワンピースの楽譜 | Webサイト100選

構成
・FV、header、nav
【PC】

No.035 アットコスメ-FV(PC)-ワンピースの楽譜 | Webサイト100選

→コンテンツ部分の周りを広告で覆っており、インパクトがある。ページ上中心のブランド名（PHYSIOGEL）より、両サイドのキャッチコピーの方が先に目に入った。世間的に見て知名度がそこまで高くないブランド名の場合、まず広告を押してもらうという点ではキャッチコピーの方をより目立たせるほうが効果的であると考える。
グローバルナビゲーションが目立ちにくい、文字サイズなどのメリハリがあまりないと感じた。情報（文字）量も多いため、まずどこを見るべきかに少し迷いが生まれるという印象。

【スマホ】

No.035 アットコスメ-FV(スマホ)-ワンピースの楽譜 | Webサイト100選

→トップメニューの各カテゴリがアイコンと共にまとめられており、PC画面でのレイアウトよりもすっきりとしている印象。画面下に現れた公式アプリ限定の「初回限定クーポン」のバナーは、アクセントカラーが使われているため、気づきやすい。
header：「ログイン」、「メニュー」はそれぞれアイコンの下に文字の説明を入れているため、アイコンに馴染みがなくても分かりやすい。

PC、スマホどちらで見ても「ただいまのクチコミ」の件数が表示されており、口コミ数の多さや増えていることが分かりやすいとは思うが、「17,365,197件」というように1の位まで正確に記載されているより、「1700万件」＋「日々増加中」といったような記載方法の方がパッと見て分かりやすいのではないかと思った。

・footer
【PC】

No.035 アットコスメ-footer(PC)-ワンピースの楽譜 | Webサイト100選

→「ページの先頭へ」ボタンが、footerの右上に、インデックスのように配置されている。下線、境界線の種類を実線と点線とに分けている。また、「サービス一覧」では、サービス名だけだと分かりにくい場合、（）で補足を入れている。
例）ブルームボックス（コスメ定期便）

【スマホ】

No.035 アットコスメ-footer(スマホ)-ワンピースの楽譜 | Webサイト100選

→サイトマップがなくなり、検索ボックス（キーワード検索）のみになる。そのため、PC画面右側にあった「@cosme STORE ショップリスト」に関しては、PC画面時よりもショップ一覧にたどり着くまでの手間が増える。また、メニューに「@cosme STORE ショップリスト」があるわけではなく、例えばハンバーガーメニューの「サービス一覧」を押して開かれたページをスクロールすると「@cosme STORE ショップリスト」が出てきたというように、すぐにたどり着けない可能性があると考える。

使用パーツ・アイコン