デザインスプリント入門（第２回）

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

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

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

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

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

※写真では丸シールが貼ってありますが、本当はこの段階ではないです

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

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

サイレント評価

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

メリット

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

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

気をつけたほうが良い点（反省点）

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

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

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

今日のまとめ

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

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

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

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

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

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

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

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

Facebook広告用の画像

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

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

とのこと。

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

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

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

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

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

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

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

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

やったこと

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

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

例えばこれはFacebook広告には使えないので

こんな具合にしていきます

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

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

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

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

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

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

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

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

 うそん

そんな、なんでですか、

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

広告ポリシーを熟読す

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

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

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

（参考）広告ポリシー

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

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

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

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

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

・Facebookのロゴは正しく使う

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

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

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

ボタン?

おや、これは完全にボタン

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

ので、

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

力わざで〜

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

 未だ残る謎

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

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

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

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

Facebook広告の奮闘記でした。

（以下、参考にさせていただきました）

Facebook広告の ２０％ ルールが変更されました！ - Torchlight Inc.

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

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

デザインスプリント入門

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

まだ寒い２月のことになりますが、株式会社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やブルーボトルコーヒーが導入していることで有名です。
詳しいことは以下のスライドがわかりやすいです。

Design Sprint ガイドブック v2 from Takaaki Umada

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.ユースケース

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

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

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

2.ユーザーテスト（課題発見）

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

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

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

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

3.How Might We

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

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

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

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

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

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

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

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

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

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

今日のまとめ

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

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

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

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

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

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

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

コンセプト 

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

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

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

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

・目的思考が中心にある 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

メインビジュアル案決定

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

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

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

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

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

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

ロードマップを精査する

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

ゴールとは

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

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

ゴールまでの道のりとは

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

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

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

お客様との関係とは

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

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

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

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

ゴーリストの特色は

・目的思考であること。

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

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

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

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

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

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

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

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

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

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

全体のモックアップ作成

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

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

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

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

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

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

振り返って

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

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

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

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

それでは！

ゴーリストのウェブサイトをリニューアルしました#2 ーゴーリストののれん編ー

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

最近陽が差すとぽかぽかですね。春の兆しですね。(喜び半面、花粉症で泣いてますが)

前回はゴーリストのウェブサイトをリニューアルするにあたって、
何もないところからメンバーと代表へのヒアリング・インタビューを重ね、なんとかコアに持っていけそうなキーワードを見つけ出したところまでを書きました。

design.goalist.co.jp

今回はそこからのブレスト編です。

 

拾ったキーワードを分類する

「ゴーリストの会社像とは？」の問いに対して、代表へのインタビューやチーム内でのブレストを通して出てきたことばたち。

アイディアを自由に発散したあと、少しずつ必要なものを取り出していきます。前回までの振り返りです。

テイスト、印象に関わるもの

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

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

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

コンセプトに関わりそうなもの 

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

・目的思考が中心にある

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

遅ればせながら、インタビューと同時並行でサイト作成のコンセプトもまとめることができました。(本来はコンセプトが先にあるのでしょうけど)

ウェブサイトの具体的な方向性をどうしていきたいのか考えるのも大事なのですが、いきなりそちらから手をつけるよりはやはり今回なんのためにわざわざ大規模なリニューアルをするのか？の咀嚼が必要だと思います。

順番が多少前後したものの、 今回のウェブサイトのコンセプトは

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

といったところに落ち着きました。
※各地に出した同系列の店の中で、とりわけ力を注ぎ、ブランドの浸透を図るための中心的な存在となる店のことです。フラッグシップ-ショップとも。

これまでよりも会社のあり方を示し、かつ理解されやすいサイトを目指します。

これが決まることで、上記の「コンセプトに関わりそうなもの」からどの項目を掘り下げるのが「新しいフェーズのゴーリストを伝える、旗艦店のようなサイト」に一番適しているか判断していくことができそうです。

ゴーリストののれん

ゴーリストのコアを探るべく代表へインタビューをする中で、

「IT事業をメインとしているけれども、パソコンやソフトウェア、通信技術といったイメージを全面に押し出すわけではない。あくまでも技術は手段であるから。」

 という言葉が出てきました。

では我々は何屋なのか？

という疑問が残りました。

その時点ではどんなイメージを持たせるべきなのか、レタスには全くピンときませんでした...。

加えて、トップページのファーストビューにはミッションの文言(「個と組織をゴールへ導くプロフェッショナルチーム」)を載せることになっていたので、初めて訪れる人にとっては、補足無しには一体なんの事業をしているのかわかりにくいかと思います。

我 々 は わかりやすく言うと 何 屋 な の か ？

