Goalist Design Blog

新卒三期、ブログを書く(デザインチーム編)

こんにちは。この春に新卒で入社したマスダです。
2ヶ月間の新卒研修を無事に突破して、6月からデザイン部に配属となりした。
大学では樹木の研究をしていて、今までデザインというものに全く触れたことのない新参者です。

これからもたまに登場すると思いますので、よろしくお願いいたします。

いたって普通な自己紹介をすると、
大阪生まれ大阪育ち、子供の頃は虫取りなど自然と戯れ、大学ではその延長でサクラの研究をしていました。

趣味はゲームと手芸。
スプラトゥーン好き。
自分で筆箱とか鞄作ったり、最近は刺繍にはまっています。

というところでしょうか・・・。

スプラトゥーンについてはゴーリストブログの方で記事も書いていますのでよかったら読んでみてください。
イカ好きによる、スプラトゥーン2体験会!! - ゴーリストブログ

配属初日からリモートワーク!?

f:id:ikamasuda:20180706110549p:plain

さて、6月からデザイン部の所属になりましたが私は東京本社ではなく、大阪支社で働いています。
大阪支社は今のところオフィスにいるのは4人で、それぞれが違う部署に所属しているというなんとも不思議な状況です。
会話もほとんどなく、画面越しの東京の喋り声がたまに聞こえてきます。(会話がないからって、仲が悪いわけではないので誤解しないでください!)

・・・つまり、デザイン知識0の新卒が配属初日からいきなり遠い地に隔離されたわけです。

わたしなんにもできない、でざいんのことわかんない、しごとできないよ状態です。

でも、放置されているわけではないのでご心配なく。
実際はappear.inという無料でビデオ会議ができるサービスを利用して毎日チームのみなさんと顔を合わせています。
また、チャットでもつながっているので必要な情報のやりとりはいつでもできるようになっています。

とはいいつつも、ネットの状況が悪かったり、周囲が騒がしいと、ミーティングの声が聞こえづらくなり会話についていけなかったりということも実際はあります。
また、社内の情報も入ってきづらい状況ではあるのでアンテナをピンピンはってないといけないです。

デザイン部でのリモートワークについては今回が初めてで、まだまだ改善の余地はたくさんあると思います。

f:id:ikamasuda:20180706110657p:plain

いまはまだ、一人で考えるものが多いので密なコミュニケーションはそんなに必要はないですが、これから受け持つ仕事の規模が大きくなると考えると、メンバー全員の認識のズレが起きないように、もっと密なコミュニケーションを取る方法を考えないといけないと思ってます。

チームの課題ですね!

 

いまどんな仕事してるの?

先ほども言いましたが、私はいままでデザインに触れたことがほとんどありません。
唯一あるとすれば、大学のゼミの資料を見やすくレイアウトしてみたりとかそんな程度です。
なので、これからどんな障壁が待ち受けているのか、自分にデザインの仕事ができるのかなど全てが不安でしょうがないです。

でも、できないできないと言っているだけじゃ何も進まないのでわからないながらも手を動かさないといけません!


ということで、6月に配属されてから研修も兼ねて依頼されたお仕事は「社内報を作る!」です。
今回作る社内報は「メンバーのことをもっと知る」ことを目的に、メンバーほぼ全員にアンケートに答えてもらい、そのアンケートの回答をまとめたインフォグラフィックを作り、webページにするというものです。

なんだwebページを1枚作るのか。というような軽い気持ちでいました・・・が、素人の甘い考えでした!!!

webページを作るのにもたくさんの工程があって、ターゲットや目的を明確にしてそれを意識して作っていかないといけないのです。基本中の基本ですね・・・。(まじか!全然知らんかった!)
いままで、マイペースで自分好みのものしか作ったことがない上に、デザインの知識もほぼ無の状態からのスタート。

スムーズにいくわけもなく、ラフ作成からデザインと・・・苦戦しました。

f:id:ikamasuda:20180706110730p:plain

アンケートをまとめる切り口を考えたり、アイコンを作成したり、インフォグラフィック考えたり、とにかくやること盛りだくさん!
とくに、コンテンツの内容を考える工程を想定していなかったので、ターゲットが面白いと興味を持ってくれるものはなんだ、わからん!とかなっていました。

徐々にゴールに近づいていますが、まだまだ気を抜けない状態です。
社内報作成については、また別のところで詳しく書くことにしましょう。

 

と、デザイン初心者なりにイラストレーターの使い方からラフ作成、デザインと奮闘しながら日々頑張っております。
いずれは開発もデザインのこともわかるなんでも屋さんになりたいな〜なんて思っています。
どちらも未経験からの出発にはなりますが、バリバリ知識を詰め込んでいきたいですね!

 

どうぞよろしくお願いいたします!

f:id:ikamasuda:20180706111419p:plain

 

ふろぐんスタンプかわいい!

デザインチームおすすめ本(vol.1)

f:id:k-mitsui:20180425173544p:plain

こんにちは、ミツイです。

ゴーリストにはメンバーの自発的な学習や成長を支援、プロフェッショナル化を促進するため、書籍の購入を会社で負担する制度があります。
デザインチームでも、月に2冊くらいデザイン関連の書籍を購入して勉強しています。
デザイン系の書籍は値が張るモノも多いですが、こういう制度があると知識欲に従って思いきれるので、けっこう嬉しいですね。

チーム内でも「これは良書!」と思う本が幾つかあるので、おすすめ書籍を上げていこうと思います。
今回は第1回として「みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善ガイド」をご紹介します。

みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善ガイド

みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善ガイド

  • 作者: アーロン・イリザリー,アダム・コナー,長谷川恭久,安藤貴子
  • 出版社/メーカー: ビー・エヌ・エヌ新社
  • 発売日: 2016/05/26
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (1件) を見る


著者紹介

