10．Aro｜#1日1サイトレビュー

Aro | Reclaim Family Time

【概要】

日本国外の、製品紹介Webサイト。
※「Aro」は携帯電話・スマートフォンをしまっておく専用BOXの商品名。専用アプリの利用で、スマートフォンからどれだけ離れているか時間を計ってくれる。

【ファーストインプレッション】

海外のサイト。やさしい。シンプル。家族でつかう製品。

【メインビジュアル】

・左上：商品ロゴ
・右上：gナビ
・gナビ内容："How it Works" "The Membership" "The Blog" "Our Story" "Get Started"
・画像：屋外でキャンプテント内に座り話す5人家族。長方形。左右の余白なし。
・画像の上：テキスト（the best things in life are phone-free）、リンクボタン(Get Started)
・背景色：白（ほんの少し黄色味がかっている）
・余白：なし

【フォント】

見出し：Blanco
テキスト文：Objektiv Mk2
gナビ、ボタンリンク、詳細へのリンク：GT Eesti Display

【配色】

gナビ テキスト：#222222
背景色：#fcf8f4
ボタンリンク：#ed832d
他テキスト：#24160B

【構成】

・ヘッダー（企業名ロゴ、Gナビ）
・画像
・商品紹介、詳細リンクボタン
・この商品を利用するメリット4点（見出し、説明テキスト、画像）
・特集
・製品紹介動画（ボタンクリック→YouTube動画が流れる）
・製品の使い方、アプリ紹介（詳細は別ページへリンク）
・"Why Aro"：この製品を選ぶ理由（短文での説明、さらにメリット4点を画像とテキストで表示）※この商品を利用するメリット
・文字サイズの大きなキャッチコピー（89% of interactions with our smartphones are self-initiated.　他）
・画像（商品、笑顔の家族）の上に、商品購入ページへのリンク
・フッター（サイトマップ、登録フォーム、SNSリンク、コピーライト表示）

【レスポンシブ】

Gナビ：SPサイトではハンバーガーメニューになっている。

【あくまでも私見】

▶メインページのどこからでも商品の詳細や購入ページへ進める
商品のメリット、何に役立つかといった話が繰り返し出てくる。
海外サイトだとよく見かける作り。
上の方を読んでいる時は「別にいいかな」と思っていても、ページを読み進めるうちに「なんか気になる…」となることがある。
そんな時、そのページ内で即リンクを押せるようになっているのが便利。上に戻らせるのでもサイドバーを開かせるのでもない。
しかも内容が分かりやすい。画像が多く、短い文章や単語で説明する。さすが海外サイト。

▶テキストのが黒ではない。やわらかい雰囲気になる。
濃茶系のテキスト。

▶背景が白ではない。
パキっとした白より、やさしい雰囲気がする。

▶商品購入ページは、オレンジのボタン
このサイトの目的は「商品を購入してもらうこと」。
つまり一番見てほしいのは商品の詳細ページ、および購入ページ。
だから”Get Started” のリンクだけ、ボタン仕様のオレンジ色で目立たせている。
シンプルな背景やテキスト色の中にオレンジ色はとても目立つ。
元気で健康な印象も受ける。

【ひとつだけ自分のデザインに取り入れるとしたら】

▶やさしい印象にしたい時
・テキストの色を黒にしない。茶色などアースカラーが良いかもしれない。
・背景色も真っ白ではない方がいいかもしれない。

▶目立たせたい部分、誘導したいページ内がある時
・全体的なデザインをシンプルに、その分、目的のページへのリンクは色やデザインを工夫する。
→テキストリンクだけの中、1つだけボタンリンクにする
→補色にする、マウスホバーで画像が変化する
など