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

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

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

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

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

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

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

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

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

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

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

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

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

木々のや

デザインをもっと見る

Markdown Table Generator

f:id:murata_s:20190602121151p:plain

GUIのテーブルに文字を入力するとMarkdown記法の表が得られるツールを作りました。行/列の追加・削除・移動などができます。単純な仕組みですが、MarkdownからGUIの表にインポートする機能もあります。

素朴にInputが並んでいるだけなので長い文字を入力したときにすこし見にくかったり、focusの移動がもっとスムーズになると表のUIとしての完成度が高まりそうなどありますが、このくらいで一区切りです。

JavaScriptを駆使してツールのようなものをいちど作ってみたいなとずっと思っていたのですが、このMarkdownの表をつくるという題材は、事始めとしてちょうど良い難易度でした。せっかくなので知らない技術を積極的に触っていくことにしました。

  • Vue.js
    • 公式ドキュメントを見たらやりたいことがほぼ全部解決したので、初学者にも優しかったです。今度はReactでなにか作ってみたいなと思いました
  • Firebase Hosting
    • シュッとデプロイできて便利でした。趣味で作るものは静的なものばかりなので今後も活用していきたいです
  • CSS Variables
    • 使い勝手を試してみよう(趣味なのでIEのことは忘れよう)ということで使ってみました。ダイレクトに値を変えられるのが便利でした
  • prefers-color-scheme
    • ダークモード対応です。CSS Variablesと組み合わせると特別な追加コストがほぼゼロで実現できるのが良いですね

よろしければ使ってみてください。

Markdown Table Generator

『エモーショナル・デザイン』(D·A·ノーマン)を読んだ

エモーショナル・デザイン―微笑を誘うモノたちのために

エモーショナル・デザイン―微笑を誘うモノたちのために

  • 作者: ドナルド・A.ノーマン,Donald A. Norman,岡本明,安村通晃,伊賀聡一郎,上野晶子
  • 出版社/メーカー: 新曜社
  • 発売日: 2004/10/15
  • メディア: 単行本
  • 購入: 3人 クリック: 132回
  • この商品を含むブログ (58件) を見る

ノーマン氏の書籍を読んだのは『誰のためのデザイン?』に続き2冊目。本書は2004年初版ということで、実に15年も昔の本になる。取り上げられる例が古く感じるのが気になるが、主に情動という側面に焦点を当てた本ということで楽しめる。ここでいう情動とは、本能レベル、行動レベル、内省レベルという三段階の認知と情動システムを指している。これら3つが満たされた時、真に人々に受け入れられるモノのデザインができるとノーマンは説いている。

『誰のためのデザイン?』では機能性という側面に着目して行動レベルの話を扱っていた。しかしデザイナーからは「使いやすくはなるだろうが、見かけはひどいものになるだろう」との批判を受けたのだという。そもそも氏は、芸術性や情動を見下すつもりはなかった。デザインの世界で、単に機能性という側面の地位を上げたかったのだと言っている。ノーマン氏はそんな批判に加え、魅力的な美しさと知や、楽しみと使いやすさは共存できるのではないかという疑問から、科学者としての好奇心が駆り立てられ、また2001年からの研究生活の成果として、本書を記すに至っている。

つまり、本書は氏が見下すつもりのなかった「本能的デザイン」や「内省的デザイン」の部分をフォローするような内容となっている。使いやすさの話はほとんど出てこない。

これらデザインの3つのレベルと製品の特性との対応付けが、単純化されて次のように示されていた:

本能的デザイン → 外観
行動的デザイン → 使うことの喜びと効用
内省的デザイン → 自己イメージ、個人的満足感、思い出

エモーショナル・デザイン p.50

使いやすさを究極的に突き詰めていけば、どの製品も画一的な見た目になるだろうし、ブランドの個性というものもなくなっていく。初見での魅力や使い込んでいくうちに紡がれるユーザーと製品との物語とか感情などの話がなくなってしまえば、製品に対して愛着が持てなくもなる。どんなに使いやすくても楽しくなかったら所有したいとか使い続けたいとは思えないだろう。私たちが、数あるチャットサービスの中からSlackを選んだように。

機能性の部分に関しては、ある程度ロジカルに考えることができるし、そのためのわかりやすい手法も開発されている。つまり取り組みやすく成果がわかりやすい。一方、本能的な部分や内省的な部分は個人の感情とも結びついていて、良し悪しは当然あるのだが、それを生み出す難易度は高い。これは経験的に、そして観念として理解される。たった一つのデザインですべての人を満足させることは無理であるから、これは難しい。

本書を読んでいて、情動は、普段私たちが一般にデザインと向き合う時に「感覚」と呼ぶものに近いように思えた。情動に関する知識は、製品のデザインと向き合うときに、デザインのテクニカルな話が、より解像度の高い言語でもって交わされる機会を提供するだろう。

ノーマン氏の「使いやすさ」じゃないところの考えが補完できるという点で、『誰のためのデザイン?』に影響を受けたデザイナーには、ちょっと古い内容だけれど、本書もセットで読んでみることをお薦めしたい。人間中心的なアプローチを客観的に捉えるために。私は本書から、デザインにおける情動と感情、そして芸術性に関する視座を高めることができた。

読書メモ

  • 人の心の動きは、情動は比較的短時間、気分はより長く、性向は数年から一生涯、パーソナリティは一生涯にわたる p.42
  • ブランドとは情動が全てである。情動は判断がすべてである。ブランドは我々の情動反応の記号であり、それゆえに商売においてブランドが非常に重要である p.78
  • 人間中心的なアプローチを反復することは行動的デザインに対してうまく働くが、本能的あるいは内省的な側面には必ずしも適切とはいえない。反復的な方法は、妥協、話し合い、合意によるデザインになる。その結果は安全で効率的なものであることは確かだが、必ずや味気ないものとなる。 p.129
  • デザインそのものがエレガントで美しく、あるいは遊び心もあって楽しいなら、感情システムはやはりポジティブに反応する。p.185
  • 傍観者の無関心。p.194