Httpster ·フランス（パリ） ·Picked 2026.10.18
Viens-là
デジタル・ブランディングエージェンシーのサイトデザイン参考 — エージェンシー・多言語切替・実績に業種ラベル・動画
出典：viens-la.com ↗ 確認日 2026.10.18
Editor's note
編集部の視点
実績カードに業種と年のラベルを添えて、守備範囲の広さを一覧で示すパリの制作会社サイト。
パリのデジタル・ブランディングエージェンシー Viens-là のサイト。桃色の背景に紫の大きな手書き風ロゴが動くファーストビューと、黄色の「15周年の動画を見る」ボタン。続く実績は1件ごとにクライアント名・年・業種のラベルつきで、その後に会社紹介、制作の進め方（サービス）、14年分の受賞、選ばれる理由、問い合わせと、縦に長く続く。画面下にはメニューと言語切替（FR / EN）を入れたバーが常に表示される。
- 01 実績1件ごとに「年」と「業種」のラベルを添え、守備範囲の広さを一覧で証明する
- 02 メニューと言語切替を画面下のバーにまとめ、縦に長いページのどこからでも移動できる
- 03 最後の問い合わせを「納得した？ 一緒に始めよう」と、読み終えた人への呼びかけにしている
Conversion
集客の工夫
- 実績に業種・年のラベル （あり） Corporate / Food & Drink / Sport など
- 画面下の追従メニュー （あり） PC はメニューと FR / EN の切替を常時表示
- 言語の切り替え （あり） フランス語・英語
- 動画への導線 （あり） ファーストビューに「15周年の動画」
- 受賞歴の明示 （あり） 14年分の受賞と一覧ページ
- 電話番号の掲載 （あり） tel:リンク 1か所（PC・SP）
- メール・メール登録 （あり） mailto:リンクとニュースレター登録
- ヘッダーの追従 （なし） 上部ではなく画面下にまとめている
「幅広い業種」を、ラベルで証明する
実績は1件ごとに クライアント名・年・業種 のラベル付きです（STADES RUM DISTILLERY — 2026 — Corporate・Food & Drink、CITROËN RACING — 2026 — Sport など）。「幅広い業種に対応」と書く代わりに、読み手は自分の業種が含まれるかを数秒で確かめられます。年が並んでいることで、いま動いている会社だということも伝わります。
長いページを、画面下のバーで支える
トップページは縦にとても長く、実績・会社・サービス・受賞・選ばれる理由・問い合わせと続きます。その間ずっと、画面下にメニューと FR / EN の言語切替を入れたバーが表示されています。どこまで読んでも次の行き先が見える作りです。
読み終えた人に、呼びかける
最後の問い合わせの見出しは「Convaincu·e ? On démarre un projet ensemble（納得した？ 一緒にプロジェクトを始めよう）」。ここまで読んだ人に向けた言葉で始め、電話とメールを並べています。定型の「お問い合わせ」より、読み終えた人の気持ちに合わせた一言のほうが次の行動につながります。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FBEFE1 背景（桃色がかった生成り）
- #5F45F2 ロゴ・見出し・ボタン（紫）
- #FFE375 強調のボタン・ラベル（黄）
- #FFFFFF ボタン・カード背景
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン（すべて） | Obviously（可変フォント） | Archivo（可変幅） |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 12px / 400 | 2.00 | 21px / 400 |
| h2 | 15px / 400 | 1.88 | 15px / 400 |
| h3 | 240px / 400 | 1.02 | 75px / 400 |
| 本文（p） | 60px / 400 | 1.38 | 25px / 400 |
| ボタン | 27px / 400 | 1.02 | 21px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ファーストビュー 動く大きなロゴと「クリエイティブスタジオ／デジタル＆ブランディング」、黄色の「15周年の動画を見る」ボタン。 ファーストビュー／大きな文字型
- 02 実績 クライアント名・年・業種のラベルつきで6件。「実績を見る」へ。 事例・実績／リスト＋ラベル型
- 03 会社紹介 「意味のある、遊び心のあるアイデアを探す人たち」という自己紹介。 コンセプト／写真＋メッセージ型
- 04 サービス（進め方） 「手順は確立している」として、CONCEPTION（設計）からの工程を順に説明。 進め方／番号つきステップ型
- 05 受賞 14年以上で積み重ねた受賞の一覧。「受賞を見る」へ。 お知らせ／ニュース一覧型
- 06 選ばれる理由 「なぜ Viens-là を選ぶのか」を項目ごとに。 機能・強み／左右交互型
- 07 問い合わせ 「納得した？ 一緒にプロジェクトを始めよう」と、電話・メール。 行動喚起／ボタン帯型
- 08 フッター 電話・メール・メール登録。 フッター／ナビ＋会社情報型
- 09 画面下のバー メニュー（ホーム・スタジオ・サービス・実績・連絡）と FR / EN の切替を常に表示。 行動喚起／SP追従ボタンバー型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 「幅広い業種に対応」と書く代わりに、実績カードに業種のラベルを付ける
- 02 実績には年を添え、直近も動いている会社であることを見せる
- 03 縦に長いページでは、メニューや言語切替を画面の端に追従させる
- 04 最後の問い合わせは、読み終えた人への呼びかけの言葉で始める
FAQ
よくある質問
Viens-là のサイトで使われているフォントは？
すべての文字を Obviously という可変フォントで組み、太さと幅を変えて表情をつけています。無料で近づけるなら、幅を変えられる Archivo が候補です。
メニューを画面下に置くのは使いにくくありませんか？
Viens-là のように縦に非常に長いページでは、指や視線が画面下にあることが多く、下のバーのほうが届きやすい場面もあります。ただし一般的な位置ではないので、ロゴや問い合わせボタンなど「上にあるはず」と思われるものは上にも残しておくと安心です。
どんな業種の参考になりますか？
制作会社・広告代理店・デザイン事務所など、業種をまたいで仕事をする会社に向きます。フランス語・英語の切替は、日本語・英語で発信する会社の参考にもなります。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はViens-làおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
