メインコンテンツへスキップ

LUMEN — デザイン&アートディレクション・スタジオ

デザイン&アートディレクション・スタジオ

アートディレクション・スタジオのサイト。六つの仕事をグリッドではなく索引として並べ、提供内容より先に仕事の進め方を示し、画像は一枚もトリミングしない。

2026-05
  • UI/UX デザイン
  • ウェブ・アートディレクション
  • フロントエンド開発
  • モーションデザイン
Next.jsTypeScriptTailwind CSSGSAPVercel
LUMEN — デザイン&アートディレクション・スタジオ のプレビュー
  1. 01

    六つの仕事を索引で提示し、タイトルにカーソルを重ねると画像が現れる

  2. 02

    提供内容より先に仕事の進め方を提示

  3. 03

    画像は一枚もトリミングせず、すべて元の比率のまま

ブリーフ

自らの眼を売るアートディレクション・スタジオ。この領域において、サイトは販売資料ではない。ポートフォリオの最初の一点である。凡庸であれば、そこに書かれた言葉ごと打ち消してしまう。

スタジオが掲げる領域は四つ——アイデンティティ、アートディレクション、モーションとサウンド、インタラクティブウェブ——そして仕事は六件。すべてを積み上げてしまう危険があった。

制約

  • サイトは作品より先に評価される。 レイアウトが一つ拙いだけで、訪問者はもう何も開かない。
  • 六件の仕事、四つの領域。 トップページを飽和させるには十分な量だ。
  • 画像は一枚もトリミングしない。 アートディレクターにとって、傷んだ構図は職業上の過失である。

判断

ギャラリーではなく索引を。

六つの仕事はサムネイルのグリッドではなく、リストとして置かれる。前に出るのはタイトルで、画像はカーソルを重ねたときに現れる。訪問者はまず名前——Halo、Terrain Vague、Onde、Sédiment、Cinabre、Veine——をたどり、そこから選ぶ。六枚並んだグリッドは六つの判断を同時に迫るが、リストは一つずつしか迫らない。

提供内容より先に、進め方を。

ページは 何を売るか より先に どう働くか を語る。クリエイティブの仕事では、方法こそが商品だ。アイデンティティを買う顧客が実際に買っているのは、決め方そのものである。四つの領域はその後に、帰結として現れる。

制約を素材として見せる。

制約こそが仕事をつくる——スタジオはそう言い切る。サイトはそれを実演する。書体は一族のみ、ビジュアルの外にアクセント色はなく、カラムの幅も一種類。掲げた主張を、サイト自身が証明している。

結果

四つの動き——ステートメント、仕事、進め方、提供内容——で構成されたトップページと、ワンアクションで開ける六件のケーススタディ。トリミングされた画像は一枚もなく、すべてが元の比率のまま置かれている。

いま作り直すなら

プロジェクトの発見はすべてホバーに委ねられている。モバイルにホバーは存在せず、索引は画像のないタイトルの羅列になる。まずタッチ版から設計し、プロジェクトごとに一枚の図版を見せたうえで、ホバーはデスクトップの洗練として残すだろう。

PULSE