アダム・コナー
MAD*POWというデザインコンサルティング会社のデザイナー。立派な髭がトレードマーク。
Adam Connor - Designer, Illustrator, Etcetera, Etcetera Adam Connor | Mad*Pow
アーロン・イリザリー
「Capital One」というファイナンシャル企業でCMとかUX設計とかをしている人。真面目キャラかと思ったら、結構がっつりタトゥーが入ってますね。
https://www.linkedin.com/in/aaroni Aaron Irizarry on Vimeo

おすすめポイント

『デザインについて相談されて思いつく限りのことを指摘したけど、結論が出ず「う〜ん」となって終わってしまう』
『アドバイスを貰いにいったら「いいね!」と言われて嬉しくなって帰ってきたが、何も解決していなかった』
などの経験がある方は是非ご一読頂きたい本。
デザイン批評(一般的に使う言葉で言うと“デザインレビュー”に近いです)する時に気をつけるべきことや批評に対して持つべきマインドセットを、かなり具体的に書いてあります。

ざっくり内容紹介

フィードバックの駄目パターン、OKパターン

レビューをした時に得られるフィードバックには反応型、指示型、批評型の3パターンあります。

反応型

「良いですね!」「格好いい!」「全然駄目」などの感情的なフィードバック。「良いですね!」が欲しくてレビューお願いしがちですが、批評とはそういうことではないです。
逆に「全然駄目!」と言われても、困りますよね。基本的にこの反応は、ただの好き嫌いです。

指示型

「ここをもっとこうしたらいいんじゃない?」というフィードバック。批評者が解決策を考えて、それを伝えるという形ですね。自分が批評する時にしがちです。。

批評型

デザインのある側面(etc.ボタンを大きくして目立たせたこと)に対して、
それが目的(etc.60代のユーザーが申し込み方法に迷わないようにする)に対して機能しているか、
またベストプラクティスを踏襲しているかどうかをフィードバックします。
こうすることでフィードバックを受けたデザイナーは、その側面について目的に対して機能する解決策を考える、という次回アクションが明確になります。

指示型のフィードバックがなんで問題か?
端的に言うと、このタイミングで解決策を考えるべきではないということです。
ここはこの本の肝でもあるので、もうちょっとだけ詳しく。
人は分析することと創造することを一緒にすることはできない、というのがこの本の主張です。確かにそう思います。
デザインする時はその間を振り子のように行ったり来たりするべきなのですが、批評の場ではそれをするべきではないです。
批評の場で解決策を言うということは、その人は創造に入ってしまっています。
なので、その人は分析して新たな課題を見つけることもできなければ、他の人が言う課題についてもちゃんと理解することができません。
これがミーティングの時に各人バラバラに起こると、、、
お互いのアイデアは論点がズレてるから受け入れられない、下手すりゃ話を聞いてないという状態になってしまいます。
アイデアを恊働して考えるのは良い(むしろやるべき)ですが、批評の場と恊働の場は分けるべきです。
ということで、指示型のフィードバックは批評の場ではしない。

ベストプラクティスって?
所定の状況における最善のアプローチまたは問題解決法を理解するのに役立つ、時間とともに確立されたヒューリスティックのこと。
ヒューリスティック評価で駄目なものは、駄目よって話です。


その後も、批評をする時される時の心構えや、批評しやすい文化を作ることの重要性、ペルソナ・シナリオ・原則・シナリオを基礎として共有すること、制作 プロセスのどのタイミングで批評すべきか等、かなり勉強になることが目白押しです。
かゆいところに手が届くように、普段難しいと思っていたチーム制作での課題について書いてあります。
“扱いにくい人”について1章を割いているところなど、著者たちもだいぶ苦労してきたんだろうなぁと思いますw


まとめ

批評を受ける側にしろ、する側にしろ、一読の価値はある本だと思います。
もちろん、この本で言う「批評」を当たり前に行えているデザイナーさんも多いと思いますが、重要なのはメンバー全員がその考えを持てているかどうか。
批評する側、される側、ミーティングに参加するメンバー、誰か一人でも意識が違えば、そこに対処するコストは結構なものです。
是非、チーム全員で本を回し読むか、勉強会など開いて共有することをおすすめします!
以上、ご清覧ありがとうございました!

LP制作を通してウェブマーケティングに関わってみたこと#1

f:id:e-nagata:20180515171535p:plain

お久しぶりです。レタスです。
この前新卒さんが入社したと思っていたら、もうGWが終わって夏の気配がすぐそこに。季節の変化が早いです...!

今回は自社プロダクトのLP(ランディングページ)制作に関して進めてきたことを記事にしようと思います。ゼロイチではなくリニューアル案件です。
ウェブサイト制作とは違った視点から取り組んでいるので、そのフローを書き留めていきます。

 

そもそもなぜリニューアルをしたのか

リニューアルを手がけるのはこちらのLP。ゴーリストの自社サービス「HRogチャート」について紹介するページです。

f:id:e-nagata:20180515171703p:plain
既存のHRogチャートLPはこちら
オリジナルキャラクターのカエルのふろぐんがトップでお出迎えしてくれます。どどん。
HRogチャートが分析ツールだけに、ふろぐんもグラフでデータを読み解いています。

このLPのベースは3~4年前に作られたものです。これまでも情報の更新や小さな修正、画像の差し替えなどはありましたが、なぜ今回大幅なリニューアルをするのか。
まずはその背景をお話ししたいと思います。

 

事業部の目標と実現のために

今まで構成を変えずにいたLPのリニューアルをなぜ着手することになったのか。

