ディレクショントレーニング８【姿勢①】
こんにちは！いぬのパグです。
雑談
少し雑談を。
この前の休日にIKEAに遊びに行きました。IKEAのジンジャークッキーがとても好きで、行くと絶対買って帰ってしまうのですが、この前行った時にはクリスマス限定のジンジャークッキーがあり、それはもう心がときめきにときめきました…。
そういえば街もすっかりクリスマスカラーで、お化粧品も今シーズンの限定品やクリスマスコフレがあったりで、なんでこんなにクリスマスってワクワクときめいてしまうのだろう…。とつくづく思う日々です。
思い返すと、幼い頃の私は、クリスマスや誕生日などイベントがあると、そのず〜っと前から「あと何日で当日か」を考えるために度々指を折って計算したり、カレンダーに書き込みをしたりしていました。
サンタさんへのお手紙も嬉々として書きましたし、学生の頃はちょうど夏休みの終わり頃が誕生日だったので、気持ちよく当日を迎えるために宿題は夏休みに突入してものの数日で終わらせていました。前々から予定を立てたり、その当日までにソワソワする感覚が一番好きだったのかもしれません。そしてそこに全力投球だったんですね〜。
そのころのワクワクは今もそのまま、私の中に残り続けているんだな〜と思うと感慨深くなります。
大人になると、大人ぶることより、案外子供に戻ることの方が難しくなっていたりしますよね。いつまでも「とびきり無邪気で純粋なワクワクとソワソワ」を抱えて生きていきたいな〜と、クリスマスを前に、幼い頃に思いを馳せてみたりしました。
そして本題。
今回は「ディレクターとしての姿勢・プロジェクトの向き合い方」についてお話していきます。
今回携わらせていただくことになった案件は、アイデアフルの企画会社さんのHPリニューアルのプロジェクトでした。そのプロジェクトを進めるにあたって、上司が話してくださったことを交えながら紹介していきたいと思います。
上司の言葉①
ディレクターとは
文字通り「方向：ディレクション」を導いていくものです。
デザインとディレクションの境界線の難しさはもちろん、ディレクターには個人差があります。会社によって分業体制が整っていたら話は別ですが、スプーンのような少人数制の会社ではそのバランスがとっても難しいです。
その前提がある上で「デザイナーとアイデアを育てていく、判断する。一緒に考えて、膨らませて、広げていく」ことがディレクターのお仕事と言えます。
というお話を上司からしていただき、
普段はデザインに並列し、デザイナーの意向を伺いながら進めていきますが、今回のプロジェクトにおいては方向性を導いてほしいということで、ディレクターであるパグがリードしていくことになりました。
リードといっても何をして、どう進めていくか。
それをお話ししていきます。
進め方①：相手を知る
デザイナーへ、クライアントの要望を丸投げするのではなく
１）ディレクターから指示し、ガイドラインをひいていく
２）このような世界観、アイデア、演出、アニメーションをしてみたい！！！と提案する
この２点をまずは進めていきました。
その前段階として、
・相手を知る（何を大切にしている人たちか、仕事の様子、普段の様子）
・情報はどのようなものがあるか知る
・その後、伝えたい相手を知る（ペルソナ）誰に向けて、どのような接し方をするか
を徹底して調べていきました。
アイデアフルの企画会社さんということもあり、とてもワクワクしながら研究を進めていきました。まずは現行のHPを隅から隅まで、それから取り上げられているネットニュースやインタビュー記事を全て、SNSもできる限り遡って読みました。
すると
・会社概要
・できること
・考え方
・普段のメンバー、雰囲気、人柄
・現行HP、引き継ぎたい世界観
・これから目指すこと
が浮かび上がってきました。
普段のメンバーの雰囲気や人柄を知ることで、生み出す商品やモットーに通じている内面的なことがわかり、全体の情報を集約しやすくなりました。
また、現行のHPの課題点、引き継ぎたいものをきちんと理解することで、クライアントが望んでいるリニューアルHPに寄り添うように努めました。
これからの目指す会社の形や、インタビューでしか話していない内容を理解することでも、HPに盛り込む内容の情報の取捨選択をすることができました。
例）これから地方自治体とも積極的に、一緒にお仕事をする機会を増やして、地域を盛り上げたい
▶︎ 一緒に仕事をするからには、「この企画会社さんと手を組むことで、面白い商品を生み出せるか・商品の人気が出るかどうか」だけでなく、会社のメンバーにも興味が沸くはず...!
会社の雰囲気や商品のみならず、メンバーの人柄を知ってもらえるページを追加することで、新たな層にも目にとまる機会を増やす。「この人たちと仕事がしたい！」と思ってもらえるようなきっかけづくりに努める。
加えて今回だと
以下をクライアントが新規でHPに盛り込みたい情報として提示していたので、そこについても熟考しました。
お問い合わせした企業がマッチングしているか
会社名やチームが人気になると、その分ノイズのお問合せが増えてしまうので、HPでいかに会社の魅力や信念をプレゼンテーションできるか。
HPをみて、会社のことを理解した上で、お問合せしてくれるかどうかや、きちんと情報が届いているか・わかりやすいかどうかは、かなり重要です。
メールの項目やその他の部分で、できるだけフィルタリングすることでノイズを減らすことを意識しました。
合っているかどうかは答えではないです。どのように考えて、結論を出したかという過程を今回はとても大切にしていきます。
と上司がおっしゃってくださったので、気楽に、それでも緊張しつつワクワクした気持ちを持って進めることができました。
進め方②：情報の取捨選択
クライアントからもらったワイヤーフレームを再考しました。
これで本当にいいのか確認し、一度フラットな状態に戻してから最適化していきました。
クライアントからの要望として「言葉ではなく、ビジュアル・絵で伝わるものをMVなどでたくさん大きく配置してインパクトを出したい。」ということがあったので、文字はできるだけ排除したり、静止画を主に、動画を所々織り交ぜたり。
また、企画会社さんということもあって遊び心をプラスして、クスッと笑える仕掛け、シンプルながらも目にとまるフォントなども探していきました。
ここにおいて心がけたのは「経緯、理由をきちんと提案していくこと」です。「なんとなくそう思った」「それっぽい」などと言うのは簡単ですが、根拠なしには人の心は動かず、共感も得られません。
もし共感されなかったとしたら何かが足りなかったということであるから、次の課題に繋げれば大丈夫です。
とも上司がおっしゃってくださったので、「失敗はない」ということにかなり勇気づけられました。
今回におけるお話だけではないのですが、上司は常に「失敗・間違いはない」という姿勢で向き合ってくださるので、ビクビクと怯えて萎縮してしまうということがなく過ごせています。
また、自由度が高く、その上で「責任感」が自然と自分の中で生まれて、それが期待にもなり程よいプレッシャーにもなります。誰かから与えられる、過度なプレッシャーや期待ほどしんどいものはないので、そのコントロールを自分の中でできていることは、会社での立ち回りであったりクライアントとのコミュニケーションにおいても大きく関係し、有り難いなと思っています。
進め方③：WF作成
調べたことを全てワイヤーフレームに落とし込んで作成する。
クライアントの情報整理をしっかりと行った上で、どのようなサイトが相応しいか、手を動かしてワイヤーフレームを作成しながら考えていきました。
まずは
コンテンツの順番
を考えることから始めました。
１）ヘッダー（ナビゲーション：NEWS、ABOUT、SERVICE、CONTACT）
２）WORKSギャラリー（メイン）
３）NEWS
４）ABOUT
５）OUR SERVICE
６）CONTACT
７）フッター
色々と考えてみましたが、クライアントからの要望に沿った順番が、訪問者の問い合わせまでの導線を考慮すると最も効果的で、見やすさにおいても問題なかったので変更せずそのまま進めました。
次に
オープニングアニメーション
について考えました。
社名がユニークで、込められた思いも制作実績を見ると納得してしまうようなものでした。そのため、「社名をしっかり意識してインパクトのある、かつ長過ぎないようなアニメーションが相応しい」と考え、リファレンスを探しました。
次に、
このサイトリニューアルのメインである
WORKSの見せ方
について考えました。企画会社なので、WORKS（商品画像）はカラフルなものが多く、初めは「背景ありの写真を単純に並べるより、切り抜き写真にしてたくさん並べると、壮観であるしインパクトも大きいのではないか」と考えましたが、上司からアドバイスをいただき
・クライアントがサイトの更新を複雑にしたくない点
・背景色、正方形を意識してクライアントがWORKSのもととなる、商品の撮影している点
を考慮し、デザイナーと相談しながら進めていくことになりました。
また、WORKSの詳細の見せ方としては、シームレスさを優先して、モーダルで開くことを考えていたのですが、その際も上司がモーダルのメリットとデメリットをきちんと説明し、アドバイスしてくださいました。
※モーダル（ウィンドウ）とは
特定の操作を行なわないと、他の画面を操作できないウィンドウのこと。親ウィンドウがサイト全体だとすると、モーダルは子ウィンドウと言えます。
モーダルのメリット
・特定のページに移るまでがシームレス（クリックの回数が少ない）
・次々にいろんなWORKSを見ることができる
モーダルのデメリット
・情報を表示できる面積が狭くなる（SPだと特に）
・SPだとスクロールオンスクロールとなり操作がしにくい
今回において、WORKSの詳細に盛り込む内容としては
・詳細画像（複数枚表示）
・商品名
・クレジット
・制作の意図、どういう思いで作ったか
・ツイート埋め込み
・ネットニュースリンク
・シェアボタン
とかなり情報量が多いため、この点についても慎重に検討していく必要がありました。そのため、デザイナーと相談しながら進めていくことにしました。
次に
NEWS（お知らせ）
について考えました。クライアントはSNSに力を入れているようで、万単位でバズることもしばしばあります。
そのため、
手順として、SNSを導入として→HPへと流れる訪問者も多いのではないかと思い、最新情報などはSNSで既に知っていただいている可能性が高いとすると、サイトの中でもNEWSはさらっとした見せ方で良いのではないか？と考えました。
しかしその中でも、
・一般的なお堅い企業サイトとは違う見せ方
・一般的に静止しているNEWSと大きく異なり、絶えず動き回るのはどうだろう？
などとリファレンスも併せて探していきました。
次に
ABOUT（会社説明）
について考えました。ここでは進め方①で書いた「メンバーの人柄」を知ってもらうコンテンツを入れることを考えました。そしてこちらも上司から
ABOUTは一度足を止めて、よく見てほしい。
スルーして欲しくない部分です！
というアドバイスをいただき、画面を暗転させたり、アニメーションを仕掛けたりして、アクセントをつけることを意識しました。
次に
OUR SERVICE（私たちができること）
について考えました。情報過多になり過ぎないよう仕舞える箇所はアコーディオンにしたり、テキストに頼り過ぎないよう図や写真を用いたりすることを意識しました。
次に
CONTACT（お問い合わせ）
について考えました。現状、SNSにてかなり人気が出ているにも関わらず、「TwitterでのDMなどではなく、必ずお問い合わせはHPからくる」ということで、お問い合わせフォームの扱いも慎重に進めていきました。
また、進め方①で書いたように、現状のお問い合わせ内容としては「ビジネスライクな人もいるし、リテラシーがないひともいる」ため、「敷居を少しだけあげる。イメージをきっちりしたい。」ということを意識しました。
入力フォーム
・ラフに気楽に依頼する
・真面目に依頼する
遊び心を持たせて、初めの段階でフォーム分けをするなど。
そのほかも遊び心のある演出や、デザインの色味・フォントなども考えていきました。
最後に
今回のプロジェクト進行では、冒頭で話した雑談に通じる、自分の中で弾ける「とびきり無邪気で純粋なワクワクとソワソワ」をたくさん感じることができました。
サイトのローンチに向けて嬉々として準備する、全力投球する。子供の頃の私が、今もそのまま私を形成しているんだなと改めて実感しました。
今はその本番に向けて、夏休みに宿題を早く済ませたり、サンタさんにお手紙を書くこと以外に、企画、WF作成、デザイン、演出の検討など「様々なアプローチのカード」を持たせてもらえているという環境・立場にも感謝ですね。
あの頃の自分に教えてあげたいです、大きくなって変に大人ぶらなくても、あなたはずっとそのワクワクとソワソワを持ち合わせて楽しく仕事してるよって。
前回の記事はこちら↓
おすすめの記事はこちら↓
この記事が気に入ったらサポートをしてみませんか？