背景アニメーションが特徴的なチョコレートチーズタルトのLPです。一定間隔でチョコレートが降り注ぐアニメーションと鮮やかなグラデーションの動きを組み合わせた背景を固定しており、スクロールの影響を受けない設計になっています。商品の紹介をしている各セクションには画像が配置され、その下に説明文がくる構造になっています。また、説明文にはマウスポインタを重ねた際に発生するホバーアニメーションを採用しており、背景と文字色が変化し説明文のセクションが拡大することにより強調表示される設計になっています。ページ下部には導線を目的とした各ショップへのリンクを設置しコンバージョン率の向上を図っています。
執筆者
カテゴリ
基本情報
ショップに関連するデザイン
-
「KALPA」のホームページデザイン解説ファーストビューでは画面中央に正方形のスライドショーが配置され、ゆったりとした速度で店内の様子を写真で紹介しています。モノトーンの色使いと文字を小さめにしてマージンを大きく取ったレイアウトが透明感と空間の広さを感じさせるデザインです。太く丸...
-
「井口庖丁本店」のホームページデザイン解説ファーストビューではモスグリーン1色の画面中央にぽつんと店舗ロゴが表示された後、画面が切り替わって包丁が作られていく様子がスライドショーで紹介されます。画面をスクロールするとテキストがふわっと浮かびあがった後に写真が左からスライドインする、...
-
「畑の食堂 コパン」のホームページデザイン解説屋根型にトリミングされたスライドショーに、手書き風のフォントでキャッチコピーが重ねられたユニークなファーストビューです。スライドショーでは新鮮な野菜の写真がリズミカルに入れ替わり、食欲をそそります。淡いベージュの背景と濃いブラウンのテキスト...
LPに関連するデザイン
-
「ドコドアWP」のホームページデザイン解説サイトを開くとワードプレスのコーディング実績をラベルやリボンで協調した、鮮やかなビジュアルがまず目に入ります。ワードプレスのロゴに近いくすんだブルーに、補色のピンクを組み合わせた鮮やかな色使いが目を引く色使いです。ユーザーの悩みをテキストと...
-
「株式会社山王プロダクション_無料オーディションLP」のホームページデザイン解説メインビジュアルは女性モデルを右側に、キャッチコピーを左側に配置した構成で、背景を斜めにカットしてキャッチコピーを右上がりにすることで躍動感を演出しています。シンプルな1カラムのレイアウトに鮮やかなグリーンをメインカラーにしたさわやかな色使...
-
「リンナイ株式会社_ドリームキャンペーン」のホームページデザイン解説画面いっぱいに広がったパープルのグラデーションの上に、花火のイラストと立体感のあるキャンペーンタイトルが目を引きます。その下には金色の放射状の背景を敷いたバナーを設置し、当選人数と当選率の高さをアピールしてキャンペーンへの応募を促しています...
ホワイトを使ったデザイン
-
「株式会社内山産業」のホームページデザイン解説サイトを開くと4枚の画像で構成された横長のスライドショーが表示され、中央に重ねられたキャッチコピーはアンダーラインとチェックボックスを併用することでより説得力を増しています。企業ロゴのロゴをアクセントカラーにして、縦長の英語フォントでスタイ...
-
「株式会社フラワーホーム」のホームページデザイン解説メインビジュアルは数枚の写真が次々入れ替わるスライドショーで、中央に太目のフォントで縦書きで配置されたキャッチコピーは素朴さを感じさせる味わいがあります。導入部分はメインビジュアルにずらして重ねて画面に奥行きを出しています。淡いグレーを背景...
-
「株式会社 S.U建築設計」のホームページデザイン解説メインビジュアルは3枚の画像で構成されたコンパクトなスライドショーで、ずらして重ねた英語のキャッチコピーは写真にマスクをかけたようなあしらいとなっていて、写真が切り替わるとともに色が変化します。モノトーンの色使いでまとめられたシンプルな1カ...
奇抜・派手なホームページのデザイン
-
「小松美羽 Official Site」のホームページデザイン解説サイトを開くとライブペインティングの様子を捉えた写真が画面いっぱいに表示され、その上に明朝体で大きくキャッチコピーが配置された、重厚感と力強さを感じさせるファーストビューです。ブラックをベースにホワイトのテキストとオレンジの見出しで高背され...
-
「角中株式会社」のホームページデザイン解説メインビジュアルは写真とキャッチコピーを食い合わせたビジュアルのスライドショーで、キャッチコピーの一部をイエローとレッドに色を変え、レッドの部分のフォントサイズを上げることで迫力のある画面に仕上げています。コンテンツタイトルは鮮やかなレッド...
-
「日清食品グループ オンラインストア」のホームページデザイン解説ファーストビューではまず、正方形にトリミングされたバナーが次々と表示されるカルーセルが配置されており、キャッチーでインパクトのある画像を立て続けに見せることで製品への興味を惹きつけています。ブラック・レッド・ライトグレーの3色を使ったフラッ...
