株式会社ARKETのWebサイトは、深い緑を基調にした配色と、人が向かい合って話す場面や撮影現場を写した写真を組み合わせ、対話を大切にする動画制作会社の姿勢を落ち着いたトーンで伝えているサイトです。写真の上に深緑のテキストパネルを重ねる手法がくり返し使われ、ページ全体に統一感が生まれています。
この記事では、ファーストビューから問い合わせまでの流れに沿って、配色・写真・タイポグラフィ・レイアウト・導線の工夫を順に解説します。商品紹介やインタビューを扱う動画制作会社のサイトを企画している方や、信頼感のあるコーポレートサイトの見本を探している方は、構成を考える際のヒントとして役立ててください。
株式会社ARKETの事業とサイトが伝えている考え方
デザインの分析に入る前に、サイトで紹介されている会社と事業の概要を確認します。事業の中身を押さえておくと、配色や写真の選び方にどのような意図があるのかを読み取りやすくなります。
映像制作を中心とした3つの事業
株式会社ARKETは大阪府豊中市上野東2-14-37に所在する会社で、代表取締役は荒木 麻由様です。会社案内では、映像制作、司会者やプレゼンターの派遣、コンサルティングの3つが事業として挙げられています。
中心となる「売上直結型動画制作」では、商品やサービスの価値を売れる理由として整理する戦略設計から、企画・撮影・編集までを担うと説明されています。プレゼンターが対談の形で作り手の想いを引き出し、営業や採用、ブランディングの場面で使える動画に仕上げる点が特徴です。
そのほか、展示会やセミナー、イベントの場で商品や企業の魅力を伝えるプレゼンター・MCの派遣や、建設機械業界を中心に商品の価値の整理や伝え方を支援するコンサルティングも手がけています。トップページでも、この3つのサービスが同じ大きさのカードで並べて紹介されています。
台本を用意しないインタビュー動画の進め方
インタビュー動画の制作について、事業内容ページでは台本を使わない進め方を独自の手法として紹介しています。事前に決めておくのは話の着地点だけで、出演者はふだん顧客と話すときの言葉で質問に答えればよく、言葉に詰まった場面では制作側がフォローすると説明されています。
同じページでは、カメラの前で一人で話すのが苦手、本業が忙しく企画や編集まで手が回らない、作った動画が見てもらえないという3つの悩みへの答えも示されています。企画から出演、撮影、編集までをまとめて任せられ、依頼側が担うのは月に1回の対談に絞られると書かれています。
見てもらうための施策としては、商品に関心を持つ可能性が高い層へ1,000リーチを保証することが挙げられています。再生数はあくまで入口と位置づけ、視聴後のサイトへの移動や滞在時間を重視して運用する方針も示されています。
ファーストビューは対話の写真とコピーで方向性を示す
ファーストビューでは、画面幅いっぱいの写真と中央やや下に置いたコピーの組み合わせによって、サイトの方向性を一目で伝えています。写真が雰囲気と事業のイメージを、コピーが会社の考え方を受け持つという役割分担が明確です。
向かい合って話す人物写真がサービスの形を想起させる
写真には、大きな窓から光が入る明るい空間で、ジャケット姿の女性とスーツ姿の男性が向かい合い、笑顔で会話している場面が使われています。全体が白っぽくやわらかな色調で、右端には観葉植物の葉がのぞいているため、ビジネスの場面でありながら堅すぎない印象を受けます。
対談形式の動画制作を柱にする会社にとって、二人が話す場面は事業の中身をそのまま想起させるモチーフです。説明文を読む前に「対話」というテーマが伝わるので、写真選びとサービス内容がしっかり噛み合っています。
深緑の半透明ボックスでコピーの読みやすさを確保する
コピーは、角を丸めた深緑の半透明ボックスの中に白い太字で配置されています。写真の上に文字を直接置かず色面を敷くことで、人物や背景の明暗に左右されずに読みやすさを保っています。
ボックスの上段には、相手の一番のファンになって熱量を言葉にするという趣旨の2行が入り、続く行では売上に直結する動画づくりを掲げる言葉がひと回り大きな文字で示されています。その下に細い白線を引き、字間を広くとった社名を添えているため、メッセージと社名の区切りがはっきりしています。
深い緑を基調にした配色とタイポグラフィ
サイト全体の配色は、ロゴマークと同系統の深い緑を基調色とし、白や明るいグレーの背景で余白を広くとる構成です。基調色を絞り込んでいるぶん、ボタンや強調部分に使われる差し色が自然と目に留まります。
深緑・青緑・オレンジの役割分担
深い緑は、ファーストビューのコピーボックス、会社紹介と事業紹介のパネル、お問い合わせのボタン、フッターに共通して使われています。同じ色が要所にくり返し現れるため、どのセクションを見ても同じサイトの一部だと感じられます。
サービス名を並べた帯には、中央がやや明るく外側へ向かって濃くなる青緑のグラデーションが敷かれ、深緑一色の単調さを和らげています。一方で「詳しくはこちら」のボタンには明るいオレンジ色が使われ、濃い緑のパネルの中で最初に視線が集まる配色になっています。
太いゴシック体と背景の英字で見出しに存在感を出す
見出しには太さのあるゴシック体が使われ、「株式会社ARKETとは」「事業紹介」「お問い合わせ」といった日本語の背後に、「ARKET INC.」「SERVICES」「CONTACT」の大きな英字が淡い色で重ねられています。会社紹介と事業紹介のパネルでは英字がパネルの左端で切れるほど大きく配置され、文字量を増やさずに見出しまわりの存在感を高めています。
見出しの下には、細い斜線を1本だけ引いたモチーフが複数のセクションで共通して使われています。水平の区切り線ではなく斜線を置くことで、見出しから本文へ移る部分に軽やかなリズムが生まれています。
写真とテキストパネルを重ねて奥行きを出すレイアウト
ファーストビューに続く中盤では、写真の上に深緑のテキストパネルを重ねるレイアウトが2つのセクションで使われています。画像と文章を左右に並べるのではなく重ねることで、平面的になりがちなページに奥行きが加わっています。
会社紹介は大きなキャッチと影付きパネルで構成する
会社紹介のセクションでは、左上に「モノ」と「ヒト」を対にした2行のキャッチが深緑の大きな文字で置かれ、右側にはスクリーンの前で身ぶりを交えて説明する女性の写真が配置されています。写真の左側にかかる位置には影を付けた角丸の深緑パネルが重なり、会社のビジョンとチームとしての姿勢が中央揃えの白い文字で短くまとめられています。
パネルの角丸と影が写真との境界をやわらかくし、どちらが手前にあるのかをわかりやすくしています。文章は数行に抑えられているため、ビジュアルの流れを止めずに会社の考え方へ触れられます。
撮影現場の写真に大小2つのボックスを重ねる事業紹介
事業紹介のセクションでは、画面の右端まで広がる大きな写真に、大小2つの深緑のボックスが重ねられています。写真にはマイクを取り付けたカメラや対談の様子を映すモニター、身ぶりを交えて話す男性、手書きのメモが残るホワイトボードが写っており、動画づくりの現場の空気が伝わってきます。
左上の小さなボックスで価値を伝わる形にするという短いメッセージを示し、その下の大きなパネルで事業の概要とボタンを見せる流れです。短い言葉で関心を引いてから具体的な説明へ進ませる2段階の見せ方は、情報量の多い事業紹介を読みやすくする工夫として参考になります。
3枚のカードで要点をそろえる情報設計
トップページは、会社の考え方、事業の概要、サービスの一覧、選ばれる理由、問い合わせという順に並び、読み進めるほど具体的な内容に近づく構成です。後半では同じ形のカードを3枚ずつ横に並べるセクションが2つ続き、情報の単位がそろっているため、読み手は内容を比べながら短い時間で要点をつかめます。
青緑の帯に白いカードでサービス名を並べる
青緑のグラデーションの帯には、角丸で影の付いた白いカードが3枚並び、「売上直結型動画制作」「プレゼンター派遣」「コンサルティング」というサービス名が太字で入っています。各カードの下には白い文字で2行ずつ特徴が添えられ、名称と説明を上下で読み分けられるようになっています。
カードの中をサービス名だけに絞っているので、帯の中で何が主役なのかが明確です。複数の事業の全体像を簡潔に伝えたい会社にとって、応用しやすい見せ方といえます。
大きな数字と黄色いマーカーで選ばれる理由を印象づける
「Why Choose Us」の小さな英字ラベルと深緑の見出しに続く部分では、明るいグレーの背景に白いカードが3枚並び、右上に「01」「02」「03」の大きな数字が淡いグレーで配置されています。数字が読む順番を示しているため、視線が左から右へ自然に流れていきます。
カードの見出しは2行構成で、売れることへのこだわり、商品の強みを言葉にする力、修正への対応方針という3つのテーマが並びます。強調したい語句の下には黄色い蛍光マーカーのような帯が引かれ、細い線で区切った本文では、2枚目の一部の語句だけを赤字にして目立たせています。
3枚目のカードでは、本文の下に小さな灰色の文字で、納品後の修正や構成を大きく変える修正は相談になる場合があるという注記も添えられています。見出しで方針を大きく打ち出しつつ、条件を控えめな文字で補う書き分けは、誤解を防ぐための配慮として参考になります。
迷わず行動できるボタン配置と問い合わせまでの導線
サイトの導線は、トップページで全体像をつかみ、詳しい内容は下層ページで確認する流れを基本にしています。ヘッダーやボタンの見せ方が役割ごとに整理されているため、次に何をすればよいのかがわかりやすい構成です。
日本語と英字の2段表記のナビと追従するヘッダー
ヘッダーでは、左に緑色のRをかたどったシンボルマークと社名のロゴを置き、右側に6つのナビゲーション項目を横一列に並べています。各項目は字間を広めにとった日本語の下に小さなグレーの英字を添えた2段表記で、内容のわかりやすさと落ち着いた雰囲気を両立しています。
ページを下へスクロールすると、ロゴとナビを収めたヘッダーが画面上部に追従して表示され、右下には上向き矢印の丸いボタンも現れます。このボタンを押すとページの先頭まで戻れるため、縦に長いトップページでも移動の手間が少なくて済みます。
事業内容とお問い合わせへ誘導する2つのボタン
トップページで目立つボタンは2つあり、事業紹介のパネルにあるオレンジ色の「詳しくはこちら」は事業内容ページへ、ページ末尾の深緑のボタンはお問い合わせページへつながっています。事業の詳細を確かめてから検討したい人にも、すぐに相談したい人にも入口が用意されている形です。
お問い合わせのセクションは、暗い背景に映画フィルムのリールと暖かな光のボケを写した写真を使い、それまでの明るいセクションから雰囲気を切り替えています。白い見出しと封筒のアイコンが付いたボタンが暗い背景の中で浮かび上がり、ページの締めくくりとして行動を後押ししています。その下のフッターは、深緑の帯に縦線で区切ったテキストリンクと著作権表記を中央揃えで置き、すっきりとまとめています。
トップの事業区分と対応したお問い合わせフォーム
お問い合わせページのフォームでは、問い合わせ項目を、トップページで紹介している3つのサービスと「その他」の中からラジオボタンで選ぶ形式になっています。トップページで示した事業の分け方がフォームの選択肢にも引き継がれているため、利用者は自分の用件を迷わず選べます。
送信ボタンはサイトの基調色と同じ深緑で、ナビでは現在いるページの項目に緑の下線が表示されます。配色のルールが下層ページまで守られていることで、ページを移動しても同じサイトにいるという安心感が保たれています。
商品紹介やインタビュー動画を扱う制作会社サイトの参考ポイント
株式会社ARKETのサイトは、何を大切にしている会社なのかを文章より先に視覚で伝えている点が参考になります。商品紹介の動画制作やインタビュー動画の制作を扱う会社がサイトをつくる際に、取り入れやすいポイントを整理します。
- 対談や撮影の場面を写した写真を主役にすると、サービスの進め方を文章より先に伝えられます。
- 基調色を1色に絞り、行動を促すボタンにだけ差し色を使うと、押してほしい場所が明確になります。
- 事業や選ばれる理由を同じ形のカードにそろえると、閲覧者が内容を比べやすくなります。
- トップページの事業区分とフォームの問い合わせ項目を対応させると、相談の入口で迷わせずに済みます。
また、同社のコラムでは、商品紹介動画をInstagramとYouTubeのどちらに載せるかによって中身を変えるべきだという考え方が紹介されています。Instagram向けは冒頭で用件を伝える構成、YouTube向けは視聴者が抱く疑問に順を追って答える構成が大切だとしており、YouTube向けの商品紹介で視聴者の不安を解消することを得意分野としていると記されています。YouTube動画の制作会社を比べる際は、こうした投稿先ごとの考え方をサイトで発信しているかどうかも判断の手がかりになります。
株式会社ARKETのサイトデザインのまとめ
株式会社ARKETのサイトは、深い緑を基調にした配色、対話や撮影の場面を写した写真、写真に重ねたテキストパネル、番号付きのカードを組み合わせ、対話を通じて商品の価値を言葉と映像にする会社の姿勢を一貫したトーンで表現しています。差し色のボタンや追従するヘッダー、事業区分と対応した問い合わせフォームによって、閲覧から相談までの流れも自然につながっています。
写真と色で事業の中身を伝える手法は、動画制作会社に限らず、サービスの進め方を直感的に伝えたい企業のサイトにも応用できます。実際の画面の雰囲気や各ページの構成は、YouTube動画の制作会社を探している方にも参考になる株式会社ARKETの公式サイトでご確認ください。
