ほんのわずかにノイズを乗せたグレーのテクスチャと、グリーンのロゴ、濃いブラウンのフッターを中心にコンパクトにまとめっられたサイトです。商品写真をカルーセルにまとめたメインビジュアルの下に、グリーンのトーンを変えたバナーを並べてコーヒーのシリーズ展開を表し、下層ページのコーヒーの紹介ページは商品の背景をカテゴリーごとに同一にして統一感を出しています。ブランドの歴史のコーナーはブラウンのモノトーンで統一した写真を多数配置してブランドの歴史の長さを表現しています。
執筆者
カテゴリ
基本情報
カフェ・喫茶店に関連するデザイン
-
「WHAT CAFE」のホームページデザイン解説サイトを開いた瞬間に展開される一連のモーションが非常に迫力があり、思わず見入ってしまうような演出がサイト導入の効果となっています。スクロールしていくと画面左側に画像、右側に説明のテキストという構成で内容が展開されて見やすい構成がしっかりと考...
-
「ミスタードーナツ」のホームページデザイン解説スカイブルーのペンキを塗ったようなラフなテクスチャが鮮やかで目を引くファーストビューです。メインビジュアルのエリアはコンパクトにし、店舗検索のボックスとアルバイト募集のバナーが同時に目に入るように構成されています。新商品やキャンペーン情報の...
-
「B.cafe」のホームページデザイン解説ブラックをベースに、ブラウンやグレーをアクセントにしたサイトです。ファーストビューには、B.cafeのおしゃれな店内が写っています。グローバルナビにてメニュー、モルドバワインなどを案内しています。ワインリストから一覧を見られます。トップペー...
サービスサイトに関連するデザイン
-
「buddies」のホームページデザイン解説ホワイト×ブラックをメインカラーに、スタイリッシュなイメージで構成されたサイトになっていて、その中にキーカラーとして鮮やかなパステルグリーンが用いられていることで、目に止まりやすく統一感のあるデザインにまとめられています。「About bu...
-
「Viens-là」のホームページデザイン解説ファーストビューでは円形のオブジェクトが画面上を浮遊しているような表現が展開されていて、ポップで可愛らしい演出になっています。円形のオブジェクトはカーソルの動きに反応した様々なモーションが加えられていて、スクロールした先では画像領域に変化し...
-
「TWKS」のホームページデザイン解説素早いテンポで切り替わるムービーがファーストビュー上に大きな領域で展開されており、インパクトのある演出になっています。スクロールしていくと大きくテキストが表示されて背景色も徐々に切り替わり、ファーストビューから大きな変化があって面白い表現が...
グリーンを使ったデザイン
-
「北海道大学 人間知×脳×AI研究教育センター」のホームページデザイン解説グレーをベースにグリーンをアクセントにしたサイトです。ファーストビューでは、北海道大学 人間知×脳×AI研究教育センターのロゴマークが表示されています。トップページの左サイドに、ニュースやイベントなどのメニューが出ています。トップページの中...
-
「CHEVALIER Valentin」のホームページデザイン解説深いグリーンをメインカラーとしてサイトが構成されていて、上品で落ち着きのあるイメージが作り上げられています。上部に設置されたナビゲーションメニューは下スクロールで画面外に隠れて、上スクロールですぐに表示される仕組みになっていてスムーズな閲覧...
-
「Pitta!」のホームページデザイン解説メインビジュアルに配置したサービスロゴは背景を明るくぼかすことで、ツヤ感のあるロゴデザインと相まってスポットライトが当たっているような効果を演出しています。また同様の効果はナビゲーションバーにも施されていて、メインビジュアルに配置したアイコ...
かっこいいなホームページのデザイン
- 「buddies」のホームページデザイン解説
ホワイト×ブラックをメインカラーに、スタイリッシュなイメージで構成されたサイトになっていて、その中にキーカラーとして鮮やかなパステルグリーンが用いられていることで、目に止まりやすく統一感のあるデザインにまとめられています。「About bu...
-
「FIL – SUMI LIMITED」のホームページデザイン解説ブラックをベースに白抜き文字を使ったサイトです。ファーストビューでは、スタイリッシュなFIL（フィル）のインテリアを紹介しています。全体的に製品はモノクロ画像、阿蘇の自然を写した景色はカラーで写っています。グローバルナビにて、フィルのコンセ...
-
「Shibuya Media Pedia」のホームページデザイン解説グレーをベースにブラックをアクセントにしたサイトです。ファーストビューでは、「OOH360°View&Generator」を使って渋谷を写した高速の動画をあげています。OOH360°View&Generatorはメディアの周辺環境を閲覧した...