DIST.26 「Webサービスの個性を支えるデザイン」に参加してきました

こんにちは。渋谷でWebやアプリのデザインをしております、Kaoriです。最近やっとnoteを始めました。記念すべき初記事として、先日参加してきたDISTさん開催の勉強会のまとめと感想をあげようと思います。

DIST.26 「Webサービスの個性を支えるデザイン」 (2019/04/26 19:00〜)

今回の勉強会は、LT5本とメインセッション2本という内容でした。

・すてきって言ってもらえるECサイトを作るときに考えていること
・理想のカラーパレットをもとめて
・キナリノで向き合っている「ふつう」のこと。
・興味の向こう側へのデザイン
・キッチハイクっぽい「ことば」のデザイン

・認知パターンから考えるesaらしさのデザイン
・次世代デザインツールのデザイン

すてきって言ってもらえるECサイトを作るときに考えていること

たかはし ひろみ さん @hiromin_design

⭐️認知容易性に基づきサイトを設計、作成する
→斬新でかっこよさげなデザインよりも、どこかのWebサイトでみたことのある操作の方が好印象になる可能性が高い。

認知容易性とは、慣れ親しんだ状態を心地よく思うこと。

認知容易性というのは、簡単に言えば『見たことがある・知っている・馴染みがある・すぐに分かる』ということであり、認知容易性を高める原因としては以下のようなものが知られている。

・精神状態がリラックスしていて前向きである（気分・機嫌が良くて意欲がある）
・何度か繰り返された経験・刺激
・見やすくて鮮明な表示形式
・プライム（先行刺激）のあったアイデアやイメージ

認知容易性が高まると『心地よさ・親しみやすさ・気楽さ・信頼感・安心感』などを感じやすくなるので、人は一般に慣れ親しんでいるものや何度か見たことのある状況などに対しては、深く考えずに反射的かつ直観的に気楽に判断を下しやすくなる。

https://charm.at.webry.info/201606/article_1.htmlから引用

💭感想💭
学生の頃〜入社したての頃くらいに、「なんか普通じゃつまらないな〜」「他で見たことのないようなかっこいいデザインを作りたい！」とかなり斬新なデザインをしようとしていたことを思い出しました…
ターゲットの年齢や属性によって多少違うとは思いますが、ユーザーは作り手が思うよりも迷いやすいので、使い勝手を考慮しての表現をすることを意識していたいです。

理想のカラーパレットをもとめて

谷 拓樹 さん @hiloki

デザイナーとエンジニアで「この色が～」と会話しているときに、そもそもの前提がずれて会話が噛み合ってないことがある。デザインシステムまでいかなくともチームで共通言語を持つことが大事。

・blue_400, blue_500, blue_600…のように数字を用いる方法
　何が400だっけ？となる可能性がある

・ダイレクトな色名（例：blue）
　「水色っぽいけれど名前はblue」のようにわかりづらくなるかも

・blueではなくazure など色味に対してユニークな名前を与える

・primary, secondary…
　メインとなるものにbase,前後のものにlight, darkなどつける

何が合うかはサービスによりけり。
チームでやりやすい方法を話し合う。

💭感想💭
現在、初めてアプリのデザインに携わらせていただいているのですが、色の命名についても結構悩みました。その際にエンジニアの方が意見をくれて、話し合いの結果、上記3つめにある、ユニークな名前を与えることにしました。
反省点としては扱う色が増えてしまったので、次の機会には、メインとなるものにbase,前後のものにlight, darkなどつけるなど試してみたいと思います。

キナリノで向き合っている「ふつう」のこと。

奥村 元 さん

こちらは内容の公開はNGだったので、感想だけ記載させていただきます🙇‍♀️

「ふつう」という感覚は、人によって捉え方が違うので難しいと思いました。男性的ー女性的、柔らかいー硬い、安心ー不安、高級ーチープ、明ー暗
などの軸を作りポジショニングすることは、サービスのトンマナを提案する際にやっていましたが、これをすることによってプロダクトやサービスの性格を捉えやすくなるので続けていこうと思いました。
「ふつう」という難しいテーマでも上記の手法で、どんな「ふつう」を指すのかが見えてくるのだと思います。

興味の向こう側へのデザイン

本多 美優 さん @yahho_yamabiko_

⭐️UXが最近重要視されてきたが、その先とは一体何なのか？と考えるようにしている

・インターフェースを設計するということは、単に情報を伝えれば良いわけでない
・インターフェースにふれたときどのように感じるのか、その体験によって心が動く

⭐️体験から次の体験へ進んでいく、その経路を形作り、導くのがインターフェース

コンテンツはユーザーが経験を得るための道のりである。この経験において重要なポイントはビジュアルと実用性の知覚の仕方をわけて考えること。

・ビジュアル…グラフィックやキャッチコピーをさす。コンテンツの中でも一番早く知覚でき強い第一印象を与える。瞬間的、第一印象、直感的な感動。
・実用性…ユーザーにとっての快適さや機能性のこと。使う中で徐々に知覚していくもの。快適さ、理解、親しみやすさ、深い共感や理解。

