デザイン参考
黒いヘッダーの中央にオレンジの BEAMS SPORTS ロゴ、左に Instagram、右にメニュー。上角を丸めた薄い灰色の記事面にオレンジのカテゴリの罫線、太く詰めた日本語タイトルと英語の副題、2024.08.15。中央の細い列に縦長のジム写真、右にオレンジの丸い輪郭のシェアアイコン
写真の上に黒いグラデーションのヘッダーが重なり、黒いシャツのインストラクターを写した縦長の写真が二枚横に並ぶ。下にオレンジの「まずはじっくりと対話。心も筋肉もほぐしていく!」の見出し
青いマットの上で二人の参加者がボールを使ってトレーニングする縦長の写真。小さなオレンジのキャプション、輪郭だけのカプセル形の矢印ボタンと三つのカルーセルの点、右に丸いシェアアイコン
黒いフッターの上部に大きな BEAMS SPORTS の文字があり、一部に固定ヘッダーが重なる。輪郭付きの「やってみる/Let’s Try!」「応援する/Cheer up!」「整える/Conditioning!」の三つのピル、カテゴリ一覧、オレンジの輪郭のハッシュタグ。Half Time、About、Archive と企業の著作権表記が続く

REFERENCE

BEAMS SPORTS|クリスタルジム体験レポート

サイトを見る
日本語/エディトリアル/タイポグラフィwww.beams.co.jp

BEAMS SPORTS のスタッフが、芸人からトレーニングを教わるクリスタルジムを訪ねる体験記事。薄い灰色の細い本文列に、鮮やかなオレンジの文字と縦長の写真を置き、黒いヘッダーとフッターで囲む。

BEAMS SPORTS の第一画面は、黒いヘッダーの中央にスポーティーな斜体のオレンジのロゴを置き、左に Instagram、右にメニューを収める。その下は上角を丸めた薄い灰色の記事面。オレンジのカテゴリの罫線に続き、「インストラクターは吉本芸人! 噂のクリスタルジムに潜入してみた。」を太く幅の詰まった日本語で組む。英語の副題は「All Crystal Gym instructors are comedians.」、記事の日付は 2024.08.15。BEAMS SPORTS のスタッフが芸人からトレーニングを教わる体験を、中央の細い列と縦長のジム写真で見せる。列の周りには広く余白を取り、右にオレンジの丸い輪郭のシェアアイコンを並べる。

この画面を残しているのは、細い本文列の中で、詰めた文字と縦長の写真に同じオレンジの案内を添えているからだ。黒いシャツのインストラクターを写した二枚の縦長写真は横に並び、上には黒いグラデーションのヘッダーが重なる。下の「まずはじっくりと対話。心も筋肉もほぐしていく!」もオレンジに揃える。青いマットで二人の参加者がボールを使う写真には、小さなオレンジのキャプション、輪郭だけのカプセル形の矢印ボタンと三つのカルーセルの点を添える。終端は黒地に反転し、大きな BEAMS SPORTS の文字の一部に固定ヘッダーが重なる。「やってみる/Let’s Try!」「応援する/Cheer up!」「整える/Conditioning!」の三つの輪郭付きピルから、カテゴリ一覧、オレンジの輪郭のハッシュタグ、Half Time、About、Archive、企業の著作権表記へつなぐ。flenteが画面を組むときも、写真と本文を細い列に揃えて周囲の余白を確保し、見出しと小さな案内に一色を通し、終端の背景を反転して記事から次の案内への切り替わりをつくる。

相談