【サポーターズCoLab勉強会】エンジニア向け – わかりやすい「デザイン」の話 -に行ってきました

【サポーターズCoLab勉強会】エンジニア向けわかりやすい「デザイン」の話

https://supporterzcolab.com/event/674/

に行ってきたので、そのときのレポート

資料

https://xd.adobe.com/view/8be53b4a-7e8a-4e1d-681d-f4af91c29dbf-fdd4/?hints=off

 

以下、話を聞きながらのレポート

 

デザイン思考という言葉がある。

デザインに必要な考え方と手法を利用して、ビジネス上の問題点を解決する方法。

デザインとは層表的な装飾ではなく、課題解決の手段である。

デザイン思考のプロセスとしては、

  1. 観察/共感
  2. 問題定義
  3. アイデア創出
  4. プロトタイピング
  5. 検証

がある。

活用事例

wii

[観察]

ゲーム機があることで、家族が分裂してしまう現象があった。

それを解決したい。

[問題定義]

家族の関係がよくなるようなゲームにしたい。

[アイディア創出]

誰でも使えるリモコンのようなデザインにした。

[プロトタイピング]

1000回以上も微修正を繰り返す。

 

 

近年、デザインの優先度はとても高い。

なぜなら、開発の導入がこれまでと比べて容易になっいるため、

似たようなものが乱立しているから。

デザインは、上流工程での意思決定がとても大事。

デザインを学ぶメリット

  • エンジニアは特に、デザイナーと両方の気持ちがわかるようになる。
  • ピンチヒッターになれる。
    エンジニアだけのチームの中で、デザイナーとしてやれることもある。
  • 最悪頑張れば自分一人でいろいろできるようになれる。(フルスクラッチでサービス作るとか。)

国内外のデザインのトレンド

slackなども刷新している。

実用的なデザインスキルを身につける最速の方法

  • 0 1でサービスを作る。
  • デザイン本を読む
    Non Designers Design Book
    https://www.amazon.co.jp/dp/B01LW1BC2L/
    これが非デザイナーの人でも読みやすい。
  • デザインガイドラインを読む。
    • ヒューマンデザインとか。
    • マテリアルデザインとか。

これに逸脱しなければ、ほとんど良い感じになる。

ここをみると、だいぶ良い input になる。

  • adobe を契約する。
    これをしないと始まらない。

Q & A

Q1.

デザインの人ってあんまりフリーソフト使わない?例えば gimp とか

A1.

大学の頃は gimp とかも使っていたが、実務になると adobe じゃないと使えなかったりする。

 

Q2.
adobe
製品の中で、これ学べば今後有益だよっていうのはありますか?

A2.

Xd が良い。
スライド作って公開とかもできる。
プロトタイプ作りができたりもする。

【コネヒトーク3rd「ここでしか聞けない!ブランド化するサービスの裏側を大公開」】に行ってきました

コネヒトーク3rd「ここでしか聞けない!ブランド化するサービスの裏側を大公開」

https://connehito.connpass.com/event/104037/

に行ってきたので、そのときのレポート

 

TKY+N LAB & DESIGN inc.  代表 タカヤ・オオタ さんから

Corporate IdentityCI)について

3つの要素で作られている。

  • mind identity
    どのような意思をもって作られているのか?
  • behavior identitiy
    我々はどんな行動をとるのか?
  • visual identity
    どんなロゴがいいか?全体的にどのようなトーンでつくればよいのか?

その中の一つとして、ロゴっていうのもあるということ。

なぜ、スタートアップのCIを担当しているのか?

  • 社会に対しての課題を明確にしているから思想が現れやすい。
  • story が大事。

UIの体系化と飽和化

いろんなUIが出てくるのが、昨今激しくなっている。

例えば、kurashiru と delish kitchen で比べたときに

こっちでできることがこっちでできないということが薄くなってきた。

これまでは、機能優位性で戦って来たが、これが飽和化してくると

使う理由が「ブランド」になってくる

なので、ブランドデザインは大事

株式会社Hotspring 代表取締役 有川鴻哉 さんから

事例照会

いま、ズボラ旅というサービスを展開している。

ブランディングを意識したサービス作りについての話をしようと思います。

私が考えるブランディング

  • サービスを主観ではなく第三者の目線で捉える
  • ものごとを考えるときの主語を「ユーザー」「社会」にする。
  • それによって、社会にどういう変化が起きるのか(小さなものでもいいから)を意識する。

 

ズボラ旅はLINEで完結するサービス

UILINEのまま。

