BASEでデザイナーをしている林です。
先日、BASEがショップオーナーさん向けに運営するメディアBASE Uから、「売上0→10ガイド」という新コーナーをリリースしました。
企画段階からマーケターの方と一緒に行い、私は各種ページのUIからイラスト・アイコン制作までを担当しています。
ざっくりと、つくったものはこちら。
キービジュアルとアイコン。これまでの記事コンテンツとは違う立ち位置であることを示すため、レイアウトも含めオリジナルなものを制作しました。
これまでの記事とは内容もやや異なるため、記事詳細ページのレイアウトも従来のものとは違うものにしました。
大まかにつくったものをご紹介しましたが、新しい取り組みで、分量的にも比較的多く、またページ内部のコンテンツ量も多いため、決めなければいけないことが非常に多いプロジェクトでした。
新しい機能や、新規のサービス、リニューアルなど「決めることの多いプロジェクトにデザイナーとして関わる」タイミングで参考にしていただけると幸いです。
今回リリースした「売上0→10ガイド」は、2021年の10月ごろからスタートした企画でした。
これまでBASE Uでは、ショップオーナーさんに向けた、BASEのノウハウ記事やインタビュー記事を中心にコンテンツを提供してきましたが、今回は「ショップ開設して、最初の売上を立てることに苦戦している方」に狙いを絞った機能でした。
そのため、記事の内容も、広い対象に対して提供していたコンテンツとは違うものに設計しなおしました。
ショップ開設を行って売上を立てようとする「比較的モチベーションも高い」状態の方々に向けて、(SEOなどは意識せず) 無駄を省いたコンテンツにすることにしたのです。
マーケメンバーからある程度企画の骨子が共有された後、企画を具体的な形に落としていきます。
まずは、ショップを開設したばかりのショップオーナーさんに対して、この機能を認知してもらえるためのネーミングを決めていきました。
温度感や、語呂なども含めてmiroで検討を重ねていきました。BASE Uの中の1コーナーという立ち位置で「BASE U虎の巻」という案や、記事コンテンツへのスタンスを表せるように「ガチBASE」などの案もありました (懐かしい)
マーケメンバーももちろんプロなので、考え抜かれた企画です。一方で「ユーザーであるショップオーナーさんがどう感じるのか？」など体験に関わる部分は、デザイナー目線で役立てる部分があります。
マーケメンバーがイメージするコンテンツにいかに近づけられるか、そしてデザイナーとしてよりよいものにしたいという気持ちから、積極的に企画に参加していました。
そして、ネーミングが固まったらUIデザインに入っていきます。
最初にお見せしたように、今回のプロジェクトでは、デザインするページも多く、新たなトンマナも決める必要がありました。
そこで、デザインではなるべく手戻りを少なく、早く良いものをつくるために「大きなところから決める」ように進めていきました。
まずは、全ての情報が集まっているガイドの一覧ページのレイアウトから着手しました。
コンセプトやターゲットを踏まえ、「教科書のように順序立てて記事を読み進めてもらう」ことを想定していたため、ステップごとに記事をレイアウトしてみました。
キービジュアルに使うイラストなどはまだつくらず、「なんとなくこういうもの」と別の素材を当て込んでいました。
ステップごとの記事を画面に入れ込んでみると、「思ったよりこのステップは記事数やボリュームが多い」ことが見えてきます。そこで、ショップオーナーさんが進めやすいようにコンテンツの修正もマーケメンバーと行っていきました。
コンテンツが絡む時はマーケメンバーに、レイアウトなどデザイン面の相談はデザインチームメンバーに、つくり進めながら、詰まったポイントは頻繁に確認をすることで方向性をこまめに修正しました。
そして、実装がある程度スタートできる状態になってから、配色の決定、アイコン・イラストの制作へ。
BASE Uの通常記事と「売上0→10ガイド」では記事の方向性も違い、より「売上をあげるためには」に特化したコンテンツのつくりになっています。
通常記事の親しみやすい、柔らかい配色をそのまま使うのではなく、よりビジネスライクでタフな印象にするために、紫や濃い緑などはっきりとした色味を選択しました。
アイコンに関しても、これまでBASE Uでは記事の種類ごとに色で識別できるようにしていたので、被らないように売上0→10ガイドではアイコンの種類や、形そのもので識別できるようにしました。
売上0→10ガイドは、ステップを順番に踏んでいくことで売上を立てられることを目指したものなので、アイコンもステップごとに枠の形を変えて、バッジを獲得していくような世界観にしてみました。
そして、AfterEffectsでモーションを加えて完成させました。
最後はトップページのイラスト制作。売上を立てることを登山をモチーフにしてみました。
- 一歩一歩積み重ねてゴールを目指していく様をモチーフに。
- 頂上についたときに売上10万円を達成できるような表現に。
ということを意識してみました。
グラフィックは視覚的に期待値を調整できるものなので、最後まで「どのぐらいの温度感で伝わると良いか」は気にしていました。
私はイラストが特別得意なわけではないので、トンマナやモチーフが固まってきてから、半分気合いでやり切りました (笑)
こうしてデザインがFIXし、開発・コンテンツの入稿が終わり、昨年末に「売上0→10ガイド」をリリースすることができました。
一緒にプロジェクトを進めたマーケメンバーからもコメントをいただけました。
UIからイラスト・アイコンまで幅広く制作をしましたが、いわゆる「スーパークリエイティブ」なアウトプットでメンバーを驚かせるようなことはしてません。
デザインの大きな部分から決めていくこと、適切なメンバーにレビューをもらうこと、レビューしやすいようにレビュー依頼をすること、などの当たり前の部分がほとんどです。
また、レビューを頻繁にしあえるようなカルチャーであることも、進めやすかった要因の一つかもしれません。
UIデザインが絡むプロジェクトや、デザインに関わる多くのことを決めていくプロジェクトにおいて「大きな部分から決めていく」ことについて、新機能を例にまとめてみました。
私自身、根底には「マーケメンバーもプロなので、素晴らしい企画を早く世の中に届けたい！」という気持ちもあるので、職種関係なく頻繁にレビューをもらっています。
まだまだ苦戦することも多いのですが、何かの参考になると嬉しいです！
それでは！