ゴーリストについて何も知らない人に優しいサイトであるように、まず自らを名乗るための言葉をあてがうことが必要でした。

メインでやってる事業のイメージが強く付きすぎてしまうことを(あえて)避ける場合、ウェブサイトの訪問者に「(我々は)何屋である」と表現するのはなかなか難しいものだと感じました。

そこでこんな質問を。

「こちら側に物資やリソース、インフラ、財源が何でも揃っている状態だとしたとき、もし困っている相手（状況は問わない）のために1つだけ何かを提供するとしたら、何ですか？」

 手札はなんでも。潤沢なリソース(ほしい！)

極論、ゴーリストがうどん屋で、最も得意なことや、自信をもっていることがおいしいうどんを作ることであるならば、空腹で困っている人たちに直接うどんを提供して飢えを解消したり満足感を提供することもできます。

だしが自慢のうどん屋です！

社内メンバーは某うどんチェーンのファン多いですね

さて、代表の加藤からの上の問いに対する答えは、
「解決案の提示や提案をする。何が問題でどうしたらいいかHOWを伝える。」

というものでした。

なるほどゴーリストはIT事業がベースであるけれども、実は向いている(進むべき)方向や、やりたいこととしては、相手の課題を一緒に考えるコンサル会社に近いんだろうなと理解できました。(技術は手段と言い切ってますしね) 

HOW！

うどん屋じゃありませんでした

だとするならば、

ウェブサイトを訪問した方に持ってほしい印象として「(コンサルとして頼れる)信頼感」、「(ある程度の)ロジカルな雰囲気」も必要なんじゃないか？とも考えられます。

会話するうちに出てきたり咀嚼できたりするものがたくさんありますね。

コア部分のまとめ！

コンセプト 

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

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

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

・目的思考が中心にある

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

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

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

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

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

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

次回こそメインビジュアルに関することを書きます！ゆるゆると進めます。

フリー素材はこちらからDLさせていただきました！

写真素材なら「写真AC」無料（フリー）ダウンロードOK

ゴーリストのウェブサイトをリニューアルしました#1 ー会社のイメージを探る編ー

ご無沙汰してます。レタスです。
今月19日にゴーリストの会社ウェブサイトをリニューアルしました。祝！
実に企画書段階から約半年間？の紆余曲折(ほんとにいろいろありました)を経て、ついに完成までこぎつけました！祝！

goalist.co.jp

第八期(2018/01~)から、ビジョンもこれまでの「世界中のビッグデータを必要な人に、必要な形で、必要な時に」から「GOAL」へと変わりました。ミッション・ビジョン・バリューを紹介するため今回MISSIONページも新たに作成。

また、創業から8年目になり、徐々にフェーズが移行してきたこともあっての大幅リニューアルとなりました。

旧ゴーリストウェブサイト　トップページ

旧ウェブサイトの方はこまめな更新(新規サービスなどのお知らせ等)を続けるも、3~4年前に制作して以来、大枠はそのままだったのでした。
見返してみると全体のレイアウトやデザイン、受ける印象がちょっと固めでしたね。あと、ちゃんとモバイル対応するための修正が必要でした。

旧ゴーリストウェブサイト　サービスページ
そういえばヘッダーも固定じゃなかったのでスクロールするといなくなってました...

ほぼゼロベースのリニューアル、チームの振り返りや忘備録として、やったことを書き留めようと思います。一ヶ月後に入社する新卒さんに伝えることも兼ねまして。はい。

2017年夏　企画書

企画書段階の当初、元々私はリニューアルに携わるメンバーではなかったので、先輩がはるか昔に作った資料を引っ張り出してきました...

ゴーリストらしいメインビジュアルの方向性や配色の方向性とは？について。

若い会社である分、ほんとに決まっていないことだらけですね。VIのベースもまだ決めていないし、ゼロベース、建築の地盤調査といったところでしょうか。ゼロベース。

とにかく元素レベルで素（もと）を集めることからのスタートでした。

(1)メンバーへのヒアリング

「ゴーリストに抱くイメージとはなんぞ？」を初期メンバーを中心にヒアリングしました
たくさんのキーワードが出てきました。採用ページによさそうですね

内側からの観点をまとめるとこんな感じ

(2)定番の型を調べる

他の参考になりそうな企業ウェブサイトのから大きく項目をあげてみました。
 -実際に働いているオフィスの風景写真の使用
 -空や都市風景などの開けたイメージをもたせる写真の使用
 -お客様の実現したい姿を見せる写真の使用
 -コンセプトのイラスト化
 -メッセージを強調、ダイナミックにフォントのみ使用する
