1 pixel|サイバーエージェント公式クリエイターズブログ

サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。


Theme:

デザイナーをやる気にさせる10のこと

 

マネジメント側がデザイナーに対して「何を意識すればいいのか」「何をしちゃいけないのか」。組織の中でデザイナーがより輝くための方法とは?

クリエイティブ 執行役員の佐藤による記事を公開しました!

 

記事詳細はこちらから↓

https://developers.cyberagent.co.jp/blog/archives/2481/

 

 

-----

【お知らせ】

サイバーエージェントの技術ブログを統合・リニューアルし、CyberAgent Developers Blog として進化しました!

これからはエンジニア、クリエイター、テクニカルクリエイターがタッグを組んで、1つのブログで情報をお届けしていきます。

今後はこちらのブログを是非チェックしてみてください!

https://developers.cyberagent.co.jp/blog/

いいね!した人  |  リブログ(0)
最近の画像つき記事  もっと見る >>

Theme:

ブランドをデザインする ー クラウドファンディングプラットフォーム Makuake

 

 

クラウドファンディングプラットフォーム『Makuake』の、

ユーザーインターフェース・フロント構築・プロジェクトのブランディング・広報制作物などクリエイティブ全般のデザインを担当している佐藤による記事を公開いたしました!

 

記事詳細はこちらから↓

https://developers.cyberagent.co.jp/blog/archives/2126/

 

 

-----

【お知らせ】

サイバーエージェントの技術ブログを統合・リニューアルし、CyberAgent Developers Blog として進化しました!

これからはエンジニア、クリエイター、テクニカルクリエイターがタッグを組んで、1つのブログで情報をお届けしていきます。

今後はこちらのブログを是非チェックしてみてください!

https://developers.cyberagent.co.jp/blog/

いいね!した人  |  リブログ(0)

Theme:

TVデバイス向けUI/UX開発 ー Amazon Fire TV編​

 

先日発表した「AbemaTV」の「Amazon Fire TVシリーズ」対応。

これにより、「AbemaTV」をテレビの大画面でお楽しみ頂けるようになりました!

 

今回のDevelopers Blogでは、

「Amazon Fire TVシリーズ」対応で開発したテレビデバイス向けのUI/UXについて、

AbemaTVデザイナーの石塚が解説しています!

 

 

記事詳細はこちらから↓

https://developers.cyberagent.co.jp/blog/archives/1410/

 

 

-----

【お知らせ】

サイバーエージェントの技術ブログを統合・リニューアルし、CyberAgent Developers Blog として進化しました!

これからはエンジニア、クリエイター、テクニカルクリエイターがタッグを組んで、1つのブログで情報をお届けしていきます。

今後はこちらのブログを是非チェックしてみてください!

https://developers.cyberagent.co.jp/blog/

いいね!した人  |  リブログ(0)

Theme:

同じピグでもこんなに違う!ピグパーティの新しいクリエイティブの挑戦とは

パソコン向けのアバターコミュニケーションWebサービスの『アメーバピグ』と、

2015年にリリースされたスマートフォン・タブレット向けのアバターコミュニティアプリ『ピグパーティ』。

 

一見同じように見えるピグでも、それぞれのサービスの特性に合わせてクリエイティブを変えているんです。

 

そんなアメーバピグとピグパーティのクリエイティブの違いを、大解剖しています!

 

記事詳細はこちらから↓

https://developers.cyberagent.co.jp/blog/archives/1298/

 

 

-----

【お知らせ】

サイバーエージェントの技術ブログを統合・リニューアルし、CyberAgent Developers Blog として進化しました!

これからはエンジニア、クリエイター、テクニカルクリエイターがタッグを組んで、1つのブログで情報をお届けしていきます。

今後はこちらのブログを是非チェックしてみてください!

https://developers.cyberagent.co.jp/blog/

いいね!した人  |  リブログ(1)

Theme:

明日も見たい!!を目指すVILECTから学ぶ、スマホのコマースで失敗しないための教訓

 

ヴィンテージとユーズドアイテムのセレクトモール『VILECT by Ameba』。

クリエイティブディレクターの井上が語る

” スマホのコマースで失敗しないための教訓 ” とは?

 

記事詳細はこちらから↓

https://developers.cyberagent.co.jp/blog/archives/763/

 

 

-----

【お知らせ】

