デザイン ビジュアルデザイン ナレッジシェア

SUZURIのLPテンプレ化と作字で遊ぶはなし

デザイン ビジュアルデザイン ナレッジシェア

この記事の担当 @mohariyoshi

はじめに

こんにちは、SUZURIデザイナーのモハゑです。

こちらの記事では、先日公開された『ビジュアルデザインの「表現」において大切なこと』という記事をベースに、

  • SUZURIの「アイテムLP」をテンプレ化した話
  • 削減した時間・整った場で「作字」で遊ぶ話
  • 敢えてテンプレを使わなかった話

などをご紹介します。

「アイテムLP」とは、SUZURIが新アイテムをリリースするのと同時に出す、アイテム紹介のランディングページのことです。この「アイテムLP」は、かつてはアイテムリリース毎にコンセプトを考えてデザインをつくる運用をしていましたが、現在は一部を除いてほぼテンプレ化しており、少ない手数でLPの効果を高められるような運用になっています。

【画像】SUZURIのテンプレ化された「アイテムLP」の例(サーモタンブラー・タオルハンカチ)

今回は、「テンプレ化」がもたらしたメリットを中心に、SUZURIならではの「遊び」の差し込み方などのお話をしていければと思います。

  1. はじめに
  2. テンプレがLPの目的をスマートに解決する
  3. テンプレ化すると「安全に遊ぶ場」が整う
  4. SUZURIは作字で遊ぶ
  5. テンプレを疑う心は常に持っておく
  6. まとめ

テンプレがLPの目的をスマートに解決する

『ビジュアルデザインの「表現」において大切なこと』の記事に則して、前提情報としてまずはアイテムLPの「目的」と「意味」をおさらいさせていただきます。(※『ビジュアルデザインの「表現」において大切なこと』の記事をまだ読んでいないな方は、先に読んでいただいたほうがこの記事の内容がわかりやすいと思います。)

アイテムLPの「目的」と「意味」は、ざっくり以下のような内容です。

【表(目的と意味を2行の表にまとめている)】1行目「LPをつくる目的」:1.新規アイテム認知 2.購買意欲・創作意欲向上 3.新規会員の獲得|2行目「目的を果たすためにLPに込める意味」:1.アイテムの特徴&良さが伝わる 2.作りたくなる、欲しくなる

この辺りは、一般的なLPと大差ないかと思うので詳しい説明は不要かなと思いますが、一言で言えば、「物の良さを知って行動につなげてもらおう!」という感じですね。

それでは、この「目的」と「意味」を踏まえて、『ビジュアルデザインの「表現」において大切なこと』の記事で説明があった「目的、意味、表現」の表に、今回の例を入れ込んでみます。

【表(目的と意味と表現を4行の表にまとめている)】1行目「LPをつくる目的」:1.新規アイテム認知 2.購買意欲・創作意欲向上 3.新規会員の獲得|2行目「目的を果たすためにLPに込める意味」:1.アイテムの特徴&良さが伝わる 2.作りたくなる、欲しくなる|3行目「一次表現(かつてのLP)」:1.モノを扱うので写真が必須 2.アイテムに合うビジュアルデザイン 3.アイテム作成・購入の判断に必要な情報が掲載されている|4行目「二次表現(テンプレ化したLP)」:1.モノを扱うので写真をメインに 2.アイテムに合うビジュアルデザインを作字・色選択の差分で表現 3.アイテム作成・購入の判断に必要な情報が一箇所に集約されている

上記キャプチャの通り、今回の事例では「一次表現」と「二次表現」を、それぞれを以下のように定義しています。

では、「一次表現」と「二次表現」にはどのような差分があるのかを見ていきましょう。

【表】一次表現と二次表現の内容を説明したテキストの差分を色分けして説明している

今回は業務効率化の意図もあったため、このように、二次表現(テンプレ化したLP)では表現の幅が狭まり、より適した表現を狙い撃ちしたかたちになりました。つまり、二次表現(テンプレ化したLP)は、目的達成・意味実現のために「情報を極限まで削ぎ落とした」状態と言えます。

このように、毎回コンセプトから考えてデザインしていたLPを「テンプレ化」したことで、工数を大幅に削減しながらも、目的・意味を叶えることができる状態になりました。

※もちろんこれは、「一次表現」より「二次表現」が優れているという話ではありません。サービス内でのコンテンツの立ち位置や対ユーザーとのコミュニケーションを鑑みて、適切な表現方法を都度選択していくことが大切です。

テンプレ化すると「安全に遊ぶ場」が整う

「情報を極限まで削ぎ落とした」状態を「テンプレ」としたことで、何が生まれたでしょうか。それは「安全に遊ぶ場」です(やった〜!)。『ビジュアルデザインの「表現」において大切なこと』の記事でも、「(表現が)適切である」条件のひとつとして、「遊びがあること」ということが触れられていましたね。

この記事で言うところの「安全に遊ぶ」とは、以下のような状態のことです。

  • テンプレが骨組みとなり、はっちゃけても根底(目的・意味を達成すること)が壊れない状態。
  • テンプレを用いることで考えることを減らし、遊びに関する工数が確保されている状態。

また、加えてSUZURIは、サービスのブランド的にだいぶ砕けた表現が許容されていたり、さらに、「アイテムLP」の立ち位置的にも「SUZURIの主要機能に抵触しないポジション(下記図参照)」である、という背景があり、上記の状態からさらにプラスアルファで安全度が増している環境でした。(ありがたい!)