興味はビジュアルによってひきこまれ、実用性をもって深い理解を生み、やがてユーザー自身の価値観となり広がっていく。
ビジュアルと実用性の両立が必要。

💭感想💭
デザイナーとして基本的で重要な部分ではありますが、今までの制作において、ビジュアルと実用性どちらかに偏ってしまうことがあり、その両立の難しさを感じています。😞💦ユーザーがサービスを使う一連の流れをもっと考えて作らなければ。

キッチハイクっぽい「ことば」のデザイン

羽野 めぐみ さん @featherplain

⭐️サービスの特徴を人に例えて考えてみるとデザインしやすくなる
⭐️人格化して、一対一で会話するようにことばのデザインをしてみる

・口調
・言葉遣い
・伝え方

上記を考えてみて、OKワードとNGワードを洗い出す。
OKワードに合う、話し方を考える。
語尾に「！」や絵文字をつけることでも印象を左右する。

💭感想💭
サービス自体を人に見立てる方法は今まで考えたことがなく、とても面白く効果的な方法だと思いました。恥ずかしながら、ことばについては「〇〇できません」ではなく「△△すると〇〇できます」というようにネガティブな言い回しをポジティブに変えるといいよ〜くらいにしか考えられていなかったので、是非この手法で考えてみたいと思います。

認知パターンから考えるesaらしさのデザイン

赤塚 妙子 さん @featherplain

デザインパターンには機能パターンと認知パターンがある。
・機能パターン…UIの構成要素、機能、動詞に近い
・認知パターン…見た目や外観、ブランドのコア、形容詞に近い⬅️こっちのお話

⭐️個性と普遍性のバランスが重要
例：パワフル（個性）だけどややこしくない（普遍）

個性の源はエートスである。
エートス＝プロダクトを通して表現したい価値と表現
つまりはエートスと普遍性のバランス。

⭐️デザインは感覚か理論か？
・デザインは言語で説明しなくとも、見た目から実感として伝わるものではなくては意味がない
・説明している理屈は、後付けのもの
・感覚と理論は両方を行き来しながら、デザインをブラッシュアップしていく

💭感想💭
個性が普遍性を阻害して分かりづらくなってもいけないし、普遍性を重視しすぎて個性を失ってもいけない、そのバランスを突き詰めていくのが難しいと感じました。
> デザインは言語で説明しなくとも、見た目から実感として伝わるものではなくては意味がない
本当にその通りだと思います。
私自身理論的なことや説明に少々苦手意識があるのですが、理論や説明が感覚的な部分と乖離していかないように気をつけなければと思いました。無理矢理すぎたり、いかにもとってつけたような考えにならないように。

次世代デザインツールのデザイン

石井 穣 さん @ytk141

⭐️単なるWebサービスではなく、1つの「作品」を作っているという気概
いかに感動してくれるか？
いかに良い体験をしてくれるか？

◯単なるWebサービス
・ちゃんと機能する
・わかりやすいUI
・綺麗な見た目

◯作品
・オリジナルの価値を提供できているか？
・使った人に感動を与えられるか？
・美の価値観を前進させられたか？

⭐️感性×こだわり＝感動
感性とは、知識や経験の蓄積

＜感性を磨くには？＞
体験：たくさん良いものに触れる
挑戦：どんどん挑戦して新しいものを作る
想像：1つ1つ徹底的にこだわる、神は細部に宿る

⭐️３つのデザイン要素にこだわり、感動の循環を作る＝サービスデザイン

1のVisual Designは発見の際に力を発揮するデザイン要素
（例：LP、バナー、動画）
2のProduct Designは発見からの体験の際に主に力を発揮するデザイン要素（例：サービスそのもの）
　ここでいかに価値を届けられるかが重要なポイント
3のCommunication Designは発見・体験からの感動を作る際に主に力を発揮するデザイン要素
（例：関係地、熱狂度）
使ってくれたユーザーとのコミュニケーションをデザインする部分

小さくてもいいからこの循環をつくることが重要。
熱狂的なファンを集めれば、自然とその輪が広がっていく。

⭐️デザインの役割
デザイナーは「質」を高めることにより、「力」を生み出していく職能

💭感想💭
サービスの機能性や洗練された見た目も勿論重要な要素ですが、それ以上に感動や熱狂を意識することが、サービスの根本を支えるのだなと痛感しました。作り手の思いを感じることで、ユーザーのサービスへの理解が深まったり、サービスが好きになったり、応援したいという気持ちになると思います。自分自身、そういう部分が疎かになっていたのを感じたので、改めて意識していこうと思いました。

おわりに

長くなってしまいましたが、以上になります。
GW前に行った勉強会ですが、まとめるのがGW明け…と遅くなってしまったのが反省点です。
今後も勉強会に行った際にはまとめていきたいと思いますので、よろしくお願いします🙇‍♀️✨