一番の大きな理由は、ウェブマーケティングの観点から現状への見直しが入ったことだと思います。
まず大元に、「ゴーリストのサービスに興味がある方に、もっと自社サービスを周知していき、さらにお問い合わせ数を増やしていく仕組みにしたい。」という目標が設定されました。
それを実現させるにはどうすれば良いのでしょうか?まずは現在の状況を把握しないことには対策がとれません。
そこで頼れるウェブマーケターの方に依頼し、ゴーリストのウェブサイト、サービスのLP、オウンドメディア「HRog」、メルマガ登録・配信、Facebook、etc...に至るまで、ウェブ周りのありとあらゆるデータを分析していただきました。
そのマーケターの方に解説してもらいながら、デザインチーム、HRog編集長と、関わるメンバーで現状を共有。
現在は目標に向かうための改善策と優先順位をたててもらい、じわりじわりと改善策を実行しているところです。

 

例えば何したの?

ほんの一部ですが、改善策についてお話しします。
例えば今回のHRogチャートLPへの流入ルートについて。
HRogチャートのようなサービスを欲しいと思う方※がLPに辿りつき、サービス情報を目にするにはどんなルートがあったのでしょうか。
(※HRogチャートを利用されるお客様は求人広告代理店勤務の営業マンや営業企画の方が多いです。業務で求人情報の市場調査をしたり、クライアント企業の競合となる会社の求人情報を比較分析するために使用されています。)

これまでには、おおよそ3つのパターンがありました。

(A)「求人情報」「分析」「リスト」などのキーワードを含む検索をした場合にLPを見つける

(B)HRogチャートの情報を別ルート(営業や口コミなど)から得、既にサービスの存在を知っている状態で検索する
(C)ゴーリストのウェブサイトからサービスページへ行き、アクセスする
等です。

f:id:e-nagata:20180515171902p:plain

(ウェブマーケターの方からいただいた資料より一部お借りしました)

 

そこから潜在的なニーズのある層に対して、どうすればもっとサービスの周知ができるのか。
その解の一つが、オウンドメディア「HRog」と連携したウェブマーケティングです。
HRogの読者層とHRogチャートのターゲット層は非常に近いため、自社記事の発信を通してアプローチを広げていくことで、サービスの周知度やお問い合わせ数も上がっていくのではないか。という仮説に基づいています。
HRog編集長の頑張りもあり、現在HRogでは月に10本程自社記事を作成・発信。
さらにHRogチャートを使った週間レポート記事は、今年の2月上旬にマーケターの方から見せ方(フォーマット)を変える提案をいただき、構成を修正・追加するなどの改善を行いました。キーワードや訴求ポイントを盛りこみ、HRogチャートならではの特徴も伝わるようにしたところ、HRogチャートLPへの流入数が3ヶ月(2018/02~2018/05)で5倍程度UPしました。

f:id:e-nagata:20180516143733p:plain

(ウェブマーケターの方からいただいた資料より一部お借りしました)

数値に見える明らかな成果!快挙!と喜んだのもつかの間、ここで問題が一つ。PV数が劇的に改善しても、肝心のコンバージョン数はなかなか伸びていなかったのです。
LPへのアクセスは増えたのに、サービスのお問い合わせ数は伸びない。ボトルネックは一体何だ...?


この問題について、定期レポート記事に施したのと同様に、LPの見せ方も改善すれば訪問者がサービスについて理解し、「このサービスを使ってみたい」と感じさせることができるのでは?(→お問い合わせ数も向上するのではないか?)という案が立てられました。

事業部全体の目標や、達成するためのマーケティング策を練る中、「サービスのお問い合わせをグロース(成長)させられない原因がここ(LPの構成)にあるだろう」というポイントが明確になり、LPリニューアルの優先度が高いものになりました。

 LPをいつか直したいね、デザイン見直したいね、といった会話はこれまでデザインチーム内でも上がっていたものの、ほとんど見た目の話に留まったものでした。きちんと工数をとって対応する必要がある、という理由はかなり曖昧なものだったと思います。
そのような経緯があってLP全体をリニューアルする話が決定したのでした。

 

詳細なペルソナ設定

上記にも書いた通り、HRogチャートのターゲットとなる層は求人広告代理店勤務の営業マンや営業企画の方です。しかし、両者をカバーするとなると実際の業務はもちろん、年齢層、ピタリとくる困りごとも異なってきます。
今回はこのどちらかに焦点をあて、軸をブラさないようにしてLPを構築しようという方針になりました。


HRogの自社記事のアクセス数を追っていると、よく見られた記事、そのタイトル、使われている文言、この表現やトピックがささっている読者はどの層か?と仮説を立てていくことができます。(データ分析って偉大ですね)
話し合った結果、今回フォーカスするのは「求人広告代理店勤務の営業マン」になりました。

一体彼はどんな営業マンなのでしょうか?思い当たる特徴をどんどん上げてペルソナ像を具体的にしていきましょう。
・若手(20代前半)
・仕事や情報収集への意識高め
・仕事で売上をあげたい...etc

f:id:e-nagata:20180516150044p:plain

(ウェブマーケターの方からいただいた資料より一部お借りしました)


マーケターの方にリードしていただきながら、JobToBeDone(この人が何を成し遂げたいか?その課題は?)や、家族構成、趣味、好みの雑誌...に至るまで詳細情報を埋めていきます。

何を隠そうHRog編集長が人材業界の営業出身ということもあり、このペルソナ設定については難なくクリア。
こんな情報まで必要なの?という項目もありますが、詳細を埋めておくことで、これ以降の作業を行う時も「この人がターゲットであるならば、◯◯が必要だろう、こっちの方が良いだろう」という想定がしやすくなります。実際、ピン留めがされていると何か迷ったときにも判断がしやすいなと感じました。

 

 

競合調査・理解

HRogチャートは求人市場分析ができるツールです。ニッチなフィールドに特化しているので、競合となるサービスはほぼないと言って良さそうです。
一方、HRogチャートでできる機能の一つに、「詳細な絞り込み条件でオリジナルの営業リストを作る」というものがあります。その機能に関しては、近い商材やそれを扱う企業を競合としてリサーチする必要があるでしょう。競合と思われる3社の、商材を紹介するページの内容やその表記・表現の方法を細かくチェックしました。 