【図】SUZURIのメイン機能である「つくる」「買う」に抵触しない場所に「アイテムLP」たちは存在しているという説明図

デザインにとって「遊び」は、プラスアルファ的要素ではあるもののとても重要なので、積極的に遊びたいですよね。「担当サービスのブランド的に遊ぶ隙間が無い!」というかたは、このような立ち位置のコンテンツを新規でつくったりなどして、遊ぶ場所をつくってしまうのも良いかもしれません。このような立ち位置のコンテンツは、サービスのコアには影響しない安全性を持ちながらも、集合体になることで、ブランドの価値向上に寄与する可能性も秘めていると思います。

SUZURIは作字で遊ぶ

このような感じで「遊ぶ場」がだいぶ整った「アイテムLP」では、タイトル字で遊ぶことにしてみました。タイトルとなる「アイテム名」をただテキスト情報で済ませるのではなく、「作字」してビジュアル情報化するのです。そうすることで、テンプレ化されたLPであっても、それぞれに個性と色が加わり、「今回はどんなLPかな?」という楽しみも生まれます。

【画像】作字をしたLPのキャプチャ(タオルハンカチ・クリアマルチケース)

【画像】作字だけをいくつか集めた画像(グラス・吸着ポスター・クリアファイル・バンダナ・エコバッグ・クリアマルチケース・タオルハンカチ)

また、アイテムLPの作字は、遊びの役割だけでなく、『ビジュアルデザインの「表現」において大切なこと』の記事に書かれているような、「アイテムを記号として解釈する役割」も担っています。

これらの作字は、そのアイテムの「雰囲気」や「らしさ」を取り入れるようにしています。つまりそれは、アイテムの特徴を記号として解釈し、それをビジュアルで表現しているということです。(この辺りは、無意識にやっているデザイナーが多いかと思います。)

【画像】バンダナの作字の例:布感、はためきそう、繊細さ

【画像】グラスの作字の例:ノスタルジック感、ガラスの繊細さ、硬さ

また、アイテムLPの場合は、写真とセットで使われることが決まっているので、写真と作字が相乗効果でより引き立つように調整しています。そのため、アイテムの特徴だけでなく、写真の雰囲気や写真内のアイテムデザインを記号として解釈したりなどもしています。

テンプレを疑う心は常に持っておく

このように、二次表現として出来上がった「テンプレ」はとても便利なのですが、すべての状況で最善な効果を発揮できるかと言えば、やはりそうではありません。ここでは、「バンダナ」のアイテムLPを例に挙げて、改めて「目的や意味に立ち返って考えたできごと」を紹介します。

「バンダナ」のアイテムLPでは、いつもどおりテンプレを使う予定で、それ前提で撮影などを完了させていました。しかし、いざ素材を当て込んでみると、なんというか、「コレジャナイ感」がありました。

【画像】畳まれたバンダナたちの写真をテンプレ内のメイン写真にしているLPのキャプチャ

コレジャナイ理由を考えてみたところ、「バンダナの質の良さを伝える一つのポイントとして、”大きなサイズ感”というのがあるな」という点に気づきました。そこで、写真一覧で使おうとして撮ってあった写真を当て込んでみました。

【画像】広げたバンダナに手を添えた写真をテンプレ内のメイン写真にしているLPのキャプチャ

しかし、写真の要素的には役割を果たしていても、ページの全体としては「シンプル過ぎて場が持っていない」という印象です。また、LPはページ幅が変わると写真の表示の幅も可変する仕様のため、ブラウザの幅によっては、アイテムや腕が意図しない切れ方になってしまうことも想像できました。

アイテムLPの目的は、「物の良さを知って行動につなげてもらおう!」だったはずです。モノの印象を微妙な感じにしてしまうこの状態では、「目的」を果たしているとは言えません。よって「テンプレではだめだ〜!」と判断し、ヘッダーを新しく組み直してリリースすることにしたのでした。

【画像】テンプレを使わず、広げたバンダナに手を添えた写真に加えて他のバンダナも周辺に入り込ませたLPのキャプチャ

デザイン的にも手間的にも、テンプレを利用した場合と比較したら「ちょっとした違い」なのですが、やるのとやらないのでは印象が大きくかわり、ページのコンバージョンにも影響してくると思います。

サービスの運用上、様々なことがテンプレ化・ルール化されている場面も多いと思いますが、どのような状況でも「それを疑って目的に立ち返る可能性」を念頭に置いて、常にベストな状態で「目的を果たす方法」を考えることが大切ですね。

まとめ

今回ご紹介した「SUZURIのビジュアルデザインの表現ポイント」は以下の3つでした。

  • 目的達成と意味実現のために要件をギリギリまで削ってみると、良いことがあるかも。
  • 遊ぶためには、まず場を整える。
  • テンプレやルールをいかしつつも、目的達成の弊害になっている部分は無いかを常に考える。

継続している施策は、ある程度の段階で「工数を削減して同じ効果を出す」というやり方に切り替えることがとても大切だと思います。空いた時間で遊びをプラスして取り入れてみたり、新しい施策に挑戦してみたりすると、自分の仕事をおもしろくすることにもつながるし、ユーザーの体験をより良いものにすることにも繋がります。

みなさんも是非、身の回りの施策を改めて見直して、仕事とサービスをもっとおもしろくしてみてください!