ブランドを伝える唯一の手段はLPだけ?

 → ブランドのみで戦う。

ブランディングは見た目だけじゃなくて

サービスのアピールとかも含まれる。

ブランディングドリブンなサービス作り

全てはプレスリリースから

最初に、

機能追加することよりも、プレスリリースのような記事を書いてみるのが大事。

  • 機能、サービスを一言で表す
  • どんなメリットがあるのか、どんな社会になるのか
  • なぜ今そのサービスが必要なのか?機能追加するのか?理想と現実のギャップを埋める

一人よがりのコミュニケーションにならないようにしよう

誰に何を伝えて、どんなアクションをしてほしいか?それだけ徹底的に考えましょう。

例えば、「xx億円調達しました!」とかだけだとダメ。

それによってどのように社会が変わるのかを伝えないとダメ。

応援される、愛されるためのひと手間

これをやることでユーザに愛されるサービス作りができる。

サービスの中には必ず「人」がいる
その人を感じとってもらえるようにしよう

正直であること

サービスや昨日は失敗することもあります。
けど、そこで、どうして失敗したんだということを問いかけることが大事。

事例として、キャンペーンをやったが全然盛り上がらなかった。

  • twitter で、「キャンペーンのハードル高い?」と聞いてみた。
    • 「そもそもキャンペーンってなに?」という回答が多かった。
    • 質問をすることで、ただのキャンペーンとみせかけて、ユーザに知らせることもできる。
    • 素直に、ギャップがあったのでリトライさせてくださいということを伝える。
    • アンケートに答えることで、自分が協力したので、もう一回行ってみよう感をユーザに出すことができる。

コネヒト株式会社 代表取締役社長 大湯俊介 さんから

「ママリにおけるリブランディング」

世に出たサービスのリブランディングについて

2018年にリニューアルをした。

裏側公開ということなので、そういう話をしようと思います。

 

ママリはいま、世の中のママの3人に1人くらいが使っているサービス

業界最大なのに、軸がなかった。

そうすると、あらゆる場所でブレが生じてしまった。

  • 社外発信についてだったり
  • コンテンツの記事の内容だったり
  • 営業の人の性格性だったり。

そこで一旦、サービスの軸を決めようとなった。

その手段としての、リブランディング。

ユーザ、全従業員を巻き込んでつくった。

ユーザへのアンケートも行なった。

ママリはどういうサービスか?ということを twitter で聞いた。

また、従業員(当時半分くらいがユーザに近い存在)にアンケートもとった。

結果、そこから、

「ママの一歩を支える」

というテーマと、それを説明する文章を作った。

軸も作った

  • 自ら選ぶための知識を提供する
  • 一歩踏み出す自信を育む
  • 行動したママを受け入れる社会をつくる

ロゴについても、軸に則したストーリーも埋め込んだ

リブランディングをしたことによって

みんなの焦点が合うようになった。

まとめ

リブランディングは

  • サービスの使命を組織内にも浸透させる絶好の機会
  • 軸を起点にした新しい未来がみつかる好機

パネルディスカッション

質問に対しての Q & A 形式でパネルディスカッションが行われた。

Q1.

リブランディングの数字、KPIについてどういうふうに定めていますか?

A1.

オオタさんから

社内での意識だったり、ユーザの声を形にして落とせたか?という話のほうが大きいと思う。

指標でいうと、そのシンボルはどのように今後使えるのか?いろんなところに露出したときにクリエイティブとして使えるのか?ということをみたりする。

有川さんから

今後軸を考える上で、どのくらい使いやすくなったか?というところから測れると思う。

大湯さんから

発信に使いやすいとかの設計ができてるとか、どういう人に使ってほしいんだっけということを考えるのが大事なのかなと思う。

 

Q2.

「ママの一歩を支える」ということに、日々の業務が繋がっていることを意識するために工夫していることはありますか?

A2.

オオタさんから

特になし。

有川さんから

プレスリリースしてみるかな。

文章にしてみて、それと照らし合わせて、繋がりを感じたりしている。

大湯さんから

ワークショップを行なっている。

必ず集まって月一回やっている。昔から。

毎回テーマを決めて、サービスについて考えるということをしている。

昼休み開けにみんなで 10 分アプリを使いましょうとか。

そういうところで、理念を感じるようにしている。

つまり、接触頻度と角度を高くすること。

 

Q3.

これは難しいなと思うことはあるか?

A3.

オオタさんから

Payme

SNSは面白くないなと思っている。

それを超えることは難しい。

