国内人物の専門性と作品を結び付ける
デザイン / タイポグラフィ
NERD
青い立体的な文字を主役に、所属アーティストと作品ごとの担当領域を紹介する。
設計の見どころ
冒頭は短い英語と立体的な文字で創造性を伝え、その後にアーティストの紹介と制作実績が続く。独立したクリエイターをつなぐ会社という立場を示し、会社の説明だけでなく誰に相談できるかを人物単位で理解させる構成になっている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 国内 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
巨大な社名と中空の立体で構成する
冒頭では黒い社名が画面幅いっぱいに広がり、その下に中空のコンクリート風の立体が置かれる。底部だけに青い光のような色が入り、白に近い背景から形が浮き上がる。会社名と抽象的な立体を二つの主役にして、短い説明を左下へ寄せる構成になっている。
薄い縦線で広い余白に秩序を作る
背景には薄い縦線が等間隔に入り、文字、立体、右下の小さな映像の位置を支える。装飾を増やさず、画面の大きな余白に規則を与える方法だ。要素のサイズ差が大きくても、見えにくい線の反復がまとまりを保つ役割を果たしている。
青い行動入口を無彩色の中に置く
左下のBUILD WITH USは鮮やかな青で、立体の下部の色と呼応する。黒い本文と薄い背景の中で、相談の入口だけが色として見つかる配置だ。右下には小さな映像の入口もあり、すぐ相談する人と作例を見たい人に異なる次の行動を示している。
大きな映像枠へ実績紹介を切り替える
本文の確認画面は、自転車と黄色い背景を映した大きな動画枠が中心になる。上部には小さな白いナビが残り、会社名の強い導入から作品を見る領域へ移る。再生内容までは確認していないが、映像を広く見せるための余白と入口の配置は読み取れる。
少人数で進める体制を具体的に説明
公開テキストでは戦略、ブランド、製品をつなぐ役割と、三人のシニア担当者が直接関わる体制を説明する。誰がどの範囲を担うかを言葉にし、少人数であることを仕事の進め方へ結び付ける構成だ。相談前の質問も、選ぶ時の迷いを具体的に取り上げている。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
抽象的な立体を使う場合でも、制作範囲を短い文章で補い、相談の入口には一色を割り当てられる。少人数の会社は人数より、誰がどこまで担当するかを説明したい。
そのまま真似する前に
動画の再生内容や公開事例の成果、経験年数は独立検証していない。冒頭には小さなCookie案内もあり、画像の印象だけで全操作やアクセシビリティが良好とは判断できない。
次に見ておきたい参考
一覧へ →国内海外Rafael Derolez
デザイン / ミニマル
細い自己紹介欄と大きな縦長画像を分ける
デザイン / ミニマル
Rafael Derolez
左に自己紹介と連絡先、右に縦長の写真や画面を置くデザインエンジニアの一画面。
設計の見どころ
確認した画面では左側の細い欄に自己紹介がまとまり、右側の広い領域に縦長の画像が並ぶ。長いページを読み進めなくても、人となりと視覚的な作例を同時に見られる。情報をたくさん積むより、一画面の中で文章と画像の役割を明確に分けている。
詳しい解説を読む →公式サイトを見る ↗海外Shawn Golden
デザイン / 実験的
遊べる画面をポートフォリオの中央に置く
デザイン / 実験的
Shawn Golden
巨大な名前と細かな枠組みの中へ、お絵描き画面・作品リンク・時計を詰め込む個人サイト。
設計の見どころ
画面中央には大きなお絵描き風の領域があり、左端に鉛筆や消しゴムなどの小さな道具、下辺に記号の列が並ぶ。作品サムネイルを整然と見せるだけでなく、サイト自体を遊びのある画面として見せる構成だ。操作の実動作ではなく、見えている構成を参考にしている。
詳しい解説を読む →公式サイトを見る ↗