サイトリニューアルの裏側にせまる〜デザインワーク部新設！〜前編【ザイナス】
いつもザイナスnoteを応援いただきありがとうございます✨
本日は、2024年1月にザイナスに新設されたデザインワーク部とそのメンバーをご紹介🔍
ザイナスのサイトリニューアルを担当した皆さんのお仕事について、クローズアップしました👀♩ぜひご覧ください〜！！！
ー初めに、サイト制作における皆さんのお仕事内容を教えてください
Hさん：まず、サイト制作には大きく分けて4つのフェーズがあり、私たちはそれぞれのフェーズで役割分担をしています。
① お客様にヒアリングして情報を整理する
② ワイヤーフレームを設計する
③ ワイヤーフレームをもとにデザインを決める
④ コーディングする
私は①②を中心に、デザイナーとコーダーのふたりに指示を出すディレクターという役割を担当しました。
Mさん：私は主にデザインを担当しました。
同業他社の調査からスタートし、お客様のヒアリングなどを経て、画面全体のデザインを完成させていく仕事です。
Yさん：僕はコーディング担当。ディレクターが設計したワイヤーフレームとデザイナーがつくったデザインをもとに、実際にWebページが表示されるようコードを書くのが仕事です。アクセシビリティなどを考慮しながら、誰もが利用しやすいサイトに近づけていきます。
ーどのような経緯でサイトをリニューアルすることになったのでしょうか？
Hさん：2年前に入社した時、私の1番最初の仕事が自社サイトの制作でした。その時は何の知識も技術もない状態で・・・完成はしましたが、日々勉強していく中で、「もっとこうしたかった」という反省点が見つかってきて、いつかはリニューアルしたいと考えていたんです。
サイトとしても2年が経過したことや、チーム内のメンバー編成が充実したことから、江藤副社長とも相談し、まずはサイトのリニューアルをしてみようという話になりました。
ー今回のサイト制作の具体的なフローを教えてください
Hさん：まずは同業他社がどのようなサイトの見せ方をしているのか調査することからスタートします。
次に、今回のサイト制作のクライアントにあたる弊社の人事部と江藤副社長にヒアリングし、「どういうサイトにしていきたいか」を細かく聞き取りました。例えば「サイト制作の目的は何か」「サイトのテーマは何か」「サイトを誰に見せたいのか」などなど・・・時間をかけてひとつひとつ決定していき、それを参考にワイヤーフレームを引いたりページのデザインに落とし込んでいきます。
Mさん：具体的には、まずはザイナスのミッションである「もっといいシステムで、もっといい明日を」に注目し、ヒアリングをしながらサイトのコンセプトを決めました。
今回のコンセプトは「しなやかな強さ」。これは、ザイナスが社会で信頼を得る企業であることと、挑戦していく社風だということを掛け合わせて生まれました。そこから、同業他社のサイトを100個くらい比較しながら「ザイナスのサイト」として「しなやかな強さ」をこう表現をしよう、と取捨選択していきました。
Mさん：それから、特に時間をかけたのは、ザイナスがサイトを通して伝えたいブランドイメージの定義です。今回は「ブランドパーソナリティ」を立て、お客様と私たち制作側が共通したサイトイメージを持てるよう工夫しました。
ブランドパーソナリティとは
ブランドを人に例えたとき、「どんな性格なのか」「どんな振る舞いをするのか」を明文化したものになります。(中略)ブランド・パーソナリティは、ブランドが外に発信するすべての要素のトーンを統一させるために有効なのです。
ブランドパーソナリティにはある俳優さんを設定したのですが、その人を軸に、ザイナスという企業の性格、印象、連想できるキーワード、テキストのトーンに至るまで、すべて想定していきました。
例えば、使用するテキストに迷ったときは、「このサイト＝この人」は、Aという言葉使わないよね、だからBに変更しよう、などの判断基準になります。そうやって、クライアントと1つずつ確認し、共通の認識としてすり合わせながら、ザイナスの核となる部分を引き出し、整理していきました。
Hさん：これは制作あるあるなんですが、ヒアリングや情報設計が進むにつれ、だんだんサイトのイメージがわからなくなってくることがあります。お客様も「やっぱりこうしたい」「これもいい」と話が膨らんだり、結局何がしたかったんだろうとブレてしまったり・・・私たち制作側もわからなくなったりする。そういった時に、共通認識があると、本来の目的やテーマに立ち戻ることができますね。
また、ヒアリングの際は、曖昧さを回避するために「どう思いますか？」などの抽象的な質問をしないよう心がけました。クライアント自身が気づいていなかった要望をうまく引き出していけるように、様々な角度から質問をしました。
Mさん：例えば「信頼」というキーワード1つをとっても、それぞれが想像する具体的なイメージは異なるので、ヒアリングでしっかりすり合わせていくことが大切ですね。
Mさん：続いてデザインのフェーズでは、あまりITに詳しくない方もサイトを見る可能性があることを踏まえ、さまざまな属性のお客様に見やすいと思ってもらえるよう、文字組や操作性などUIの部分にもこだわりました。
Yさん：実際にデザインが確定したら、デザイナーと共通認識をすり合わせてからコーディングに着手します。
仮に僕が担当じゃなくなった場合も、誰がいじっても崩れたりしない、修正がしやすいサイトにするために、デザイナーが作ったカラーやフォントサイズといったデザインルールを、コーディングの中でも活用しながら進めていきました。
サイト制作のリアルな裏側をたっぷり話していただいています💡
続きは「Web制作の専門家！デザインワーク部新設！後編【ザイナス】」へ・・・
来週の公開をお楽しみに！
＼🎊2023.12.15リニューアル！🆕ホームページはコチラ／
✅より詳しくザイナスについて知りたい方は ✔ こちら
✅ザイナスで働きたい！そんなあなたは✔️ こちら
ご質問は随時受け付けております。フォームよりお気軽にお問い合わせください♩