暮らす宿

暮らす宿

*ポイント*

・ボタンやナビゲーションボタンの背景画像がのれんのような生地になっていてこのサイトのイメージに合っている

・各地からのアクセスや町内からのアクセスが詳しく説明されていて分かりやすい

・サイト全体が和色で統一されている

大泉自動車教習所

大泉自動車教習所

*ポイント*

・ファーストビューがグリッドレイアウトになっているが、画像と画像の余白が道路になっており車が走っているアニメーションになっていてPOPな印象を持つ

・全体的に青系統で統一されている

・グリッドレイアウトになっている画像が料金プランやキャンペーン情報のページにリンクされているのでこのサイトを見に来た人が一番知りたい情報を考えて構成されている

アマノ食堂

アマノ食堂

*ポイント*

・ファーストビューのヘッダーが屋根の背景画像が屋根のようになっており、スクロールするとナビゲーションボタンが画面上で固定され、のれんのようになっている

・ファーストビューの各コンテンツの紹介が一つ一つ形が異なっていて手書き風になっておりオシャレ

・トップページをスクロールして上下真ん中ぐらいの位置にアマノ食堂がある街並みのようなイラストが表示されており、人や犬だけが歩いているようなアニメーションになっている

・スマートフォンサイズになるとアニメーション等はないが、コンテンツ紹介も一列になり見やすい

HOTEL ANTEROOM KYOTO

HOTEL ANTEROOM KYOTO

*ポイント*

・borderで各コンテンツが分けられていて見やすい

・画面右側の予約するコンテンツとInstagramのリンクが他のページにいっても固定されている

・スマートフォンサイズになると1カラムレイアウトになっているのでスマートフォンでも見やすいデザインになっている

ワンツーレッスン

ワンツーレッスン

*ポイント*

・各コンテンツが画面いっぱいのサイズになっているのでどのサイズの画面でも分かりやすい

・SNSアイコンをhoverするとただ色が変わるだけではなく、他の色のアイコンが下から表示されてhoverしてない状態のアイコンが上に消えるようなアニメーションになっている

bar hotel箱根香山

bar hotel箱根香山

*ポイント*

・barのようなホテルというコンセプトなのでサイト自体も暗めの色を使用しており、ファーストビューの動画もあり高級感が漂っている

・スクロールするとコンテンツの画像が滝のように現れるアニメーションになっている

・予約するボタンが画面の下で固定されている

HEART BREAD ANTIQUE

HEART BREAD ANTIQUE

*ポイント*

・アンティークという名前からサイト自体もアンティークをイメージさせるようなデザインになっている

・ファーストビューの画像がスクリーンのような劇場の舞台をイメージさせる中に表示されるようになっており一定の秒数を過ぎると切り替わるようになっている

・スクロールすると色々なイラストが現れるようになっている

・商品紹介のページでは商品の画像にhoverすると商品の説明が表示されるようになっている、スマートフォンサイズになるとクリックしないと説明文が表示されずレスポンシブでも見やすい

THE RYOKAN TOKYO YUGAWARA

THE RYOKAN TOKYO YUGAWARA

*ポイント*

・旅館のサイトだがオシャレでパステルカラーを使用するなど今風なデザインではあるがレトロさも表現されている

・スクロールすると各コンテンツの見出しの下に波線が表示される

・画面の右に立て並びでSNSとグーグルマップのリンクのアイコンが固定されている

・いろんなフォントを使用している

訪問介護ステーション

訪問介護ステーション

*ポイント*

・イラストをたくさん使用しており、イラストで描かれているサイト全体の曲線の中にテキストやイラストがうまくはめ込まれている

・ナビゲーションメニューの上から看板が垂れ下がっているかのように被せて電話番号とメール先が表示されている

・青とピンクでサイト全体が統一されている

・スマートフォンサイズになると文字サイズ等も大きく表示されていて見やすい

carborocco

carborocco

*ポイント*

・斜線で写真に影を表現している

・ボタンのところに影ではなくborderを入れて立体に見せている

・サイト自体は背景が白でテキストが黒でシンプルな作りになっているが、画像が台形になっていたりborderをうまく使用することによってオシャレに見える