offtoco Limited color（ELECOM） | サイトレビュー【20】

sako

2020年8月24日 18:58

サイト名

offtoco Limited color（ELECOM）
ELECOMのバックブランド「offtoco」のレディースカラー専用サイト

URL

パステルカラーとスモーキーカラーの2ページある。
（今回はパステルカラーを見た）
中身はカラー以外変わらず。

https://www.elecom.co.jp/pickup/off-toco/limited-color/
https://www.elecom.co.jp/pickup/off-toco/limited-color/2/

ターゲットユーザー

20代前半～30歳ぐらいまでの女性
大学などの学校や、仕事でPC・タブレットを持ち歩く必要がある人。

サイトの印象

パステルもスモーキーの方も、とにかくカラーの選定がかわいい！
商品もサイトも、ターゲット層の好きそうなカラーの組み合わせが印象的。
手書きっぽい見出し・欧文のあしらいや、ドット・波線・ストライプを多用し、ガーリッシュを追求している。

デザインで気になったところ

配色
ベース：ホワイト（#ffffff）
メイン：淡いピンク（#f3dbd9）、淡いブルー（#d2e0ed）、淡いグリーン（#e9f2d5）
アクセント：濃いめピンク（#ee7d77）、オレンジ（#f3a327）

バックパック大・小・ポーチとコンテンツごとに配色を変えている。
各コンテンツのカラーは商品のカラーに合わせて使用されており、背景に使用している幾何学模様などはバイカラーの色を使っている。
全体的に明るい色を使い、柔らかい・若い・ポップな印象を持った。

フォント

見出し欧文：分からなかった…特にトップでアニメーションで表示されるステキな筆記体のフォントが知りたい！！
一部見出し欧文：Futura
本文：游ゴシック

トップの筆記体（limited color）がアニメーションで前面にドカンと出てくるのが印象的。
機能やカラバリは線で中を抜いたフォント（たぶんFutura？）でインパクトを出し、シリーズ（Backpack、miniなど）はロゴ風にした見出し、本文はちょっと丸みがあって柔らかい印象の游ゴシックをを使用。

サイト全体　

・メインビジュアルの写真背景の色がどんどん変わっていく仕様は面白い。カラバリが多くあるという事が、商品画像が変わらなくても暗に分かる。
下部は波線になっている。かわいいサイトではこの表現よくある印象。
また、メインビジュアルが前面にあるのでスクロールバーを表示。

・スクロールするとさりげなく左の模様がパララックスになっている。
また、動きに関しては各商品の中間には外国人女性がスクロールと同時にスライドしていく。
他のサイトでもよく見るが、こういった縦長型ページだと、ただコンテンツを並べるだけだと単調になる。
過去の自分はとにかく組めばいい・表示できればいい、と思っており動きに関しては2の次にしていた。もはや飽きさせないようにする動きの部分の工夫は当たり前なんだと猛省。。

・サイズ部分にあるカラーを選択すると、商品画像がちゃんと切り替わる。こういった細かいこだわり（閲覧者への気遣い）が大切だと思う。

・機能説明の部分の背景は商品のカラーと色を合わせている。
自分だったら見えにくいかな？と思って発想すらしないと思ったが、あえて合わせる事で統一感が出るし、バイカラーの水色が映えており勉強になった。
また、文字も同じピンクの濃いカラーだが、背景に白を敷き、下部にラインを敷くことで、見出しと分かるし可読性が上がっている。