言葉担当

f:id:murata_s:20190914155148j:plain

フリーライター小宮由美子さんのウェブサイト「言葉担当」をデザインしました。

小宮さんは言葉に関わること全般をお仕事にされています。小宮さんが紡ぎ出す言葉の数々は、ブランドや製品、そして物語と共にあります。手記を綴るように、言葉の風景が積み上がっていくと良いなと思い、互い違いに組んでみました。素朴で静かな雰囲気が出ています。

日本語と英語の多言語化対応も行っていますので、日本にとどまらず海外に向けても小宮さんの言葉がたくさん届くと良いなと願っています。

言葉担当

デザインをもっと見る

『影響力の武器』(ロバート・B・チャルディーニ)を読んだ

影響力の武器[第三版]: なぜ、人は動かされるのか

影響力の武器[第三版]: なぜ、人は動かされるのか

本書は、人の態度や行動はどんな状況や情報に影響を受けやすいのか、またそれを悪用しようとする者からどう身を守るかについて書いてある。インターネットのどこかで目にして気になったので読んでみたのだけど、読み始めてみたら自分の興味範囲と重なっていることに気がついて、400頁の厚さも気にならなかった。普段のデザインの仕事で、人の行動を正しく導くために活用できそうな点もいくつか見つけられた。

内容は、目次を見るのが一番わかりやすいだろう。主に次の6つの心理的な力が紹介されており、豊富な事例とその考察が展開されている:

  • 返報性
  • コミットメントと一貫性
  • 社会的証明
  • 好意
  • 権威
  • 希少性

それぞれどれもが興味深いけれど、やはりエッセンスとしては、第1章で触れられている自動的な行動パターンを指すカチッ・サーに凝縮されるのだろう。著者も、何度も言及している。人が文化や慣習にどう向き合っているかに影響を受けそうだが、行動する時、行動させる時、そして行動させられる時に、本書で取り上げられている心理的な力が及んでいるかどうかを確認するプロセスを挟むと、その行動を増幅あるいは減衰させる手段が取れる、ということなのだろうと理解した。

ブックダーツコーナー

私たちは、二番目に提示されるものが最初に提示されるものとかなり異なっている場合、それが実際以上に最初のものと異なっていると考えてしまう傾向があるのです。
p.22(§ 影響力の武器)

水の温度、紳士服売り場、不動産などが取り上げられている。経験があるので気をつけよう。

コミットメントが効果的に影響を及ぼすためには、いくつかの条件が揃っていなければなりません。行動を含むこと、公表されること、努力を要すること、自分の意思で選ぶこと、です。
p124(§ コミットメントと一貫性)

人は自分が外部からの強い圧力なしに、ある行為をする選択を行なったと考えるときに、その行為の責任が自分にあると認めるようになります。
p. 150(§ コミットメントと一貫性)

自分が主体的に行動していることを感じると、自分のモチベーションが高まっていることを感じる。

集団のかなりの数のメンバーが納得したという生の情報が、それ自体、他のメンバーを納得させるのです。
p.248(§ 社会的証明)

知らない場所に初めて行った時のことを思い出すと、自分の行動はまさにそれなので。本文では、社会的証明の原理が最大化するように環境を整えたリーダーが見事だったと言っているけど、これを抽象的に解釈すると、リーダーのコンピタンスってそういうことかとなった。

三種類の権威のシンボル—肩書き、服装、装飾品—
p.350(§ 権威)

5年前の書物なので、この5年で、何か新しいシンボルが出てきているかもしれない。とは言っても、これはこれで、そういう文化も引き続き存在するだろうし、普遍的な趣を感じる。

心理的リアクタンス理論によれば、自由な選択が制限されたり脅かされたりすると、自由を回復しようとする欲求から、私たちはその自由(および、それに結びつく物やサービス)を以前より強く求めるようになります。
p.388(§ 希少性)

仕事にも同じようなこと沢山あるよなあと思ったのでした。

画像をきれいな罫線で囲う

誰もが画像を罫線で囲うデザインを考えたことがあるだろう。私の場合、単にアクセントとしてつけたいと思ったこともあるし、ページ全体の統一感を出したいとか、画像が他の情報よりも重要なことを示したいと思ったこともあった。地と図の境界を明確にしたいという場合もある。

画像一枚一枚に対してつける・つけない、あるいは何をつけるかを柔軟に決めることができる余裕なり仕組みがあれば何も困ることはないのだけど、ウェブの場合は様々な制約によって、そうはいかない場合が多くある。そうして、全ての画像に一括で同じスタイルを適用することになったりする。

素朴に罫線をつけると、その種類によっては、画像のキワの色と線の色が調和しないことがあって、さて困ったということになる。経験的には、この問題は弱めの罫線を使用したいときによく起こる。

そこですぐに思いつくのがこういった策だ。

  • 画像と罫線との間に隙間を設ける
  • 罫線を太くすることで、罫線を擬似的な背景色として扱う
  • 画像に負けないように強い色(しばしば黒)にする

どの選択をするにしてもデザインのトーンに合っていればそれで良いけれど、どれもしっくりこない場合は、罫線を使うのを諦めて、背景色などの他のデザイン要素に同じような役割を担ってもらう必要が出てくるかもしれない。でも、その前に試してほしい罫線が一つある。それは私が勝手にPretty Borderと呼んでいる罫線だ。

