CHROMA

世の中の "当たり前" を確認する

デザインの解剖

デザインって、まず「基本」がある。すべてのデザインに関わるもの。その上で 2つに分けられる。

  • 基本
    • 【含まれる要素】色彩、形状、レイアウト、余白、フォント、アニメーション
    • 使いやすさを向上させるデザイン
    • 見た目の魅力を向上させるデザイン
      • 【含まれる要素】テイスト(テーマ)、装飾

「使いやすさを向上させる」デザインが具体的に何かというと、Web サービスやアプリ、駅の改札機、ミシン、カバンなど。人がその対象に手を触れ、使うもの。

「見た目の魅力を向上させる」デザインが具体的に何かというと、バナーや LP、展覧会を告知するポスター、本の表紙、CD ジャケットなど。すでに形が決まってる中でデザインするもので、完成品に人が手を触れないもの(ざっくり)。

考えてみると、「使いやすさを向上させる」デザインは世の中に多いけど「見た目の魅力を向上させる」デザインは意外と少なかった。

Sketch でテキストをどう管理するか

f:id:thleap:20170425000712p:plain

結論としては、font-family だけ Shared Style で管理することにした。上のはやろうとしてダメだった例。

  1. タイプフェイスはシンボルで管理するのが大変。色やウエイト、行の方向まで管理するのが大変。Shared Style で管理してみる(同期は使わない形)
    • font-family だけシンボル化、とかしたい〜(これをシンボル化と呼ぶかはしらん)
    • Shared Style で管理してみた結果、あと戻りが非常に面倒な管理方法であることがわかった(一度 Shared Style で作成、各オブジェクトにスタイルを反映している途中で、Shared Style のもとのスタイルを変更したくなったとき、これがやりづらい管理方法であるということに気づいた)
  2. やっぱシンボルで管理してみる
    • やっぱいろんなバリエーションつくるのクソつらい
    • 「段落の途中でリンクテキストがきたらどうするん?」という問に対して解を持ち合わせてないことに気づいた
      • テキストのシンボル管理をやめた
  3. font-family を Shared Style で管理する
    • それ以外はしない

色と行方向の管理がもう、だめ。

実例から学ぶ CSSアニメーション

DIST.15 「アニメーションで差を付ける演出とデザイン」 に参加して、LT をする。

なぜ LT をするか

CSS Transition や CSS Animation の使い方がわかっても、実際に活用するイメージが限定的な場面でしか思いつかなかった。

たとえば、CSS アニメーションを使うシーンとしてはリンクやボタンのマウスオーバー、ローディングとかまではイメージつくけど、その先が思いつかない。また、Codepen とかにあるデモは見た目は派手で格好いいけど、活用シーンが限られていたり、まったく現実的じゃないものが多い。

この状態では日々の製作に活かしづらいと思ったので、今回の LT を通して、CSS アニメーションに対する自分の視野を広げてみようと思った。

資料

speakerdeck.com

デモ

  • 認知補助
    • Backlog ぽいやつ
      • アニメーションの効果で、ログインボタンからダイアログがでてくるのがわかりやすくなります。矢印の装飾をつけるだけよりも、ダイアログがどこからでてきたか記憶しやすいです。
      • DEMO
  • つなぎ
    • Medium ぽいやつ
      • ページを読み込んでから画像表示するまでの退屈な時間を、ぼかしのアニメーションを使ってつないでいます。「見えそうで見えない」状態を作ることで、画像への注目度もあげています。
      • DEMO
  • ただの演出
    • おそ松さん ぽいやつ
      • ブルブル演出です。サイトの印象に関わります。
      • DEMO

デザイナーとして、何者になりたいか #3

前回の続き。

前回は、社会に対して自分が「個々の進化を助ける」ことに貢献したい、という話をした。

今回は、ここからより身近なフィールドに舞台を移し、考えてみる。

同じ職場で働く人、同じ仕事をしてる人にどんな価値を提供したいか