f:id:e-nagata:20180516151110p:plain

(リサーチ表の一部)
他社との比較をすることで、同時にHRogチャートの強み・独自性も発見し、打ち出すことができますね。

 

 

一般的なLPの構成

現LPでは「HRogチャートでできること」について情報が並べられています。しかし、サービスを提供しているこちら側が伝えたい事柄ばかりが目立って、一方通行になってしまっている感が否めません。そもそも訪問者が知りたい情報は何だろう?サービスが彼らにどんな効果をもたらすのだろう?と根本的な構成を練り直す必要がありました。

そこで効果的なLPの基本構成についてリサーチ。

一般的なLPの基本構成を頭にいれたところで、さらに競合のサービス紹介ページとも比較してみます。このページでは何が謳われて、何が省かれているのか。HRogチャートの紹介にあてはめたとき必要となる情報はどれか。などを判断していきます。 

結果的に、HRogチャートのリニューアルではこのような構成を採用しました。

f:id:e-nagata:20180516154118p:plain

(こちらの記事を参考にさせていただきました。)

5年間のランディングページ制作で行き着いた鉄板の構成と7つのポイント|ferret [フェレット]

 

 

構成の確認

一般的なLPの構成と競合企業のLPをリサーチし、マーケターの方とその特徴について共有したあと、お互いの宿題としてHRogチャートに必要な情報の構成案を作ってくることにしました。

作成したものを見比べてみましょう。どれどれ

f:id:e-nagata:20180516155058p:plain

(マーケターの方作成) 

f:id:e-nagata:20180516154855p:plain

(レタス作成)

 ペルソナの心の声と表情を書いてあると感情の変化がとても汲み取りやすく、良いなと思いました。ナレッジとして次回から取り入れていきたいです。
両者で作成すると、照らし合わせたときにお互いの考えていたことが確認でき、差異があった場合にはどちらを採用するか、あるいは組み合わせるか、案をよりよくブラッシュアップできます。

複数人で案を揉むと進捗がかなりスピーディに感じます。
HRog編集長も毎週ミーティングに参加しているので、その場で即意見をもらえ、大きな修正や手戻りも少ない!ステークホルダーを含んだミーティングは今後も都合が許す限り行いたいものです。

余談ですが、デザインスプリントでもステークホルダーの参加について触れていましたね。方向性がちぐはぐしてしまったり、途中で決定が覆って作業時間が無駄になってしまわないよう、大事なポイントでは話し合いに参加してもらうようにする。情報をシェア&確認(できそうでなかなかできないことなので、今回はラッキーなのかも)。

 

編集長に最終確認後、LPの構成を微調整&FIXしました。これでいよいよワイヤー作成に歩を進められます! 

ふー、だいぶ長くなりました。

はたしてどんなLPになるのでしょう...。後編へ続きます!

デザインスプリント入門(第2回)

f:id:k-mitsui:20180420125812p:plain こんにちは、ミツイです。
デザインスプリントワークショップについてのブログ、第2回です。
前回の記事を読んでいない方は、こちらからどうぞ。
http://design.goalist.co.jp/entry/2018/04/09/082234

デザインスプリントの流れをおさらいします。
今回のワークショップでのDay1の流れは以下。

  1. ユースケースの書き出し
  2. ユーザーテスト(課題発見)
  3. How Might We(今回はここまで)
  4. テストの結果とHow Might Weの結果をユースケースにマッピング
  5. サイレント評価

今回は前回に引き続き、4から説明していきます。

テストの結果とHow Might Weの結果をユースケースにマッピング

f:id:k-mitsui:20180420151215p:plain
※写真では丸シールが貼ってありますが、本当はこの段階ではないです

ポストイットに書き溜めたHow Might Weとテスト時に気づいたGood/Badを、最初に書いたユースケースにマッピングしていきます。
ユースケースのどのタイミングでGood/Badがあるのか、改善する可能性があるのか。
ぼんやりと考えていたことが全体の中でどういう意味を持っているのかや、その優先度についても視覚的に見えてきます。
この視覚的に見える、というのが非常に役に立ちます。
サービスデザインでは“ホリスティックに考えるべし”ということが重要だとされますが、この作業はその一歩になるかな、と。
例えば今回のデザインスプリントの対象である弊社サービス「HRogチャート」では、“スクロール量が多い”というネガティブがあり、それが“どこに何があるかわからない”というネガティブにつながり、“集計軸を考える時間が長くなる”というネガティブにつながります。

さらに、他のメンバーの視点があることも思考が広がる&深まるきっかけになりました。
デザイン制作ではレビューが非常に大事ですが、そこでも“複数の目”というのが一つの重要なポイントです。
違う角度からの視点が入ることで、それぞれが立体的に問題(や良いところ)を捉えることができます。
他部署のメンバーの視点は、全く違う角度からの気づきだったり、問題に対する温度が違ったりするので、部署内のレビューともまた違った良さがあります。
(部署内でのレビューはより専門的な視点で深ぼることができるので、そちらも大事ですが)

サイレント評価

f:id:k-mitsui:20180420151250p:plain

いよいよ、今回のスプリントで取り組むべき課題を決定するフェーズです。
まず、それぞれのポストイットに目を通します。
つらつらと見ていると、他メンバーの気づきを得て頭の中を更新していく感じがしました。
一通り見終わった後に、どの気づき/アイデアが重要だと思うか、投票をしていきます。
この時にファシリテーターの方からアドバイスされたのが、喋ったり相談したりしないこと。
純粋に、自分がどう感じるかを基準に投票するのが大事です。
具体的には、各自が丸シールのシートを持って共感できる問題にシールを張っていきます。
シールのうち1枚は大きいシールにし、最も解消すべき問題に使います(今回は大きなシールがなかったため星印をつけることで代用しました)。