Pretty Border

これは半透明の罫線を画像の内側に沿わせて重ねてある罫線である。現象として、画像のキワ1px分の色が変わっている様子が認識できる。そして画像のシルエットは極めてシャープだ。キワに白色がきても、黒色がきても、灰色がきても、滲んで見えることがない。総合的にみて満足度の高い罫線がつけられる。

画像の色がわずかに変わってしまうのがデメリットだが、それを許容できて、なおかつデザインのトーンに相応しいのならば、選択肢の一つとして重宝するだろう。

<span>
  <img src="image.jpg" alt="">
</span>
span {
  display: inline-block;
  position: relative;
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, .1);
    box-sizing: border-box;
  }
}

img {
  vertical-align: top;
}

https://jsfiddle.net/murata_s/631wjgb9/

ユーザーインタビューの知見

f:id:murata_s:20190718220438j:plain

これまで、担当しているプロダクトのユーザーを知るために「ユーザーインタビュー」をチームで何度か実施してきました。ユーザーに実際に会って、プロダクトをどう使っているのか、何を考えているのかを直接聞ける機会は貴重で、画面越しでは得られない情報が得られるので気に入っています。

いくつか実施に際しての知見を書いてみたいと思います。

ゴールを明文化する

漠然とインタビューを始めると、やって良かったねで終わってしまう可能性があります。なぜやるのかを明確にすることでインタビューの方向性が定まり、内容の質を高めることができ、インタビュワーの意識の統一が行え、施策に活かす際に活用しやすくなります。

例えば開発が始まる前やごく初期の段階であれば、しばしばユーザーの基本的なモチベーションを知ることをゴールとするのが良い場合が多いです。施策の検討が進んでいればテーマを絞ってアイデアを募るのも良いでしょうし、プロトタイプがあるのならば実際に触ってもらって感想を聞くのもありだと思います。使いやすさの問題をあぶり出したいのであれば、ユーザビリティテストを実施する方向に舵を切ることもできます。

グループと個別を使い分ける

インタビュワーにとって、インタビュイーが属するコミュニティの知識がほとんどない場合もあります。そういう場合はグループインタビューが役立ちます。セッティングや進行、話を引き出す技術などスキルを必要とする部分も多くありますが、うまくファシリテーションが行えれば、インタビュワーの知識を超えた情報を引き出すことができます。

グループインタビューで漏れてしまった内容を確認する場合や、深掘りして聞きたい場合、センシティブな内容に触れる場合などは、個別インタビューを行うのが良いでしょう。過去にはグループと個別を通しでよく行っていました。

聞きたいことリストをつくる

個別インタビューは、特別な理由がなければ、半構造化インタビューがおすすめですが、その際、事前にたくさんの質問項目を用意しておけると、会話の幅を広げるために活用できたり、話が膨らまなくなった場合に話題の切り替えがスムーズに行えます。インタビュイーによって、関心のあること・ないことの違いがあるので、質問の幅と深さの両面で質問項目を準備します。

価値を探る質問をする

私はユーザーがそのプロダクトやコミュニティに対してどういった考えで接しているかに注目しています。どんなことに価値を感じているか、またその価値を感じたときにどのように振る舞うのかといった、プロダクトの表面的な見た目の話ではない部分を探ろうとしています。これはユーザーの理解を理解することに繋がり、開発中のデザインや企画が有効かどうかを判断する際に役立ちます。

感想を書く

インタビュー終了後にチームに見えるかたちで感想を書くようにしています。インタビュイーの発言とインタビュワーの意見を混ぜてしまうのはご法度ですが、私見として共感したことや気づいたことを残しておくことは無駄にはなりません。当日の雰囲気や印象的な発言は意外と忘れやすく、得てしてそういう情報は、アイデアのヒントになったりするものです。

  *

知見を5つ書いてみました。まだ他にもありそうですが思いついたらまた書きます。

木々のや

f:id:murata_s:20190624192300p:plain

京都の一級建築士事務所、木々のや(くくのや)のウェブサイトをデザインさせていただきました。

木々のやさんのお仕事は自然の素材を生かした建築が中心。伝統的な京町家も現代的な住宅も、設計と施工を行っています。住まう人と建築との関係を大事にしていらっしゃいます。

そんな木々のやさんのウェブサイトは、その建築がまとう気品に合わせ綺麗目で静かな印象に。ひと呼吸置けるほどのたっぷりとした余白は、落ち着きと確かな技術を想起させてくれます。

事例ページのデザインは、事例写真の中に木々のやさんの建築に対する価値観と、住まう人それぞれに向き合って導き出された設計デザインが立ち現れていると考え、その建築に足を踏み入れた時に見える風景を追体験してもらえたらいいなという想いから、写真をストーリー仕立てで順番に見せていくアイデアに至りました。家の表情が朝と夜とで大きく変わる様子を見れるのもおすすめです。

今後も少しずつ事例が追加されていくようですので、よろしければご覧になってみてください。

木々のやさん、ありがとうございました。

木々のや

デザインをもっと見る