RACCOON TECH BLOG

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。

ラクーンのデザインクオリティ管理方法、教えます!

こんにちは!昨年からデザイン戦略部で部門長を務めています「さとぅ」です。
どのデザイン会社や組織でもクオリティを担保するためのチェックを行いますが、ラクーンのデザイン戦略部(以下デザ部)でも「カンプチェック」という名前でデザインのクオリティ管理を行っています。
今回はこのカンプチェックについて、何を目的としてどんな方法で行っているかご紹介していきたいと思います!

カンプチェックとは

まずは「カンプ」という言葉のおさらいから。
カンプ= Comprehensive layout(包括的レイアウト)で、すべての要素がそろった状態の仕上がり見本のことを「カンプ」と言います。
デザイン業界ではデザイナーとクライアントのイメージを共有するための「仕上がり見本」をデザインカンプと呼んでいます。
デザ部ではデザイナーが制作したデザインカンプを、部内のスキル上位者がチェックすることを「カンプチェック」と呼んでいます。

次にカンプチェックが制作フローのどのタイミングで行われるかご紹介します。

1.依頼者から依頼内容をヒアリング

2.カンプ作成+セルフカンプチェック
 └チェック者へチェック依頼を投げる前に、カンプチェックと同等のチェックをセルフで行います。

3.カンプチェック+フィードバック
 └スキル上位者がチェック依頼の内容をもとにチェックを行い、デザイナーへフィードバックをします。

4.修正→再度カンプチェック依頼

5.依頼者+関係者チェック

6.マークアップ+QA

7.リリース

このようにデザイナー自身が「セルフカンプチェック」を行いスキル上位者が「カンプチェック」を行うことで、デザ部内でデザインクオリティをしっかり担保してから依頼者へお渡しするフローになっています。

カンプチェックを行う2つの理由

1.デザインの『クオリティ管理』をするため

デザイナーの制作物を見たり使ったりするのは、依頼者(クライアント)ではなくサービスを利用しているユーザー、もしくはサービスの見込み客です。
デザイン(見た目や使いやすさ)に対するユーザーの評価は、デザインそのものに対してではなく会社やサービスに対する評価になります。
つまりデザイナーの制作物は「自分の作品」ではなく「会社の商品」であり、デザイナーごとに『クオリティ管理』をするとスキルや好みによってクオリティにバラつきが生じてしまいます。
「会社の商品」である以上、統一感のないクオリティは会社やサービスの質に悪影響を及ぼしてしまいます。
そこでデザインのスキル上位者が「客観的視点」+「技術的視点」でチェックをし、クオリティのバラつき防止+安定したデザインを担保するための『クオリティ管理』が必要になります。

2.デザイナーの『教育・成長フォロー』をするため

デザイナーのスキルを向上させるための効果的な方法は、先輩デザイナーが制作物をチェックしてフィードバックをすることです。
チェックをすることで、デザイナーでは気づけないミスに対しての指摘・改善ポイントのアドバイス・ノウハウやナレッジを伝えることができます。
組織としてスキルの高いデザイナーが増えれば会社も成長できるので、デザイナーのスキルを向上させるためにも『教育・成長フォロー』が必要になります。

カンプチェックでやっていること

では「カンプチェックを行う2つの理由」を軸に、具体的にやっていることを詳しくご紹介していきます!

1.デザインの『クオリティ管理』でやっていること