進化というのを、職場でよく聞くキーワードに置き換えたらスキルアップという言葉になると思う。で、このスキルというのは職種によって違うものと、そうでないものがある。例えば以下のように。

職種によるもの:

  • デザイン
  • プロジェクト進行
  • プログラミング
  • マーケティング
  • ライティング
  • サービス設計

一般的なもの:

  • コミュニケーション
  • タスク管理(時間管理)
  • 目標管理

では、どのようにしてこれらのスキルアップを助けることができるか?

「職種によるもの」に対しては、あまりできることはないと思う。専門的な能力になるため、僕が持っている能力を使ってもらうのが難しい。それでも一つ上げるなら、"デザインの考え方を理解してもらうことで、各分野のフィールドで役立ててもらう" というのはあるかもしれない。 たとえば、言葉だけじゃ伝わりにくい企画をペーパープロトタイピングなどのイメージを通して伝えること、など(これは具体的すぎて考え方というより手法だが)。

「一般的なもの」に対しては、そもそも曖昧なものが多い感じがするので、なんでも助けられる気になってる。しかし、大きすぎてどう助けたらいいのかわからない。コミュニケーションとか… これだけでサービスになったりするし(チャットとか)、タスクも同じ。


あかん。考え始めるところ間違ったみたい。

同じ職場で働く人、同じ仕事をしてる人にどんな価値を提供したいか

これ、次の機会にまた最初から考える。

デザイナーとして、何者になりたいか #2

前回の続き。

前回は何も考えず思いついたことを書いた。あれじぁ答えにたどり着きそうにないので、ちょっとやり方考えた。

こんな感じで上から考えていって、「4. そのとき自分は」のところで結論だそうと思う。

  1. 社会にどのように貢献したいか
  2. 同じ職場で働く人、同じ仕事をしてる人にどんな価値を提供したいか
  3. 家族、友達にはなにを提供したいか
  4. そのとき自分は
    • 持ってるスキル
    • お金

この 1234 もいくつかの記事に分かれる… 。

社会にどのように貢献したいか

「個々の進化を助ける」

個々の進化を助けた結果、健全な社会ができると思ってる。

ぼくは “進化” を「停滞せずに一歩進もうとすること」と捉えている。成功しようと行動することが大事で、結果的に失敗してもそれは失敗を学んだという意味で進化だ。

また、社会全体でみると、データから紙に戻ろうとすることは進化とはいえないかもしれない。紙は処分しなければいけないゴミをだすこと、これだけ考えても地球やそこに住む人々にとって良いことではないだろう。

しかし、ぼくはこういった人こそ助けたい。人類の未来は(言ってることがデカくなってきたぞ)、"人間" ってひとまとめに言えないくらいオリジナルが増えて、それぞれ個性を活かした生活をして、自分自身でその生活を幸せに感じられる未来になればいいなと思っている。

さっきのゴミの処分の話だけど、たとえ紙を使う人が増えたことでゴミの量が増えたとしても、人の個性を伸ばした未来ではいい感じにゴミをエネルギーに変換できる何かが生まれているかも。それかゴミを安全にきれいさっぱり跡形もなく処分する技術か、地球を捨てて別の星に行く技術か、人間の細胞を変える技術か。

かなり手前勝手な意見だけど、社会の目が自分が本当にやりたいことの邪魔をするなら、社会なんて気にせずにやりたいことをやればいい。  

この「なんとかなるさ論」は正しいかわからないけど、正しい可能性はある。であれば、社会全体に合わせてみんな同じ方向を向いた未来よりも、バラバラでもなんかうまくいってる未来のほうがぼくは楽しそうに感じるし、その未来に向けて自分の能力を活かしたい。

また、「助ける」というキーワードをいれたのは自分がデザイナーだからというわけではない。いま一番能力を発揮できるのはモノをデザインすることだろうが、言葉で人を助けてもいいし、(物理的に)手を貸すことで助けてもいい。

最後に、人の進化を助けることの最低条件は、自分自身の進化にもつながるものであること、としたい。

デザイナーとして、何者になりたいか

