株式会社ペルソナーズのWebサイトは、白と黒を基調にした静かな画面の中で、黄色の差し色と大判の写真だけを強く働かせる設計になっています。動画制作・写真撮影・Web制作を手がける会社のサイトらしく、装飾を積み上げるのではなく、素材そのものを見せるための余白をどれだけ確保できるかに軸が置かれています。
この記事では、東京都練馬区を拠点とする同社のサイトを、配色、ファーストビュー、情報設計、導線という4つの観点から読み解きます。映像や写真、Webをまとめて任せられる会社のサイトをどう組み立てるかという点で、参考にしやすい構成です。
モノトーンの土台に黄色を一点だけ置く配色設計
このサイトの配色は、白・淡いグレー・黒という無彩色でほぼ組み立てられており、色として主張しているのは黄色だけです。写真の色数が多くなりやすい業種であっても画面が散らからないのは、背景と文字を無彩色に徹底し、彩度の高い色を1色に絞り込んでいるからです。ここでは無彩色の使い分けと、黄色が引き受けている役割を順に見ていきます。
白・グレー・黒で面の階層をつくる
セクションの背景は、白と淡いグレーが交互に現れる構成です。リード文とWORKSは白、SERVICEの背景帯やSTAFF、ACCESSは薄いグレーが敷かれており、色味を変えずに明度差だけで「ここから話題が変わる」ことを示しています。
文字色は本文も見出しも黒で統一され、太さと大きさだけで強弱が付けられています。区切りの罫線もヘアラインに近い細さで引かれているため、要素を仕切っていながら画面の静けさを崩していません。
黄色は入口とセクションの起点に限定する
黄色が現れる場所は限られています。ロゴのワードマークの下敷き、ファーストビュー下部に並ぶインジケーターの1つ、SERVICE・WORKS・STAFFの見出し上に置かれた短い横線、そして問い合わせを促す全幅の帯です。
いずれも「見てほしい起点」と「行動してほしい場所」に絞られており、同じ黄色が繰り返し現れることで、読み進めるうちに黄色は目印だと自然に理解できます。色の意味を1つに固定する使い方は、色数を増やさずに視線を誘導したいときに有効です。
ファーストビューは写真と余白の分割で見せる
ファーストビューは、画面を左右に割り、右側の広い面積をスタジオ撮影の写真に明け渡した構成です。会社の説明を文章で長く語る前に、撮影の現場そのものを見せる判断が取られています。写真の扱いと文字の組み方を分けて確認します。
右側の大きな面を写真に使い切る
写真はモデルと撮影者、照明機材が同じフレームに収まったカットで、右端まで断ち落とすように配置されています。左側には白い余白が残され、そこから写真の上へ見出しが伸びていくため、余白と写真が別々の要素ではなく一続きの面として読めます。
写真自体が明るく白っぽいスタジオであることから、黒い文字が写真の上に乗っても読みにくくなっていません。文字を重ねる前提でカットを選んでいることがうかがえる部分です。
字間を広げた見出しと細い罫線
日本語の見出しは2行に分けて大きく置かれ、1文字ずつ間隔を広く取った組み方になっています。字間を空けると圧が和らぐため、大きな文字でも騒がしく感じにくく、静かなトーンを保ったまま主張を通せます。
その下には短い横罫線と小さめのサブコピーが並び、見出しとの間に明確な段差が付けられています。まず世界観を伝え、次に扱う領域を示すという順で情報が渡される流れです。
写真の下端には3つのドットが横に並び、うち1つが黄色で示されています。ファーストビューに複数のカットが用意されていることが、小さな要素だけで伝わる作りです。
セクションごとに型を変える情報設計
下へスクロールしていくと、同じ型が続かないように組み立てられていることが分かります。左右非対称のレイアウトと中央寄せのレイアウトが交互に現れ、読み手の目の動きが単調になるのを避けています。ここでは代表的な3つのセクションを取り上げます。
SERVICEとSTAFFで左右を入れ替える
SERVICEは、左に打ち合わせの様子を写した写真、右に白いカードを重ねる形で組まれています。カードが写真の上へ少し掛かることで奥行きが生まれ、写真とテキストが単純に並列しただけの印象になりません。
STAFFでは配置が反転し、左にテキスト、右に人物のポートレートが縦長のカードとして置かれています。カードの右端には英字のラベルが縦組みで入り、下部は暗く落として白い文字を重ねているため、写真の中で名前と役割が読み取れます。掲載されているのは代表の佐藤 敬一朗様で、動画・写真・Webのすべてに関わる立場が短い一文で示されています。
WORKSは中央寄せで一点に絞る
WORKSは左右対称の中央寄せに切り替わり、見出しと説明文の下にサムネイルが1枚だけ置かれています。実績を敷き詰めて埋めるのではなく、見せる数を絞ってから詳細ページへ渡す構成です。
サムネイルはロゴが乗ったカットで、周囲に十分な余白があるため小さめのサイズでも埋もれていません。写真主体の前後のセクションと比べて空白が多く、ページ全体の中では呼吸を置く区間になっています。
ボタンとナビゲーションの整え方
UIの作りは終始一貫していて、同じ役割のものが同じ見た目で登場します。押せる場所が一目で分かる状態を保ちながら、もっとも進んでほしい行動だけを目立たせる優先付けがなされています。ボタンとナビゲーションを分けて見ていきます。
各セクションに枠線ボタンを1つだけ置く
リード文の「ABOUT US」、SERVICEとWORKSの「VIEW MORE」、STAFFの「VIEW ALL」は、いずれも塗りのない細い枠線のボタンで、英字を広い字間で中央に置いた同一のデザインです。形をそろえたうえで文言だけを変えているため、初めて訪れた人でも各セクションの続きがどこにあるか迷いません。
1つのセクションに複数のボタンを並べていない点も特徴です。深く知りたい人だけが次の階層へ進み、そうでない人はそのままスクロールを続けられる構造になっています。
塗りのボタンは問い合わせにだけ使う
ページ下部には黄色一色の帯が全幅で入り、その中央に白い塗りの大きなボタンが置かれています。封筒のアイコンを添えた「お問い合わせはこちら」だけが、サイト内で唯一の塗りボタンです。
枠線ボタンで統一してきた画面の最後に塗りの面を出すため、上下のどのボタンよりも強く目に入ります。色と塗りの両方を1か所へ集約させる手法は、行き先を1つに絞りたいページで扱いやすい考え方です。
ヘッダーはロゴとハンバーガーアイコンだけで構成され、常時表示のグローバルナビゲーションは置かれていません。画面上部を写真とコピーのために空けておく判断で、その代わりにフッターでリンクを見せる形が取られています。
拠点情報とフッターの見せ方
ACCESSとフッターは、装飾を抑えて情報の読み取りやすさを優先した領域です。制作会社のサイトは世界観の表現に寄りやすい一方で、所在地や連絡手段の分かりやすさが相談の前提になります。この2つの領域の整え方を確認します。
ACCESSは定義リストで淡々と並べる
ACCESSは薄いグレーの背景に、ラベルと値を左右に並べた定義リストが置かれています。住所、営業時間、定休日、交通アクセスの4項目が細い区切り線で仕切られ、10時から19時までの営業時間、土曜と日曜と祝日が定休であること、西武池袋線の江古田駅から徒歩6分という距離が、同じ形式で読み取れます。
交通アクセスの項目には「Google mapで見る」という小さな枠線ボタンが添えられ、地図を確認したい人だけが押す位置に収まっています。その下には矢印を伴うACCESSのリンクが置かれ、より詳しい案内へ進める形です。
フッターがナビゲーションを引き受ける
フッターは白背景で、左にロゴ、中央に住所と最寄り駅、右に英字のリンク列が並びます。ABOUT US、SERVICE、WORKS、STAFF、ACCESS、CONTACTが横一列に置かれ、ページ上部に常設のナビゲーションがない分をここで補っています。
その下にはプライバシーポリシーへのリンク、SNSのアイコン、著作権表記が右寄せで小さく配置されています。文字サイズを本文より落として色も薄くしているため、必要な人には届き、それ以外の人の視線は妨げない扱いになっています。
東京で映像制作の協力会社を探すときに参考になるサイト
株式会社ペルソナーズのサイトは、無彩色に黄色を一点だけ効かせた配色、写真に面を明け渡すファーストビュー、形をそろえた枠線ボタンという3点で、映像や写真を扱う会社の見せ方を整理した作りになっています。表現の幅を誇示するのではなく、素材が主役になる器を用意する考え方が全体に通っています。
同社は動画制作、写真撮影、Web制作・マーケティング、代理店事業を掲げ、東京都練馬区を拠点に活動しています。動画・写真・Webの3つを掛け合わせて一貫したブランディングにつなげるという方針がサイト上で示されているため、会社紹介やインタビューの動画、Webサイトに掲載する写真など、複数の素材を同じトーンでそろえたい場面で相談先として検討しやすいはずです。
採用に向けた動画やWebサイト用の写真を東京で用意したい場合も、素材ごとに依頼先が分かれると、色調や語り口がそろわず全体の印象がぼやけることがあります。制作の依頼先を探すときは実績の点数だけでなく、こうした自社サイトの作り方そのものを見ておくと判断材料が増えます。配色や余白の扱い、ボタンの統一といった細部は、そのまま納品物の設計にも表れやすい部分です。
