YOHAKUのサイトは、屋号である「余白」という言葉を、そのまま画面の作りに置き換えた構成になっています。要素を詰め込まず、白い面と写真一枚で世界観を伝える組み立てになっているため、情報量を絞ったサイトを検討している方の見本になります。
ここでは、岡山市北区を拠点に映像制作を手がけるYOHAKUのサイトを、ファーストビュー、配色、文字組み、情報設計といった観点から見ていきます。デザインの意図が読み取りやすいサイトなので、少ないページ数でブランドの姿勢を伝えたい場合の参考になります。
屋号の意味をそのまま画面にしたファーストビュー
このサイトでいちばん目を引くのは、ページの上部を大きく空けたまま、ロゴだけを中央に置いている点です。多くのサイトが最初の画面に見出しやボタンを並べるのに対して、YOHAKUは情報を置かないことで屋号の意味を先に伝えています。ここでは、上部の白い領域と、その下に続く写真の見せ方を分けて見ていきます。
ページ上部の白い面がそのままメッセージになっています
ページを開くと、ヘッダーのすぐ下から広い白の面が続き、その中央にロゴだけが置かれています。フルページで見ると、上から三分の一以上が白のまま使われていて、説明文もボタンも置かれていません。
ロゴは、太い横罫を上下に一本ずつ引き、その間に小さな四角形を等間隔に並べた記号的なマークです。並んだ四角形のうち一つだけが水色になっていて、下に置かれたワードマークでも「O」の一文字だけが同じ水色で組まれています。二本の罫の間に空いた空間が、そのまま屋号の意味を示す形になっているため、説明を添えなくても名前の由来が伝わります。
スクロールの先で夜空の写真に切り替わります
白い面を過ぎると、画面の横幅いっぱいに夜空の写真が現れます。深い緑がかった暗い空に細かな光が散り、地平線の近くだけが濃いオレンジに染まって、その手前に人物のシルエットが小さく立っています。
写真の中央には白い文字でコピーが置かれ、その下に細い横罫を挟んで屋号が添えられています。被写体が小さく空の面積が広い写真を選んでいるため、文字を重ねても読みにくくならず、写真とコピーが競い合わずに済んでいます。明るい白の面から暗い写真へ切り替わる流れが、そのままページのリズムをつくっています。
色と文字の扱いで静かなトーンをつくっています
配色と文字組みも、余白を主役にする方向で統一されています。色数を絞り、字間を広く取ることで、要素が少なくても物足りなさを感じさせない画面に仕上がっています。ここでは配色とタイポグラフィを順番に見ていきます。
無彩色を基調に、水色を一点だけ効かせています
ベースは白とチャコールグレーで、彩度の高い色はほとんど使われていません。その中で、ロゴの四角形の一つ、ワードマークの「O」、そしてヘッダーで現在地を示す項目だけが青系の色で表示されています。
色を置く面積を極端に小さくすると、その一点に視線が集まります。ブランドカラーを広い面に敷くのではなく、記号の中の一粒に落とし込む使い方は、静かな印象を保ったまま色を覚えてもらいたい場合に応用できます。夜空の写真に含まれる暖色も、画面全体で見ると数少ない色味の一つとして働いています。
字間を広げた文字組みが余白の印象を支えています
ワードマークもファーストビューのコピーも、一文字ずつ間隔を空けた組み方になっています。書体は装飾の少ないゴシック体で、太さの変化も抑えられています。
字間と行間を広く取ると、文字そのものが余白を含んだ面として見えてきます。写真の上に置かれたコピー、細い罫、屋号という三段の並びも、間隔と文字の大きさの差だけで主従が分かるようになっていて、装飾を足さずに読む順番をつくっています。
ページ構成とナビゲーションの考え方
情報設計は、トップページで世界観を伝え、詳しい内容は下層ページに預ける形になっています。トップに載せる情報を絞る判断と、その分をナビゲーションで補う組み立てが対になっているので、両方をあわせて見ていきます。
トップページは縦一本のスクロールで完結します
トップページは、ロゴを置いた白い領域、夜空の写真、理念を書いた薄いグレーの帯という三つのまとまりだけで構成されています。最後に白いフッターが続き、小さな文字が左寄せで置かれています。
薄いグレーの帯では、自由に発想することを掲げた短い見出しの下に、窮屈な環境では良い仕事が生まれないという考え方と、それを屋号に込めたという説明が中央揃えで並びます。写真で受けた印象を言葉で裏づける位置に置かれているため、読み手は世界観と考え方をひと続きで受け取れます。
ヘッダーのナビゲーションが下層ページへの入口になっています
ヘッダーは画面の上部に置かれ、左にロゴ、右側に少数の項目が横一列で並んでいます。表示しているページの項目だけが青く表示され、今どこを見ているのかが分かるようになっています。
トップページの本文にはボタンが見当たらないため、次の行動はこのナビゲーションが引き受けています。「YOHAKUとは」や「実績動画」といった項目名は、そのページで何が見られるのかがそのまま分かる言い方になっていて、初めて訪れた人でも迷いにくい作りです。
下層ページの情報の置き方から読み取れること
トップで情報を絞る作りは、下層ページに十分な内容があって初めて成り立ちます。YOHAKUのサイトでは、制作者の歩み、撮影の環境、これまで手がけた動画の分類が、それぞれのページにまとめられています。
制作者の経歴を時系列でたどれるようにしています
紹介ページには、制作を担う平井友和様の歩みが年ごとに並んでいます。大学時代に独学で映像制作を覚え、2011年にアパレル企業へ就職して企画開発に携わり、販売促進のためのディレクションと自身での動画制作を担ってきたことが書かれています。
その後、2018年に元テレビ局員のもとで映像制作を学び直し、2022年からフリーランスとして活動しているという流れです。作業だけを請け負うのではなく、企画立案やストーリーの組み立てといった映像の骨組みから一緒につくることを強みとして挙げていて、依頼する側は何を任せられるのかを把握しやすくなっています。
撮影の環境を具体的に書いて不安を減らしています
撮影はアトリエの一角で行うと書かれており、遮光カーテンと照明によって光の条件をそろえられること、天候に左右されずに撮り直しができることが説明されています。グリーンバックも用意されているため、背景を差し替える合成にも対応できます。
拠点は岡山市北区で、岡山駅からは車でおよそ10分、大安寺駅からは徒歩でおよそ10分という案内が添えられています。設備と場所を具体的に示すことは、初めて依頼する人の不安を減らす情報として働きます。
実績を用途ごとに区分けして並べています
実績のページでは、これまで手がけた動画が用途ごとにまとめられています。イベントの冒頭で流すオープニング映像、企業や店舗の紹介映像、SNSに投稿する短い動画、ロゴのアニメーション、使い方や手順を伝える説明映像といった具合に、目的別の見出しで束ねられています。
採用に向けた会社紹介の動画も、その中に含まれています。事例を制作年や依頼元の順ではなく用途で並べると、見る側は自分がやりたいことに近い事例へたどり着きやすくなります。実績の見せ方に迷ったときに参考になる並べ方です。
採用向けの動画を検討するときに見ておきたい視点
ここからは、採用動画を考えている方が、制作を担う相手のサイトから何を読み取ればよいのかを整理します。見た目の印象だけでなく、どこまで一緒に考えてくれるのかが分かる記述を探しておくと、依頼先を比べるときの手がかりになります。
制作会社の選び方は企画への関わり方から見ます
採用動画は、撮り始める前の設計で仕上がりの大半が決まります。誰に向けて、どんな場面で見てもらい、見た人にどう動いてほしいのかが定まっていないと、素材がそろっても伝わる形になりません。
そのため制作会社を選ぶときは、撮影と編集だけを引き受ける相手なのか、構成やストーリーの組み立てから一緒に考えてくれる相手なのかを確かめておくと判断しやすくなります。実績の幅、撮影できる環境、連絡の取り方が分かりやすく書かれているかどうかも、やり取りのしやすさを測る材料になります。
スマホでの撮影を前提にした進め方もあります
働く様子や社員の声のように、日常の空気をそのまま届けたい場面では、手元の機材で撮った素材が向いていることもあります。縦向きの画面はSNSとの相性がよく、短い尺で見てもらいたい場合によく選ばれています。
自分たちで撮る場合は、手ぶれを抑える、声を拾いやすい距離で話してもらう、逆光を避けるといった基本を押さえておくと、編集で扱いやすい素材になります。YOHAKUのサイトでも、撮影を依頼する側が担当する進め方や、その際の撮影の指導を含む形、スマホ向けの縦型に作り替える対応が示されていて、分担の仕方に幅があることが読み取れます。
まとめ：余白の使い方を確かめられるサイトです
YOHAKUのサイトは、屋号にした「余白」という言葉を、白い面の広さ、色数の少なさ、字間の広さという形で一貫して見せている点が特徴です。トップページの構成要素は少ないものの、写真一枚と短い言葉で世界観を伝え、詳しい情報は下層ページに預けるという役割分担がはっきりしています。
情報量を減らしたサイトは物足りなくなりがちですが、余白そのものを主役に据えて意味を持たせると、少ない要素でも印象が残る画面になります。要素を足すよりも引く方向でデザインを考えたい方にとって、実際の画面をたどる価値のあるサイトです。
制作者の歩みや実績の並べ方もあわせて確認できますので、採用動画をスマホで撮影する進め方も含めて、YOHAKUの画面を実際に見てみることをおすすめします。
