デザインの「速さ」と「質」を向上させるHLSプロセス

デザイナーの悩み
・依頼主からOKが出ずに、何度もやり直しになる
依頼主からのフィードバックを元に改修してもOKがでない
・依頼の方針が二転三転してデザインが終わらない

依頼主の悩み
・デザインが期待しているスピードで完了しない
・求めているアウトプットと違うんだけど、何がどう違うかフィードバックできない

上記のような課題を感じているスタートアップ企業やチームにおいて、HLSプロセスを導入すると、課題を解消し「スピードアップと質の向上」が期待できます。

ヒアリング、ロジカルシンキング、スタイリングの頭文字をとってHLSプロセスと呼んでみています。

... 🖋

デザインの質とは何か

「デザインの質」という言葉は大きいので、ここでは下記で考えてみます。

デザインの質 = 論理的完成度 × 感性的完成度

論理的完成度
目的の達成に必要な情報が過不足なく論理的に設計されているか。

感性的完成度
目的の達成に適切なモチーフの選定や要素の重みづけ、美しいグラフィックの仕立てにより、論理的完成度が増幅されているか。

たとえば、どれだけ美しい見た目にスタイリングされていても、論理が成り立っていなければ、そのデザインは機能しないのでかけ算になっています。

... 🖋

HLSプロセスの運用方法

どんなデザインタスクでも下記の3ステップを順に行う。依頼主(とデザインマネージャー)のOKが出たら次のステップに進む。

①ヒアリング（Hearing）
・デザインの目的をチームで明確に共有し、最も効果的な打ち手を選択する

②構成 (Logical thinking)
・目的を達成するための論理的完成度を高める
・「目的の達成に必要な情報が過不足なく論理的に設計されているか」をチェック

③スタイリング（Styling）
・感性的完成度を高めることで、論理的完成度を増幅する
・「目的の達成に適切なモチーフの選定や要素の重みづけ、美しいグラフィックの仕立てにより、論理的完成度が増幅されているか」をチェック

デザインのプロセスを3つに区切り、各ステップで依頼主とチームでチェックを行い進めていくことによって大きな手戻りを回避し、スピーディーにデザインを進められます。

... 🖋

①ヒアリング（Hearing）

なぜそのデザインが必要なのか？

背景や目的など、上流の部分からヒアリングし、テキスト情報として記録しながら言語化していく。

目的に合った他のよりよい打ち手が思いつく場合は、逆提案もできるとベター。

例「ECサイトプラットフォームを提供している事業会社にて」

◆依頼
ECサイト運営のTipsを紹介しているオウンドメディアにオンラインイベント集客のページと一覧ページを設置してほしい

◆依頼文だけから想像した目的
オウンドメディアからイベントの集客をしたい？

◆ヒアリングして分かった背景と目的
・イベントの周知と集客は主にSNSを使う
・ランディングページをオウンドメディアに集結させることで、イベントに参加応募したユーザーが他のコンテンツも回遊できるようにしてブランドへの関心を高めたい。

◆目的に適したよりよい打ち手
・オウンドメディア上に応募ページを作ると、SNSからランディングしたユーザーが応募前に他のコンテンツへと流れてしまう可能性がある
・応募ページは１枚もののランディングページを作り、参加応募のフォーム送信後に表示されるサンクスページとサンクスメールにオウンドメディアのコンテンツ等への導線を設ける方が効果的かつ実現工数も少ない

目的をヒアリングすることなく、依頼されるがままオウンドメディアにイベント集客のページと一覧を設置する方策を進めた場合。デザインと実装に2週間かけたものの、そもそもユーザーが訪れずにロイヤリティを高められないというbadケースに陥る可能性もあります。

私の経験上、依頼は依頼主の考えた打ち手とセットで相談されることが多いです。その際に、打ち手にフォーカスするのではなく、一度、目的に立ち返り依頼主と一緒にチームでベターな打ち手を探れるかがポイントです。

冒頭でも挙げたように「なぜそのデザインが必要なのか？」もっと言うと「なぜそれを行う必要があるのか？」を問い、依頼主とデザイナー自身で目的を言語化し認識を一致させましょう。

これにより、効果的な打ち手の考案とコストの最適化が見込めます。

... 🖋

②構成(Logical thinking)

次に目的を達成するために「論理的完成度」を築いていくフェーズが「構成」です。

ここでは極力、色・装飾・イラスト・写真などのスタイリング要素は使わずに、主にテキスト情報で「情報設計」を行い、目的を達成できるアウトプットのイメージをチームでスピーディーにすり合わせます。

UIの改善であれば、変更の範囲や動的な場合分けなどもここで見える化して確認します。

ユーザーが「なぜ？」「どうなった？」や「どうしたらいい？」などを解消できる情報の設計になっているか、ユーザー目線で確認しながら構築していくのがポイントです。

