イベントの迫力を、ホームページでも感じてもらいたい。そのために画面へ動きを付けたいけれど、会社の仕事や問い合わせ先が探しにくくなるのは困る。演出を検討するときは、「どの技術を使うか」より先に、見た人へ何を感じてもらい、その後に何を確かめてほしいかを分けてみましょう。
動きが必要かどうかは、会社の伝えたいことと、読む人の使い方から考えます。堺市の株式会社Flyeeの公開制作事例を手掛かりに、イベントの印象をつくる部分と、依頼できる仕事や相談先を案内する部分を、一緒に相談する方法を紹介します。
動きは、何を感じてもらうために加えるのか
イベントの写真を大きく見せる、画面を読み進めると場面が切り替わる。そうした演出を考える前に、「大きな会場を動かす仕事の規模感を伝えたい」「参加者が楽しむ雰囲気を見せたい」など、見せる目的を一つ言葉にします。
ただし、写真から受ける印象だけでは、何を依頼できる会社なのかまでは分からないことがあります。企画から頼めるのか、当日の運営を相談できるのか。実際の仕事の範囲を説明する原稿や実績と、演出の役割を分けて用意します。
動きのある参考サイトを見つけたときも、全部を同じように再現したいと伝えるより、気になった場面と理由を添えると相談しやすくなります。たとえば「写真が変わることで、会場の雰囲気が伝わった。ただ、自社では実績の説明も読みたい」という伝え方です。
堺市のFlyeeの制作では、印象と操作を合わせて考えた
株式会社Flyeeの制作事例では、イベントプロデュースの魅力を伝えるサイトを制作しました。サイトを持っていなかった企業から、事業に合うスマートでシンプルなサイトを求められたことが、公開事例に記されています。
制作では、大胆なレイアウトと大きなビジュアルで、イベントの迫力や華やかさを表現しました。スクロールに応じるアニメーションと、カーソルを合わせたときの演出も取り入れ、画面を見ていく楽しさに加え、情報を探して操作する際の進みやすさを考えています。
一方、情報の配置にはグリッドを使い、文字や色も会社のイメージと読みやすさに合わせて選んでいます。強い印象をつくる部分と、整理して伝える部分を組み合わせた制作です。
ここで参考にしたいのは、イベントの魅力を見せながら、会社の情報を読み、操作できることを一緒に考えた点です。公開されている制作時の課題と構成の考え方を手掛かりに、自社で使う写真や必要な案内に合う演出を検討しましょう。
演出する画面と、いつでも探せる案内を分ける
自社のサイトを相談するときは、実績の印象、事業の説明、相談先の三つを並べてみます。実績ではどんな場面を見せたいか、事業紹介では何を頼めると伝えるか、相談ではどんな内容を最初に聞くか。それぞれを読み手の行動と結び付けます。
たとえば、イベント写真を切り替える場面をつくる場合も、写真を見終えるまで事業名やメニューが出てこない構成にするかは、別の判断です。初めて訪れた人にも、すぐ仕事の説明や相談へ進みたい人にも、必要な行き先を見つけられるように相談します。
動く部分に短い言葉を載せるなら、その言葉が消えても、仕事の内容を別の場所で読めるかを見ます。見た人の記憶に頼らず、事業紹介や実績の本文でも確かめられる形にしておくと、演出と情報の役割を考えやすくなります。
スマートフォンと、動きを止めた状態でも確かめる
パソコンでカーソルを合わせると説明が出る演出を見たら、スマートフォンではどう表示するかも確かめます。指で触れる操作と、カーソルを乗せる操作を同じものとして考えず、実際に使う画面で、事業名や説明、相談先を見つけられるかを確認します。
自動で切り替わる文章や写真については、読む途中で変わらないか、必要なところへ戻れるか、動きを止めて見られるかを担当者に相談します。自分には読めても、初めて言葉を知る人や、ゆっくり内容を確かめたい人には、違う速さに感じられるかもしれません。
W3CのWCAG 2.2の解説では、自動で始まり、5秒を超えて続き、ほかの内容と並行して表示される動き等について、本質的に必要な場合を除き、一時停止・停止・非表示にする仕組みを扱っています。［1］すべての短い演出を一律に判断せず、今回の動きがどの条件に当たり、どう操作できるようにするかを実装担当へ確認します。
制作中の確認では、動きがある状態と、止めた状態の両方で「何を頼めるか」「実績の内容が読めるか」「相談先へ進めるか」を見ます。仕上がった印象の感想に加え、読めなかった言葉や、操作に迷った箇所を具体的に残すと、修正内容を話しやすくなります。
制作会社には、動かしたい場所と読む人の判断を伝える
「かっこよく動かしたい」という希望から始めても構いません。そこへ、伝えたい仕事と、いつでも読めるようにしたい案内を添えます。技術の名前や実装方法を、依頼側で先に決める必要はありません。
| 相談する場面 | 伝える希望の例 | 確認すること |
|---|---|---|
| 最初に見る写真 | イベントの規模感や雰囲気を感じてほしい | どの場面を使い、どんな言葉を添えるか |
| 仕事の説明 | 依頼できる範囲を落ち着いて読めるようにしたい | 動きを待たずに説明へ進めるか |
| 実績を見る場面 | 写真だけでなく、自社が担った仕事も伝えたい | 事例の本文と写真が対応しているか |
| スマートフォン | 指で操作しても説明と相談先を見つけたい | 触れ方や画面幅で案内が隠れないか |
| 動きを止めたとき | 必要な情報を読み返せるようにしたい | 止め方と、止めても残る文章・行き先 |
参考にする写真やサイトがあれば、どこに魅力を感じたかを添えます。掲載する実績写真を使えるか、撮り直しが必要か、原稿をどう準備するかも、制作範囲として一緒に整理できます。
演出と分かりやすさを、同じ相談で考える
動かす範囲が決まっていなくても、イベントの仕事をどう見せたいかから相談できます。たとえば、次のように、印象と読みたい情報を合わせて伝えてください。
イベントの雰囲気が伝わる、動きのあるサイトにしたいと考えています。一方で、依頼できる仕事と実績、相談先はすぐ分かるようにしたいです。使える写真と今の紹介資料から、演出する場所と説明を残す場所を一緒に考えられますか。
みやあじよでは、会社の仕事や強みを伺い、企業サイトの原稿・写真・デザインと案内を合わせて整理します。堺市で自社のイベント事業を伝えるホームページを検討されている方は、みやあじよのホームページ制作相談から、見せたい仕事と今気になっていることをお知らせください。
