旅でる株式会社の公式サイトは、書体と配色を途中で切り替えることによって、性格の異なる二つのサービスを一枚のページに無理なく同居させています。前半は終活や自分史をテーマにした個人向けの映像制作、後半は宿泊施設や企業に向けた短尺動画の制作へと話題が移り、そこで画面の温度感がはっきり変わります。デザインの見本として眺めると、読み手が入れ替わることを言葉で説明せず、色と書体の変化だけで伝えている点がいちばんの見どころになります。
ここでは、ファーストビュー、配色設計、情報設計、図解の使い方、UIパーツと導線という順番で、キャプチャから読み取れる工夫を整理していきます。映像を扱う会社のサイトでありながら、静止画とタイポグラフィだけで世界観を成立させている点にも注目してみてください。
ファーストビューは明朝体の大見出しで感情に寄せています
トップに置かれているのは、写真でも動画でもなく、大きな明朝体の一文です。細めの縦線と抑えた字間で組まれた見出しが白い余白の中に浮かび、静かな読み物のような印象から始まります。ここでは、その見出しの組み方、二つ並んだボタンの主従、そして下に敷かれた写真の並べ方という三点を順に見ていきます。
色を差し込んだ見出しが視線の止まる場所をつくっています
見出しは二行構成で、黒い文字の中に「想い」を淡い赤、「未来」を深い緑で差し込んでいます。全体を色付きにするのではなく、伝えたい二語だけに色を与えているため、読み始めた視線が自然にその位置で一度止まります。明朝体を使うことで、終活や自分史という繊細な題材にふさわしい落ち着きが生まれています。
見出しのすぐ下には、サービス名を含む一行の紹介と、三行にまとめられた説明文が続きます。文字サイズが見出し、リード、説明文の三段階できれいに落ちていくため、どこから読めばよいかを迷いません。
主従を分けた二つのボタンで迷いを減らしています
説明文の下には、横並びのボタンが二つ置かれています。左は深い緑で塗られた角丸のボタンで、右は白地に細い枠線だけを持つボタンという組み合わせです。塗りの有無で優先順位が一目で分かり、まず問い合わせに進んでほしいという意図が視覚的に伝わります。
左のボタンには右向きの長い矢印が添えられ、右のボタンには資料をイメージさせる小さなアイコンが添えられています。同じ形のボタンを二つ並べるのではなく、装飾を変えて役割の違いを示している点が丁寧です。
人生の時間を並べた写真モザイクを置いています
ボタンの下には、八枚の写真をタイル状に敷き詰めた横長のビジュアルが入ります。左端はモノクロの赤ちゃん、その隣に制服姿の学生、スーツ姿の働き盛り、屋外で笑う年配の方と続き、人が生きてきた時間の流れが左から右へと読み取れる構成になっています。古い写真を思わせるモノクロと、鮮やかな色の写真を混在させることで、過去と現在が一枚の中でつながります。
タイルの中央には太い明朝体の文字が重ねられ、その下端には四つの短い文をアイコン付きで横並びにした帯が敷かれています。写真、見出し、要点の三層が上下に積まれているため、画像を一枚見るだけでサービスの骨格が把握できます。
二つの読み手を色で分ける配色設計
このサイトの配色は、単なる装飾ではなく読み手を仕分ける役割を担っています。淡い色で構成された前半と、彩度の高い色を大胆に使う後半が対照的で、その境目に全幅の色帯が挟まれます。ここでは、プランを並べる場面での色分けと、ページ全体のリズムをつくる帯の使い方を取り上げます。
淡いピンクと淡いグリーンで二つのプランを並べています
個人向けのプランは「寿版」と「メモリアル版」の二つが用意され、それぞれに背景色が割り当てられています。前者はごく淡いピンクの面に桜をかたどった丸いアイコン、後者は淡いグリーンの面に若葉のアイコンという対応で、セクションごと色が入れ替わる作りです。同じ見出しの組み方と同じ余白量を保ったまま背景だけを変えているため、二つが並列の関係にあることが説明なしで伝わります。
ファーストビューの直下にも、同じ色分けを小さなカードとして左右に並べたブロックが置かれています。先に対比の全体像を見せ、その後で一つずつ詳しく読ませるという段取りが取られており、読み手は自分に関係する方へ進みやすくなります。なお、それぞれのプランの下には見本として用意した動画に関する注記が小さな文字で添えられ、登場人物や構成が実在のものではないことが明記されています。
黄・緑・橙の帯が章の切り替えを知らせています
ページを下へ進むと、黄色、緑、橙という三色の細い全幅の帯が要所に現れます。文字の入っていない色だけの帯ですが、これがあることで長い一枚ページに区切りが生まれ、話題が変わる合図として機能します。前半の淡い色調から後半の力強い色調へ移る場面でも、この帯が緩衝材の役割を果たしています。
最後は橙のベタ塗りの面で締めくくられ、そこに白い大きな見出しと黄色いボタンが置かれます。淡い色から始まって最も強い色で終わる流れになっているため、読み進めるほど行動を促す圧が上がっていく設計だと読み取れます。
見出しと番号表現でつくる情報設計
情報設計の面では、見出しの体裁を二種類に絞っている点が効いています。読み物として読ませたい部分と、事業として売り込みたい部分で見出しの形が変わり、それぞれの中では形が統一されます。ここでは見出しの共通ルール、手順の見せ方、数値の並べ方を確認します。
セクション見出しは縦バーで統一されています
個人向けの各セクションの見出しは、左側に淡い橙の短い縦棒を添えた明朝体で組まれています。装飾は縦棒だけに絞られ、下線や囲みは使われていません。同じ形が繰り返されるので、ページのどこにいても現在地が分かりやすくなっています。
一方、企業向けの内容に入ると、見出しは中央揃えの太いゴシック体へ切り替わります。左揃えの縦棒付き明朝体と、中央揃えの太いゴシック体という二つの型が混ざらずに使い分けられているため、同じページでも別のパンフレットを読んでいるような切り替わりが生まれます。
制作の流れは番号付きの箱を二列に並べて見せています
依頼から納品までの手順は、淡い黄色で塗られた角丸の箱を二列に並べて示されています。箱の中は番号と短い語句だけで、余計な説明を持ち込んでいません。八つの箱が同じ大きさで整列するため、全体の工程数が視線を動かすだけで把握できます。
さらに下には、この流れを写真とイラストで描き直した横長のビジュアルも用意されています。文字だけの箱と、写真入りの図解という二通りの見せ方を重ねることで、ざっと眺めたい人と細かく確認したい人の両方に対応しています。
数値を並べた実績ブロックが説得材料になっています
企業向けの区画には、橙の枠線で囲んだ角丸のボックスを四つ並べたブロックがあります。ビジネスホテルへの宿泊が通算三千泊以上、短尺動画の編集実績が二百本以上、営業の経験が三十年、そして動画制作は全国に対応という四点が、数字を大きく見せる形で置かれています。
枠線だけで塗りを持たないボックスなので、白い背景の上でも主張が強すぎず、数字の橙が素直に目に入ります。ブロックの下には詳細ページへ進む黄色いボタンが一つだけ置かれ、興味を持った人が次の階層へ移動できるようになっています。
抽象的な価値を図解に置き換えた表現
映像を残す価値のような、言葉にすると抽象的になりがちな内容を、このサイトは図解とたとえ話に置き換えています。文章で長く説得するのではなく、絵を見せて納得させる方針が一貫しています。ここでは特徴的な三つの表現を取り上げます。
歴史上の人物を使ったたとえのバナーを挟んでいます
個人向けの説明が終わった位置に、歴史上の人物の生涯をイラストで四段階に並べた横長のバナーが挿入されています。誕生から天下統一までを年代順に並べ、金色の光を使った濃い背景で映画の予告編のような見せ方をしています。もし本人の映像が残っていたら、という仮定を絵で示すことで、映像を残す意味を実感として伝える狙いが読み取れます。
このバナーには、イラストが人工知能によって生成されたものであることを示す小さなラベルが入っています。演出のために作った画像であることを画面上で明かしている点は、誠実さの表れとして参考になります。バナーの直後には蛍光色のマーカーを引いたような一行が置かれ、たとえ話から自社のサービスへと話題が戻ります。
受け手を三つに分けたカードで価値を整理しています
その下には、代表の写真を使ったバナーを挟んで、三枚のカードが横並びで置かれています。それぞれ本人、家族、未来の子孫という受け手ごとに分かれており、上に写真、下に短い説明という同じ構成で揃えられています。説明文の中では重要な語だけが橙や赤で着色され、流し読みでも要点が拾えるようになっています。
一つのサービスを「誰にとっての価値か」で切り分けて並べる手法は、家族が関わる商材と相性がよく、読み手が自分の立場を重ねやすくなります。カードの上には緑の帯に白抜き文字を入れた小見出しが置かれ、三枚をまとめる役割を果たしています。
縦型動画をスマートフォンのモックアップで見せています
企業向けの区画に入ると、画面の右側に手で持たれたスマートフォンの写真が大きく配置されます。画面には客室の映像と丸い再生ボタンが重なり、扱っているのが縦型の短尺動画であることが一目で分かります。左側には角の立った太いゴシック体の見出しが三行で置かれ、明朝体だった前半とは対照的な強さが出ています。
実際の動画をその場で再生させるのではなく、端末に収まった状態の静止画で見せているため、ページの読み込みを重くせずに完成イメージを伝えられます。下部には問い合わせへ進むための黄色いボタンが一つ置かれ、視線の流れの終点に導線が来るよう配置されています。
UIパーツと問い合わせ導線の作り方
ボタンやカードといった細かな部品にも共通のルールが敷かれています。色数は多いものの、形と影の付け方が揃っているため、散らかった印象になっていません。ここでは押せる場所の示し方と、連絡手段の絞り込みについて見ていきます。
影を落とした黄色いボタンで押せる場所を統一しています
ページ内の主要なボタンは、黄色い塗りに黒い縁と右下方向の影を組み合わせた角丸の形で統一されています。影が付いていることで面から浮き上がって見え、押せる場所だとすぐに判断できます。文字の右側には小さな山括弧が添えられ、進む方向が示されています。
ヘッダーの右端にも同じ黄色のピル型ボタンが置かれ、ページのどこを見ていても問い合わせへ移動できます。淡い色で構成された前半でも、このボタンだけは高い彩度を保っているため、背景に埋もれません。
カードの角丸と枠線でトーンをそろえています
企業向けに用意された四つのサービスは、写真を上に置き、その下に番号付きの見出しと一行の説明を添えたカードで、二列二段に並びます。番号は橙で表示され、ナレーションの制作、撮影、動画編集、そして各種SNSでの配信とアカウント設計という順で読ませる構成です。写真の比率と文字量が揃っているので、四つが対等な選択肢として認識されます。
その下に続く六つの理由のブロックでは、緑のベタ塗りに白い文字を載せたカードが二列三段で並びます。枠線のみの実績ボックス、写真付きのサービスカード、ベタ塗りの理由カードというように、内容の性質ごとにカードの表現を変えつつ、角丸の半径と余白は共通に保たれています。
連絡手段を絞った導線になっています
会社概要の欄には所在地とメールアドレスが記載され、電話での問い合わせは受け付けていない旨がその下に明記されています。連絡経路をフォームとメールに絞ることを画面上ではっきり伝えているため、読み手が迷って電話番号を探す事態を避けられます。
ページの最下部では、橙一色の面に白い見出しと黄色いボタンを置いた締めくくりのブロックが用意されています。直前まで続いていた白背景から急に色が変わるため、ここが最後の行き先だと感覚的に理解できます。フッターにはグローバルナビゲーションと同じ項目が並び、読み終えた人が別の階層へ戻れるようになっています。
自分史や終活の映像を検討するときに見ておきたい視点
ここからは、こうしたサイトを見比べるときの一般的な視点を整理します。自分史や終活をテーマにした映像は形のない商品なので、完成品を確かめてから決めることが難しく、サイトの見せ方そのものが判断材料になります。次の三点を意識すると、複数のサイトを同じ物差しで比較しやすくなります。
誰の言葉で語る映像なのかを確かめておきます
同じ記録映像でも、本人が自分の言葉で語るものと、家族が故人を振り返るものとでは、必要な準備がまるで違います。前者は本人が元気なうちに時間を確保する必要があり、後者は家族が集まって思い出を持ち寄る作業が中心になります。サイト上でこの二つが分けて説明されているかどうかは、依頼者の状況を想定できているかの目安になります。
手元の素材でどこまで作れるのかを確認しておきます
写真やビデオを提供して構成してもらう形と、あらためて撮影する形とでは、準備の手間も所要期間も変わります。どの素材を自分で用意すればよいのかが明示されていれば、依頼する前に何を探しておくべきかが分かります。素材の扱いに関する注記が小さくても記載されているサイトは、後々の認識のずれが起きにくいと考えられます。
完成までの手順が公開されているかを見ておきます
初めて依頼する人にとって、打ち合わせから納品までの道筋が見えているかどうかは大きな安心材料になります。工程が番号付きで示されていれば、自分がどの場面で何をするのかを事前に思い描けます。旅でる株式会社のサイトのように、文字の一覧と写真入りの図解を両方載せている構成は、この点で分かりやすい部類に入ります。
まとめとして旅でる株式会社のサイトを振り返ります
旅でる株式会社の公式サイトは、明朝体と淡い色で組んだ個人向けの区画と、太いゴシック体と高彩度の色で組んだ企業向けの区画を、色帯という単純な仕掛けでつないだ構成になっています。写真モザイクによる時間の表現、たとえ話を図解に置き換えたバナー、番号付きの工程表示など、抽象的な価値を目で理解させる工夫が随所に置かれていました。
運営するのは、映像制作とSNSでの配信、アカウント設計に加え、宿泊施設を紹介するメディアの運営まで手がける東京都渋谷区の会社です。代表の小瀧 貴之様が長く営業の現場で培ってきた提案の視点が、ストーリーを組み立てる姿勢としてサイト全体に表れています。一枚のページで二つの読み手を扱いたい場合の参考として、実際の画面を通しで確認してみる価値があります。
色と書体の切り替えで読み手を導く設計を確かめたい方は、自分史を映像で残す制作会社の公式サイトをご覧ください。