などなど。ある程度方向性の振れ幅を洗い出してみて、「ゴーリストにあてはめるならば？」を考えていました。

サービスが形を持たない分、写真で直接見せるのは難しいかもね、という意見や、コンセプトやビッグデータなどのイラスト化、またはミッションが明確なのでそれをダイナミックに伝えた方が良いのかもね〜などなどブレストしていました。

2017年秋　ジョイン

レタスがジョインしたのはこのへんからです。

・ターゲットは取引させていただくことの多いHR業界の方向け

・作成すべき中身とページ構成が決まっている

という状態で、外向けのイメージやトップイメージの方向性を定めていくフェーズから、ということになります。

採用ページなら内部メンバーへのヒアリングを重点に置いてコンセプトを詰めていく、で良いのですが、今回は会社のウェブサイトということもあり、それだけでは「外に見せたいイメージ」として適しているかは微妙なところです。

ウェブサイトを見る方にどんな印象を持ってもらいたいのかが決まっていれば良いのですが、まずそこから掘り起こさないといけないのが若い会社の難しさだなと感じました。

それまで言葉におこしていなかった部分をデザイン部で考えましたが、痒いところになかなか手がとど... かない。ひたすら痒い。会社の像ってなんなの。あゝ痒い。

霞がかるゴーリスト君

ぼんやりとそこにあるのに見えない...　見ようと思うほど靄がかる...

社風やカラーがあるのはなんとなくわかっていながら、それを伝えるものとしてはっきり表現できないというのはなんとも不思議です。

毎日毎日会社に来て仕事をしているはずなのにいざ直面するとフィットする像がわかりません。

悩みますねえ

答えは作るものではない、そこにあるのだ

ゴーリストのコアを知り、今から数年後にかけて目指すイメージに一歩でも近づくのが今回の大きなミッションです...。

といってもまだぴよぴよの社会人1年目、代表の加藤が社会人になってから20年ほどかけて至った現在地をいきなり理解するのは難しいです。なので、影響を受けたという本や参考になりそうなもの、ブランディングに関する本に目を通していました。

ビジョナリー・カンパニー　ー時代を超える生存の原則

ジム・コリンズ著

エッセンシャル思考　最少の時間で成果を最大にする

グレッグ・マキューン著

生まれ変わるデザイン、持続と継続のためのブランド戦略

ウジトモコ著

などなど。

その後、デザイン部から代表の加藤に「ゴーリストってどんな会社ですか？」とインタビュー。すると、こういった言葉が返って来ました。

・（目的思考で）お客様をゴールへ導く、伴走する存在

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

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

・自分たちは必要以上に飾らない、等身大、機能美のようなシンプルさでいる

・あくまでも、人間らしい暖かさがある。IT事業ではあるがパソコンや通信のイメージを全面的には押し出さない

ふむ〜と持ち帰り、さらにそこからデザイン部でフックに引っかかったことをピックアップしました。

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

　→「ゴール」...とは物事の「方向性を示す」こと。「ゴール」をもっと掘り下げてみよう。

・目的思考...

　→Goalist(Goal+ist)の名前の由来でもあるのだから、かなりダイレクトで強いメッセージになりそう

・「多様性をもったチーム」...ゴーリストの特色と強み

　→「フォーメーション」が組める...自由自在に変化する様子は、メンバーのあり方にもあてはまりそう

関係ありませんがブレストにはさっと書き込めてさっと消せるNUボードがとても役に立ちます。

最近MTG時のNUボードとポストイットの活用が馴染んできましたね〜

  「ゴール」と「チーム」がそれぞれ異なった方向でのキーワードになりそうだ、とこの2つを有力ワードとして掘り進めていくことにしました。

手がかりが見つかった、ヤッタネ(⌒▽⌒)！

 次回はブレスト〜メインビジュアル作成記を書きます！

『櫻井稔さん（デザインエンジニア）卓話「人工知能とビッグデータとデザイン」』に行ってきました

『櫻井稔さん（デザインエンジニア）卓話「人工知能とビッグデータとデザイン」』に行ってきました

東京代官山ロータリークラブで開催された「人工知能とビッグデータとデザイン」のイベントに行ってきました。 https://peatix.com/event/350394 タイトル通り、Takramの櫻井稔さんがゲストです。

とても勉強になるお話だったので、社内共有の意味を含めて色んな気づきを書いておきます。
人工知能・ビッグデータについて素人なので、意訳も入ってしまっています。あしからず。

登壇者　櫻井稔さんについて
「日本科学未来館・地球マテリアルブック」、データサイエンス支援ツール「DataDiver」のUI設計・デザイン、日本政府のビッグデータビジュアライゼーションシステム「RESAS -地域経済分析システム-」のプロトタイピングなどを作られているTakramのデザインエンジニア。 2007年未踏ソフトウェア創造事業スーパークリエータ認定、東京芸術大学客員講師など様々な肩書を持っておられます。

