gallery

ギャラリー

LP

Parts

イラスト アーカイブ | theta - blog イラスト アーカイブ | theta - blog

gallery

目を惹くパッケージが特徴的なLorettaの商品。パッケージデザインをサイトにそのまま落とし込み、ブランドの世界観を表現しています。

とくちょう

遊び心満載

「PAGE TOP」のボタンが横から電車がくるようなイメージで表示されます。
世界観を壊さない工夫が良い。

UI / UX

ポイントが見やすい

イメージ

色分けされている
左右同じ画像を使用している
関連性が見つけられるのでみやすいし理解しやすいと思いました。

ポイント

サイトに合わせた表現

ページの切り替え表現が、サイトの世界観を崩さないように
「紙芝居」を思わせるように表現しているのが良いなと思いました。

装飾とあしらいが「子供っぽさ」を表現していて
商材に合わせたデザインだと思いました

とくちょう

段階で見せるランキングデザイン

イメージ

１〜２、３〜４位で含まれるビタミンの量が違いますが、
段階で見せることで、良い感じにバランスがとれると思いました。

UI / UX

アイコン小さく誤タップが起こりそう

イメージ

量的に仕方ないかもしれないが、アイコン同士の間隔が近いため
誤タップが起こりそうだと感じました。

「NEW」商品にアニメーション

人は動きがあるものを追ってしまう習性があるので、
「NEW」商品のものにアニメーションをつけたものを配置しておくと
自然とそれらに目がいくと思いました。

文字サイズ注意

イメージ

全体的にスマホの文字サイズが小さいと感じました。
子を持つ親世代がターゲット(20後半〜30代）だと思うので
もう少し大きくても良いのかなと思いました

テクノロジーをキャラクターを用いて表現しています。
DNAに見立てたデジタル調のキャラクターの動きが繊細で秀逸。

とくちょう

キャラクターを活かした技術力

アニメーションの切り替わりが秀逸です。
バーチャル世界を擬似的に楽しめるサイトだと思いました。
最後はちゃんとテキストに視線がいくように構成されていて、UIの視点も消えていない。

ポイント

バーチャルな世界観を楽しめる

カーソルに合わせて視線をずらすことができます。
画面そのものが「視覚」になっていて、Webサイトをみているというより
ゲームなどをしている感覚。

実機で見ると崩れる

イメージ

検証ツールで見ると問題ないが、
実機で見ると崩れていました。
実装が複雑だと思うので、凝ったことをする時は、いろんな角度から検証が必要だなと感じました。

オリジナルイラストがかわいいです。グリーンのカラーがコーヒーを飲んだ時のほっとするような安心感などを出していると思いました。

UI / UX

下に視線を誘導できる構成

イメージ

本文は中央揃えしていますが、画像を左右に配置することで、ユーザーの視線を下にうつすことが可能。自然とスクロールしたくなる。

色分けされたアイコン

イメージ

カラーを多く使うからこそできる表現。色で判別できるので良いなと思いました

奥行き

イメージ

文字を重ねることで奥行きが生まれる。
カップにふちどられたデザインもかわいいです。

左右に流れるスライド

偏りがなく、視覚負担が軽減される。

全体的に画像埋め込みが多いLPサイトです。虎のイラストが特徴的でかわいいデザイン。

UI / UX

コンテンツに合わせた動き

悩みの部分でふわふわ上下する動きがコンテンツと連動していて良いなと思いました。
また、サイドに固定してついてくる導線バナーに動きがあることで
どこの箇所にいても人の視線を惹きつける効果があると思います。
（人は動くものに視線を向けるので）

余白でコンテンツの境目を作っています

イメージ

左右でわかれていることが認識できるよう中央の余白を多めにとっています。
１つのかたまりとしてそれぞれ見えるので、コンテンツがわかれていることを視覚で伝えている。

スマホはPCをそのまま縮小している

イメージ

スマホは全体的に文字サイズが小さく読みにくいです。
PCのサイズをそのまま縮小して制作しているからだと考えます。

オリジナルイラストで可愛さを出しながらも、黒をメインカラーとして使うことで高級感、厳格、力強さを表現しています。

とくちょう

黄色を組み合わせることで、明るさが生まれる

イメージ

黄色には「明るい・希望」といった印象を与える効果があります。

UI / UX

地図が簡素すぎる？

イメージ

簡素すぎてエリアイメージをしにくい。
（対象が同県内であれば良いのかも？）

思わず押してみたくなる「view more」のボタン。

イメージ

「私はここのような者」です。
ユーザーの知りたいを刺激するような言葉。

動く導線ボタン

静止でボタンが配置されているわけでなく、一定の時間が経過すると動くしかけになっています。
人は動くものに視線を向けてしまう性質があるので、思わずみてしまう。
興味が高ければお問い合わせボタンを押すかもしれないと思いました

実態が見えない

おしゃれが良い感じのデザインだけど…
清掃を頼む側としてはどういう人がいて、どういう会社なのかもうすこし深ぼって知りたいと思うので
実際の写真などがないのはどうなのかな？と思いました。（不安が残る）
でもデザインはとても可愛いです…