みなさん初めまして。フリーランスでデザイナーをしているハルカナと申します。趣味はゲーム実況です🎮
さて、今日はクックパッドマートのみなさんと取り組ませていただいた「採用サイトプロジェクト」のお話です。
わたしはフリーランスでもチームを意識して取り組んでいます。サイトの設計と制作のポイントはもちろん、パートナーさんとコラボレーションする時に大事にしているポイントも交えてお話ししています。何かひとつでもみなさんのヒントになれば幸いです🙏
https://cookpad-mart-careers.studio.site/
はじめてご一緒するプロジェクトでとても大事なのが、理解とリサーチです。
パートナーさんのこと・事業のことはもちろん、競合や業界のことなどを知識ゼロの状態から短期間でキャッチアップしなければなりません。プロジェクトの一員として、社員のみなさんと限りなく同じ目線を持つためにひたすら情報を集めて、必要な情報を整理します。多分これが一番大変です(笑)
今回は制作にSTUDIOというサービスを利用しています。
STUDIOとはWebサイトのデザインから公開までを1つのサービス上で完結することができる「次世代のWeb制作プラットフォーム」です。
使用するツールに関して、パートナーさんから指定があった場合も特徴やできること・できないことの認識合わせを行います。わたしはキックオフの時にこんな感じで確認をしています。
どのように進むのか、フローも確認しておきます🙋♀️
はじめに、そのサイトは誰がどんな心境で訪れるのか？サイトの役割とシナリオを考えていきます。この時に大事なのが、サイトや画面の中だけにとらわれずその事業の採用に関する取り組みについて広く捉えるのがポイントです。依頼されたWebサイトという枠にとらわれず、チームの一員として様々な可能性を考えます。
広告をうってサイトを広めるのか、説明会で使用するのか、直接候補者へ送るのか。サイトを訪れるシナリオによってサイト内での行動や心の変化が大きく違ってきますよね。
現時点で想定しているシナリオをヒアリングしたり、より効果的なシナリオを提案して、役割とシナリオを設定していきます。
外部のデザイナーとしてプロジェクトにジョインするとき、必ず確認するのが「ブランドガイドライン」です。
また、ガイドラインにまとめられている内容以外にも、そのブランドが提示しているアウトプットをリサーチするとより理解が深まると思っています。
例えば、今回のデザイン案では以下のように斜めの角度にも“らしさ”を追求し、すり合わせを行っています。
ガイドラインがない場合も、過去のアウトプットからフォントやカラーなど共通部分をリサーチして確認しておくととってもスムーズなのでおすすめです。
まずはコンセプトを言葉で発散し、ビジュアルに落とし込んでいきました。デザインの案を考える時は、いきなり具体的なビジュアル作って発散するよりも、まずは向かう旗を言葉やムードボードで発散しています。ビジュアルをつくるのは、ラフデザインだったとしてもそれなりの工数はかかりますよね。でも言葉やムードボードならスリムな工数で広い範囲を検討しやすいです。
「いきなりつくりはじめる」から卒業して適切な手法でステップを踏んでいくと、限りある時間のなかで最大の結果を得られるようになるのでおすすめです。
言葉での発散はマインドマップの手法を使うことが多いです。そしてFigmaでビジュアルを発散。どこまで思考しているか？を見える化するために様々な可能性をラフで作成していきます。
実際の提案には使用しなくても「今回はこれは違うよね」というコミュニケーションにも使えるので、より詳細なすり合わせを確実にできるので思わぬすれ違いを防いでくれます。
他にも、可視化することによって「どこまで思考できたか」「考えきれていない範囲はないか」を自分で把握することができるんですよね。
Figma上でコメントをやりとりして“いいね！”の範囲を絞っていき、そこからまた発散する。再度絞って、発散するというのを繰り返し、コンセプトのビジュアルを2案まで絞って、次はWebサイトのデザインへ落とし込みます。
今回はSTUDIOを使用することが決まっていたので、Webサイトのデザインへ落とし込むフェーズからSTUDIOで作っています。サービスの特徴を活かしたやり方を選択できると、プロジェクトがよりスムーズに進みます🙆♀️
定めたコンセプトをWebデザインに展開していく時、わたしは世界観と機能性のバランスに気をつけています。今回のような「採用サイト」であれば、世界観を伝えることも大切ですがコンテンツが読めなかったり読み飛ばされてしまうレイアウトであったり、きちんと届かないのは“エラー”であると考えています。
そのサイトは道具としての機能をどれくらい担うのか？広告としての機能をどれくらい担うのか？はじめに立てた旗とシナリオを常に意識して、バランスが崩れていないかを探りながら制作しています。
期間限定のLPサイトだったとしても「つくって終わり」というサイトはなかなかないですよね。公開後にちょっとした修正が必要になることもあります。どのように運用するのか？をヒアリングして、適切な「つくりこみ」を行います。
例えば今回はSTUDIOを利用して制作をしたので、運用の中で変更が必要なコンテンツ部分は、世界観の表現を怠らないかつなるべくシンプルな構造になるように意識をしてつくりこみをしています。
他にも、運用をシンプルにするために、スマートフォンとPCでコンテンツを出し分けしないようにしたり。これはノーコードツールで制作する時に忘れられがちなのですが、きちんと意識できるとより良い品質でパートナーさんに引き継げると思います😊
どんな制作においても、言語化はとても大事です。「デザイン」となると、ついビジュアルから作り始めてしまう人も多いのですが、言葉とビジュアルでバランスよく定義していくと向かうべき旗がくっきりとみえるようになります。
そして、当たり前を当たり前と思わない、優しいコミュニケーションを意識し、限られた時間の中でチームに入り込めるようにキャッチアップを怠らない。もしこれを読んでいるあなたが「時間のかけ方」に悩んでいるとしたら、まずは時間を短縮することよりもきちんと時間をかけて理解することを意識するようにしてみてください。わたしはそれが結果的に効率的な制作につながりました。
皆さんもきっと肌で感じていると思いますが、デザインの領域はどんどん広がっています。ぜひ興味のある領域にはどんどんチャレンジして、業界の壁を取り払って盛り上げていきましょう！