メリット

  • 課題がどこにあるのか視覚的にわかる
  • 課題の評価をフラットに行える

各自が貼り終わると、シールの密集度によってヒートマップのように見えます。
通常のmtgでは発言数が多い人や理由をうまく言語化できる人の声がどうしても強くなりますが、サイレント投票では全員の認識が視覚化されます。
ロジカルな思考はもちろん大事ですが、ヒートマップは言語化する前の状態でも説得力があります。

気をつけたほうが良い点(反省点)

  • シールを貼る時は深く考えず直感的に
  • 大きなシール、色別の付箋などのツールの準備はしっかり


今回のワークショップでは貼られたシールの数が少なく、うまく視覚化がされませんでした。 シールの数が少ないと、たまたまその付箋に気づいた人が居ただけという感じがしてしまいます。 デザインスプリントでは各フェーズに時間制限があるので、それをうまく使って勢いで貼ってしまったほうが皆の意見が視覚化されます。 また、大きなシールで重要課題だとわかるようにしたり付箋の色を変えてポジティブかネガティブかをわかるようにしたりと、ツールは視覚的にわかりやすくするために大事です。買い忘れなどないよう、しっかり準備しましょう。

次に、スプリントに参加している決定者(ステークホルダー)がシールの分布を踏まえて、どの課題に取り組むべきかを決定します。
ここは、ステークホルダーがスプリントに参加するのが大事だと実感しました。
メンバーの議論ではなかなか結論が出しにくいし、出た結論を後々ステークホルダーにひっくり返される場合もあります。
(“ひっくり返される”は悪い意味でなく、ステークホルダーの方が大局的に状況を見ている場合が多いので、その視点が入っていないと結論が短絡的になりがちなのです)
スプリントにステークホルダーが参加できないとしたら、ここでの結論をすぐに共有すべきだと思います。
その時は、ユーザーテストの結果やユースケース、サイレント投票の結果など、スプリントでの成果物がステークホルダーに結論の意味を伝える役に立ちます。

今日のまとめ

とにかく、これで今回のスプリントで対象とする課題が決定しました。
改めて決定者が、課題について説明します。
スプリントを通して、今回のスプリントのゴールからズレていないか、各自が意識していることが大事です。
さぁ、ここから発想を広げて課題に対しての解決法を考えていきます。

次回は、アイデアスケッチ、プロトタイピング、ユーザーテストについて書きます。
今回は一旦ここまで。
ご精読、ありがとうございました。

Facebook広告画像のルールを調べてみた

こんにちは。レタスです。

4月に入り、ゴーリストにも新卒3期目となる新人さんが入社しました。みんなフレッシュで良いですね。今年も色が濃そうなメンバーが勢揃いです。

 

さて、今回は弊社のキュレーションメディア、HRogのFacebook広告用の画像を作成していてハマった点について書きます。

初めてFacebook広告の画像について調べてみたんですけど、規定がいろいろあるんですね〜。

わかったことを備忘録、tipsとして記しておきたいと思います。

 

 

Facebook広告用の画像

先月、弊社のHRog編集長から依頼が。

「この前自分が作った画像だとFacebook広告を出すのに弾かれてしまったから、どうにか画像の修正してくれへんかな?」

とのこと。

f:id:e-nagata:20180403184041p:plain

ほーん、Facebook広告とはなんぞ(まずそこ...)、から始まったのですが。

広告画像について、基本的にはこういった条件があるようです。

・サイズ:横1200px × 縦628px

・テキスト量によって広告の配信量が変動する(テキストが多いほど広告のリーチが制限される)

・テキストの目安は画像全体の20%まで

ちなみにロゴに使用している文字も画像上のテキストと認識されるとのこと。

編集長の作った画像の場合だと、テキストの面積が多く、20%ルールに引っかかってしまっています。

承知しました、対応します〜

 

 

やったこと

ちなみにそれまでは、HRogの自社記事用アイキャッチは記事タイトルをいれたものを作っていました。できれば同じ画像をFacebook広告にも使い回したいのですが、このままでは使用できないので作りかえていきます。

テキスト量を控え、双方に使える仕様でアイキャッチ作成の方針を変更することにしました。  

 

例えばこれはFacebook広告には使えないのでf:id:e-nagata:20180403171731p:plain

こんな具合にしていきますf:id:e-nagata:20180403172013p:plain

 

作成した画像のテキストがオーバーしてないかどうか、どうやって判定するの?

そんな問いに応えてくれるのがこちらです。

テキストオーバーレイツール

こちらのツールに画像をアップロードすると、掲載したい画像が使用可能かどうかの判定をしてくれます。広告作成前にはぜひチェックを。 

f:id:e-nagata:20180403172338p:plain

テキストを一言だけにしとけばギリギリ大丈夫〜

 

 

テキストオーバーレイツールに怒られる

Facebook広告画像の20%ルールについてわかりました。テキストの要素を無くすか、あるいは一言だけにして構成すればまあいけるでしょう!

大丈夫だろうと思いますが、一応チェックしておきます。

 

 うそんf:id:e-nagata:20180403174646p:plain

そんな、なんでですか、

(「HRog編集部」以外の)テキストをいくら削ろうとも許してくれません。何故。

 

 

広告ポリシーを熟読す

ええ...なんでこんなに怒られてるの、20%ルール守ってるし、警告文と全然噛み合ってないじゃないですか。

理由がわからないのでFacebookの広告ポリシーに目を通してみました。

こちらには広告用画像のテキストに関するルールを始め、広告を出す際の決まりが事細かに記載されてます。

(参考)広告ポリシー

 

広告画像に関してわかったことはこちらです。

・写真素材に文字が含まれるものはテキストの面積にカウントされない

例えば、新聞や本の表紙、商品のパッケージなど、被写体自体に文字が含まれているものは例外的にテキストとしてカウントされません。

