はじめに

映画や舞台のカツラは、「カツラだと気づかれないこと」が仕事の到達点です。画面に映るのに、存在は語られない。そうした成果が本人の名前で語られにくい仕事を、どうWebサイトで伝えるか。それが今回のプロジェクトの出発点でした。
映画・舞台のプロ用カツラ制作を手がけるアライカツラdeco.合同会社のブランドサイトを、設計とデザイン、そして特に力を入れたキービジュアルの動きまでご紹介します。

サイト設計のポイント

ファーストビューは「読ませる」より「浸らせる」

トップページの第一画面は、映像と回転するロゴ、コピーで構成しました。ここで説明文を読ませることは狙っていません。まずはアライカツラの世界観に触れてもらうための画面として設計しています。

ただし、世界観の表現だけではWebサイトとして機能しません。そこで、社名・住所・電話番号・グローバルナビ・言語切り替え・お問い合わせボタンを第一画面内にデザインの一部にも見えるよう、ダイナミックなタイポグラフィで取り入れています。スクロールしなくても連絡先の情報が得られる状態を保ちながら、世界観を見せる工夫ですね。

実績を「積み上がる資産」として設計する

この業種では、担当作品のリストそのものが信用になります。
WORKSページでは、作品名と年、ビジュアルを1件ずつ登録していく形にしています。1ページ12件のカード表示にページネーションを組み合わせ、件数が増えても一覧の見通しが崩れない構成です。新しい作品を担当するたびに、サイトの説得力が自動的に増していきます。

英語版を同一構造で用意する

海外作品や国際映画祭への出品を視野に入れ、日本語版と英語版を同じ構造で用意しました。ページ単位に翻訳版を紐付け、第一画面のサイドバーとグローバルナビの両方に言語切り替えを配置しています。
 

デザインコンセプト

「舞台の暗がりと、アーティスティックな世界観」をコンセプトに設計しました。主役はあくまで作品のカットと手仕事の写真です。UIは色数を絞って背景に退き、写真と余白で語らせる方針を取りました。

配色 ― 彩度を落とした3色に絞る

 
極力色は使わず、まるでワイヤーフレームのような低彩度でまとめています。アーティスティックな印象を与えるため、また、UIが目立たないほど作品が前に出るという考え方で色を決めました。

タイポグラフィ

欧文の見出しには、タイポグラフィに適したDela Gothic Oneを採用。字面が詰まっていて、ボディが太い。ロゴタイプに近い強度を持つため、「ARAI KATSURA DECO.」「WORKS」といった短い語が画面の骨格として立ちます。数字にはBarlow Condensedを使い、年号や設立年を細く縦長に見せています。

和文はNoto Sans JPをベースとしたYakuHanJPを採用。YakuHanJPは、日本語の約物（「」や、。など）の左右に生じる余白を詰めるためのWebフォントです。日本語の文章は約物の空きが原因で行がゆるんで見えがちですが、これを詰めるだけで文字組みが一段引き締まります。コピーを大きく見せる場面が多いサイトほど、この差は効いてきます。

キービジュアルのアニメーション

メインモチーフは、アルファチャンネルを持ったwebm・webpで実装し軽量なアニメーションで表示。第一画面の表示の重さは離脱に直結するので、画質と容量の折り合いがつく形式を選びました。あわせて、webmの再生に制約のあるブラウザ向けには、webpの代替表示を用意し、環境によって見え方が破綻しないようにしています。

マウスに追従する視差表現

登場が終わったあとは、マウスの動きに合わせて各要素がゆっくり追従します。追従量は要素ごとに変えており、ロゴやボタンなど手前にあるものほど大きく、映像など奥にあるものほど小さく動きます。手前ほど速く、奥ほど遅いという現実の見え方を、そのまま数値に置き換えた設計です。
なお、この視差はマウス操作が可能なPC環境に限定しています。タッチデバイスには「カーソルの位置」という概念がないため、無理に動かさず静かな表示に切り替えています。

スクロールとページ全体の動き

KV以降のコンテンツにも、スクロール位置に連動したフェードインと、背景の視差を実装しています。ただし動きの役割は「セクションが切り替わったことを知らせる」ことに限定し、読解の妨げになる派手な演出は入れていません。

またサイトの読み込み時には、0%から100%へカウントアップするオープニングを配置しました。待ち時間を隠すのではなく、進行状況を示しながら「これから始まる」という間をつくるための演出です。

まとめ

本サイトは、世界観への没入と、業務上必要な情報への到達しやすさという、相反しがちな2つの要求を同時に成立させることを目標としたブランドサイトです。役割を分けて設計することで、どちらも削らずに済みます。

株式会社TONMANAでは、ブランドサイトの制作にとどまらず、コンセプト設計・デザイン・実装・多言語対応・公開後の運用までを一貫してご支援しています。