一年に一回くらいはやってるな、これ。つまりよく自分を見失ってるわけだけど、今年もやる。

考えることが多そうなので、記事はいくつかに分ける。

何を作りたいか

「一目惚れするほど魅力的、使い始めに説明書いらず」、こういったものが作りたい。

たとえばこういうのが作りたい。

  • 落ち着いた見た目に惹かれて買った Nexus5X、発売から数年経った今もこれ以上に魅力的な見た目の携帯は見つからない。最初にした設定はいくつか個人情報いれたのと Wi-Fi の設定しただけで、あとは自分のペースに合わせてアプリをいれるだけ
  • Paul Smith の赤の長財布。これぞ一目惚れ。赤い革の色合いは自分の年齢の経過とともに落ち着いてきて、ちょうどいい。お札やカード、小銭をどこに入れたらいいかなんて、すぐわかる(財布だから当たり前!)
    • 陶器、PS2、64

たとえばこういうのは作りたくない。

  • 雑貨屋さんでアッ!と思うものを見つけて、手にとってみるとたしかにステキなんだけど、何に使えば良いかわからないから棚に戻す
  • 機能が豊富で買ったデジタルカメラ、PCと連携して使うつもりだったのに、設定でつまづいて放置

機能をデザインしたいか

ここで言ってるのは、「使いやすい」を実現するために用意する機能、そういうのもデザインしたいかという話。結論としてはデザインしたい。

たとえば機能までデザインされたものとして、iPhone があると思う。あれは機能を先に作って、それに “デザインあてる” やり方では作れないと思う。

すべてのケースで機能までデザインできると思ってないけど、できることなら機能まで口を出していきたい。作った機能をユーザーにどこまで提供するか、そもそもその機能はいるか、など。

「UX JAM & UX Sketch」に行ってきた

f:id:thleap:20170216235123p:plain

PPAP的なノリではじまった「UX JAM & UX Sketch (UX Sketch枠)」、そのレポート。

勉強会の趣旨は以下の通り。

事業開発・新規事業に携わられている方をお招きし、お話を頂く会です。事業開発を進める上での課題(体験設計、顧客開発、社内コミュニケーション、成果の上げ方など)を取り扱います。 

まとめ

登壇者の話を聞いて、それをネタにまわりと話して、イベントを楽しむ会だった。

聞いた発表の中から、とくに頭に残しておきたいこと 3つを書き出しておく。

  • モノづくりのサイクルを理解し、チーム内で同じゴールをもつこと
  • ユーザー要因のコンテキスト以外に、組織や事業におけるコンテキストも考慮すること
  • デザイナーの役割はプロジェクトの成功確率を最大化することであり、そのためには見えるもの以外もデザインすること

詳細 : セッション別

LT1「2017年、気にしておかないと乗り遅れる17のUX」

スライド資料

10分の発表なのにすごいボリューム。広範囲な話題をサポートしていて、最近どこかで記事になっていた UX ライティングの重要性も語られていた。

17のUXとはなにか、というのはスライドに書かれているので、ここではひとつだけ。

  • 「3. Trigger UX、心理的トリガーをしかける」というやつ
    • ユーザーには気持ちいい体験をってよく言うけど、それだけではデザインとかしにくくて。気持ちいい体験をさらに細かく割ったリストがでてきたときに、「あっ、使えそう」と思った