しかし、製品画像のロゴ部分を極端にアップで写すことは認められていないので、製品全体が表示されている画像を使用する必要があります。

ゲーム画面やイベントのポスターなどを素材とするのもOKです。

 

・Facebookのロゴは正しく使う

勝手に変形や要素の付け加えなどをしない、などですね。ちなみに広告に挿入する文章のなかでもスペルミスなどは怒られるようです。例えば「facebook」「FaceBook」などではだめ。

 

・実際にない機能を想像させるものはだめ

例えば、画像上で再生ボタンや閉じるボタンに似ている要素があるなど。閲覧者にとって紛らわしいものを入れるのは控えるべきということですね。

  

ボタン?

 

おや、これは完全にボタンf:id:e-nagata:20180403175622p:plain

なるほどこれは...NGをだされても文句は言えまい。

 

ので、

アイコンを丸で囲っていたものをやめて、単体にするとなんとかうまくいきました。

力わざで〜f:id:e-nagata:20180403180316p:plain

でも、下二つに関しては結局理由がわかりません。何故。

 

 

 未だ残る謎

広告ポリシーにも「このツールの精度は完璧ではない」と記されていますし、また、最終手段としては広告非承認時の意義申し立てがあるらしいです。

うーん、解決してない画像に関してはこちらを送るしかないのでしょうか...

(参考)広告が承認されませんでしたが、何かの間違いではないかと考えています。次のステップ | Facebookヘルプセンター | Facebook

  

もしどなたか解決方法をご存知でしたら教えていただきたいです。

Facebook広告の奮闘記でした。

 

(以下、参考にさせていただきました)

Facebook広告の 20% ルールが変更されました! - Torchlight Inc.

Facebook、20%テキストルールの改定―画像内テキストの分量により配信量を変動 - Feedmatic Blog

【2018年版】今さら聞けないFacebook広告 基礎編!-後編-| Webディレクターマガジン

デザインスプリント入門

f:id:k-mitsui:20180420151913p:plain

こんにちは、ミツイです。
っという間に4月になってしまいました。
「あ」とも言えないくらい早いです。

まだ寒い2月のことになりますが、株式会社ISAOさんという会社にデザインスプリントのワークショップを開いていただきました。
時が経つのが早すぎて書くのが遅くなってしまったのですが、非常に勉強になったのでブログとして共有させていただきます。
※ウカウカしているうちに社内のエンジニアに先にブログに書かれてしまったので、 デザインブログではワークショップで得た気づきと復習として調べたことをベースに書こうと思います。
ゴーリストエンジニアブログでの記事はこちら↓
http://developers.goalist.co.jp/entry/2018/02/23/151759#STEP%EF%BC%91Discover%E7%99%BA%E8%A6%8B



デザインスプリントとは

デザイン上の問題を解決するための短期間でのスプリントのこと。
Google VenturesがDesign Thinkingやアジャイルなどの方法論を元にカスタマイズしたものです。
Slackやブルーボトルコーヒーが導入していることで有名です。
詳しいことは以下のスライドがわかりやすいです。

www.slideshare.net

デザインスプリントとブルーボトルのプロトタイピング(翻訳)
http://labs.theguild.jp/?p=102

The Design Sprint
http://www.gv.com/sprint/

今回のワークショップでは時間の関係もあり、Day1で課題の発見・見える化・決定と駆け足で行いました。
その分Day1は内容が厚い、熱い。
長くなりそうなので、小分けに書いていきます。



流れ

今回のワークショップでは弊社のサービス「HRogチャートhttps://chart.hrog.net」をリデザインすることをテーマにしたので、
まずはサービスについて理解するため企画者・開発者からの説明から始まりました。
サービスについて改めて参加者の理解が整ったところで課題の理解フェーズに入ります。
課題の理解のフェーズで行ったそれぞれについて、所感含めて書いていきます。

  1. ユースケースの書き出し
  2. ユーザーテスト(課題発見)
  3. How Might We(今回はここまで)
  4. テストの結果とHow Might Weの結果をユースケースをマッピング
  5. サイレント評価



1.ユースケース

f:id:k-mitsui:20180402125352p:plain

サービス内での重要なユースケースについてマップを描きます。
重要なユースケースに絞ることが大事。これ、本当に大事。
単純にサービスに関わるユーザーストーリーと言っても、時間軸に対しても、細かさに対しても全部やろうとすると膨大になってしまいます。
AIDMA、LPのオンボーディングからコンバージョンまでの動線、入力フォームのユーザビリティテスト…とやっていくと、今回考えたいプロダクトUIまで進めません。
また、使い始めてからのサポートとのタッチポイントなどまで考えてしまっても論点がずれます。

  • 適度に粗く描く
  • スタートとゴールを決めて描く

のが大事なんじゃないかなと思いました。



2.ユーザーテスト(課題発見)

デザインスプリントでのユーザーテストは課題発見のためのテストと、検証のためのテストがありますが、この時のテストの目的は課題発見。
テスターには別室でサービスを操作してもらいます。
皆が見ている前でテストするのも緊張しますもんね。なるべくリラックスした状態で、テストするのが大事だそうです。
共有したディスプレイの画面とカメラで撮影したテスターの顔を見ながらテストを進めます。
f:id:k-mitsui:20180402130052p:plain

今回はappear.inというサービスを使いました。こいつ、めちゃ便利です。
https://appear.in/

まずは、スタートとゴールを設定して、テスターに指示を出します。
HRogチャートは求人市場のデータを分析するサービスなので、
「千代田区の飲食・フードの年間出向金額の多い企業別ランキングを出してください。」のようなゴールを設定しました。
ログイン画面から始めてもらい、心の声をつぶやきながら操作してもらいます。
テスターの表情や、マウスの動き、つぶやく言葉や語調からサービスの問題や良い点が見えてきます。
それをネガティブかポジティブかわかるようにしてポストイットに書いていきます。
(本当は色を分けると楽そうですが、今回は全て同じ色のポストイットだったので“ネ・ポ”のマークを付けて区別しました)
やってみると、あっという間にポストイットがいっぱいになります。
ネガティブばかりに目がいってしまうのは、伸びしろが多いということで逆にポジティブ!と自己暗示をします。

