横浜市を拠点に神奈川県全域で広告動画や企業動画を手がけるpeach filmの公式サイトは、映像という動きのある成果物を扱いながら、静かな余白と大判の実写で構成されたデザインが印象に残ります。装飾を足していくのではなく、色数を絞って写真を主役に据える判断が全体で一貫しています。
この記事では、Webサイトのデザイン見本を探している方に向けて、peach filmのサイトが持つ配色、ファーストビュー、情報設計、UIと導線の考え方を順番に読み解いていきます。映像や写真を扱う事業者のサイトを設計するときに応用しやすい工夫を中心にまとめました。
最初に伝わるのは「その日のうちに届く」という価値です
結論から述べますと、このサイトの設計意図は、撮影した当日に映像が手元に届くという提供価値を最短距離で伝えることに置かれています。ファーストビューから最下部の問い合わせエリアまで、要素の配置がその一点に向けて整理されています。
トップページは縦に長い1枚もの構成ですが、扱う話題が拡散していません。上から順に、何ができるのか、なぜそれが可能なのか、どう頼めばよいのかという流れで並んでいるため、スクロールするだけで理解が進みます。
大判の実写を敷いたファーストビュー
画面いっぱいに広がるのは、手にしたカメラのレンズを大きく捉えた写真です。背景は温かみのある茶系のぼけで統一され、レンズだけが黒く締まって見えるため、視線が自然と中央へ集まります。
その上に、白抜きの日本語コピーが2行で重ねられています。字間を大きく空けた組み方によって、写真の情報量に負けない存在感を持たせながら、読みやすさも損なわれていません。左下には円形のアイコンを添えた「SCROLL」の表示があり、次のセクションへ進む合図として機能しています。
白い正方形に収めたロゴの見せ方
左上のロゴは、写真の上に白い正方形のパネルを重ねる形で配置されています。カメラを線画で表したマークと小文字のワードマークが、彩度を落としたミントグリーンで描かれ、背景写真の茶色との間にはっきりした対比が生まれています。
写真の上に直接ロゴを置くと視認性が落ちますが、白い面をひとつ挟むだけで確実に読める状態を作れます。ヘッダーの一部を切り取ったような形になり、画面全体のバランスも崩れません。
現在地が分かるグローバルナビゲーション
ナビゲーションは写真の上に直接置かれ、太めの欧文大文字を等間隔で並べた構成です。項目は6つに絞られており、どこに何があるのかを一目で把握できます。
表示中のページにあたる項目だけが淡いゴールドで示され、黒い他の項目と区別されています。色をひとつ変えるだけで現在地を伝える手法は、装飾を増やさずに使いやすさを高める方法として取り入れやすいはずです。
配色はミントグリーンと写真の2要素に絞られています
このサイトの配色は、彩度を落とした緑を軸にして、それ以外の色をほとんど使わない設計になっています。色の役割がはっきり分かれているため、要素数の多いページでも散らかった印象になりません。
ここでは、見出しに繰り返される主色、要所に置かれた差し色、そして写真そのものが担う色の3つに分けて見ていきます。
セクション見出しを担うくすんだミントグリーン
各セクションの見出しには、同じくすんだミントグリーンの欧文大文字が使われています。彩度を落とした緑なので主張が強すぎず、隣に置かれた写真の色を邪魔しません。
この色はロゴにも使われているため、スクロールするたびに同じ色が反復されます。主色をひとつに固定して繰り返すやり方は、盛り込む情報が多いトップページでも統一感を保つのに役立ちます。
差し色に置かれた淡いゴールドと深いティールグリーン
アクセントとして、淡いゴールドが要所に使われています。ナビゲーションの現在地表示に加えて、紹介カードの下に引かれた細い罫線でも、左端の一部だけがゴールドに変わり、残りがミントグリーンという二色構成になっています。細い線1本にも役割を持たせた、丁寧な処理です。
一方、最下部の問い合わせエリアには深いティールグリーンの面が敷かれています。ページ全体で緑系の色相を保ったまま、明度と彩度だけを変えることで、落ち着きと目立たせたい場所の強弱を同時に成立させています。
写真そのものを色として扱う設計
背景は白が基調で、塗りの色数は極端に絞られています。そのぶん配色の主役は写真になり、高層ビルとロープウェイを見上げた空の青、ウェディングブーケの白と緑、岩場のグレーといった被写体の色が、そのままページの表情を作っています。
映像制作は成果物が写真や動画そのものですから、装飾よりも実写を前に出す判断は理にかなっています。手持ちの素材の質が高い業種であれば、同じ考え方を応用できます。
スクロールに沿って理解が積み上がる情報設計
縦に長いページでは、どの順番で何を見せるかが読み進めやすさを左右します。このサイトは、結論を先に置いてから根拠を並べる順序と、面の切り替えによるリズムづくりの2つで、長さを感じさせない構成にしています。
セクションごとの役割が明確なので、途中から読んでも迷いにくい点も特徴です。
結論から広げていくセクションの順番
最初のセクションでは、撮影から編集、納品までをその場で終える進め方が示されます。続く紹介エリアでは3枚のカードに分かれ、30秒の動画づくり、寄せられる質問への回答、運営者の考え方という3方向へ話題が広がります。
結論を先に示し、その根拠や補足を後ろに並べる順番になっているため、上から読むだけで理解が積み上がります。各カードの下部には遷移先を示すラベルと「MORE」が左右に振り分けられ、詳細ページへの入口の位置も揃えられています。
フルスクリーンの写真帯でリズムを変える
白い背景のセクションが続いたあとに、画面幅いっぱいの暗い写真帯が挟まれます。岩場で撮影する様子を捉えた写真に暗い膜を重ね、右側へ白い文字を置いた構成で、見出しの左には細い縦線が添えられています。
明るい面と暗い面が交互に現れることで、長い1枚ページでも単調になりません。罫線で区切る代わりに、色面と写真で章の切り替わりを示す手法として参考になります。
左右交互で読ませる特徴セクションのレイアウト
強みを伝える3つのブロックは、テキストと写真を左右交互に入れ替えたジグザグ構成です。写真は画面の外側の端まで届く形で置かれ、テキスト側には十分な余白が確保されています。
視線が左右に振られるため、同じ形式の情報が続いても飽きにくくなります。1ブロックあたりの文章量が多めでも読み進められるのは、この交互配置と広い行間によるところが大きいでしょう。
UIと導線は「誰が見ているか」で分けられています
ボタンの形を統一しつつ、問い合わせの入口だけは訪問者の属性で分岐させているのが、このサイトの導線設計の特徴です。見た目の統一と、役割に応じた作り分けが両立しています。
ここでは、ボタンの形状、問い合わせエリアの分岐、実績を並べたグリッドの3点を取り上げます。
角を丸めきった線のボタンで統一する
ページ内のボタンは、両端が半円になるまで角を丸めた、線だけのスタイルで統一されています。塗りを使わず細い線で囲み、内側に大きめの余白を取ることで、白い背景の中でも押せる場所として認識できます。
問い合わせへ進むボタンも、Instagramのフォローを促すボタンも同じ形です。役割の違うボタンを同じ形状にまとめると、サイト全体のトーンが揃い、どこを押せばよいかを学習しやすくなります。
法人と個人で入口を分けたコンタクトエリア
最下部の問い合わせエリアでは、カメラを大きく写した暗い写真の上に、2つのパネルが左右に並びます。左は深いティールグリーンで塗られた法人向け、右は白い細枠だけで構成された個人向けという対比で、塗りと線の違いによって性格の差が直感的に伝わります。
法人側にはInstagramとメールフォームの円形アイコン、個人側にはLINEの円形アイコンが置かれ、想定される連絡手段がそれぞれ分けられています。窓口をひとつにまとめず訪問者の属性で分岐させる設計は、対象が二層に分かれる事業で参考になる考え方です。
実績を面で見せる2種類のグリッド
Instagramのセクションでは、正方形のサムネイルが横6列で余白なく敷き詰められています。書道の実演、ステージの照明、医療の現場、美容師へのインタビュー、料理、ウェディングと被写体の幅がそのまま並ぶため、対応できるジャンルの広さを言葉で説明するより早く伝わります。
お知らせのセクションは横4列のカード型で、写真、2行に収めたタイトル、日付とカテゴリという順に情報が並びます。日付とカテゴリの間には細い縦線が入り、限られた行数の中でも要素の切れ目が分かるよう整理されています。制作事例を紹介するセクションでも、内容が2つのラベルで分類されています。
タイポグラフィと余白の使い方
文字まわりの処理も、余白を広く取るという方針で統一されています。書体そのものを凝るのではなく、大きさと間隔で階層を作っている点が特徴です。
見出しの組み方と本文の組み方を、それぞれ見ていきます。
欧文ラベルと和文サブタイトルの二段構え
各セクションの見出しは、大きな欧文大文字の下に小さな日本語の補足を添える形で統一されています。視覚的な印象を欧文が担い、意味の説明を和文が担うという役割分担です。
欧文には広い字間が設定され、文字を記号のように見せる意図が読み取れます。日本語だけで見出しを組むよりも、抜け感のある余白を作りやすい方法です。
行間と字間を広げた本文組み
本文は細めのゴシック体で、行間と字間の両方をゆったり取っています。1行あたりの文字数も抑えられているため、文章量の多いセクションでも圧迫感がありません。
見出しは黒に近い濃さ、本文はやや薄いグレーという明度差が付けられ、色を増やさずに情報の階層が表現されています。読み物の比率が高いサイトほど、この差の付け方が効いてきます。
映像や写真を扱うサイトで押さえたい設計の考え方
ここまで見てきた工夫は、映像制作や撮影を手がける事業者のサイト全般に応用できます。横浜のように制作を担う事業者が多い地域では、できることを並べるだけでは違いが伝わりにくいため、何を強みとして押し出すのかを設計段階でひとつに絞ることが有効です。
実際にサイトへ落とし込むときは、次のような点を意識すると全体が整理しやすくなります。
- ファーストビューで、扱う題材と強みを同時に見せる
- 主色をひとつに固定し、セクション見出しで反復する
- 制作物そのものをグリッドで並べ、対応範囲を視覚的に示す
- 問い合わせの入口を、訪問者の属性ごとに分ける
- 白い面と写真の面を交互に置き、長いページに区切りを作る
動画を扱うサイトは表示の負担が大きくなりやすいため、動きのある要素をどこに置くかも設計上の判断になります。静止画と余白で骨格を作り、動く要素は見せ場に集中させる構成にすると、伝えたい順序を保ったまま全体を軽く見せられます。
まとめ｜横浜の映像制作をデザインで伝えている見本です
peach filmのサイトは、くすんだミントグリーンを軸にした配色、大判の実写、広く取った余白という3つの要素で構成されています。装飾を積み上げるのではなく、素材を見せて余白で整えるという判断が最初から最後まで貫かれており、映像制作という仕事の質感がそのまま画面に置き換えられたようなつくりです。
運営概要のページには、屋号と代表者の櫻井 桃也様、定休日といった基本情報が簡潔にまとめられています。サイトでは、企業向けの案件を500件以上、ウェディングに関わる撮影を200組以上手がけてきたと説明されており、法人と個人の双方に向き合ってきた姿勢が導線の分け方にも表れています。
扱う内容は、採用や集客に使う広告動画、商品紹介や社内研修、イベントの記録といった企業向けの映像から、結婚式で流すオープニングムービーやエンドロール、お宮参りや七五三といった記念の撮影まで幅広く、写真の撮影にも対応しています。当日納品を掲げる進め方や、縦向きと横向きを選べる短い動画のつくり方も、映像を初めて依頼する方に向けて整理されています。
デザインの見本として参考にする場合も、依頼先として検討する場合も、実際の画面で確認してみてください。横浜でイベント撮影や映像制作を相談できるpeach filmの公式サイトでは、依頼から納品までの流れやこれまでに手がけた映像も紹介されています。