サイバーエージェントの技術ブログを統合・リニューアルし、CyberAgent Developers Blog として進化しました!

これからはエンジニア、クリエイター、テクニカルクリエイターがタッグを組んで、1つのブログで情報をお届けしていきます。

今後はこちらのブログを是非チェックしてみてください!

https://developers.cyberagent.co.jp/blog/

いいね!した人  |  リブログ(0)

Theme:

【Developers Blog更新】オルタナティブガールズ 〜ド派手な必殺技エフェクト演出編〜

 

VRモード搭載の美少女バトルRPG『オルタナティブガールズ』。

バトルの必殺技シーンなどで特に重要になる3Dエフェクト制作について、

エフェクトデザインを担当している白石と緒方が解説しています!

 

記事詳細はこちらから↓

オルタナティブガールズ 〜ド派手な必殺技エフェクト演出編〜

https://developers.cyberagent.co.jp/blog/archives/885/

 

 

-----

【お知らせ】

サイバーエージェントの技術ブログを統合・リニューアルし、CyberAgent Developers Blog として進化しました!

これからはエンジニア、クリエイター、テクニカルクリエイターがタッグを組んで、1つのブログで情報をお届けしていきます。

今後はこちらのブログを是非チェックしてみてください!

https://developers.cyberagent.co.jp/blog/

いいね!した人  |  リブログ(0)

Theme:

みなさんこんにちは、1 pixel運営委員の宇納(@TasukuUno)です。
最近はAWAのデスクトップ版やWebの開発をしています!楽しいよ!

突然ですが、こちらはこのアメブロや、SNSアカウントのサムネイルとしてこれまで活躍してくれた公式キャラクターの全身デザインです!ブログリリース以来、5年越しの初公開になります。

これは、フクロウです。

「フクロウは芸術の女神の使いだから」とデザイナーが当時語っていたことを、今でも昨日のことのように思い出します。

さて、1 pixelがリリースされたのは 公式エンジニアブログのリリース約1年後、 2011年8月23日のこと。サイバーエージェントのデザイナー・ディベロッパーひとりひとりが、もっと社外に発信できる場を作っていきたいという想いからスタートしました。

冒頭で紹介したキャラクターも、技術ブログにしてはちょっと個性的なPCのブログスキンですらも、クリエイターひとりひとりの作品であるという想いがこめられてデザインされたものです。