テストをし終わったら、全体を通して感じたことをインタビュー。
どこでどう思ったのか感じたのか聞いていきます。
テストも色々コツを教わったのですが、Day3の記事で書きたいと思います。



3.How Might We

f:id:k-mitsui:20180402141930p:plain

テストで得たネガティブ・ポジティブの気付きに対して、
「我々はどうすれば◯◯できるか」という形で「良い面を伸ばす」「反対を探す」「悪い面を除去する」「そもそもを考える」という4方向に考えるのがHow Might We。
※How Might We、略してHMW。IDEOが使い始めた問題を定義する手法だそうです。

参考
ddcph.hatenablog.com dschool.stanford.edu

今回のワークショップで実際出たHRogチャートに対する気づき(課題)に

  • 集計結果を出すのに時間がかかる。
  • 集計中も他の操作を行うことができるが、集計がいつ終わったのかがわからない。
  • 複数集計すると、待ち時間はどんどん伸びる

というのがありました。
それに対して、

「良い面を伸ばす」 我々はどうすれば、集計されるまでの時間を有効活用できるだろうか?

「反対を探す」 我々はどうすれば、待ち時間を楽しくできるだろうか?

「悪い面を除去する」 我々はどうすれば、集計が終わったことをユーザーに知らせられるだろうか?

「そもそもを考える」 我々はどうすれば“待つ”という状況をなくすことができるだろうか?

のような形で一つの気づきに対して、4方向に考えを広げることができます。
最初の気づきでは問いが漠然としているので、アイデアも出にくいですが、How Might Weで考えることで解決の方向を集中して考えることができますね。



今日のまとめ

ユーザーの理解、課題の発見はUXにとって要。
ユースケースの作成、ユーザーテスト、HMW共に初めてだったので、非常に勉強になりました。
さらにデザインスプリントは時間制限を設けて行うので、全てを集中して行えたのもとても良かったです。
デザインスプリントを取り入れたいという会社さんは、ISAOさんのワークショップ、オススメです。
www.isao.co.jp

次回もユースケースへのマッピング、サイレント投票、と書いていきますので、よろしくお願いします。
ではまた。

ゴーリストのウェブサイトをリニューアルしました#3  ーメインビジュアル編ー

こんにちは。レタスです。

先日の投稿からすっかり日があいてしまいました。ご無沙汰してます。

ゴーリストの会社ウェブサイトリニューアル、メインビジュアル作成編について書きたいと思います。お付き合いくださいませ。

 現在メインビジュアルに使っているのがこちらの写真なのですが、ここに至ったまでの経緯を書いていきます。

f:id:e-nagata:20180406105100j:plain

コンセプト 

「新しいフェーズのゴーリストを伝える、旗艦店※のようなサイト」

 

コンセプトに関わりそうな重要ワード

・ニーズが多様化している時代だからこそ、多様性をもった「チーム」で戦う

・ゴーリストはお客様をゴールへ導く、伴走する存在

・目的思考が中心にある 

 

テイスト、印象に関わりそうなもの

必要以上に飾らない、等身大、機能美のようなシンプルさ

若さと進み続けるエネルギー

人間らしい暖かさ( not 機械的なイメージ )

信頼感、 (固すぎない)ロジカルな雰囲気

を元にメインビジュアルを3案作成しました。

(3案をつくるまでにブレストやミーティングや試作やら諸々諸々、泥臭い作業がたくさんあったのですが...、いったん割愛します)

 

 

メインビジュアル案候補(だったもの)

今更お見せするのもめちゃめちゃ恥ずかしいのですが...ごそごそ引っ張り出してきました。

「旗艦店のようなサイトをつくる」を目的として、ゴーリストの会社像を一番表現できるモチーフってなに?と考えていた頃のものです。

 

案1:「チーム」をキーワードにした案

f:id:e-nagata:20180404144740p:plain

代表へのインタビューから、「ニーズが多様化している時代だからこそ、(ゴーリストは)多様性をもった「チーム」で戦う」という戦略を聞きました。

個人戦ではない、チーム戦だからこそ凡人でも勝つことができる。さらに必要に応じて柔軟に陣形を変えることもできる。それがゴーリストの強みや特徴の一つである、とピンを止めました。

こちらの案ではメンバーを一つ一つの円に見立て、それを集めて、ウェブサイト内で自由に形を展開させていく予定でした。メインビジュアル一枚だけで内容を伝えるというよりは、ページ全体を回遊して「チームで自由なフォーメーションを組む」特徴を示そうと考えていました。

 

 

案2:「ゴール」、「目的思考」をキーワードにした案

f:id:e-nagata:20180404144857p:plain

ゴーリストという名前の由来やミッションにもあるように、重きを置いている「ゴール」という言葉にフォーカスした案です。

「ゴール」の定義ってなに、意味してるものってなに、とロードマップ的に掘り下げ、図案化していくイメージでした。

「ゴール」は(個や組織にとっての)目標だよ、といってしまうのは簡単です。...なのですが、ゴールに至る段階には何があるの?そのステップをどう捉えているの?会社としてお客様とどう関係するの?ゴールの先は?など、曖昧な部分が多くありました。それらを言語化し、図そのものをビジュアルとして使用できないかと考えました。

 

 

案3:頭文字のGを押し出した案

