No.029 「BRUTUS.jp」“読む”から“体験する”Webデザインの新基準

日常をアップデートするカルチャーとデザインの交差点

『BRUTUS.jp』は、1980年の創刊以来、日本のポップカルチャーを最前線で牽引してきたライフスタイルで、デジタルプラットフォームとして誕生したこのサイトは、紙の編集哲学をそのままに、カルチャー、デザイン、ライフスタイルが多層的に交差する「体験型メディア」として進化している。“読む”から“見る”、そして“感じる”へ。情報を消費するのではなく、世界観を体験するための設計が盛り込まれている。

ユーザーインターフェース

カテゴリーを横断するメニューUI設計と、雑誌感覚のグリッドレイアウトが特徴。目的の情報を「検索」して探すのではなく、ハッシュタグUIによって自然に回遊できる構造になっている。スクロールするたびに新しいトピックが飛び込んでくるタイムライン構成は、まるで雑誌のページをめくるような感覚を生み出している。また、記事カードのサイズや余白のリズムが巧みに設計されており、視線の流れをコントロールする編集的UIが印象的。「読む」行為を「探索する」体験へと変換する、デジタル時代のエディトリアルデザインの好例といえる。

コンテンツ構成

特集記事、連載、インタビュー、ニュースなど、多層的に展開されるコンテンツ構造。
ユーザーの閲覧履歴や興味に基づいたレコメンド機能が組み込まれ、読者一人ひとりに最適化された「自分だけのBRUTUS」を体験できる。
テキストとビジュアルの比率は、紙の誌面を意識したバランスで設計されており、読みやすさと没入感を両立。
カルチャーを軸に、デザイン、アート、ライフスタイルなどを横断的に編集することで、単なる情報発信ではなく「編集された世界観」を提供している。

デザイン

  • タイポグラフィ:記事の内容に合わせてフォントの太さや配置を微調整。紙の誌面デザインを彷彿とさせる、Webフォントの限界に挑むような緻密な設計が特徴。見出しと本文のコントラストが明確で、情報の階層が視覚的に整理されている。
  • 色彩によるカテゴリーの視覚化: 特集やカテゴリーごとに設定されたキーカラーが目を引くとともにページ内の特集に目が行く構成。サイト全体の一貫性を保ちつつ、スクロールによって空気感がガラリと変わるエディトリアルな色彩設計。
  • 写真のトリミング:被写体の力を最大化する大胆なトリミングで、画面いっぱいに広がるメインビジュアルが、読者を一瞬でその物語の世界へと引き込まれる。

ターゲット

  • 30〜50代の好奇心旺盛な都市生活者。
  • カルチャー、デザイン、アート、ファッションに関心を持つ層。
  • SNSの断片的な情報では満足できず、情報の質と編集の深度を重視する読者層。

まとめ

「BRUTUS.jp」は、紙媒体の編集哲学をデジタルに昇華させたメディア。情報を「消費」するのではなく、「体験」するための設計が徹底されている。それらが融合することで、知性と美意識を兼ね備えたカルチャーの新しい形を提示している。

「ここを真似したい!」
雑誌的世界観をウェブで再現する編集構成で、記事を単に「並べる」のではなく、レイアウトとタイポグラフィの力で「誌面」として成立させている点。スクロールさせる動作を「ページをめくる楽しさ」に変換している点など知的好奇心を刺激し続けるトーン&マナーの徹底されていることで、これらは、ブランドサイトやメディアサイトを設計する上で大きなヒントとなる。

項目内容
サイト名BRUTUS.jp(ブルータス)
URLhttps://brutus.jp/
メインカラーホワイト、ブラック、
カテゴリーごとのアクセントカラー
デザイン傾向エディトリアル、グリッドレイアウト、モダン
注目UI雑誌のレイアウトを再現した可変グリッド、
直感的なハッシュタグナビ

トーストの地平線|Webサイト100選

雑誌カテゴリー記事はこちら