カジュアルでありながら、発信したいことを出せているのか?ということが難しい。

有川さんから

それを、デカくなっても支えられる土台が大事だと思っている。

大湯さんから

人っぽくするのが難しい。

人っぽくするからミスもある。

人の感じは親しみを出すために出したほうがいい。

形式張ったものだと、人はミスに耐性がない。

 

Q4.

リブランディングを外に押し出す理由は?ぶっちゃけお客さんには関係ないよね?みたいな意見もあると思うが。

A4.

オオタさんから

社内だけで済む。だと一方通行になってしまう。

一方通行にしないことで、外を意識することができる。

そのサービスがどういう目をもっていているのかというのを表明する必要があると思う。

有川さんから

特になし。

大湯さんから

巻き込んだほうがいいと思っていて、

途中でのリブランディングだったので、ユーザと一緒に作ったんだよ感を出したかった。

ちょっと参加したことで、自分(ユーザ)も協力したんだよっていうことをして

仲間を増やすことができる。

 

Q5.

プロダクトドリブンだなと思った。プロダクトが先か?ブランドが先か?でいうとどう思っている?

A5.

オオタさんから

どちらが先というよりも、並走だと思う。

何でブランドやるかというと、プロダクトを伸ばした上で、さらに効率よく世の中に広まりやすいとかいうメリットがある。

有川さんから

サービスがあることによってなので、当然プロダクトから入ると思う。

それをより効率的に社会に出したいとか思うと、相乗効果があると思う。

大湯さんから

リブランディングは超大変です。

そういう意味でいうと、最初からちゃんと設計するべきものだとは思った。

ただ、ブランディングは後から付いてくるものだとも思っている。

最後に

Q6.

2020年を見越して、こういうデザインがいいんじゃないの?と思っていること

A6.

大湯さんから

VRが普及してくると思う。

普通の縦型のデザインから横型のデザインになるんじゃないかと想っている。

5gに関連してて、動きが大事になると思う。

動いているなかでも映えるデザインとか、そういうのがくると思っている。

有川さんから

デバイス依存が激しい。例えばiphoneとか。

あと2年くらいで、デバイス依存から解き放たれると思う。

目には見えないような部分でサービスが表現されていくと思う。

コミュニケーションだったりがそれにあたる。

そういう概念が生まれると思う。

オオタさんから

スタートアップをよく担当している理由としては

アイコン勝負なところがあるから。

ただ、今後はリアルな空間に今後サービスが出て行くとしたら、今のアイコンは映えないなと思う。

空間に依存していないデザインというのが重要になってくると思う。

Androidエンジニア デザイン部 #2に行ってきました

Androidエンジニア デザイン部 #2

https://nohana.connpass.com/event/94621/

に行ってきたので、そのときのレポートブログ

LT1つ目:InvisionのAndroidアプリでみる4つのデザイン基本原則

エウレカのFutagawaさん

資料

以下、LTを聴きながらのメモ

今日話す内容

  • Invisionとは
  • 4つのデザイン原則とは

Invisionとは

モックでデザインを簡単に作れるやつ

4つの原則とは

  • Proximity:近接
  • Repetition:反復
  • Alignment:整列
  • Contrast:コントラスト

Proximity:近接」

グループ化した要素は近くに、そうじゃない要素はより遠くに

まとまりある要素同士の距離は、まとまりのない要素同士の距離よりも短くする。

Alignment:整列」

画面内の全ての要素が他の要素と視覚的なつながりをもつようにする。

Repetition:反復」

アプリの全体を通してなにかの特徴を繰り返す。

「Contrast:コントラスト」

同じ要素でないものははっきりと異ならせる。

例えば、タイトルとアップデート時間は全くことなるものなので

文字の濃さを変えたりする。

 

ノンデザイナーズ・デザインブック

https://book.mynavi.jp/ec/products/detail/id=22176

非デザイナーでも読みやすい。

たまにPDFを配ってるときとかもある。



LT2つ目:「ありがたいUI」をもっと大事にしたい。

資料

以下、LTを聴きながらのメモ

 

デザインに対する持論

デザインって広義的な意味でいっぱいあるが

大切にしたいと思っていることがある。

デザインって、かっこいいとか美しいとかクールと思われがちだ。

かっこいいからインストールするとか、そういう訴求力もあるが

かっこいいから使い続けてるとかはあまりない。

使い続ける理由としてかっこいいからというのはあまりない。

※ただし、アイコンは除く

 

ありがたいと思えるアプリ