上記で例にあげた、サンクスページの構成を考えてみましょう。目的は「イベントに参加応募したユーザーが、他のコンテンツも回遊できるようにしてブランドへの関心を高めたい」です。

サンクスページの構成案

◆アイキャッチ画像
「応募完了した安心感」と「イベントが待ち遠しくなるワクワク感」を与え、ページをスクロールしたくなる画像

◆応募完了メッセージ
「ファンが集まるECサイトに育てる。ブランディング実践セミナー」にご応募ありがとうございます。オンラインイベントの配信URLと参加パスをメールアドレスに送付いたしましたのでご確認ください。

◆トラブルシューティングメッセージ
5分ほど経ってもメールが届いていない場合、XXXX@example.comからのメールが迷惑フォルダに振り分けられていないか、受信拒否になっていないか等ご確認お願いいたします。解決しない場合、運営（XX-XXXX-XXXX）までお問い合わせください。

◆関連したオウンドメディアの記事コンテンツや類似イベントの紹介（打ち手の実践）
・「商品ではなくブランドで売る。ECサイトとSNSでブランディングの始め方」（記事コンテンツへのリンク）
・「現代の消費者に選ばれるブランドの条件とは？ECトレンドレポート20XX」（イベント応募ページへのリンク）

◆SNSのフォローを促すCTA
XXXX公式アカウントでは、ECサイトの売上をアップする情報を毎日配信。フォロワー様限定イベントも定期的に開催中です。
[フォローする（公式アカウントへのリンク）]

もし仮に、構成をスキップして丸1日かけてスタイリングまで行ったデザイン案を出した場合、「アイキャッチ画像で伝えたいイメージが違った」や「つける必要のないヘッダーやフッターがスタイリングされている」「SNSのフォローを促すCTAが入っていない」など、やり直しだけでなく、作業がロストすることも起こり得ます。

それを回避し、目的に合ったデザインをチームでコミュニケーションしながら行うための重要なフェーズが構成です。

... 🖋

③スタイリング（Styling）

構成をベースに、レイアウト・色・あしらいなどグラフィックの仕立てを行い、論理的完成度を増幅させていきます。

構成で抽出したエッセンスを失わないように注意しながら、情報に重み付けを行い優先順位を作ることで、より「伝わりやすく・分かりやすく」「美しく・カッコよく」していく作業です。

ブランドのビジュアルアイデンティティを規定している場合、このフェーズで表現していきます。

ただ思い思いの色づけなどを行うのではなく、形や色に「意味・理由」を持たせられるとベターです。

また、スタイリングは「型」を準備しておくことで、毎回ゼロスタートではなく下駄を履いた状態でスタートできます。

たとえば下記のようなものが挙げられます。

◆グラフィックデザインガイドライン
・ブランドのビジュアルアイデンティティを表現するためのカラーパレットやタイポグラフィ、OK/NGな表現のサンプルなどを用意しておくことでグラフィックの完成度だけでなくブランドイメージの醸成も行える

◆UIデザインガイドライン
・カラーテーマや色の適用ルールなどだけでなく、ボタンやフォームなどUIパーツの振る舞いを規定しておくことで、インタラクションの考慮漏れなども回避できる

◆バナー・アイキャッチ画像のフォーマット
・メインコピー、サブコピー、モチーフなどを流し込むことで一定の感性的完成度を担保したグラフィックを作れる。ブランドイメージの統一にも効果的

◆スライド資料の雛形
・タイトルやセクションスライドのレイアウト、あしらいや配色・見出しのルールなどを規定しておくことで、資料全体に一貫性を作りストーリーをよりわかりやすく伝えられる。２つの資料を合体させたり、組み換えて別の資料を作ることも容易にできる

など

上記のような型を準備しておくことはスタイリングの時間の短縮につながるだけでなく、論理的完成度を高める「思考とコミュニケーション」に多くの時間を当てることができ、デザインの質を高めることができます。

また、スタイリングが一貫性を持つことによりUXの向上やブランドのビジュアルアイデンティティ醸成などにも効果的です。

もちろん、型の準備には工数を要しますが、行う頻度の多いタスクほど短期でペイすることができるでしょう。

... 🖋

まとめ

デザインの「速さ」と「質」を向上させるHLSプロセスと称して、取り組みを言語化してみました。

実際にHLSプロセスとは呼んでいませんが、私がマネジメントしているデザインチームで導入・実践している仕組みで、導入前に比べて「デザインの大きな手戻り」は減少し「デザインの質」も向上したと実感しています。

上記に寄与した要因の一つは、依頼主とデザイナーとの間で「コミュニケーションが増えた」ことです。

HLSプロセスの導入・実践によって得られるものは、デザインのアウトプットではなく「デザイナーとノンデザイナーの垣根を払い、チームでデザインする風土」かもしれません。