そうそう、「1 pixel」というブログタイトルも、いくつもあった候補の中から「神は細部に宿る」というクリエイターの意思を体現している、と選ばれたものでした。(僕は「#4dac26はどうか」とか言ってましたが、今は「1 pixel」でよかったと思っています。笑)

当時、僕はディレクションをしたりHTMLやCSSを書いたりしていましたが、こんなにもNode.jsが身近な存在になって、こんなにもフロントエンド開発がエンジニアリングになっていくとは思いもしませんでした。クリエイターズブログの編集委員になったはずなのに、気がつけば自分でもエンジニアと名乗っている今日この頃です。

その後、クリエイティブが競争力となるスマホ時代が到来し、今ではグッドデザイン賞を3つも同時に受賞するなど、サイバーエージェントはクリエイティブで勝負できる会社へと成長を遂げました。

話が大きく逸れましたが、更新が止まる暗黒時代はありながらも、長年毎週更新を続けてこれたのは、執筆を快く引き受けてくれたクリエイターのみなさん、そして何より読者の皆様のおかげだと感謝しております。ありがとうございます!

と、いうわけで、突然のお知らせで恐縮ですが、ここで1 pixelはその役割を終え、

サイバーエージェントの技術ブログを統合・リニューアルし、CyberAgent Developers Blog として進化しました!

これからはエンジニア、クリエイター、テクニカルクリエイターがタッグを組んで、1つのブログで情報をお届けしていきます。是非チェックしてみてください!

https://developers.cyberagent.co.jp/blog/

今まで応援して頂き本当にありがとうございました!
そしてこれからも、どうぞよろしくお願いします!

いいね!した人  |  リブログ(0)

Theme:

みなさん、こんにちは。サイバーエージェントでフロントエンド・サーバーサイドを実装したり、オフィスを作ってみたりしている@herablogです。今回は、Amebaアプリでアメブロの記事をネイティブ化したプロジェクトをご紹介したいと思います。多くの方がご存知のようにアメブロは2005年にPCブラウザ向けサービスとして提供され、インターネット上に個人やグループの記録を残す、まさしく THE Web といったサービスです。この記事では、10年以上のデータが蓄積されたWebサービスをどのようにしてネイティブアプリとして組み込んだかご紹介します。

 

 

コンセプト

ネイティブ化するにあたって、大事にしたことは以下の点です。

  • 表示がはやい
  • 記事を読むことに特化している

モバイルでの利用増加により、「表示がはやい」ということはますます重要かつ当たり前になっています。Webアプリでも、最適化をすることによって速度の高速化は可能ですが、今回のプロジェクトでは、実データ以外のUIパーツを事前に埋め込めるというネイティブアプリの利点を活かして、高速化にチャレンジしました。

 

また、Webの世界では、非常にオープンな環境であるがゆえにカスタマイズが容易で沢山のパターンのデザインがあったり、多種多様なSDKが混在し、そのすべてをコントロールすることが難しいといったことがあります。特に、PCからの仕様を継承したサービスでは膨大なパターンになりがちです。そこで、今回のプロジェクトでは記事を読むことに特化するように気をつけて設計しました。他のネイティブアプリと同様に、自由度はやや少ないんだけど、重要な機能にフォーカスされているといったモバイル時代に合った方向を目指しました。

 

とにかくはやい

今回のプロダクトでは、見た目がシンプルで記事が読みやすい・スクロールでのページングが滑らかといった特徴がありますが、何よりも一番のユーザーメリットとしてあげられるのが、表示のはやさだと思っています。表示がはやければ、途中で離脱せず、読みたい記事を最後まで読めるようになります。最近話題のAMPInstant Articleでも表示速度の改善を大きな目的としています。現状のWebページが他社に比べ劇的に遅いというわけではありませんが、一度ネイティブ版の表示を体験していただければその違いがわかると思います。

 

こちらが今回のプロジェクトの紹介ムービーです。記事の表示や記事一覧表示、記事の絞り込みなどの操作が素早くできます。

 

 

設計

今回のプロジェクトの最終的な設計は以下のようになりました。

API(記事・広告データ) 
  -> NativeApp(フェッチ、UIコントロール)
    -> ReaderView (WebView, 記事表示)

ネイティブアプリは、APIからのデータ取得と、UIパーツの表示コントロールをします。必要なデータが揃った段階でReaderView(実体はWebView)にデータを渡します。ネイティブアプリとReaderView間はオフラインですので、コスト低くデータを転送できます。(ReaderViewで使うファイル郡( html js css )は事前にネイティブアプリ内に内包しています。)

 

ReaderViewは、ネイティブアプリから受け取った情報をもとに、ブログ記事を表示します。ネイティブからデータを受け取るために、以下の様なメソッドを公開しています。

 

(例)

reader.render({
  title: 'Blog Post',
  text: 'Hi'
}); // render the contents
reader.clear(); // clear the view

初期段階ではWebViewを使わない選択肢も検討しましたが、「ブログ」という財産を活かすため、上記のような設計にしました。それは、アメブロのデータが基本HTMLをベースとしており、WebViewを使わないとブログ記事の表現がしきれない要素があったためです。

 

Web実装

ネイティブアプリに組み込まれるWeb実装(ReaderView内)として、特徴的なトピックスを記載します。

Viewに徹する

ReaderView内の実装では、とにかくViewに徹するようにし、データのフェッチや表示タイミングのコントロール、トランジションはネイティブアプリに任せることにしました。そうすることにより、ネイティブアプリとの役割を明確に分けるようにしています。

React, Flux

一番最初のモックでの実装は、

element.innerHTML = html;

というように、与えられたhtmlを表示するといった極めてシンプルなものでした。

しかしながら、最終的には React Flux での実装に変更しました。ネイティブエンジニアが修正する可能性もおおいにあるためScript中心でviewを構築する React は相性が良いと判断しました。(弊社内では Flux 設計のネイティブアプリも存在し始めているようです)

SVG

ネイティブアプリ内に内包されているWebViewを利用しているので、ある程度ユーザー環境を固定することができます。今回のプロジェクトでは、iOS 8以上、Android OS 4.1以上を対象にしているので、未対応のブラウザを気にすることなくSVGを使うことができます。ReaderViewでは、Web FontやCSS Spriteではなく、SVGをSprite化( symbol )してアイコンを表示しています。

 

なお、今回のタイミングでデザイナーさんと協力してSketch一括管理、Sketchから SVG SVG Sprites Font(TTF, WOFF, EOT) png などに書き出せるようにしており、好きなフォーマットで利用できるようになりました。

 


Sketchで管理された、シンボル一覧

 

tap hightlightをオリジナル実装

できるだけ、WebViewであることを感じさせないために、タップした時のフィードバックをデフォルトのものから変更しました。デフォルトのままだと、"ブラウザ感"が出てしまい、どうしてもネイティブアプリの世界観からずれてしまうためです。具体的には以下のパターンに分けて実装されています。

 

ボタンパターン

通常のブラウザのようにオーバーレイでのフィードバックではなく、ボタン自体の大きさを変えています。こうして、ボタンのデザインを損なうことなくフィードバックを表現しています。

 

 

背景変化パターン

ナビゲーションなど、大きめなスクエアボタンはタップ時に背景色を変更しています。

 

 

テキストリンクパターン

テキストリンクでは、通常のブラウザと同じ表現方法ですが、色をやや薄めにしてデザインに馴染ませています。

 

 

Podで管理

これは非常に余談的ですが、どのバージョンのReader Viewを使っているかネイティブアプリから管理しやすいように CocoaPods (iOS用のライブラリ依存管理ツール)を利用しました。今回のプロジェクトではReaderViewのリリース毎にバージョニング・設定ファイル( AmebloReader.podspec )を更新し、ネイティブアプリのビルド時に指定したバージョンにアップデートしてもらいました(ちなみにAndroidはシェルで管理してました)。

Pod::Spec.new do |s|
s.name         = "AmebloReader"
s.version      = "0.2.3"
s.summary      = "HTML, CSS and JavaScript for Ameba app blog reader"
s.homepage     = "https://ghe/ameba-app/ameba-app-blogreader-webview"
s.license      = { :type => "Custom",
 :text => "Copyright (C) CyberAgent, Inc. All Rights Reserved." }
s.platform     = :ios
s.ios.deployment_target = "8.0"
s.source       = { :git => "git@ghe:ameba-app/ameba-app-blogreader-webview.git",
  :branch => 'master',
  :tag => "#{s.version}" }
s.ios.resource_bundle = { "AmebloReader" => ["dist/blog_ios.html"] }
end

 

デザインスプリント

記事を読むことに特化しているプロダクトにするために、開発メンバー(デザイナー・エンジニア)のスキル・知識を総動員しました。それらを引き出す手法として、今回のプロジェクトでは、デザインスプリントを採用してみました。

 

デザインスプリントはGoogle社が提唱する開発手法で素早いPDCAを可能にしてくれるものです。 この手法のいいところは、意見の強い誰かが言ったこと(利害関係に左右されていたら最悪です)を実装するのではなく、重要な決定にみんなの意見が入り、当事者意識が芽生えるところです。 ものづくりの過程では、開発者自身がいかに自分のものとして考えられるかということが重要です。 そう考えられれば、細かいところも丁寧に気をつけて実装しますし、自ら改良のための提案も進んでしたくなるものです。

 

実際には、デザインスプリントの手法を少しアレンジして実施しました。それでは、その開発フローをのぞいてみましょう。

 

課題決定

このプロジェクトにとって何が大事か、欠かせないものは何か、やってはいけないことは何かを決定します。参加者は思いついたことをそれぞれポストイットに書き出します。ここでは必ず紙に書き出すようにします。発言を求めてしまうと、意見の強い人に左右されてしまったり、いまいち自信がないと発表を控えてしまったりするからです。

投票

その後、それぞれよいと思ったアイデアの紙にシールを貼って投票します。この際に大事なことは、誰が言ったかではなく内容そのものについて評価することです。

 

よいと思ったアイディアには +1 シールを貼っていきます。こうすることで、プロジェクトにとって大事なこと・けしてやらないことなどがメンバー間で共有されます。

評価

投票の多かったものを中心に議論し、今回のテーマについて方向性を絞り込んでおきます。気になるところ・疑問に思うところは、この際に議論し、ある程度みなが納得している状態にします。

遷移図を描く

上記で決まった方向性をもとに、実際に遷移図に落としていきます。この際には、デザイナーだけでなく、エンジニアも一緒に考える方がよいでしょう。各プラットフォーム(OS)の作法に詳しいのは大抵の場合エンジニアですし、最終的に実装するのはエンジニアであることが多いからです。ここである程度一緒に決めておくとあとでデザイナーの元へ確認に行く頻度がかなり減ります。

 

実際に使った遷移図。遷移図は前後の流れも含めて描きます。デザイナーだけでなく、エンジニアも描くのでクオリティはマチマチです。

 

遷移図の評価

遷移図も、コンセプトと同様に議論し評価していきます。エンジニアのみなさん、「これは実装厳しいな...」と思ったらこの段階で遠慮せずに言っておきましょう(あとで徹夜にならないように...)。

実装 (プロトタイプ)

遷移図の評価ができ、案が決まったら実装してみます。実装者は、最初の段階から議論に参加しているのである程度納得した状態で実装できます。腑に落ちた状態かどうかで、実装スピード・クオリティは劇的に変わると思います(わたしはそうです)。

レビュー

実際に作ってみたもののレビューをします。ここでは、必要に応じて開発者だけでなく、ユーザーさんを呼んでのテストも有効です(今回のプロダクトでも数回行い、我々の想像以上に視野が集中しているという発見がありました)。ここで出た改善点を次回のデザインスプリントにいかしていきます。

上記のフローを隔週ベースで一周りするように進めました。実装の段階では、集中して進めるため、開発合宿を行ったりもしました。

 

開発合宿の様子。みんな集中してます。

 

XCodeとAndroid Studio両方を同時に開いているところがこのプロジェクトっぽいところです。

 

お昼は、弁当を注文してみんなで食べます。へいへい(運営担当)の弁当注文スキルもあがりました。

 

広告

広告というと「じゃま...」と感じている方もいるかと思いますが、いち開発者・いちユーザーとして、私自身も「なければないほどよい」と思っています。しかしながら、サービスを継続して提供していくためには広告による収益が大事であることも事実です。また、広告主、メディア、ユーザー全員にとって良かったと思える広告もあるでしょう。そこで、今回のプロジェクトではできるかぎり記事を読む邪魔をせず、効果を上げる以下の様な仕組みを検討しました。

inview率を上げる

通常、広告はSDKでコンテンツの読み込みの後に取得するため、表示が遅れてしまうことがあります。これはデータは読み込まれているのに、ユーザーに届いておらず無駄になっている状態で、誰にとっても喜ばしいことではありません。そこで、今回は記事データと同じタイミングでサーバで広告データを事前取得し、遅れず表示するようにしています。特に記事上部の広告は100%近い inview率 を保証でき価値の高い枠にできます。こうすることで、きちんと広告がユーザーの目に届き、価値があると感じたら押されることになります。

 

広告データは記事と一緒に取得しているので素早く表示され、ガタッと表示領域が伸びたりしない。

 

記事の邪魔をできるかぎりしない

広告の表示が遅く、事前に高さが確保されていない場合、誤ってタップしてしまうことがあります。しかしそれは本質的なタップではありません。それを防ぐため、事前に広告を取得・予め高さを決めて表示するようにしています。また、バナー表示を避け、できる限り記事のデザインと合わせることで記事から"浮いて目立つ"ことのないようにしています。

効果を上げて、枠の数を減らす

広告は数が多いほど効果が出やすい傾向にあるため、ついつい数を増やしてしまいがちです。しかしそれは、本来記事を読みに来ているにもかかわらず、広告だらけで読みにくい・不快だといった本末転倒なことになる可能性もあります。今回のプロジェクトでは上記のような対応をすることで、それぞれの枠の効果を上げることにより、広告の枠を増やし過ぎず、記事とのバランスをとれるように心がけました。

 

KPIs

最後に、このプロジェクトにおけるKPIについて触れて終わりにします。このプロジェクトでは、表示速度の改善・滑らかなページングによる PPU (Pageview Per User) の向上、表示内容最適化による 広告効果(CPM: Cost Per Mille) の向上を主要KPIとして設定しました。

それぞれ

PPU -> 約130%向上
アップ

CPM -> 約120~130%向上
アップ


というようにいまのところよい効果が出ています。

以上、アメブロのネイティブ化についてご紹介しました。iOS, Androidとも、Amebaアプリでご覧になれますので、ぜひ軽快になったブログ表示を体験してみてください。

 

iOSアプリ

 

Androidアプリ

Get it on Google Play

 

いいね!した人  |  リブログ(0)

Theme:
アメーバピグでフロントエンジニアをしております松永と申します。

今回は12月8日に開催となりました『UXなまトーク Vol.3』について

レポートさせて頂きます。

盛り上がったパネルディスカッション 写真左から、小川卓さん / ヤフー株式会社 瀧知惠美さん / 株式会社サイバーエージェント 水野 寛さん / 株式会社アイ・エム・ジェイ 佐藤哲さん
『UXなまトーク』はUXについて現場のなまの声をトークするというイベントです。第3回となる今回は【定量と定性の交差点】というテーマです。


どのような考えがあり、実際に現場で起きたことをどのように解決したかなどをそれぞれの立場からトークしていただきました。

当日はいろいろな職種の方がたくさん集まって、熱気で会場が包まれていました。

それでは、各登壇者の”なまトーク”をご紹介いたします。

『ネットアンケートから定性的データを引き出し質的分析をする取り組みについて 無意識インサイト調査®と行動文脈リサーチの実践例』

株式会社アイ・エム・ジェイ 佐藤哲さん


定量と定性の融合と定量側と定性側の協調について発表していただきました。

実際に案件で発生したものをフィクション化しストーリーテリング的に発表されていたので、臨場感溢れる発表でした。
・・・・・
・・・・・・・・・・・・・・

人間の脳は95%が潜在意識といわれており、意思決定はそれらに影響される。

そのため、本質ニーズを得るための手法として略画法や状況設定、擬人化法を使いアンケート設問を設計していくと効果的である。

そのようなアンケート設問の自由回答から得た情報にこそ、人の心に関する文脈が入っている。

ワークショップ形式で文脈を読み取りながら質的分析をすることで、情報の深掘りが可能になる。

・・・・・・・・・・・・・・・・・・・

定量調査で事実確認し、定性調査で情報を深掘っていくことで、定量と定性、お互いが補完し合い、良い相乗効果を生んでいる実例でした。

私自身、担当サービスのアンケートとも向き合うことがあり、その際に本質的なニーズはなかなか得にくいという体験をしていたので、大変参考になりました。


『ピグのユーザ体験を 定量/定性で捉える方法』

株式会社サイバーエージェント 水野 寛さん





現在ピグ事業部全体のUX改善に努め、私も共に仕事をしている弊社、水野の発表です。

・・・・・・・・・・・・・・・・・・・

今年で7年目を迎えるピグには外部環境の変化にあわせた変化が求められ、利用者の本質的ニーズに応えるべく、分析とUXD推進のタスクフォースチームが結成される。

定量と定性それぞれの限界を理解したうえで使い分けている。

事業目線で既存から棚卸しをして作成したコンセプトダイアグラムと、ユーザー体験から仮説を発見し、固定概念を超えるために作成したカスタマージャーニーマップ。
・・・・・・・・・・・・・・・・・・・


私自身、発表の中にあったUXD推進室に参加しており、水野とは日々仕事をしております。
現在ピグ事業部は1人1人がUXに向き合い、常にユーザー中心にモノづくりをしていくという姿勢が浸透しています。

定量・定性の違いという視点から、具体的にピグで行われているUXアプローチを詳しく紹介いただきました。


『チームビルディングから始めよう!~UXデザイナーの定量×定性への取り組み方~』

ヤフー株式会社 瀧知惠美さん






UXデザインの考え方を自身のプロジェクトで活用しようとした際、問題が発生することがあります。
そうした問題の解決方法、1人でも実行できるUXデザインの方法、UXデザイナーの定量への意識、定量と定性のアプローチ方法を発表していただきました。

これからUXデザインを活用しようという場面においてもとても参考になる内容でした。

UXデザインを活用しようとするときに、UXデザインの進め方は不確定要素が多かったり時間がかかるので、プロジェクトメンバーの理解を得ることに苦労をするという話は色々なところで耳にします。
発表の中にあった具体的な反対意見に対する解決方法の紹介などは、とても参考になりました。
・・・・・・・・・・・・・・・・・・・
UXデザイナーはメンバーの気持ちも汲み取ってファシリテートしていく。
なぜならば、メンバーもある意味”ユーザー”と捉えられるので、メンバーに対しても”ユーザー”視点で望む。

・・・・・・・・・・・・・・・・・・・
常にそういった視点を意識していくことで色々と円滑に進められることも多いと思いました。
・・・・・・・・・・・・・・・・・・・
定量だけでは解決方法が絞れず、定性だけではどこが重要かわからない。それぞれを補間し合い、実際に瀧さんの現場では、UXアナリストとUXストラテジストがコラボレーションをして進めている。
・・・・・・・・・・・・・・・・・・・

実際の現場のお話も聞けて大変興味深いお話でした。


『ユーザーを理解できない「アクセス解析指標」や「KPI」からの脱却! ユーザーエクスペリエンスに基づいた指標設計と改善の考え方』

小川卓さん



・・・・・・・・・・・・・・・・・・・
様々な指標があるが数字としてそれらを達成することが重要なのではなく、大切なことはユーザーの想いや行動が変わることである。

コンセプトダイアグラムを作り、ユーザーの行動や態度変容を可視化する。
これまでのような、直帰率や数だけを断片的に追っていては見えない行動の流れが見えてくる。
作成の際には、企業目線は絶対に持ち込まない、作って終わりではなく計測することが重要である。

・・・・・・・・・・・・・・・・・・・

実際に開催してきたワークショップの様子、その時作成された最終アウトプットなども紹介していただきました。
実際に多くの企業が実践し、それによって沢山の気づきを得ている事実を知り、こういった視点や手法がとても重要であることを再認識しました。

コンセプトダイアグラムの具体的な作成例や、コンセプトダイアグラム作成後に施策まで落としこむ流れなど、他にも非常に勉強になることばかりでした。

様々な指標を分析していくと、数字のみにフォーカスしてしまうことがあると思います。
常にユーザーの気持ちを理解しながら分析し、ユーザーにとって正しい順番で正しい情報を提供していくことの重要性を学ばせていただきました。


おわりに

今回もたくさんの方にご来場いただき、UXに対する関心が高まっていることを感じました。
実際に現場で活躍されている登壇者の方々によるトークとパネルディスカッションはすぐにでも実践できることも多く、とても参考になりました。

今回のテーマでもあった定量と定性についても、それぞれ良い部分も限界もあり、それらをお互い補間しあって、目的であるUXの向上を図っていくことがとても重要であると感じました。

サービスを使ってくれる人の体験を最高のものにするという最も当たり前に目指すべき目標を達成できるように今回の学びを活かしていきたいと思います。

今回ご参加頂けなかった方も、是非次回の「UXなまトーク」へご参加ください!



サイバーエージェントでは定量と定性に真摯に向き合いサービス創りができるクリエイターを募集しております。
⇒サイバーエージェント採用サイト
いいね!した人  |  リブログ(0)

Theme:
みなさん、こんにちは!
CyberSSにてデザインを担当している佐藤宜也(ヨシナリ)と申します。
日々の業務として、インターネット広告メディアを創っているのですが、その上で最重要としている「One to Oneマーケティング」と、それを実現する為のデザイン思考に関して今回は書きたいと思います。

One to Oneマーケティングとは?

"One to Oneマーケティング"とは、いわゆるビッグデータを活用して、ユーザーの年齢や性別はもちろん、趣味趣向や購買・行動履歴や現在地。もっといくと交友関係や生活パターンまで!!そんな1人ひとりの個人に合わせて展開していくマーケティング手法のことです。

今までの広く漠然とした訴求ではなく、個人レベルに合わせてその個人にベストなタイミングで具体的な内容の訴求を行なうことができるので、今まで以上にユーザーの心をグググググッッとつかむことができます。

例えば、「冬用セーターを探している20代の独身男性」に対して、その需要をしっかりキャッチアップした「20代独身男性に人気の冬用セーター」を提案できるわけです。
このコミュニケーションがしっかりと合致すれば、「欲しいと思っている人に欲しいものを紹介できる」ことになるので、結論、より高いレスポンスが期待できます。

01


このような、しっかり対面接客している実店舗で行っているようなコミュニケーションが、今ではインターネット上でも加速的に拡がっています。
そしてこの仕組みを利用して、より効果的な広告クリエイティブを創っていくということは、広告業界のクリエイターとして目指すべき「コミュニケーションデザインの最たるもの」と僕は考えています。

広告から個告へ。10万人のユーザーに対して10万通りのデザイン

02


上記のイメージで示すような"思想"が、One to Oneマーケティングの目指すところです。
ひとつのクリエイティブで10万人の心を捉えようとするのではなく、10万人それぞれに響く言葉とビジュアルで心を捉えよう!ということです。
とはいえ、この言葉どおり10万通りのデザインを普通に創るとしたら、まぁ普通に考えて無理です 笑
ですが、その理想的な状態に少しでも近づくために、僕らは以下のような手法でデザインをしています。

検索キーワードを読み取る

僕らが運用しているサイトへの集客の軸はリスティング広告(検索連動型広告)です。
リスティング広告についてはここでは割愛させていただきますが、「検索キーワードによってurlを設定できる」という機能というか仕組みがあるので、キーワードに対してそれぞれ個別のページを用意できます。
つまり、検索キーワードに対してそれぞれ個別のデザイン設計をすることが可能なので、その検索ユーザー需要に対して、よりベストエフォーなページを用意することができるのです。

例えば、先ほどの「セーター」と検索したユーザーがいたとします。そのユーザーに対しては、当然「セーター」の商品が満載のサイトを見せてあげることが望ましいです。
さらに具体的に「”赤い”セーター」と検索するユーザーがいたとします。
そのユーザーに対しても、先ほどと同じ「セーター」のページを用意することは間違ってはいませんが、「赤いセーター」があるページを見せることができた方が、コミュニケーションはより高次元で成立するはずです。

1枚絵のキービジュアルを要素分解

それでは、上記のようなコミュニケーションを効率的に成立させるためにはどうすればよいのか。
その一つの手法がキービジュアルの要素分解です。

ユーザーの瞬間的な印象を左右するキービジュアルは、ファーストビュー内の要素の中でも特に重要で、どんなに素晴らしいコンテンツがあるサイトだとしても、キービジュアルの印象が悪ければ、せっかく来訪してくれたユーザーはすぐに離脱してしまう可能性が高いです。
有名な3秒ルールの名が示す通り、ユーザーの心を掴むのは3秒(もしくはそれ以下)です。
従って、キービジュアルでユーザーコミュニケーションを成立させることは大前提となります。
サイトイメージに合うビジュアルを創ることはもちろんですが、さらにコミュニケーションを高めるために、構成要素を分解して設計します。

03


これら分解した要素ごとにパーツを用意するわけですが、そのパターンを検索キーワード分用意していきます。
例えば、パーツを3つにわけ、キーワード数を20として、その全てをユニークなものにした場合、その組み合わせは、
20x20x20=8000通りのKVを用意することができます。

大きなデザインの違いは正直無いです。
「パーツの一部が変わっただけのもので、成果に大きな違いがあるとは思えない」と感じる方も多いとは思いますが、それは制作側の目線で考えているからであって、ユーザー側はそのキービジュアルを見比べているわけではなく、それが唯一のビジュアルということになります。
結果、そのキーワードに合わせて変更した言葉やパーツが、ユーザーに対して有益な訴求として目に映り、ユーザーの興味をひくキービジュアルになるというわけです。

ビジュアルは言葉よりも早く大脳に届く

ビジュアルによる訴求は言葉よりも早く深く大脳にアプローチできるという脳科学の話もあり、ビジュアルの精度を上げることで、ユーザーへの訴求力はより高くなるはずです。
たとえ、意識的にユーザーに気づかれない小さなアイコンや何気なく目に映っている背景色だとしても、無意識化に影響しているはずで、その無意識な領域に直接訴求できるのは言葉よりもイメージであり、それがデザインの力です。

だからこそ、One to Oneマーケティングを成功させる為の最適なデザイン思考がこれからどんどん必要なってくると思います。
ダイレクトマーケティングが主流となることで、広告から個告へと概念が移っている広告業界。そこに身を置いている僕らクリエイターにとって、このような思考は身につけておくべき重要なデザインスキルであると感じています。

さいごに

僕たちは、このような概念のもと、ユーザーとのより高度なコミュニケーションの実現を目指して日々の業務を行っています。
それこそ地道なPDCAの繰り返しとなりますが、その精度を少しずつ少しずつ上げていくことで、ユーザーにとって本当に利用価値のあるサイトを作りあげていくことが最終的な目標です。


以上、最後まで読んでいただき、まことにありがとうございます!!!
いいね!した人  |  リブログ(0)
ページトップへ戻る