f:id:e-nagata:20180404144941p:plain

 今回のリニューアルはそれまでのウェブサイトと比べ、変更がとても大きいものでした。そのため案の一つとして、いったんシンプルに、誰もが「Goalist」の頭文字のGなのね、と意味を理解でき、疑問が残らないようなものを作ってみても良いのではと思って制作したものです。懐かしや、、(深堀はあんまりしません...)

 

 

 

メインビジュアル案決定

だいぶ前に作ったものなのでこんなのもあったな〜...と回想に耽ってしまいました。全然案が定まらずにたくさん迷走しましたね...当時はにが...苦かったですね。

代表とデザイン部でMTGした結果、案2の「ゴール」へ向かう思考そのものを図案化する案に決定しました。

とりあえずメインビジュアルの方向が決定したのでほっと胸をなでおろします。

これをどうブラッシュアップしていくかがまた次の課題です。

幾何学で構成していたので、どうしても電車の路線図に見えるんですよね...。そのような雰囲気を出したいわけではなかったので、これはどうにかしたいなと。

加えて言うと、要素(単語)の数も数が多くて、図が複雑すぎるかもしれません。もっと大事な要素を見つけたり、不必要なものを削いでいくことができるはずです。「ゴール」のロードマップを描くための次なる探求が始まりました。

 

 

ロードマップを精査する

代表の加藤をはじめ、役員の林にもゴーリストの考える「ゴール」までの道のりについて質問し、ロードマップを描くための要素の洗い出しと、その意味について噛み砕いていきました。

ゴールとは

・その時点時点でのゴール、に概念が変わってきている。マイルストーンに近い。ステップ。

・ゴールに達成したら、その次がある。

 

ゴールまでの道のりとは

・直線や短期という概念ではない。

・スプリントやPDCAをなんども、二転三転しながらぐるぐる回すイメージ。

・いろんな線や分岐しながら進行方向がある。

 

お客様との関係とは

・お客様が困りごとの解決に向かうためにリードする存在。

・とはいえ、上からゴールを示す立場ではない。

・一緒に進む。併走するイメージ。

・お客様と協力して解決策を考えることで、新たなアイディアが生まれる。

 

ゴーリストの特色は

・目的思考であること。

・チームで柔軟にフォーメーションが組めること。

 

ゴールに導くための(ゴーリストの)メソッド

・B(business)、T(technology)、C(creative)の3つの軸を掛け合わせて解決策を考える。

・デザインスプリントの手法(ある課題の中長期的なゴールを決め、短期で試作を繰り返す)で取り組む

 

これらの言葉もスラスラと出てきてまとめられたわけではなく、図を描きつつ、わからない要素が出る度に質問を重ね...と、かなりざっくりのラフから10回以上更新して出てきたものです(図が多すぎてえらいこっちゃなのでここでは割愛しますが)。

そしてそれらの言葉や関係性を組み合わせて落とし込んだのが、こちらの図になったというわけです。

f:id:e-nagata:20180406105100j:plain

 ちなみに描く素材も紙に鉛筆、サインペン、NUボード、ポストイット、ホワイトボード、むしろillustratorのベクターの質感はどう?と様々なものを実験しました。結果、「思考している段階」と、「人間らしさ( not 機械的なイメージ)」が一番よく表れているということで、ホワイトボード&マーカーで描いたものを採用しました。

だいぶ試行錯誤しましたが、どうにか構成し終わり、写真に収めました。パシャり。

単焦点レンズがあるとほんとに良いですね〜。 

 

インタビューや案のブレストなど、周りのたくさんの人の協力のおかげで制作することができました。原案と比べるとだいぶ変わりましたね。

 

 

全体のモックアップ作成

さあメインビジュアル作成という大仕事が終われば、あとはindexページ全体や下層ページのデザインをゴリゴリ進めるのみです。肩の荷が降ります。ここからは「テイストや印象に関わりそうなもの」にあげたキーワードを意識して、そこから外れないようにデザインを考えていきます。

 

基本のベースカラーは白(部分的な背景色として薄い灰色)、メインカラーは赤です。会社とメンバーの若さや前進するエネルギー、どちらもイメージできる色ということで赤に決定しました。また、ゴーリストのロゴ(旗部分)の色を踏襲するという意味もあります。

f:id:e-nagata:20180406141811p:plain

 

 

アクセントカラーは紺にしています。ウェブサイト内で出てくる割合は低いですが、白・赤を基調とした配色に信頼感や落ち着いた雰囲気をプラスしたいと考えて使用しています。

f:id:e-nagata:20180406143544p:plain

全体的に装飾はあまり加えていません。大きな変化は、ページ内のセクション別の色面でつけています。「必要以上に飾らない」「機能美のような美しさ」という点から、なるべくスッキリと構成しました。また、柔らかな印象を保つために、文中になるべく固い言葉は使わない、行間はゆったりと幅をもたせる、アイコンは丸めのものを使う、などしています。

 

Sketchで10ページほどのモックアップを作り、モバイル版も作成して画面デザインの作業は完了です。

f:id:e-nagata:20180406145200p:plain

 インタビューから拾った内容に即したものが作れたのかな、どうでしょう...(ひやひや)

 

 

 

振り返って

モックアップ作成後、html,CSSのコーディングも担当したので、今まで使っていなかったフレームワーク(Material Components for the Web)にもだいぶ泣かされたり、クロスブラウザやデバイス対応にも苦戦しましたが、いったんリニューアル記をDONEとしたいと思います。どうにかリリースも期日に滑り込ませることができました...!

すでに過去のこととなりつつありますが、レタスがジョインする前の先輩たちの作業スタート段階から含め、思い返せば長かったです。

大きめの仕事はなるべくそれだけに注力できれば良いですが、それが可能かどうかは他のタスクや状況次第でもありますよね。レタスがジョインしてからは他の差し込みの仕事は少なめに、こちらの作業の優先度を高めてもらっていたのでとても助かりました。

 

リニューアル記が続いたので、今度のブログはtips系のものを書きたいなと思います。

それでは!