akiyamaTeamエイチームコマーステックDate2022/02/07Indexペットフードブランド「Obremo」の販売サイトのエラーページをデザインすることにターゲットにとっての「エラーページ」とは?ネガティブからポジティブへの変換ブランドの「らしさ」をもって寄り添うまとめエイチームコマーステックでデザイナーをしている秋山です。普段、私は自転車専門通販サイト「cyma」のデザインをメインで担当しています。UIデザインを担当しており、プライベートでは趣味でイラストも描いています。今回は、404ページなどに代表される「エラーページ」のデザインについて、UIデザインはもちろんイラストのスキルも活用できたことをまとめられたらと思います。簡素になりがちなエラーページですが、どれもお客さまとの大事な接点です。手をかけすぎず、サービスの「らしさ」や「温度」を伝えるためのデザインをどうつくっていったのか、一つの事例として、同じような状況のデザイナーの方々の力になれると幸いです。普段は自転車ECのcymaでwebやグラフィックデザインを担当しています。今回は、先日社内でリリースしたロゴのガイドラインについてhttps://cocoda.design/35606/p/p1f60fecad0ef昨年12月ごろ、他メンバーが担当するペットフードブランド「Obremo」のシニアデザイナー章さんから声をかけていただき、Obremoのエラーページを作成することになりました。GitLabに起票されたイシューObremoは、飼い主とペットの、"家族の絆を深める、健やかで楽しい日々"の実現を目指して、昨年8月にリリースされたばかりのペットフードブランドです。サービスのコアをラフに作る、新規事業を3ヶ月でローンチするために取り組んだこと・捨てたことこんにちは、デザイナーの章(@xiolkee)です。(エイチーム歴はかれこれ4年目になりhttps://cocoda.design/28569/p/p979719ed028bリリース後まもないため、意図せず不具合が出る場面もあり、サービスを利用するお客さまに対して、何かしらの「エラーページ」を表示する必要性がありました。制作期間は約2日程度。他業務も進めながらだったため、作業自体は、実質6時間でした。ターゲットにとっての「エラーページ」とは?まずはざっくりと簡易なものをつくってみました。Obremoのシニアデザイナー章さんの元にレビューをもらいにいきます。そこで「エラーページに遭遇してしまった時の、がっかりした感情を、もっとポジティブなものに変換できないか」とのレビューをいただきました。「エラーページを見るのは、どんな人か?」に立ち戻ることに。Obremoではユーザーインタビューに基づいたペルソナをFigmaで管理しており、ペルソナに基づいてエラーページも再考しました。お客さまにとっては「せっかく興味関心を持って入ったのに、うまくいかなかった時に見る画面」であるため、機能や情報よりも感情面に寄り添ったデザインにしなおすことに。「温もり」「癒し」「可愛らしさ」をキーワードに、再度デザインをつくっていきます。Obremoで定めているカラーコードや、利用されているイラストといったブランドの要素を入れ込み、ターゲットに伝わるように改善しました。「温もり」「癒し」「可愛らしさ」を意識したもの「エラーページに飛んでしまった」というネガティブな感情をできる限り和らげられた感じはしますが、目標とする「ポジティブへの変換」にまでは届いていないようで、これも納得がいかず...。「マイナスな感情をゼロに」さらに「ゼロからプラスの感情に」まで持っていける表現方法を考えました。プラスへもっていく為に、次は「許せる」「クスっと笑える」「遊び心」を意識しました。Obremoのブランドコンセプトにもある「お客さまに寄り添う」というワードをヒントに、あたかも​​自分と同じ状況にいるワンちゃんが目の前にいるような画を考えました。最終的にFIXしたデザインがこちら。不具合の内容と、ワンちゃんの置かれている状況をリンクさせ、お客さまが見た時に、状況を直感的に理解しながらも、ネガティブな感情を持たず「なんか許せる」「ちょっと笑える」ような見た目になったんじゃないかと思います。エラーページはお客さまの期待に添えなかった時にだけ表示される唯一のページです。期待に背いてしまったお客さまの感情に対して、唯一フォローができるのページです。そんなお客さまの感情に、きちんと寄り添ったページであることを意識できたと思います。ブランドの「らしさ」をもって寄り添うこうして、実質6時間程度で、イラストを含むUIデザインの制作を終えて、エンジニアにお渡しすることに。したエラーページですが、あくまでObremoらしさは損なわないということを徹底してデザインしていました。カラーや配色バランスはもちろん、ブランドのイメージキーワードから外れたクリエイティブになっていないか、入念に確認をしながら進めていました。一つは、お客さまの感情に寄り添ったコミュニケーションを最重視して取り組んだことです。今回で言えば、「エラーに遭遇するというストレスを、許容しやすい事象に変換してみる」ことでした。「問題が発生しアクセスできない状態」を、「フードが多すぎて食べれないワンちゃんの状態」で表すなどです。エラーページに直面したときの感情に寄り添い、ネガティブな感情を持たずして、少しでも興味・愛着を持ってもらえるようなブランドの世界観をイラストに落とし込みました。本業以外で、趣味程度に描いているイラストで「実際から少し離れた、面白い状況をつくり出してみる」ということをやっているのが活きたのかもしれません。まとめ分量的には、決して多いわけではないエラーページですが、あまりデザインへの考え方が世に出ていないため、まずは私たちの例を出してみました。サービスによっても担当のデザイナーによっても大きく考え方は違うと思いますが、何かの参考になれば幸いです。