東京都新宿区市谷台町に拠点を置く株式会社スタックは、映像制作を軸に、イベントやセミナーの配信、ドローンによる空撮までを手がける会社です。今回はその公式サイトを、Webデザインの見本という視点から読み解きます。
結論からお伝えすると、このサイトは撮影現場の写真と、ロゴの緑を淡くした色面、細身のセリフ体と明朝体を組み合わせ、落ち着いた上質なトーンでまとめられています。さらに写真とパネルを少しずつずらして重ねる構図が随所にあり、社名にも通じる「積み重ね」のイメージを画面の構造でも感じさせる点が大きな特徴です。
映像制作会社や撮影サービスのサイトを作りたい方、写真の多いコーポレートサイトで上品さと分かりやすさを両立したい方に向けて、ファーストビューから問い合わせ導線まで順に解説します。
ファーストビューは撮影スタジオの空気感で引き込む
トップページを開くと、画面いっぱいに撮影スタジオの写真が広がります。映像制作会社らしさを説明文より先に一枚の写真で伝える構成で、訪問者はひと目で事業の中身を想像できます。ここでは写真、コピー、周辺のパーツの3点に分けて見ていきます。
機材が並ぶ白いスタジオと細かなドットの質感
メインビジュアルには、白を基調としたスタジオにライトスタンドや大型のソフトボックス、アームの先に載せたカメラ、床を這う何本ものケーブルが写り込んでいます。撮影の準備が整った現場をそのまま切り取ったような写真で、作り込まれたイメージ画像よりも実際の仕事ぶりが伝わりやすい選び方です。
写真全体はグレーに寄せた色調で、表面には細かなドット状のスクリーンが重ねられています。彩度を抑えたことで白い文字がはっきり浮かび上がり、同時に印刷物のようなざらりとした質感が加わって、よくある写真背景とは違う印象を生んでいます。
明朝体のコピーと細い円のあしらい
写真の中央には、大きな白い明朝体で、映像がきちんと伝わるのは偶然ではないという趣旨のメッセージが置かれています。その下に「質感」「情感」「温度感」という3つの言葉と、伝え方を提案して形にするという短い一文が小さく続き、主見出しと補足の強弱がはっきりしています。
コピーの背後には、細い線で描かれた円がうっすらと重なっています。主張しすぎない図形ですが、視線を画面の中心へ集める役割を果たしており、文字の周りにほどよいまとまりを与えています。右端には縦向きの「scroll」の文字と細い縦線が添えられ、下へ読み進められることをさりげなく示しています。
ロゴ・CONTACTボタン・お知らせバーの配置
左上には、層を重ねた立方体のマークと「STACK」の文字を組み合わせたロゴがあり、鮮やかな黄緑のグラデーションで表現されています。右上には白地の「CONTACT」ボタンと、細い2本線のメニューアイコンが並ぶだけで、ヘッダーは要素を最小限に抑えています。
ファーストビューの下端には、濃い緑のラベルに「INFORMATION」と記したお知らせバーが、写真の縁に重なるように配置されています。日付と記事タイトル、「view all」のリンクが1行に収まり、写真の世界観を崩さずに最新情報への入口を確保しています。その下にもプラス記号を添えた細枠の「お知らせ」欄が続き、情報の入口が控えめな形で用意されています。
ロゴの緑を軸にした色彩とタイポグラフィ
サイト全体の配色は、白を広く取ったうえで、淡いミントグリーンをアクセントに使う構成です。書体は欧文の見出しに細身のセリフ体、和文に明朝体を使い、映像制作会社でありながら静かで品のある印象にまとまっています。
鮮やかなロゴの緑を淡いトーンで展開
ロゴ自体は発色の強い黄緑ですが、ページ内ではその緑をぐっと明るく柔らかくしたトーンが使われています。「ABOUT US」「SERVICE」などの大きな英字見出し、テキストの背後に敷かれた長方形のパネル、ページ下部の問い合わせエリアの背景が、いずれもこの系統の緑でそろえられています。
一方で、コンテンツ欄のタグの枠線や分類名の前に置かれた小さな四角には、オレンジが差し色として使われています。緑と白が中心の画面の中で、記事の分類を示す部分だけが温かみのある色で目に留まるよう工夫されています。
欧文セリフ体と明朝体の組み合わせ
各セクションの英字見出しは、線の強弱が美しい細身のセリフ体を大きなサイズで扱い、その横に細い横線と和文の小見出しを添える形式で統一されています。英字で雰囲気をつくり、和文で内容を明示する2段構えなので、デザイン性と分かりやすさが両立しています。
本文や見出しには明朝体が使われ、字間をゆったり取った組み方が目立ちます。行間にも余裕があるため、長めの会社紹介文でも窮屈さがなく、映像作品のエンドロールを眺めるような落ち着いたリズムで読み進められます。
重なりと余白でつくるレイアウトのリズム
このサイトのレイアウトで最も印象に残るのは、要素同士を少しずつ重ねる構図です。余白をたっぷり確保しながら、写真・パネル・テキストを層のように配置しており、単調になりがちな縦長のページに奥行きが生まれています。
写真とパネルをずらして重ねる構図
会社紹介のブロックでは、左に撮影現場の写真、右に見出しと本文を置き、本文の背後には淡い緑の長方形がテキストの右上へはみ出すように敷かれています。サービス紹介では横長の写真の下部に緑のパネルが食い込み、強みを紹介するブロックでは影を付けた白いカードの端に、撮影クルーの姿を収めた写真が重なっています。
いずれも要素の位置をわずかにずらして重ねる手法で、社名にも通じる「積み重ね」を画面構成でも表しているように読み取れます。ブランドの考え方をコピーだけでなくレイアウトの文法として繰り返すことで、ページ全体に一貫した個性が生まれています。
見出しの位置を左右に振る視線誘導
セクション見出しの配置にも工夫があります。会社紹介の英字見出しは中央、サービス紹介は左寄せ、スタッフ紹介は右寄せ、よくある質問はページ右側の列にまとめられており、スクロールするたびに視線の起点が左右へ移ります。
スタッフ紹介のブロックでは、縦長の写真2枚を高さをずらして並べ、右側に見出しと短い紹介文を置いています。見出しの位置と写真の段差が組み合わさることで、ゆったりとしたジグザグの視線の流れがつくられ、読み手が飽きずに下まで進める構成です。
事業内容が伝わる情報設計とUI
トップページは、会社紹介、サービス、スタッフ、よくある質問、ご利用の流れ、強み、コンテンツ、問い合わせという順に並び、それぞれが詳細ページへの入口を兼ねるダイジェストの役割を担っています。ここでは主要なブロックのUIを具体的に見ていきます。
3つのサービスを番号付きの一覧で整理
サービス紹介では、「映像制作」「配信イベント・セミナー運営」「ドローン撮影」の3項目が、01から03の番号と英語の副題付きで縦に並んでいます。各行には1行の説明と右端の矢印があり、細い区切り線で仕切られているため、どの行を選べばよいかが直感的に分かります。
サービスの詳細ページでは、映像制作で扱うジャンルとして会社紹介や製品PR、マニュアル動画、インタビューが挙げられ、配信についてはYouTube LiveやZoom、Microsoft Teamsなどを使えることが案内されています。トップでは要点を絞り、詳しい説明は下層ページに任せる役割分担が明確です。
質問を開閉式でまとめたFAQ
よくある質問は、行頭に「Q.」、行末に「＋」の記号を置いたアコーディオン状のデザインです。トップページには急なイベント配信に応じてもらえるかどうかや、撮影のみ・編集のみの依頼ができるかといった質問が並び、依頼を検討する人が最初に抱きやすい疑問を先回りして示しています。
回答を畳んだ状態で一覧を見せることで、質問の見通しを保ちながら縦の長さを抑えています。詳細ページでは、新宿区を拠点としながら全国への出張にも応じていることや、完成した映像の著作権を原則として依頼主へ譲渡していることが説明されており、依頼前の不安を解消する材料がそろっています。
4つのステップで示すご利用の流れ
「PRODUCTION PROCESS」のブロックは、ぼかしをかけたモニター画面の写真を背景に、濃紺のトーンで全体が沈められています。白を基調としたページが続く中で数少ない暗い帯になっており、スクロールの途中で場面が切り替わるような効果があります。
その上に、01から04の番号を振った半透明のグレーのカードが横一列に並び、相談の受付から提案、撮影や編集といった制作、データでの納品や配信までの流れが一目で追えます。依頼の全体像を先に示しておくことで、初めて映像制作を外部へ依頼する担当者にも進め方が伝わりやすくなっています。
現場ブログを横に流すカードUI
コンテンツ欄では、配信機材を並べた机や、客席の広がる会場などを写したカードが横方向に並んでいます。写真の下部には暗い帯と年月の表記が重なり、その下に「現場ブログ」「Shooting」「Streaming」といったタグと日付が添えられています。
カードの下には横長のバーが表示され、全体のうちどのあたりを見ているかが分かるようになっています。右端のカードが画面の端で途切れて見えるため、まだ続きがあることが自然に伝わり、横方向への操作を促す設計です。
繰り返される「view all」と円形の矢印ボタン
各ブロックの末尾には、「view all」または「view more」の文字と、細い線で描いた円の中に矢印を収めたボタンが置かれています。形も配置の考え方も統一されているので、利用者は一度覚えればどのブロックでも同じ操作で詳細ページへ進めます。
装飾を抑えた線だけのボタンですが、円という形が四角い要素の多い画面の中でよく目立ち、クリックできる場所であることを示すサインとして機能しています。
問い合わせエリアとフッターの導線
ページの終盤には、やわらかな緑で塗られた大きな問い合わせエリアが置かれています。白い英字の「CONTACT」に予約・問い合わせを示す和文が添えられ、ここまで読み進めた人が次の行動へ移るための区切りとして機能しています。
エリア内には、電話番号を白い線で囲んだ枠と、白く塗りつぶした「お問い合わせフォーム」のボタンが左右に並びます。線だけの枠と塗りのボタンで見た目の重さを変えているため、2つの連絡手段がはっきり区別され、フォームへの誘導がより強く印象に残ります。
フッターには主要ページへのリンクが2列で並び、右側に電話番号と所在地、地図へのリンクがまとめられています。最下部の右端には再びロゴが配置され、ページの始まりと終わりをロゴで挟む構成になっています。
映像制作やイベント配信の依頼先を選ぶときの視点
ここからは、サイトのデザインから少し離れて、映像制作や配信の依頼先を探している方に向けた一般的なポイントを整理します。株式会社スタックのサイトで確認できる情報もあわせて紹介します。
新宿で映像制作の相談先を探すなら体制を確認する
新宿で映像制作を依頼できる会社を探すときは、企画から撮影、編集までを社内で完結できるかを確認しておくと安心です。工程ごとに別の会社へ依頼すると、意図の共有に手間がかかり、仕上がりの方向性がぶれやすくなるためです。
株式会社スタックは1982年の設立以来、映像制作を中心に仕事を続けてきた会社で、会社紹介ページではディレクターやカメラマン、配信PA、ドローン操縦、エディターといったメンバーがそろっていることが紹介されています。構成から撮影、編集、ドローン、配信までを自社で担える体制である点も明記されています。
東京でイベント配信の代行を頼むときの確認点
東京でイベント配信の代行を依頼する場合は、使いたい配信プラットフォームへの対応、当日の音声やスイッチングを担う人員、インターネット回線の準備を誰が担うかを事前にすり合わせておくことが大切です。配信は撮り直しがきかないため、現場を支える体制が品質を左右します。
社内イベントのライブ配信を依頼する場合も同様で、参加者が会場とオンラインに分かれるときは、事前に収録した映像とライブ配信を組み合わせる方法も選択肢になります。株式会社スタックのサービスページでは、社内表彰式や学術会議、新製品発表会といった配信の実績が挙げられ、事前収録とライブの組み合わせや回線の手配について相談できることにも触れられています。
プロモーション動画の制作とプロンプターでの撮影
プロモーション動画の制作では、誰に何を伝えたいかという目的を最初に固めることが、構成や撮影手法を決める土台になります。株式会社スタックのサイトでも、企業のVPやプロモーション動画、SNS向けのコンテンツなど、目的に応じて映像をつくる姿勢が示されています。
経営者のメッセージや会社紹介、セミナー動画のように話し手がカメラへ語りかける映像では、プロンプターを使った撮影がよく用いられます。プロンプターはレンズの前に原稿を映し出す機材で、話し手は視線をカメラに向けたまま原稿を読めるため、自然な目線と聞き取りやすい話し方を両立しやすくなります。
まとめ：株式会社スタックのサイトは「重ねる」デザインの好例
株式会社スタックの公式サイトは、撮影現場の写真を主役に据え、ロゴの緑を淡く展開した配色と、セリフ体・明朝体による静かなタイポグラフィでまとめられています。写真とパネルをずらして重ねるレイアウトや、見出しの位置を左右に振る構成が、長いページに奥行きとリズムを与えています。
情報設計の面でも、サービスを番号付きの一覧で示し、FAQやご利用の流れで依頼前の疑問に答え、最後に電話とフォームの2つの窓口へ導く流れが整理されています。映像制作会社や撮影サービスのサイトを検討している方にとって、写真の見せ方と導線設計の両方を学べる見本といえます。
同社は代表取締役の深瀬 茂樹様のもと、東京都新宿区市谷台町に拠点を構えており、都営新宿線の曙橋駅から歩いて5分ほどの場所にあります。映像制作やイベント配信、ドローン撮影をまとめて相談したい方は、実際のサイトで各ページのデザインと情報を確かめてみてください。