A.デザイン性・サービスとしての統一性をチェック
会社として、またサービスとして制作物に...

  • ミスがないか
  • 統一感があるか
  • 見た目に美しいか
  • という点をチェックします。
    チェック項目は以下の通り。

  • 表記や文言、レイアウトやデータに間違いはないか
  • サービスとして統一感のあるクオリティになっているか
  • サービスのデザインルールに沿っているか
  • 他ページの表記、レイアウト、カラー、UIパーツと比べて違和感はないか
  • レイアウトや配色、余白感は適切か
  • 一般的なデザインセオリーから逸脱していないか
  • B.客観的視点でのチェック
    「ユーザー視点」と「依頼者視点」、2つの視点からチェックを行います。

    ユーザー視点(ユーザビリティ):

  • 見やすいか
  • 使いやすいか
  • 分かりやすいか
  • チェック項目は以下の通り。

  • 視覚的に見やすく、目の負担が少ないデザインになっているか
  • ユーザーが感覚的に使える設計になっているか
  • ユーザーにとって分かりやすい情報設計、レイアウトになっているか
  • 依頼者視点(要件精査):
    チェック者は見た目や使いやすさのチェックとセットで依頼内容もチェックします。
    依頼内容に対して制作物の表現が妥当か・課題が解決できるかをジャッジするために、依頼内容は欠かせない情報となります。

  • 依頼内容と目的・ゴール
  • 依頼者意図
  • 依頼の妥当性
  • これらに対しての表現の妥当性
  • チェック項目は以下の通り。

  • 依頼内容や目的を踏まえた表現になっているか
  • 依頼者の意図に対して適切な提案、表現ができているか
  • 依頼内容そのものは妥当か
  • 2.デザイナーの『教育・成長フォロー』でやっていること

    カンプチェック後のデザイナーへのフィードバックでは、修正点を伝えるだけはなくデザイナーの成長を目的としたアドバイスも行います。
    修正の必要性+どうすればデザインが良くなるかを分かりやすく説明し、ノウハウやナレッジを伝えることでデザイナーのスキル向上に繋げます。
    チェックを通じて後輩デザイナーが先輩デザイナーとコミュニケーションをとる良いキッカケにもなっています。

    フィードバックのメリットは、デザイナーの成長だけでなくチェック者自身の成長にも繋がっている点です。
    他者の制作物を見ることで客観的な視点が鍛えられ、修正点やアドバイスを分かりやすく言語化して伝えることでアウトプット力が鍛えられます。
    ノウハウやナレッジを伝えることは自分の経験を振り返る良い機会にもなります。
    このようにカンプチェックはデザイナー・チェック者が互いに成長するためのコミュニケーションツールとしての役割も担っています。

    デザイナーが成長するためのフィードバックのコツを一部ご紹介!

  • フィードバックでは抽象的な表現は避けて分かりやすい言葉で伝え、それが難しければサンプルなど用意する。
  • 細かい指示を出すのは最後の手段、ヒントを与えて時間がある限りデザイナーに考えてもらい提案をもらうようにする。
  • 過剰なダメ出しによってデザイナーの人間性を否定しない。(何回も言ってるじゃん、どうしてできないの?デザインの才能ないんじゃないの?とか...)
  • フィードバックを受けるデザイナーは、アドバイスに対して「否定された」「評価されなかった」などネガティブに捉えるのではなく、「成長するためにフォローしてくれている」と捉えるようにして、お互いポジティブなコミュニケーションを心がけることが重要!
  • フィードバック方法

    デザインの修正度合いが一目で分かるようA.B.C.Dの4つのレベルで判定をしてデザイナーへフィードバックをします。その名も「泣き判定」!
    デザ部には「泣きデザイン」というアイデンティティがあります。「全米が泣いた」のように「泣く=感動」と解釈し「感動するデザインを作ろう」という意味が込められた造語です。この「泣きデザイン」から「泣き」を取って判定にくっつけたものが「泣き判定」です。
    ※「泣きデザイン」については別の機会にブログに載せようと思います、お楽しみに!
    ラクーンでは掲示板形式の依頼ツールやbacklogで依頼を管理していて、デザイナーがカンプを作成したら掲示板からチェック者へチェック依頼→カンプチェック→依頼にレスする形で「泣き判定」と一緒に修正指示やアドバイスを記載してフィードバックをします。
    では各判定レベルの詳細を見ていきましょう!

    【A】泣き! = 修正なし

  • チェック基準をクリアしている
  • 完成されている(ツッコミどころがないぐらい完璧!)
  • 【B】泣き = 修正すると良くなる(修正必須ではない)

  • クオリティに問題はないが、ひと手間加えると良くなる
  • チェック基準は完全にクリアできていないが修正の必要なし
  •  └クオリティより納期優先の場合
     └デザ部としてこだわりたいがユーザー視点で問題がない場合

    【C】ちょい泣き = 修正必須

  • チェック基準をクリアできていない
  • 一般的なデザインセオリーに反している
  • 要望、要件を満たしていないクオリティ
  • 【D】泣けぬ = 修正必須、または作り直し

  • チェック基準をほぼクリアできてない
  • 要望、要件を無視したクオリティ
  • 要望、要件からしておかしい
  • ※要件から見直す場合は、デザイナー+チェック者+依頼者で調整が必要になります。

    デザイナーがやること

    セルフカンプチェック

    カンプ制作後、まずやることはデザイナー自身でカンプをチェックすることです。
    自分の制作物のクオリティに責任を持つためにも重要なフローになっています。
    チェック項目はカンプチェック時のものとほぼ一緒の内容になっています。

    デザイン性・サービスとしての統一性

  • 誤字、脱字、レイアウト崩れはないか
  • データに不備はないか
  • サービスのデザインルールや既存デザインを意識して制作したか
  • レイアウトや配色、余白感は適切か

    ユーザー視点(ユーザビリティ)

  • ページ遷移前後で違和感はないか
  • 各デバイスでの表示は考慮されているか
  • 視覚的に見やすく、目の負担が少ない表現になっているか
  • ユーザーが感覚的に使える設計になっているか
  • ユーザーに誤解を与える表現、デザインはないか
  • 依頼者視点(要件精査)

  • 依頼内容や目的、依頼者の意図を理解した上でデザインをしたか
  • 依頼目的を達成するための提案はできたか
  • 最後に

  • 自信をもって「泣きデザイン」と言えるか!!
  • カンプチェック依頼

    セルフチェック完了後にチェック者へカンプチェックを依頼します。
    チェックしやすいよう依頼方法は以下のようにテンプレ化されていて、デザイナー自身が依頼内容を振り返るためにも活用しています。
    フィードバックの内容や修正のやり取りをログに残すためにも、口頭で伝えたりメッセージでのやり取りはせず掲示板やbacklogに記載することを心がけています。

    対象ページ

  • 変更・改修をするページのURL、新規作成はリンク元ページのURLなど
  • 確認対象ファイル or フォルダ

  • カンプチェックする制作物の保存先パス
  • 依頼背景

  • 依頼者が課題だと思ったこと、課題だと認識するに至った経緯
  • 「誰のために」「何を」「どんな形で」「どうしたいか」
  • 何をもってゴールとするか、KPIなどの定量目標、顧客満足度UPや作業効率UPなどの定性目標
  • チェック者に伝えたいこと

  • チェックに必要そうな情報(mtgの議事録や提案内容、制作で意図したことなど)
  • チェック期限

  • いつまでにチェックしてほしいか希望日時を指定(ない場合は未記入)
  • どんな人がカンプチェック者?

    主にデザインスキルが高いメンバーがカンプチェックを行っています。

    スキル上位者

    デザ部ではデザイナーのスキルを5段階評価で数値化していて、このスキル値が高いデザイナーをスキル上位者と呼んでいます。
    チェックをするためにはスキル値が高いことが条件になるため、ノウハウやナレッジが豊富なスキル上位者がチェックを担当をしています。

    ディレクター・アカウントリーダー

    プロジェクトでデザイナーの管理をするディレクターや、各サービスの依頼窓口を担当するアカウントリーダーは、サービスの理解度が高く制作物のクオリティの管理ができるためカンプチェックを行います。

    その他

    小規模案件のカンプチェックをスキル上位者ではないデザイナーが担当するケースがあります。
    「教育・成長フォロー」でご紹介した通り、デザイナーは他者の制作物のチェックを経験することで、客観的視点やアウトプット力を鍛えることができます。
    将来的にデザイナー全員のスキルが向上して、カンプチェックではなくデザイナー同士でチェックが完結したらいいなあ、と思っています。

    まとめ

    最後に今回の記事のまとめです!

  • ラクーンではデザインのクオリティを担保するために、スキル上位者による「カンプチェック」を行っています。
  • セルフカンプチェック+カンプチェックでクオリティをしっかり担保してから依頼者確認へ進みます。
  • カンプチェックを行う2つの理由は「デザインのクオリティ管理」「デザイナーの教育・成長フォロー」です。
  • デザイナー視点と客観的視点からクオリティをチェックし、修正点の指摘とアドバイスをセットで「泣き判定」でフィードバックをします。
  • カンプチェックは後輩デザイナーと先輩デザイナーが互いに成長できるコミュニケーションツールにもなっています。
  • カンプチェックは基本的にスキル値の高いデザイナーが担当しますが、将来的にデザイナー同士でチェックが完結する文化にしたいです。
  • いかがでしたか?
    ラクーンのカンプチェック文化はデザイナー+チェック者双方の意見を取り入れこの形になりましたが、今回ご紹介した仕組みはまだまだ完成形ではありません。
    新しいデザイナーが増えたり新しいツールを導入するなど、環境の変化によってカンプチェックの仕組みもアップデートしていく必要があります。
    そのためには継続的にカンプチェックについてデザイナーと意見交換をし、新しい運用方法を模索していくことが重要だと思っています。

    最後まで記事を見ていただき、ありがとうございました!

    一緒にラクーンのサービスを作りませんか? 採用情報を詳しく見る

    関連記事

    運営会社:株式会社ラクーンホールディングス(c)2000 RACCOON HOLDINGS, Inc