「info.asahi.com」のホームページデザイン解説

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

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

サイトを開くと鮮やかなグラデーションの背景上にテレビ番組のバナー画像が表示されていて、目を引くデザインが考えられています。画像領域の横にはタイムテーブルと番組表がタブによって切り替えられる表示が設置されており、一目で優先度の高い情報が得られ...

うどんチェーン店の運営するオウンドメディアで、うどんの歴史やトリビアを未来に伝えるプロジェクトのページです。コンテンツの見出しは新聞のレイアウトを想定させるレイアウトで配置され、フォントも新聞の見出しに近いものが使われています。下層ページで...

画面右にナビゲーションメニューを配置し、メインエリアにムービーを大きく配置した迫力のあるファーストビューです。モノトーンのシンプルな色使いですが、丸みを帯びたフォントで書かれたタイトルと、アクセントに配置された小さく揺れる果物のイラストで親...

サイトにアクセスするとまず画面中央にサイトロゴが浮かび上がり、画面が切り替わると記事のキャプションと見出しを組み合わせたスライドショーが大きく流れる、迫力のあるファーストビューです。明朝体のフォントと、画面左に固定されたナビゲーションメニュ...

メインビジュアルはTシャツプリントの作業工程をまとめたスライドショーで、キャッチコピーの横にインクが飛び散ったような図柄を配置しています。ページ上部に固定したナビゲーションメニューや、テキストボックスにもインクが垂れたような流線型をあしらっ...

メインビジュアルは画面下部に吹き出し状のサムネイルがスクロールするスライドショーとなっており、画面中央に大きく表示されたタイトルロゴが迫力を感じさせ、背景のイラストに合わせてロゴと背景の色が変化する様子が大阪の多彩な楽しみ方を感じさせます。...

淡い水彩風のテクスチャで描かれた幾何学模様を散りばめたイラストがキャッチコピーの背後にゆっくりとした速度で流れ、ユーザーに寄り添うような優しい雰囲気を感じさせるファーストビューです。メインビジュアルの下ではワークショップの様子がカルーセルで...

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

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

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