10.Aro|#1日1サイトレビュー
【概要】
日本国外の、製品紹介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つだけボタンリンクにする
→補色にする、マウスホバーで画像が変化する
など
この記事が気に入ったらサポートをしてみませんか?