国内人物の専門性と作品を結び付ける
デザイン / タイポグラフィ
NERD
青い立体的な文字を主役に、所属アーティストと作品ごとの担当領域を紹介する。
設計の見どころ
冒頭は短い英語と立体的な文字で創造性を伝え、その後にアーティストの紹介と制作実績が続く。独立したクリエイターをつなぐ会社という立場を示し、会社の説明だけでなく誰に相談できるかを人物単位で理解させる構成になっている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 国内 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
短い名乗りから作品の背景へ
冒頭は社名と短い名乗り、その下に活動姿勢と拠点の説明があり、続いて代表作品へ進む。作品にはブランド名だけでなく取り組みの背景を説明する文章がある。完成形を見せるだけで終わらず、依頼の理由を言葉でも伝えるポートフォリオとして読める。
黒地の中で文字の明暗を変える
共通の背景は黒で、ロゴに黄色を使い、主文を白、補助的な説明をグレーにしている。ナビは小さく、会社の説明は左寄せの大きな文字で置かれる。色数を絞ったまま読む優先順位を作る方法だが、補助文字の明るさは背景との読みやすさを確認したい。
作品名と担当した意味を揃える
代表作品の情報にはブランド名、短い題名、年、領域があり、背景を説明する本文も用意されている。作品の見た目に加えて、いつどの領域で何を考えた仕事かを残す形式だ。自社の実績でも担当範囲や課題を添えれば、名前の知名度だけに依存しにくくなる。
閲覧と連絡の段階を分ける
作品区画には全作品へ進む入口があり、末尾では広報と採用を分け、拠点の連絡先も示している。関心が浅い人は実例を増やして見られ、相談する人は目的に合う窓口を探せる。入口を増やす際は、事業相談と採用を同じフォームに集める必要があるか見直したい。
作品の説明材料を先に用意する
黒い背景を移すだけではこの設計の中心は再現できない。重要なのは作品ごとの課題、対象、担当範囲を短く説明できることだ。ブランド制作や企画会社へ応用するなら、作品のビジュアルと一緒にその判断理由をまとめ、年と分野で後から探せる形にしたい。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
ブランド名に加え、作品の短い題名・年・領域・背景説明を一組にする。見た目の好みだけでなく、どのような課題に関わる会社かを依頼者が読み取れる実績紹介になる。
そのまま真似する前に
今回の冒頭映像領域は黒い画面と再生表示だったため、映像演出は評価していない。動画に頼る構成を応用する時は、再生前にも会社の内容が分かる文章と代替画像を置きたい。
次に見ておきたい参考
一覧へ →国内海外Rafael Derolez
デザイン / ミニマル
細い自己紹介欄と大きな縦長画像を分ける
デザイン / ミニマル
Rafael Derolez
左に自己紹介と連絡先、右に縦長の写真や画面を置くデザインエンジニアの一画面。
設計の見どころ
確認した画面では左側の細い欄に自己紹介がまとまり、右側の広い領域に縦長の画像が並ぶ。長いページを読み進めなくても、人となりと視覚的な作例を同時に見られる。情報をたくさん積むより、一画面の中で文章と画像の役割を明確に分けている。
詳しい解説を読む →公式サイトを見る ↗海外Shawn Golden
デザイン / 実験的
遊べる画面をポートフォリオの中央に置く
デザイン / 実験的
Shawn Golden
巨大な名前と細かな枠組みの中へ、お絵描き画面・作品リンク・時計を詰め込む個人サイト。
設計の見どころ
画面中央には大きなお絵描き風の領域があり、左端に鉛筆や消しゴムなどの小さな道具、下辺に記号の列が並ぶ。作品サムネイルを整然と見せるだけでなく、サイト自体を遊びのある画面として見せる構成だ。操作の実動作ではなく、見えている構成を参考にしている。
詳しい解説を読む →公式サイトを見る ↗