シンプルなテキストがくるくると回転して入れ替わるローディング画面から一転して、画面中央に大きく配置されたイラストが奥から手前に、温泉のロゴが下から上にと次々飛び出してくる動きのあるファーストビューで、見ている人に新鮮な驚きを与えます。クラフト紙のようなベージュのテキストにモノトーンの色使いが印刷物のようなクラシカルな雰囲気を与え、アクセントの蛍光ピンクがポップな印象を与える色使いです。イラストを画面左から右にスライドショーで映したり、商品サムネイルにマウスオーバーすると背景が現れてゆらゆら揺れたり、画面を下にスクロールすると画面いっぱいに暖簾が広がるなど、様々な動きでワクワク感を与えています。
執筆者
カテゴリ
基本情報
旅館に関連するデザイン
-
「古民家宿TOKITOKI」のホームページデザイン解説和室の丸窓風にトリミングされた写真と、トリミングのない画面いっぱいの写真が交互に入れ替わるスライドショーがまず表示され、古民家の中と庭先から見た風景をイメージさせるファーストビューです。淡いベージュの背景に明朝体のフォントで、しっとりとした...
-
「里山十帖 THE HOUSE」のホームページデザイン解説画面いっぱいに古民家の風景が下から上にスライドインするスライドショーが表示され、中央にぽつんとシンプルにキャッチコピーが配置されています。コンテンツの背景にも画面いっぱいの写真を使い、ページスクロールとともにほんのわずかに画面が揺れるアニメ...
-
「喜安屋」のホームページデザイン解説グレーとブラックをベースにしたサイトです。トップページの全面に、山あいにひっそりとたたずむ喜安屋（きやすや）が写っています。縦書きで明朝体のフォントを使用、和の雰囲気を出しています。グローバルナビにて宿泊プランや料金、四季の料理や創作料理な...
サービスサイトに関連するデザイン
-
「西武学園文理中学･高等学校」のホームページデザイン解説サイトを開くと画面中央に埋め込んだYoutubeの動画が再生され、その上に重なるように斜めにカットしたベタを配置してキャチコピーが重ねられています。シンプルな1カラムのレイアウトでかっちり感を出しつつ、鮮やかなイエローとグリーンを背景に、リ...
-
「小松美羽 Official Site」のホームページデザイン解説サイトを開くとライブペインティングの様子を捉えた写真が画面いっぱいに表示され、その上に明朝体で大きくキャッチコピーが配置された、重厚感と力強さを感じさせるファーストビューです。ブラックをベースにホワイトのテキストとオレンジの見出しで高背され...
-
「hana鍼灸治療院」のホームページデザイン解説サイトを開くと画面いっぱいに広がる鮮やかな蘭の花がまず目に入り、スライドショーが切り替わると院内の内装や施術の様子が写真で紹介されています。落ち着いたゴールドをアクセントカラーにしており、ダイヤ型のテクスチャと合わせて高級感を感じさせるデザ...
ブラウンを使ったデザイン
-
「株式会社 潮出版社_潮WEB」のホームページデザイン解説サイトを開くとナビゲーションメニューの下にカルーセルメニューが表示され、新刊やおすすめ情報を紹介するビジュアルが次々と表示されます。メインエリアは右側にナビゲーションメニューを配置し、ランキングやリンクを配置しています。ブラウンとイエローを...
-
「minico」のホームページデザイン解説ファーストビューは画面を中央から2分割したレイアウトで、画面左側は常にロゴとキャッチコピーが固定されており、写真が縦に並んだ画面右側のみがスクロールするようになっています。写真をクリックすると画面が左右にスライドアウトして中央に商品写真と説...
-
「ひらかたエール法律事務所」のホームページデザイン解説ベージュをベースにブラウンをアクセントにしたサイトです。ファーストビューには、ひらかたエール法律事務所のある枚方市の駅前が写っています。グローバルナビにて弁護士紹介、取扱業務などを案内しています。ブラウンの「キッズスペース完備」の丸いバナー...
イラスト・手書き感なホームページのデザイン
-
「公益社団法人日展_こども日展」のホームページデザイン解説カラフルなタイトルロゴを囲むように配置されたイラストと、さらにそれを取り囲むように散りばめられた水彩風の三角形のテクスチャがぱっと目をひくファーストビューです。タイトルの下には3色の角丸長方形でリンクボタンが配置され、それぞれ吹き出し風にキ...
-
「真宗 大谷派 蓮照寺」のホームページデザイン解説サイトを開くと画面幅いっぱいにお寺の風景と墓地の写真が次々にスライドショーで表示され、穏やかな空気感と季節感を感じさせます。またスライドショーの右側には縦書きでキャッチコピーが配置されています。明朝体の見出しと、ベージュの背景に淡く敷き詰め...
-
「北陸自動車学校」のホームページデザイン解説サイトを開くと画面を縦に4分割したコンテンツのサムネイルで構成されたメインビジュアルがまず目に入り、それぞれ互い違いの平行四辺形を組み合わせることで蛇腹折りのパンフレットを広げたような効果を見せています。鮮やかなブルーとくすんだグリーンをメ...
