WEBサイトのデザイン分析

2023/6/14の課題

　webサイトのデザイン、使用感を調べる課題とのことで、今回はこのサイトを分析したいと思います。

　ペットロボット「LOVOT」のオフィシャルサイトです！

　私は将来的にこのペットロボットを購入したいと考えていて、週に一度はこのサイトに訪れています。普段から見ているサイトなので、今回の課題でこのサイトのデザインを深く理解すると共に購買意欲をより高めていきたいと思います。

１．デザイン

　さて、サイトにアクセスしてみると…

　LOVOTのロゴが表示された後、かわいいLOVOTの映像が画面いっぱいに表示されました！

　LOVOTを購入したい、または興味のある人にとってやはり一番気になるのはLOVOTがどのように動くのかだと思います。そんな人たちをこの映像で一気に引き込み、さらに女性を登場させてLOVOTと実際に触れ合っているシーンを追加することでLOVOTがいる日常を想像しやすいものとしています。

　この映像は約20秒ほどで、繰り返し流れるようになっているようです。

　映像の最後に再度ロゴが表示されるのがカッコいいですね。商品名を何度も繰り返すことで印象深いものになっています。

　スクロールしていくと、二体のLOVOTが画面外からやってきました。

　LOVOTたちは滑らかで自然な動きをしてみせると再び画面外へ消え、また現れるといった映像が繰り返されます。LOVOTに目が行くよう、とにかく無駄を省いたデザインとなっています。

　先ほどの映像ではLOVOTのいる暮らしが想像させる映像をメインに映し出していましたが、こちらはとにかくLOVOTの動きを見せる映像になっています。本当に生きているかのような生き生きとした姿に、サイトを訪れた人はかわいいと思うのではないでしょうか。

　中央には「powered by love」(愛が原動力)の文字と共に、LOVOTのキャッチコピーが。ただのペットロボットでは無く、一体一体が特別な存在であることがわかります。「あたらしい生命を起動しよう」の文言にはワクワクしてしまいますね！

　さらにスクロールしていくと…

　わかりやすい図と共にLOVOTの機能が紹介されています。

　気になった項目があれば「TECHNOLOGY」から飛ぶことで詳しい情報を得ることができ、LOVOTへの理解を深めることができます。

　「PLAY! LOVOT」のページでは、実際にLOVOTをカスタマイズすることができます！

　このページでは声のサンプルを聞いたりLOVOTの瞳をカスタマイズすることができ、オンライン上ですがLOVOTの存在を今すぐ体験することも出来ます。

　このように直感的でわかりやすい操作感でカスタマイズすることができます。今まで無音の映像でLOVOTを見ていましたが、より興味を持った人はここでLOVOTの声を聞くこともできます。かわいいね… 購入する前から愛着が湧いてしまいます。これは巧妙な罠です。

　「LOVOT TEAM」ではLOVOTがどのように生まれたのか知ることができます。ヘッダーの画像も開発途中の写真が使われていて一目で何のページなのかわかりやすいと感じます。

　画像をクリックすることで動画が再生され、LAOVOTの開発チームに関するインタビュー映像を見ることができます。　

　「OFFICE LOVOT」では、オフィスやお店にLOVOTを導入することを推奨する記事が書かれています。

　このように具体的な会社名が表示されていて、実際にどのように役に立っているのか、導入したメリットは何かが書かれていて、とても興味を惹く内容になっています。

　また、「LOVOTがいれば改善できる悩み」を具体的に提示することによって、見る人の購買欲を刺激することができます。

　さて、大体のページを見終わりましたが、気づいた点がいくつかあったのでまとめてみます。

・色の統一感

　色は主に白、黒、差し色としてベージュが使われていて、LOVOTの存在感を演出しています。このサイトで伝えたいことはLOVOTの魅力だと思うので、それを邪魔しないで統一感を出しています。さらにこの色はLOVOTにも使われている色なので違和感が無く、より強調したい部分があれば色を追加することで容易にできます。

・文字

　強調したい文言は色を変えるのではなく、文字の大きさと太さのみを変更して視線を誘導しています。これは配色に統一感を出すだけでなく、写真の邪魔にならないのでとても見やすいです。

　色がついているだけのものより、より重要な部分、そうでない部分がわかりやすいと思いました。

２．操作感

　操作感ですが、サイト内で迷子になることは無く、すぐに目的のページに飛ぶことができます。また、元のページに戻ってくることも簡単です。

　スクロールすると映像が動きだしたりと、全体的に動きがあるので見ていてワクワクします。また、ページと映像のレイヤーが違う箇所もあり、ギミックとしてとても面白いと感じました。

　クリックできる箇所にはこのようなボタンが設置されていたり、

　カーソルで触れるとズームしたり動き出したりと、すぐにわかる仕様となっています。

　これはサイトの色合いやデザインがシンプルなので、よりわかりやすくなっているのだろうと感じました。

３．スマホ版と比べてみて

　スマホでサイトに訪れてみると、アクセスすると一番に目に入るLOVOTの映像はありませんでした。代わりにスクロールすると「LOVOT 2.0」のロゴが表示されるように変更されていますが、初めて訪れる人はサイトが読み込めたのかどうかわからないので少々使いずらいと思います。私もわからずに何度か再読み込みしてしまいました。

　こちらがスマホ版の画面です。

　スマホとPCでは画面の向きが違うため全体的に縦長に変更されていますが、それでもLOVOTたちは画面外からやってきて生き生きとした動きを見せてくれました。

　機能紹介欄も縦長に変更されていますが、PC版との印象が変わったり使いにくいということはありません。

　唯一PC版とスマホ版で明確に違った要素はここでした。

　ヘッダー部分です。

　こちらはPCで開いた場合のサイトですが、ヘッダーにはロゴとアイコンの他にページに飛ぶための見出しが挿入されています。

　一方スマホ版では、

　このように見出しは削除されていました。確かにこの狭いスペースに全ての見出しを作ることは難しそうです。

　そして削除された見出しはというと、

　このようにページの最下部にまとめて表示されていました。

　個人的にはPCで開いた際のヘッダーの方が使いやすいと感じました。

まとめ

　LOVOTの魅力を最大限に伝えるべくその他の要素は徹底的にシンプルにしてあり、LOVOTの生き生きとした動きが感じられるデザインでした。

　見るだけでLOVOTのいる生活をついつい想像してしまい、よりLOVOTをお迎えしたいと強く思うようになりました。まんまと罠にかかってしまった…