国内人物の専門性と作品を結び付ける
デザイン / タイポグラフィ
NERD
青い立体的な文字を主役に、所属アーティストと作品ごとの担当領域を紹介する。
設計の見どころ
冒頭は短い英語と立体的な文字で創造性を伝え、その後にアーティストの紹介と制作実績が続く。独立したクリエイターをつなぐ会社という立場を示し、会社の説明だけでなく誰に相談できるかを人物単位で理解させる構成になっている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 国内 
海外
国内
DESIGN NOTES
このサイトの設計を読み解く。
遊べる画面をポートフォリオの中央に置く
画面中央には大きなお絵描き風の領域があり、左端に鉛筆や消しゴムなどの小さな道具、下辺に記号の列が並ぶ。作品サムネイルを整然と見せるだけでなく、サイト自体を遊びのある画面として見せる構成だ。操作の実動作ではなく、見えている構成を参考にしている。
巨大な名前と細かい枠の差を使う
上端には画面幅いっぱいのピクセル調の名前が置かれ、その下を細い罫線でいくつもの区画に分ける。非常に大きな文字と小さな情報の差が強く、整いすぎない個性を作る。白い背景と茶色系の名前が、密度の高い画面の大枠を支えている。
作品リンクを左の細い欄へまとめる
左側の細い欄にはWORKの見出しと作品名、仕事の区分が短く並ぶ。中央に大きな遊びの領域を設けても、実績を探すための場所は別に残す。独特な見た目を採用する場合にも、依頼者が見たい作品を文字の一覧で確認できる入口を確保している。
メールを大きな文字の帯として通す
中央上部には青いメールアドレスとCONTACT MEの大きな文字が帯状に並ぶ。小さなフッターへ連絡先を隠さず、画面の主要な要素として扱う配置だ。視覚的な遊びを増やしながらも、本人へ連絡する行動は強く目立つ場所に置いている。
人物の冗談と小道具で作風を伝える
自己紹介の冗談に加え、人物の線画、時計、天候の文字、小さなキャラクターなどが同じ画面に共存する。説明文だけで性格を語るのではなく、置くものと語り口で作風を見せる。一般的な会社紹介より、本人の表現そのものが選ばれる仕事に適した考え方だ。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
表現者のサイトでは、作品一覧以外にも本人らしい遊びを置いて作風を示せる。その場合も、作品の入口と連絡先だけは独立して見つけられる場所に残したい。
そのまま真似する前に
多数の細い文字や動きのある要素は、スマートフォンや読み上げで理解しづらくなる可能性がある。今回の確認は一画面の構成に限定し、お絵描き保存や各ボタンの動作は未検証。
次に見ておきたい参考
一覧へ →国内海外Rafael Derolez
デザイン / ミニマル
細い自己紹介欄と大きな縦長画像を分ける
デザイン / ミニマル
Rafael Derolez
左に自己紹介と連絡先、右に縦長の写真や画面を置くデザインエンジニアの一画面。
設計の見どころ
確認した画面では左側の細い欄に自己紹介がまとまり、右側の広い領域に縦長の画像が並ぶ。長いページを読み進めなくても、人となりと視覚的な作例を同時に見られる。情報をたくさん積むより、一画面の中で文章と画像の役割を明確に分けている。
詳しい解説を読む →公式サイトを見る ↗国内チームの組み方と仕事の範囲を示す
デザイン / タイポグラフィ
UNICELL
柔らかな図形と筆文字風の見出しで、案件ごとに専門家を組み合わせる仕事を紹介する。
設計の見どころ
冒頭は異なる形が集まる画面と言葉で会社の姿勢を示し、本文で案件に合わせて専門家を組む体制を説明する。採用、外部委託、相談というサービスの違いを分けた後、戦略、制作、運用などの業務へ展開し、体制と仕事内容の両方を理解させている。
詳しい解説を読む →公式サイトを見る ↗