せろりのセオリー | Webサイト100選

Webデザイン未経験の私が、魅力的で優れたWebサイトを見て考察力、表現力を学ぶ学習サイトです。

No.98 Lilionte

■概要

ラムネをチョコレートで包んだお菓子のブランディングサイト。チョコレートには奈良県産のドライフルーツやお茶などが入っており、様々なシーンに合うおしゃれなパッケージがとても魅力的。

 

■ターゲット

・20代〜30代女性
・可愛いギフトを探している人

 

■FV

お菓子のラムネやグミ、チョコレートがふわふわと浮いていて、お菓子はカーソルに合わせて動くようになっているため、ついカーソルを合わせて遊んでしまう。後ろで文字が動いているのと、お菓子に薄いシャドウが付けられているため立体感があり、コロコロとした可愛い印象のFV。ラムネの水色とチョコレートの茶色をベースとした配色で、FVを見てお菓子のサイトというのがすぐ伝わる。右上に配置されているオンラインショップへのリンクは、背景色を他より濃くし目立つようにすることで購入への取っ掛かりにもなる。

 

 

■特徴

商品の見た目に合わせたような丸い背景やシェイプを使っていて、写真も丸く切り取られている。スクロールに合わせて写真やあしらいの図形がふわふわ動くため柔らかくポップな印象になる。華やかな装飾だが、キャッチコピーを縦文字にしているため、注目度が上がりその下のテキストに自然と誘導される流れが出来ている。

せろりのセオリー/ Webサイト100選 No.98 Lilionte

せろりのセオリー/ Webサイト100選 No.98 Lilionte

 

 

・NEWS

見出しの頭文字はアクセントでラムネカラーに。最新情報を伝えるこのセクションでは装飾を控えめにし、左右に余白を取ってすっきりさせることで各トピックスへの注目度が上がる。どの画像もおしゃれなので思わずスクロールする手が止まる。

せろりのセオリー/ Webサイト100選 No.98 Lilionte

せろりのセオリー/ Webサイト100選 No.98 Lilionte

 

 

・About

h3の太字の縦文字がスッと目に入ってくる。各セクションの見出しは、縦文字でジャンプ率を高くすることで、写真とテキストとのバランスを取っている。また少し下に配置しているため、次のセクションへの誘導にもなっている。

せろりのセオリー/ Webサイト100選 No.98 Lilionte

せろりのセオリー/ Webサイト100選 No.98 Lilionte

 

 

余白が多く取っているところには、文字がスライドインする装飾がされているため、前後の繋がりがしっかりと出来ている。

せろりのセオリー/ Webサイト100選 No.98 Lilionte

せろりのセオリー/ Webサイト100選 No.98 Lilionte

 

 

■フォント

・Playfair Display、游ゴシック体、游明朝体

 

配色

・テキスト:#583c27
・アクセントカラー:#69e0dc

せろりのセオリー/ Webサイト100選 No.98 Lilionte

せろりのセオリー/ Webサイト100選 No.98 Lilionte

 

 

 

 

 

Webサイト:Lilionte

せろりのセオリー/ Webサイト100選 No.98 Lilionte

せろりのセオリー/ Webサイト100選 No.98 Lilionte

次へ 投稿

前へ 投稿

返信する

© 2025 せろりのセオリー | Webサイト100選

テーマの著者 Anders Norén