海外方針から最新の仕事へ進む
デザイン / エディトリアル
Work & Co
左の細い章見出しと右の広い本文・実績を揃え、赤い下線リンクで次の読み先を示す。
設計の見どころ
冒頭にデザインと技術で課題を解くという説明があり、その直後に最新案件、更新情報、企業情報の索引が続く。すべての能力を一度に列挙せず、直近の仕事を通して今の活動を示す順序だ。継続的に実績や記事を更新する会社のトップページに応用できる。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
国内
海外
DESIGN NOTES
このサイトの設計を読み解く。
自己紹介を小さく作品を大きく
冒頭は中央の短い自己紹介と広い白い余白が中心で、その下からホスピタリティ、ファッション、出版などの分野と作品が続く。経歴を長く説明するより、作品群から活動範囲を読ませる順番だ。制作実績が主な判断材料になるスタジオに向いた入口である。
余白と書体で声の強さを変える
上部のナビは簡潔なサンセリフ、中央の自己紹介は細い斜体のセリフで組まれている。作品の分野名は字間を大きく空け、横幅全体を使う。説明、操作、分類の文字に別の役割を与え、色や枠を増やさず情報の階層を作っている点を参照したい。
作品の素材感まで見せる面積
最初の作品では、緑の背景に紙の凹凸や植物の図柄が見える大きな画像を置いている。小さなサムネイルを数多く並べるより、質感や細部を見せる面積を一件に渡す設計だ。印刷物や工芸の紹介では、全体像と細部の両方が伝わる撮影素材が前提になる。
窓口を問い合わせ目的で分ける
上部は作品・書体販売への入口・情報という少数のナビで、連絡先には新規案件、外部スタッフ、インターンのメールが分けて記載されている。見るための導線を軽く保ち、連絡段階で目的を分ける方法だ。連絡先の区分は実際の受け付け体制に合わせたい。
余白だけを借りない
この構成では余白の先に現れる作品の精度が重要になる。写真が少ない事業で空白だけを増やすと、何を頼めるか分かるまで時間がかかる。転用するなら、代表作品を分野ごとに絞り、作品名と担当範囲を短く添えて、判断できる情報の密度を維持したい。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
作品分類を大きな文字間で見出し化し、各作品には広い画像面を渡す。紙・印刷・工芸など、完成品の細部そのものが依頼理由になるポートフォリオで取り入れやすい。
そのまま真似する前に
広い余白と画像主体の流れは、提供範囲や料金を早く知りたい人には時間がかかる。動的な文字の重なりも画面で見えたため、転用時は静止状態でも読みやすくしたい。
次に見ておきたい参考
一覧へ →海外国内人物の専門性と作品を結び付ける
デザイン / タイポグラフィ
NERD
青い立体的な文字を主役に、所属アーティストと作品ごとの担当領域を紹介する。
設計の見どころ
冒頭は短い英語と立体的な文字で創造性を伝え、その後にアーティストの紹介と制作実績が続く。独立したクリエイターをつなぐ会社という立場を示し、会社の説明だけでなく誰に相談できるかを人物単位で理解させる構成になっている。
詳しい解説を読む →公式サイトを見る ↗海外Rafael Derolez
デザイン / ミニマル
細い自己紹介欄と大きな縦長画像を分ける
デザイン / ミニマル
Rafael Derolez
左に自己紹介と連絡先、右に縦長の写真や画面を置くデザインエンジニアの一画面。
設計の見どころ
確認した画面では左側の細い欄に自己紹介がまとまり、右側の広い領域に縦長の画像が並ぶ。長いページを読み進めなくても、人となりと視覚的な作例を同時に見られる。情報をたくさん積むより、一画面の中で文章と画像の役割を明確に分けている。
詳しい解説を読む →公式サイトを見る ↗