パネルディスカッション「新規事業におけるUXDの役割を深掘る」

  • デザイナーって?
    • プロジェクトの成功確率を最大化させるために必要な存在
      • 「見える」部分以外でもデザイナーは必要とされ始めている。ビジネスや組織づくりといった場面でも、デザイナー視点からの意見は役に立つのではないだろうか
      • プロジェクトの上流から入る必要性というのを感じている
  • ビジネスとデザイン、どちらが大事ですか?
    • 2つがコンフリクトしないためには、ビジョンを共有することが大事。同じ方向を向いていれば、衝突したとしても解決することが可能
      • ただ、ビジネスといえばやはり売上が重視され、そうすると制作スピードも考慮され、そうすると質を高める時間も制限される
        • 重要なのは設定したビジョンの中で、いま自分たちがどの段階にいるかを全員で意識すること
    • ユーザーに価値を届けるのと、マネタイズさせる方法が異なれば、話はより難しくなる
      • 広告とか
  • 体験とビジネス、どちらを優先させるか?
    • 「ユーザの体験は向上しそうだ、だがそうすると売上は落ちそうだ」という問題が、この世界の至るところにあるのではないか?
      • ある。しかし、それは短期的にみたときの結果であり、長期的にみるとユーザー体験の向上は売上につながる
      • サービスのフェーズとして、どこに価値を置くかを見定めるのが大事。すぐにお金が必要であるとき、多少お金が入るのが遅れてもいいから将来を見据えてサービスの価値をあげるべきときなど、様々なフェーズがあり、その都度一番必要になること(ゴール)を決める必要がある
    • 「儲かるだろうし、使われるだろう。だけどリリースをやめた」というケースはなぜ起こったか?
      • 使ってる人の負担があまりに大きそうだったのでやめた。なぜなら、それが続くとユーザーはサービスを継続しなくなるから
      • また、レターの場合、単純に楽しいという理由でユーザーがサービスを使ってしまうと、「親孝行している自分を実感する」というサービスのゴールからすこし離れてしまうから
  • 新規事業における UX とは?
    • ビジネスとデザイン、これはつまりお金とユーザー。常に両方を見ながらサービスを成長させることが大事
      • ユーザーを忘れてしまう瞬間がある。売上をあげることに集中してるときとか… 気をつけて!
    • モデルを形成し、組織内(チーム)・組織外(ユーザー)で同じ価値観やゴールを持つことが大事
      • モデルを使うことで、物事をわかりやすく説明することができる
        • モデルとは、つまり図案化に近い

LT2「日常から学ぶデザイン - 道具と体験の関係性 -」

スライド資料

「形態は機能に従う」という言葉が印象に残ったこのセッション。視聴者はセッションの冒頭で自分の身近にある道具をひとつ思い浮かべ、その道具を5つの視点から眺めることになった。(「」に自分が思い浮かべた道具を入れて考えた)

  1. 「」のない日常とは?
  2. 「」は、なぜこの姿に?
  3. 「」は、人をどう変えた?
  4. 「」が馴染んでない理由は?
  5. 「」は懐が広いか?

より具体的には、発表を聞きながら「過去の時代の代用品は何があったか?」、「道具が今の形になってる理由は?」といったようなツッコミを自分で入れていき、思い浮かべた道具がなぜ今の時代もあるのかを考えた。

僕が思い浮かべたのはフォークだったが、普段身近にありすぎて良いとか悪いとか、一度も考えたことがなかった。日本でいうと、すこし前の時代、代用品といえば箸だった。しかし文化の国際化(人と食の国際化)が進んだ今の代では、モノをつかむ箸よりも、モノを指すだけのフォークのほうが “誰でも使いやすい” から、いまはフォークがあるのかもしれない。

あと、発表中に出てきた「良い道具は人の習慣をすこしだけ変える」という言葉も頭に残っている。自分がつくっているサービスもこうなってほしいと思った。

LT3「世界規模で体験をデザインする - PS4のUI開発やUXの経験から」

※スライド資料は見つからず

音声 UI の話と、ちょっとだけ多言語化の話。

音声 UI は精度の悪さがやはり問題。また、機械の読み取り精度とは異なる問題として、人が喋るときの言いよどみや、間、指示語を認識できないのも、音声 UI がまだ使われてない理由としてあげられた。

多言語化については、事業の最初から考えることが大事。そうしないと良いものはできないし、売上にもつながらない。

発表の最後、「引き算の美学を語ると予算と工数も引き算される辛さ」というのに対して爆笑してた人がいたけど、僕はあまり意味が汲み取れなかった。(くやしい!)

他の人のブログ

見つけたら貼る。