gallery

ギャラリー

LP

Parts

カラフル アーカイブ | theta - blog カラフル アーカイブ | theta - blog

gallery

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

とくちょう

遊び心満載

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

UI / UX

ポイントが見やすい

イメージ

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

ポイント

サイトに合わせた表現

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

色とりどりで訪れた人の気持ちを明るくさせてくれるようなデザインだと思います。

とくちょう

カラフルで清潔感・柔らかさを感じるデザイン。

イメージ

カラフルな色使いが特徴的ですが、白背景で面積を多く取ることで清潔感を感じさせるデザインとなっています。

UI / UX

FVに設置されたナビゲーション

イメージ

病院のサイトに訪れるユーザーの行動心理をよく汲み取っているデザインだと思いました。
FVに目的の導線をわかりやすく配置することでユーザーの次への行動を促す効果があると思います。

下にスクロールすることで画面幅を広く持たせつつも導線を維持。

下にスクロールすると消えますが、固定されているのでいつでも検索＆他ページに遷移できるようになっています。

閲覧箇所がわかりやすい

下にスクロールすると左サイドのメニューも見ているコンテンツに合わせて動くので、ユーザーがどこの部分を見ているのか認識できるのでわかりやすい。

ポイント

FVの色ごとに下層のFVカラーも合わせている

イメージ

フッターにいくにつれて落ち着きのある色

イメージ

カラフルな印象を受けるのは、最初に目にするFVで多くの色を使用しているから。
清潔感といった印象をうけたのは、下のコンテンツにいくほど色味がなく白やグレーでデザインされているからだと思いました。

新しい教科書の販売をお知らせするサイト。明るくポップなデザインで装飾やイラストがとても可愛いらしいです。

UI / UX

スクロールすると幅が変化

FVから下にスクロールするとヘッダーの高さが少し小さくなります。画面幅を広くとり、ユーザーに見やすいようにしている。

ポイント

イラストのあしらい

イメージ

イラストがあるだけで可愛らしさが増します。NEW部分はシンプルにしがちですが、こういったあしらいはかわいいなと思います。

バナーがかわいい

イメージ

サイトに比較的合わせたバナーデザインで良いなと思いました。

上向に変化する矢印の動き

ありきたりで横に動くのではなく、上に向く動きが「学習に対する意欲」的な感じをだしていて良いなと思いました。

カラフルな色合いと多様な動きを見せるアニメーションが特徴的なデザインです。

とくちょう

７カラー使っているからこそできる表現

イメージ

コンテンツごとにカラーが分かれているので、項目が視認しやすいです。

下層も色に合わせてデザインされています

イメージ

自分がどの求人職をみているのか色で判別できるのが良いなと思いました。

ポイント

なめらかな動きのあるアニメーションが見応えあります

切り替わりのなめらかな動きがクリエイティブ

虹をイメージしたコンテンツデザイン

イメージ

アーチ型の形には架け橋、広がりといった意味があります。採用サイトなので「人と人を結びつける架け橋」のようなイメージで作られているのではないかと思いました。