「TBS」のホームページデザイン解説

ファーストビューの背景にグレーの斜線模様が使われていて、その上にコンパクトな画像領域が設置されていることでユーザの目を引く演出が施されています。画像領域で切り替わる画像には切り替わる際にオーバーラップの効果が加えられていて、ちょっとしたモー...

ピンクの英語フォントで大きく書かれたタイトルと、モザイク状にちりばめられたカラフルなテクスチャがポップでお洒落な印象を与えます。画面をスクロールさせると画面幅いっぱいに表示されるピンクのバーが目を引き、クリックするとエントリーコースの一覧が...

ヘッダーに固定表示されたナビゲーションメニューの設計が、各メニューにカーソルを合わせると下部からタブが現れる仕組みとなっていて、それぞれ色分けされていることで見やすい構成となっています。また、ポップな色分けによってサイトの雰囲気を演出する要...

メインビジュアルは3枚の指輪着用シーンで構成されたスライドショーで、写真の片側にグラデーションをかけることで上に配置したキャッチコピーを読みやすくし、同時に穏やかな空気を感じさせます。コンテンツの切り替え部分は帯状にトリミングした写真を配置...

メインビジュアルは店舗の内観と取り扱い商品のアップ写真で構成されたスライドショーで、中央には店舗名、左上には営業時間と連絡先が記載されています。オレンジをアクセントカラーにしたフラットなデザインで、タイル状に並べられたコンテンツのサムネイル...

画面中央に配置された建物の写真は背景にイエローの帯を敷き、写真を囲むようにドットのテクスチャを施した円を配置した、ポップな印象のファーストビューです。柔らかいイエローを中心にブルーやグリーンのドットのテクスチャを取り入れ、画面上端にはガーラ...

メインビジュアルで使われている3枚の画像は、写真の左側にネイビーのグラデーションをかけて大きくホワイトのテキストを重ねることで、文字の視認性を上げるとともに重厚感を感じさせます。コンテンツもネイビーをメインに濃いオレンジをアクセントカラーに...

メインビジュアルのスライドショーは、人物の肩から上をトリミングしたり、後ろ姿を採り入れるなどして商品にフォーカスした構図となっており、中央に重ねたブランドロゴと合わせてブランドイメージを形作っています。横に2枚並べた写真を中央からわずかにず...

サイトを開くとまず美容院の内装がスライドショーで画面いっぱいに表示され、中央に重ねた店舗ロゴと半透明のブラックを敷いたナビゲーションメニューでお洒落な印象をまず与えます。ファーストビューで画面下部に表示されていたナビゲーションメニューは、画...

ベージュとホワイトのツートーンのバックの中央にジムの様子を紹介したスライドショーが再生され、その上にはオレンジの明朝体で力強くキャッチコピーが配置されています。スタジオのロゴをメインカラーにした、明るく健康的なイメージの色使いです。トレーニ...

メインビジュアルは画面幅を3等分した画像に半透明の円形でタイトルを乗せたビジュアルで構成されており、それぞれマウスオーバーすると下からグラデーションがせり上がってきて、その上に説明文が表示される仕組みです。コンテンツの背後には古着の切り抜き...

サイトを開くと同時にゆるいタッチのキャラクターと、迫力のある筆文字のキャッチコピーが次々に上から落ちてきた後に、ラーメンの切り抜き写真が配置される迫力のあるファーストビューです。メインビジュアルはスライドショーになっていて、矢印をクリックす...