クイック エンジニアリングブログ

株式会社クイック Web事業企画開発本部のエンジニアリングチームが運営する技術ブログです。

サイトのビジュアルアイデンティティ確立のお話

こんにちは。デザイナーのタニモです。
桜が見頃の季節になってきましたが、皆さんはいかがお過ごしでしょうか。私は花を見るよりも花粉と奮闘する日々を送っております、、

突然ですが、皆さんはビジュアルアイデンティティ(以下、VI)というものをご存知でしょうか。VIとは一般的に、ロゴ ・シンボルマーク・色・フォント・グラフィックなど、企業やブランドを象徴するデザイン要素一式をガイドラインにまとめたものを指します。ガイドラインで定めたルールで様々なデザインを展開することで、顧客や社会に対し、視覚的統一性のあるブランド訴求を行うことができます。
今回は、私が担当しているプロジェクト(以下、PJ)である「看護roo!転職サポート(以下、転サポ)」において、サイトとしてのVIを新しく作り、サイト内のビジュアル品質を管理する体制を整えた取り組みについてご紹介したいと思います。

サイト内施策のデザインで困っていたこと

私がまだPJに参画したての頃の話ですが、サイト内の施策として画像(写真/イラスト/図版など)を作成する際、私が提案したデザインに対してPJメンバーからよくこんなコメントをもらうことがありました。
「このデザインは転サポっぽい。」「これはあまり転サポっぽくないかも‥」「悪くないけど、今までにない。ありなのかな‥?」
「転サポっぽい」とは具体的にどのようなデザインを指すのか。「大人かわいい」「綺麗で透明感ある雰囲気」など、目指している方向性やキーワードは存在していましたが、特にガイドラインが設けられているわけではなく、表現もやや抽象的で、人によって受け取り方が変わりそうな内容のものでした。
一方、UIにおいてはデザインシステムで品質管理が徹底されていましたので、写真やイラストなどのサブグラフィック・エレメントにおいてもガイドラインを設け、PJメンバーで共通認識を持つことができれば、品質を一律で管理できるのではないかと思い、VIを確立することを提案しました。

ビジュアルアイデンティティの役割

今回、VIで「転サポらしさ」を定義することで以下の課題を解決したいと考えました。

  • 施策のデザインを提案する際、初稿の精度を上げたい。
  • 目指すビジュアルの方向性をPJメンバー間で統一したい。
  • PJに相応しいビジュアルかどうか、品質チェックの指針がほしい。

デザインシステムとの役割の差別化として、デザインシステムはサイト内のUIデザインの仕組み・ルール。VIはサイト内のサブグラフィック・エレメントのビジュアル方針・世界観という位置付けになります。この2軸を使ってデザイン制作を効率化すると同時に、「転サポらしさ」をより盤石にしてくことが、今回の取り組みの狙いです。

ビジュアルアイデンティティの確立フロー

ここでは、VI確立に至るまでのフローを簡単にご紹介します。
まずPJの主要メンバー複数人でグループワークを行いました。内容は、miro(オンラインホワイトボードソフト)で事前に私が用意したムードボードを参加メンバー全員で見ながら、それぞれが思う「転サポらしさ」「目指したいビジュアル」について、ざっくばらんに意見を言い合い、認識を擦り合わせていくというものです。
ムードボードの内容は、目指すビジュアルのキーワードとして挙がっていた「かわいい」「女性らしい」に関連する画像資料を大量に収集し、ある程度グループ分けして一覧化したものです。写真の雰囲気、イラストのタッチ、色、フォント、装飾、余白など、ビジュアルを構成する要素を1つ1つメンバーで議論しながら方針を定めていきました。
「かわいい」という言葉はよく使いがちですが、「かわいい」に関連するビジュアルは世の中には無限に存在するめ、転サポではどんな「かわいい」を目指すのか、意見を集約させていくのにとても苦労しました‥汗
擦り合わせた各デザイン要素の方針を、最終的に1つのドキュメントとしてまとめ、運用ルールを定めて完成です。既存のデザインシステムからも導線を繋げ、PJメンバーが日々の制作業務で使いやすい状態になるような配慮もしました。
以下は、作成した転サポサイトのVIの一部抜粋です。

改善したこと

今回VIを確立したことで、デザインの制作フローにおいて特に以下の点で私は改善を感じることができました。

  • デザインの案出しで方向性に迷うことがなくなり、デザインが着地しやすくなった。
  • デザインのOK/NGラインが明確になったことで、精度の高い品質チェックを行えるようになった。
  • 今までよりも新しいビジュアルにチャレンジしやすくなった。
  • 新メンバーにサイトのビジュアル方針を伝えやすくなった。

今回の施策は、結果としてほぼ私自身の日々のデザイン業務を効率化するためのものではありましたが‥w VI導入前よりも快適に制作を行えるようになり、生産性と品質の向上に少しばかり貢献できたのかなと感じています。また、自分が普段業務で感じた課題に対し、周りのメンバーを巻き込んで実施まで至れたという職場環境が、何より恵まれていると改めて感じた経験でした。
担当PJの規模や内容によって向き・不向きはあるかと思いますが、皆さんもデザイン制作を効率化する1つの手段として、ぜひVIの確立にチャレンジしてみてはいかがでしょうか。

最後までお読み頂きありがとうございました。
デザインの力で私たちと一緒にクイックの事業発展・拡大に貢献してくれる方、いつでもお待ちしております!


\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! //

919.jp