inFablic | Fablic, inc. Developer's Blog.

フリマアプリ フリル (FRIL) を運営する Fablic の公式開発者ブログです。Fablic のデザイナー・エンジニア・ディレクターが情報発信していきます。

FRILのデザインレシピ 〜キャンペーン編〜

f:id:kitach:20171212225438j:plain

こんにちは、デザイナーの@kitachです。
これはFablic Advent Calendar 201714日目の記事になります。

私は第二新卒として今年の8月に入社しました。前職は乙女向けアプリゲームのデザイナーで、 ゲーム特有の盛り盛りな表現ばかりしていました。なので、シンプルでオシャレなフリルのデザインを提案できるようになるまで、結構な日数を割いてしまった自覚があります😅

今回は、その経験をもとに『フリルのデザインとはなにか』を検証して、フリルのデザインレシピなるものをまとめてみました。


FRILのデザインレシピ 〜キャンペーン編〜

前提として、キャンペーンはアプリ内部で掲載するので、フリルに馴染むクリエイティブを用意する必要があります。まずは、フリルを形作るデザイン要素を大きく3つに分類してみました。

1.ガイドライン

フリルにはクリエイティブのガイドラインが用意されています。 ガイドラインの活用によってフリルの統一感を担保できるので、 まずは要点を覚えて基礎力を培い、そこから応用できるように励みました。

●カラーガイドライン f:id:kitach:20171212192651p:plain

●フォント(フリルで丸いゴシック体を使う場合、下記のフォントが推奨されています) f:id:kitach:20171212204743j:plain

カラーガイドラインと推奨フォントの組み合わせは、例えば毎月開催しているフリルくじで確認できます。

f:id:kitach:20171212204901p:plain

私の作例も見てみましょう。

A.ガイドライン使用例 B.ガイドライン応用例
f:id:kitach:20171213141624p:plain f:id:kitach:20171213141642p:plain

Aはガイドラインに沿って構成し、Bはカラーでフリルらしさを調整し、 フォントはハロウィンの世界観に合わせました。 ガイドラインを自分の中で落とし込めたことで、状況に応じた構成を展開できるようになりました。

2.ライティング

フリルのデザイナーは、多くの場合バナーやLPのライティングも担当します。 そもそも、fablicはユーザーファーストを尊重する社風なので、ユーザーに対する言葉選びはデザイン以上に慎重に行わなければいけません。

  • ユーザーにダイレクトに伝わるか
  • こびた表現をしていないか
  • 歯切れよくリズムのいい改行を作れるか

私はこの3点の軸からずれない、清潔感のある言葉選びを心がけています。
その上で、自分のライティングを比較してみました。

A.過去のライティング B.最近のライティング
f:id:kitach:20171213141924p:plain f:id:kitach:20171213141942p:plain

Aが入社当時、Bが最近のライティングです。 客観的にもBの方がコンテキストがスッと入ってくるので、成長を感じます。(雑に褒める)

3.商材の扱い方

フリルの出品商品は、すべて広報素材として選定の対象になります。 デザイナーは、バナーに掲載する商品をピックアップする役も担いますので、膨大な出品の中からキラリと光る原石を見出すバイヤー的な能力も必要です。 私が選定作業を行う時は、経験から下記の条件を満たす素材を選ぶようにしています。

  • 訴求力のある人気商品か
  • レタッチしやすそうか(見切れがない/解像度が高い)
  • 使用したい素材を全て並べた時に、配色に偏りがないか

それらを意識して生まれたのが、こちらのバナーです。

f:id:kitach:20171212203631j:plain

工数が莫大にかかるデザイナー泣かせの作業なので、 回を重ねるごとに選定条件をアップデートして、工数削減能力も磨いているところです。


これらの3要素をレシピに組み込み、調理すればフリルらしいデザインの出来上がりです。

そして、仕上げの「デザインレビュー」

Fablicのデザイナーは、納品前に制作物を第三者の視点で 総合的にジャッジしてもらう「デザインレビュー」を行います。 そうすることで、フリルらしいデザインを安定してリリースできるのです。

ちなみに、デザインレビューはこんな感じで進行します。

f:id:kitach:20171213202310j:plain

私(´-`).。oO(確かにアプリ内で目立たなそう、修正するぞ!)

f:id:kitach:20171213202337j:plain

私(´-`).。oO(全体的にガタガタしてたわ、修正するぞ!)

f:id:kitach:20171213195724j:plain

私(´◉◞౪◟◉).。oO(やったぁっぁぁぁぁぁぁx)

デザインレビューから学ぶことは大きく、 過去の指摘箇所が今回は一発で通過したりすると、デザイナーとしての成長を直に感じられます。 また、他デザイナーのデザインレビューを見ることで客観的な学びを得れます。 デザイナーにとって、とても有益なコミュニケーションの場になっています。

要するに、何を言いたかったのかというと…

実家の壁紙は淡いピンクだったのに、いきなり林◯ペー的なキツイピンクになっていたら「!?」ってなりませんか? 私の作るキャンペーンが、そのような驚きをユーザーに与えるのはよくないですよね。
だからこそ「デザインレシピ」を考案して、フリルという実家に馴染むクリエイティブを提供できるようチャレンジしています。 まだまだ、自分なりの見解によるところが大きいかもしれませんが、 どんどんレシピをアップデートしていきたいと思います!