Taylor Lauren Hughes
南カリフォルニア出身で、イギリス、アメリカ、ヨーロッパを舞台に踊り、作品をつくっているダンサー、振付家、ダンス講師のTaylor Lauren Hughesさんのサイトです。見に来るのは振付家やカンパニー、キャスティングの担当者で、知りたいのは彼女がどう動くか。なので写真と映像を前に出し、文字はできるだけ控えめにしました。
概要
最初に届いたのは一つのWordファイルでした。中にはプロフィール文と、作品を並べたい順番、直してほしい点のメモ、そしてほかのどこにも残っていない15枚の写真が入っていました。作り始める前に方向性の違うデザイン案を5つ用意し、Taylorさんが選んだのはギャラリー型の案です。温かみのあるクリーム色の地に、見出しはセリフ体、写真は大きく、画面上の仕掛けはできるだけ少なく。そこからメモの内容を一つずつ反映しました。肩書きはダンサー、振付家、ダンス講師に変え、作品は本人が挙げた順番のまま日付を付けずに並べ、ホームの最後は写真の帯ではなく最近の作品の映像にしています。中身はNext.jsとCSS Modulesで、CMSは入れていません。全ページを事前に生成しているので、Vercelに置いてあるのは静的なファイルだけです。文章と作品の並び順はすべて一つのファイルにまとめてあり、クレジットの修正や作品の入れ替えは一行直せば済みます。写真、ポスター画像、映像はスクリプトで元データから作り直せるようにしてあり、Wordファイルの中の写真もそこから直接取り出します。新しい作品が届いても、最初と同じ手順で追加できます。
制作内容
最初の2秒
初めて開くと、まず名前が出ます。細い線が横に伸び、名前が下からせり上がり、三つの肩書きがその下に浮かんで、パネルが上に抜けるとリールに切り替わります。これはセッションごとに一度だけで、出すかどうかは画面が描かれる前に決めています。なので2回目の訪問や、視差を減らす設定にしている方の画面に、一瞬だけ映り込むこともありません。その下のリールは最初は静止画で、ページで最初に読み込まれるのもこの写真です。映像は実際に再生が始まってから重なるので、切り替わりに黒い画面が挟まりません。
押されるまで待つ映像
振付作品とダンス出演のページは静止画を3列に並べ、作品名、役割、会場を添えています。再生を押すと、その場で静止画がYouTubeのプレーヤーに変わります。押すまではプレーヤー自体がページになく、YouTubeへの通信も発生しないので、何本も映像が並んでいてもページは軽いままです。Act 2のように映像のない作品は、同じ枠の中で写真が開きます。
動き続ける写真
ムーブメントディレクションの写真は自動で流れてほしい、というのがTaylorさんの希望でした。写真の帯はゆっくり横に流れ、端まで行くと折り返し、マウスを乗せたり、フォーカスしたり、指で触れたりするとすぐに止まります。操作の仕方も選びません。マウスでドラッグすれば慣性で少し滑り、矢印ボタンやキーボードの矢印キーでも送れて、スマホではいつもどおりスワイプできます。写真の組ごとに、撮影したフォトグラファーのクレジットを添えています。
一覧で見せる作品
ポートフォリオのページは、作品名を並べて右側に役割を添えただけのシンプルな一覧です。行にマウスを乗せると、その作品の写真が文字の後ろに浮かびます。クリックすると行が開いて、会場名と一緒に写真がすべて並びます。開くのは一度に一つだけなので、一覧が写真で埋め尽くされることはありません。作品名はナビゲーションと同じく、ポインターを向けると一文字ずつ波打ちます。
すべての写真に同じトーン
写真は撮影者も舞台もスタジオもばらばらで、並べてみると一人の作品集には見えませんでした。そこでサイト上のすべての写真に同じ暖かいトーンをかけています。画像ファイルに焼き込むのではなく、スタイルシートで一度指定しているだけです。Aboutページは画面いっぱいのポートレートの上に、暗いグラデーションを敷いてプロフィールを載せています。スマホでも横長の画面でも、文字がきちんと読めます。
言葉が主役のページ
Teaching Philosophyは、文章が主役になる唯一のページです。本人の文章を見出しと同じセリフ体で読みやすい大きさに組み、スタジオで撮った写真を1枚だけ横に置きました。ただの文章の塊ではなく、本人が書いたものとして読めるようにしています。サイトのほかの文章と同じファイルに入っているので、書き直したくなっても手間はかかりません。
検索・シェア用の設定
元データからの素材生成
キーボード操作と視差軽減の確認
独自ドメインでの公開
お客様の声
Kaiさんとの仕事は本当に素晴らしい経験でした。ダンサーとして、クリエイティブで自分らしさのあるサイトをつくりたいと思っていたのですが、Kaiさんはそのイメージをそのまま形にしてくれました。期待をはるかに超えるところまでやってくれたと思います。プロ意識が高く、スケジュールもきちんと守り、こちらの希望をしっかり聞いてくれて、一緒に進めるのがとても楽しかったです。Kaiさんのことは心からおすすめします。しっかりつくり込まれた、プロらしい、クリエイティブなサイトが欲しいなら、お願いするのはKaiさんです。ウェブサイトのデザインなら本当に何でもできる方なので、また一緒に仕事ができたらうれしいです。