ビッグデータは何の役に立っているのか？

世はビッグデータビッグデータ言ってますが、正直何が凄いのかピンときてなかったです。
Amazonのレコメンドとかに使われているらしいですが、正直へぇって感じでした。
そんな疑問を持って聞いていたのですが、今回の卓話で「なるほど」となりました。

そもそもビッグデータは「一般的なデータ管理・処理ソフトウエアで扱うことが困難なほど巨大で複雑」なデータだそうです。 人間の認知限界はおろか、一般的なコンピュータでも解析が難しいほどのデータ。
そこで出てくるのが、ビッグデータの可視化です。
あまりに大きいので、ビッグデータを使うにはある特定の部分に絞る必要があります。
その“あたり”をつけるべく、全体を俯瞰するための可視化というのが重要になるのだそうです。
可視化することで、データの中のこの辺りに分析するべき情報があるのではないか、と特定するという感じ。
櫻井さんがプロトタイプを作成したというRESASというシステムがまさにそれで、帝国データバンクのデータを元に様々な情報の可視化しています。
https://ja.takram.com/projects/resas-prototype/

人工知能の核心とは？

その話の流れで、人工知能の何が凄いのかというお話。
“あたり”を付けるもう一つの手段が人工知能。
人工知能を使ってビッグデータから傾向／特長を引き出せるようになったのは、もうそりゃ、事件だったそうです。

羽生善治さんの「人工知能の核心」という本を引用して、人工知能が特長を引き出す凄さ、ついてもわかりやすく説明されてました。
人間が将棋を打つ時、
１．将棋の指し手の可能性を網羅する（80前後あるそうです、、）
２．大体このへんだろうと絞る
３．大局を考えながら指し手を選ぶ
のに3ステップあるそうです。
人工知能が得意なのは、２の部分。
ビッグデータから傾向と特長と引き出し、大体このへんだろうというのを割り出すことができます。
ここで面白いのが、人間が２について考える時、そこには「安全・安心」という感覚が強く働くということ。
人工知能は「怖いものなし」なので、人間が考えつかない「この辺」を見つけ出せるんですね。

ブランコの乗り方を人工知能で解析した実験についての面白い話も出てました（他の列席者が話されてたお話）。
人工知能がブランコの漕ぎ方を学んでいくと、皆がやっているようなブランコの効率的な漕ぎ方を覚えます。
そこからさらに学びを進めると、ブランコが前に振り切った時に更に膝を振るともっと強く漕げるというのを発見したそうで。
今まで誰も思いつかなかった漕ぎ方。
人間はそんな漕ぎ方をするのは怖いので、その可能性すら考えられなかったということです。
恐怖や安心という人間の認知バイアスを超えて“考える”ことができるというのが、人工知能の核心であるようです。

人工知能とデザイン

「人工知能×コンシェルジュ」をテーマに、人工知能に何ができないのかを知るため、実際のコンシェルジュの方にインタビューをしたことがあるそうです。
そこでわかったのが、人工知能にには複雑なコンテクストを理解できないということ。
実際のコンシェルジュの方は、人生という膨大なコンテクストの中で、相手のコンテクストを理解してサービスします。
そんなコンテクストは人工知能には理解できません。

もう一つ人工知能が苦手なのが、なぜその解に至ったのか説明することだそうです。
どれだけ正解の確立が高くても、「なんで？」に答えてもらえなければ重要な判断を任せるのは怖いですよね。
例えば、車のナビに人工知能が付いたとして、二股の道に差し掛かったら「真ん中を進め」と言われたとして、真ん中に進むのか？
たぶん信用しないですよね。
でも、その二股の道の両方とも崖につながっているから真ん中の木に突っ込むほうが助かる、ということかもしれない。
人工知能は“なぜ？”を説明しないし、だから信頼もしにくい。

とは言え、人は人工知能と関わって行かざるを得ないわけです。
そこにこそ、デザインが必要なんじゃないのか。
人とビッグデータ・人工知能が繋がるための“信頼”を作るところに、人工知能・ビッグデータのデザインがあるんじゃないでしょうか。

卓話がまるで物語の様につながっていて盛り上がって、とても勉強になるイベントでした。
人工知能のデザインというと「Alexaの性格作るとか？」って考えてましたが、全然もっと深い。
プロダクトデザイン、グラフィックデザイン、UXデザインなど今では様々なデザインがありますが、新しく加わった「人工知能デザイン」、凄く面白そうです。