twitterの画像表示がありがたい。

複数枚あるとスライドできるが、

消したいときは、下から上にスワイプする。

これの嬉しいところが、タイムラインを眺める動作と変わりない動作でできる。

これがもし、画面上のほうに×ボタンとかで閉じる UI だったら、少し手間になる。

CamScannerの画像切り抜き

タップ部分が拡大表示される。細かく調整ができる。

座標の調整が確認しやすい。

マルチウィンドウ対応アプリ

例えばyoutubeをバックグラウンド再生できる。

AbemaTVのCM中にtwitterみるとか、そういうことができる。

 

これらのアプリにある機能がありがたいので

他のアプリに乗り換えられない。

クールとか美しいアプリというのも大切だが、

ありがたいUIも大切。



LT3つ目:Google I/O 2018

Googleの方のLT

自社アプリ、IOSched について。

 

IOSchedは、

Androidアプリを作っている人に、リファレンスとして見てもらえるように作られている。

 

2018年の見所

  • 秘伝のたれのソースコードをフルスクラッチ
  • Kotlin
  • Architecture Component

UIの面でもベストプラクティスをやろうとしている。

マテリアルデザインで出したい。

だが、I/Oがあるまではマテリアルデザインで出せない。というジレンマがあった。

なので、デザインを2つ作った。

 

今年の見所

Lottieというアニメーションのライブラリを使っている。

カウントダウンを実装している。

githubにソースコード公開しているので、DLしてぜひ見て見てね。

 

ナビゲーション

去年まではナビゲーションペインで作っていたのだが

ナビゲーションボトムに切り替えた。

view pager

1つのviewはマテリアルデザインでいうところの1つの要素

なので、viewとviewの間には区切りが欲しい。

いろんなアプリはその区切りを入れてないので、入れることによりくっきり見える。

ボトムアップバー

これもライブラリの中に入っている。

ここはアクションのメニューを並べる。

fabが据えられる位置を決められる。

たとえばGmailみたいなアプリで、詳細画面に行ったときは返信するボタンになるとかで、

返信ボタンは左に出したいとかだったら、アニメーションを使う。

スナックバー

これまではfabを押し上げるような形だったが、

fabの上に出しましょうとしている。

ボトムシート

一時的な状態を出すのにすごくいい。

必須要素をぜひ知っていただきたい。

 

Googleのアプリをだすときにクリアしなければいけないこと

  • タッチフィードバック
  • 色のコントラスト。背景と文字のコントラストが十分かどうか?
    accesibility checkerというアプリで、チェックできる。
  • 色だけで情報を表さない。必ず文字も入れる。色弱の人がわからないので。
  • 前の画面ってなんだっけ?とならないようにアニメーションをつけるようにする。
  • talkbackでの動作


LT4つ目:Kyashはなぜ使いやすいのか

ノハナの方のLT

資料

以下、LTを聞きながらのメモ

 

今回のアンケート(connpassの参加フォームで「UIが好きなアプリは?」という質問があった)でも、

Kyashが一番評価がよかった。

1. シンプル

Navigation Drawerがない。

  • 機能が絞れている。
    我々は、多機能にしがちだが、Kyashは機能が絞られててよい。
  • 階層が浅い
    画面スタックが最大でも3階層
    人間は画面について覚えにくいが、3階層しかないので覚えやすい。
  • 画面内の要素が多くない

これらのこと = アプリで迷子になりにくい。

2. 操作感のあるUI

請求画面と送金画面が大体似ているが、

画面の下の操作が少し違う。

 

画面遷移

下から出てきて、前の画面が消えるようになっている。

横スライドで画面が変わったりもする。

画面の連続性を出すためにいい。

3. こだわり

39円を送ると、thank you というアニメーションが出る。

一見意味ないことのように思える(これでユーザ数が増えるとか思えない)が、こだわりがあってよい。

ギフトコードの画面についても、細かいアニメーション(プレゼントボックスがカタカタ動く)がある。

これも意味ないと思うが、こういったこだわりのアニメーションを実装したりすることで、

ファンが楽しくなって、ファンが増えていく。



以下、懇親会で周りの人と喋ってて知ったこと

  • https://material.io
    マテリアルデザインについて書かれている。
  • なるほどデザイン
    初心者向けのデザインの本。読みやすい
    https://www.amazon.co.jp/dp/B012VJNW6Q/
  • Xamarin
    Android, iOSアプリどちらも一度に作れる
  • Human Interface Guidelines
    iOSアプリを作るときのデザインのガイドライン