タンジブルとインタンジブル
奥出直人さんの「デザイン思考の道具箱」を読んでいます。半分ほど読み終えました。今回は気になったワード「タンジブル」「インタンジブル」について。
タンジブル、インタンジブル
「タンジブル」とは、実体のあるものとか、触れることができるものという意味だそうです。「インタンジブル」とはその逆で、サービスという言葉に置き換えると分かり易いかもしれません。
例えばディズニーリゾートに行った場合のことを考えてみます。ディズニーランドもシー、いろんなキャラクターと触れ合うことができますし、ミッキーの 耳（カチューシャ）や手（手袋）を付けながら遊ぶことができます。これらはタンジブルといえます。一方、シンデレラ城を背に写真を撮ったり、様々なショーやパレードを見て楽しむこともできます。これらはインタンジブルといえます。
最近始まったアマゾンジャパンの「プライムナウ」はもともとあるサービスにインタンジブルな要素を追加した良い例かなと思います。
相互に変換してみる
普段、アプリやWebの製作ばかりやっていると、あまりタンジブルを意識するケースが少ないように感じます。もちろんサービスの種類にもよりますが、例えばスマホ向けのゲームを開発している場合は、ちょっと難しいかなと思います。 なのでちょっと考えてみようかと。
例えば配達物の不在届け（タンジブル）を情報化して、再配達の日時をスマホや携帯ですぐに設定できるようなサービス（インタンジブル）に変えるとか。ココナラのようなサービスで、サービス会社を経由してお礼の手紙を送ることができるサービスとか。
タンジブル・ユーザインタフェース（TUI）
そんなこんなでタンジブルについて調べてみると、TUIというものがあるらしい。この記事がとても面白かったです。スマホを運んできてくれるところなんか特に面白くて、すごく未来的な感じがする。たまに出かける際にテーブルの上に鍵を置いたまま玄関まで行ってしまうことがあるので、怠惰な僕はテーブルや床が動いて持ってきてくれると面白いなとか考えたり。
おわり
たまにはアプリやWebなどの電子的な情報的なものから離れてデザインを見てみるのも面白いなと思います。デザイン思考関連の本ではいろんなサービスの事例を知ることができるので、とても面白いです。
ポートフォリオサイトを眺める
ポートフォリオサイトを作ろうと思い、いくつか見てみて感じたことを書きます。
チャレンジ
以前読んだ「センスは知識からはじまる」で紹介されていた方法を実践してみようかと思っています。やり方は、「定番」「流行」「共通項」それぞれを分析すること。
まずは「定番」の分析から。といっても、定番のポートフォリオサイトがどういうものか全く分からなかったので、サイトのデザインならWebデザイナーだろうと思い、Webデザイナーが作っているサイトのみ見て回りました。有名なデザイナーや、ポートフォリオサイトをまとめているところを参考にいくつか。
意外と一貫性が大事
デザインの一貫性に関してはwebデザインのみならず、デザイン全般に言えることだと思います。そんななか、見ていて気になった一貫性が欠けていると思われる箇所を２点ほど挙げます。
１つはナビゲーションについて。特にグローバルナビゲーションというか、どのページでも同じように表示されており、各種メインページ（もしくは場所）へのリンクをまとめたものです。ここに「Works」や「About」などのリンクを置いている方が多いように感じる一方、たまに「Blog」を載せている方もいました。もちろん、同一サイト内にブログもある場合は問題無いのですが、別サイトへ飛ぶ場合は設計上良く無いのではないかと考えます。
別サイトへ飛ぶ「Blog」リンクがグローバルナビゲーション内にあると良くない理由としては、その特性上「どのページでも同じ見た目、同じ順番、同じ機能を有している」べきであるからです。別サイトへ飛んだ時にグローバルナビゲーションが無くなった場合、ユーザを迷子にさせてしまいます。ブログリンクを押した後すぐにブログサイトへ飛ばす必要も無い場合もあるかと思うので、ブログサイトの紹介ページなどを作り、そのページから遷移させるようにすると良いのではないかと思います。
もう１つは、ちょっと全体的な感じにもなってしまいますが、見出しやコンテンツ領域の見た目です。見出しは、一貫してフォントやサイズが同じであるかどうかで、例えば作品ページであれば「作品」とか「Work」と書かれていたり、作品のタイトルがこれに当たります。コンテンツ領域は、レイアウトや背景に使っている画像等がどのページでも同じであるか、異なったとしても何らかの関連性があるかどうかです。
WebデザイナーManaさんのサイトが良い例かなと感じています。トップページにある「マナです」から始まる文言とその他のページの見出しのフォントサイズが同じで、さらにこのフォントサイズが結構大きめなので遷移しても見出しであることが明白です。さらに、すべてのページでコンテンツが白い紙のような背景の上に載っており、作品一覧ページ以外は概ね画面に収まる大きさになっています。これらが良くない設計の場合どうなるのか。
見出しやコンテンツ領域の見た目が異なる場合、ページ遷移した時に再度それらの情報の理解から始めなければなりません。どこが見出しなのか、コンテンツはどこからどこまでかなどです。こういったことを意識させないデザインが必要なのかなと思います。
主要なページ数が少なくなりがちなポートフォリオサイトが（１ページのみのサイトもあるが）、情報が多くなる場合はこういった点に気をつけてみようと思います。
Webフォント
Webの知識はちょっと疎いので、画像かと思ってたロゴがテキストだった、というサイトがいくつもありました。コードを見てみるとWebフォントを使用している方もいて、これは難しくなるなぁと感じました。
大学時代に講義の課題でサイトを作成した際に、もちろんフォントの指定を行いました。ただその時は、WindowsでもMacでも、ちょっと古いOS、ブラウザで見ても表示が崩れないように、という意図から標準的なフォントを指定していました。しかし、近年なのでしょうか、Webフォントを指定するデザイナーが増えてきているとのこと。ということは、全文ではないにしろ、見出し等においてはデザイン的な理由がしっかり求められるようになりそうだなと思いました。必要な箇所でデザインに沿ったフォントを指定していくことが重要だと思うので、フォントについてもきっちり勉強しなければ、と。
レスポンシブ対応
業界的にはもしかすると当たり前なのかもしれませんが、Web初心者の僕からするとレスポンシブ対応されているサイトはやはりすごいなと感じます。特に３段階に分けてデザインされているサイトは面白かったです。実装上の知識・技術もそうですが、複数の状況に合わせたデザインを考えなければならないため、とても興味深く見させてもらっています。
スマホで見るサイズとなると、グローバルナビが起きにくくなる場合があると思います。そのため、メニュー用のアイコンを作成し、タップするとメニューがプルダウンで表示されるようなタイプのデザインもありました。また、これはデザイン的な話ではないかもしれませんが、作品一覧画面等は結構重い場合もあるので、一度に読み込む作品の数を柔軟に変更すると良いのかもしれません。
今回のまとめ
これを始める前は、自分が好きだと感じるサイトを参考にしつつデザインを考えようとしていました。単純にかっこいいとか可愛いという主観のみではデザインとは言えないなと感じ、「センスは知識からはじまる」に書いてあった方法を試し始めました。結果として、まず定番といえるサイトかどうかは分かりませんが、いくつかのサイトを見てみて基本的な要素の一部でも気づけたと思うので、まずは第一歩かなと思います。最初はこんなもんなのかなと。おそらく本で解説されていることと趣旨が異なっていると感じてはいますが、一度このままやってみようかなと思います。
余談
なんとなくブログの書き方を「ですます調」に変えてみました。これまでも何度か無意識に「ですます調」になっていたので、もしかしたらこっちの方がやりやすいのかなと思い変えました。
「センスは知識からはじまる」を読んだ
クリエイティブディレクターで、good design company の代表である水野学さんの著書「センスは知識からはじまる」を読了。タイトルを書店で見かけた２ヶ月前からずっと気になっていた本で、内容も難しく書かれているものではないので、一気に読んだ。
今回は、前から考えていたことで腑に落ちたことをいくつか。
「わからない」は知識不足
とある絵画に数億円の価値があると聞いて、なんでこんな落書きみたいな絵に？と思った経験は誰にでもあると思うけれど、そもそも芸術に関して深く学んだ経験がある人も多くない気がする。また、よく「見る目が無い」という言葉を聞くけれど、知らないものや情報が少ないものの評価はできない。
身近な例もある。Tシャツ１枚に１万円以上出す友人がいたとして、GUとかで定期的に数枚買う僕からすると、やはり分からない。友人はとてもファッショに詳しく、いろんなお店やブランドを知っているし、買った服の詳細を説明できるが、対する僕はファッションとか服に関する知識は全然無いので、ある値段以上になるとどれも同じ見た目に見える。
見えている範囲の情報でしか判断できないし、例えば生地についての知識が少なければ、その部分の情報を見逃すことになる。見逃した情報が多ければ多いほど、現状知っている狭い範囲内だけで価値を見出すしかない。つまり知っていることが多い人ほど価値観の振れ幅が大きいのだと思う。
感性デザインもロジカルに考えられる
僕は、デザイナーはデザインしたものの説明をできなければいけないと思っている。エンジニアが慎重に、ロジカルに設計を行わないといけないように、デザイナーにも同じようなことが求められると思う。
ノーマンの著書「エモーショナル・デザイン」でも語られているが、使いづらいと分かっていても気に入ってしまうものがある。感性デザインについて深く知ろうとしていなかったこともあるが、「なんとなく好き！」と思わせる感性デザインは作り手のセンスが重要なんだろう、と思っていたので、表題の本とつながった。センスが良いものであるなら、知識をフル活用してデザインされたものであるだろうし、つまり言葉で説明可能である。
センスはつくれる
「かわいいはつくれる」を実現している人たちがいる。顔の形とか身長とか、自分だけではどうしようも無いこともあるが、それ以外の部分には伸びしろがある。
センスが良い・悪いと言われる人やものというのは、おそらく大勢の人にそう言われているのだと思う。１人２人が言っているだけではセンスが良い（悪い）とは言わない。つまり大衆、もしくはあるジャンルの中での大半に受け入れられているということ。アーティスティックに作り上げたものが評価されることもあるだろうが、著者は大衆をよく観察し、長くヒットしているものや流行のものを分析し、そこで得た知識と既存の知識との組み合わせで新しいものを作っている。それが「センスが良い」と言われているのだから、センスも作り出すことができる。
余談
感性デザインについて自分の経験から考えたことを雑に書いてみる。
僕は家で使っているマグカップをとても気に入っているが、ちょっと使いづらい。持ちにくくて、少しの間持っていると取っ手に掛けている指が痛くなる。痛くならない持ち方もできるのだが、カップに直接指が当たってしまい、熱いコーヒーを飲んでいる時にはつらい。でも気に入っている。
マグカップにはムーミンの絵が描かれている。ムーミンだけでなく、ムーミン谷の他のキャラクター達も微笑ましく描かれている。僕と同じ２０代で知らない人はいないだろうし、嫌悪感を抱く人もいないと思う。もともとフィンランドの芸術家が風刺画として描いていたこともあり、原作はちょっと怖さが混じっている。お国柄の表現もあるのだろうけれど、その独特の表現はデフォルメされた後は可愛らしいのだが、全面的に幼稚なイメージであるわけではない。このあたりはもう少し深掘る必要はあるが、若い大人にも受け入れられるような見た目だと思う。さらにこのマグカップを色違いの２種類用意しておけば、カップルの目にとまるだろう。一緒に買うということになれば、お互いのお気に入りにもなると思う。
iOS HIGを半分程読んでみて
iOS ヒューマン・インタフェース・ガイドラインを半分程読んだので、一旦考えたこと等をメモ。
いつ停止しても良いようにする
ユーザはいつアプリを閉じるか分からない。僕の場合は、ちょっと処理が重いなとか、画面が固まってしまった場合にアプリを閉じることがある。そのとき、データが消えてしまうことは許容できる場合もあるが、怖いなと思うものもある。
こういう場合の安心感の与え方は、やはり経験を積ませることだろうか。例えばデータの同期（サーバとの通信）に時間がかかりすぎてアプリを閉じたユーザが再開したときに、同期の続きを行うかどうかを問えば（もしくはうまく同期されていたことを伝えれば）、前回の自分の操作の続きという缶感覚になるので安心感につながるのではないかと思う（自分の操作が無かったことになったわけではなく、そのステータスが分かるので）。
モーダル型の画面
iOS標準のメールアプリでメールを新規作成するときは、モーダル型の画面が下から出てくる。メールを書くことに専念できる画面が表示される。何をすべき画面なのか分かりやすいし、ナビゲーションバーにある送信ボタンかキャンセルボタンを押さないと画面は消えないので、誤って画面が消えることもないだろう。
今度、もう少し考えてからまとめて書こうと思うが、ニュース系アプリとSNS系アプリでは、URL（web上の記事）を開く際の挙動が異なるように思う。ざっくりいくつかのアプリを見ただけだが、ニュース系アプリは画面遷移を伴って（右方向へのスワイプで戻れる状態で）記事のサイト、もしくはダウンロードしておいた記事を表示する。対してSNS系アプリではモーダルビューとして表示するので、ナビゲーションバーにある閉じるボタン等を押さないと閉じない。後でもう少し意図を探ってみたい。
色のコントラスト比
このあたりは全然知見が無いのだが、前景色と背景色の輝度の対比を測定することが推奨されている。理想としては4.5:1ということらしいが、まだちょっと分からない。これがWebのWCAG 2.0規格で計算式が決められているとかで、そういうのもあるんだなと。
色の使いすぎ注意
たくさんの色を使うのを注意しようというわけではなくて、iOS標準アプリのような色の少ないアプリにおいて、ナビゲーション用のボタンと同じ色をコンテンツ領域で多用するのは良くないのかなと思った。理由としては、アクセントとか重要なポイントに色を付けることはあるかもしれないが、色が付いている箇所をユーザがボタン等と思ってしまう可能性があるのではないかと。なんの意味があるんだろう、と思わせてしまってはいけないので、初心者の自分はちょっと注意が必要かなと思っている。
HIGは勉強になる
数年前に軽く読んだことがあるが、内容が結構抜けていた。改めていろんなアプリや自分の経験と照らし合わせながら考えていくと、面白く学べることが多い。
読んでいて感じたのは、デザイナーだけが読むべきものでは無いということ。デザイナーだけではユーザに届けられないようなことも書かれている。例えば、いつアプリが停止しても良いように、コンスタントにデータを保存するようなことはエンジニアが必ず関係してくるので、お互い理解しておく必要があると思う。
FiftyThreeのPaperが面白い
スケッチや写真を添えられる高機能なメモアプリ？のPaper。Fifty Threeから出ているアプリで、いくつか面白いところがあった。
最初の印象
App StoreのEssentialsに入っていたので、良いアプリなんだろうなと思ってインストールした。インストール中に説明分や画像を見ながら想像してみたが、ちょっと高機能でカッコいいメモアプリなのかなぁ、という印象。Essentialsに入っていなければ、個人的にはダウンロードしない類だと思う。
起動直後にアカウント要求
いろんなアプリで行われていることだが、起動直後にアカウントを作成させたり、ログインを要求することはよくある。それが必然であるなら仕方ないことで、例えばストレージ系のサービスであれば、データの保存場所（サーバ）を借りるわけだから納得できる。ただPaperの場合は、メモアプリだと思って起動したのでアカウントを作成しなければならない理由が分からず、一瞬嫌な思いをした。でもその後、どんどん感動していくことになる（この時点でアプリを閉じなくてよかった）
「なぜアカウントが必要？」ボタン
画面下部にあるボタン。最初にアカウントを要求するアプリはたくさんあるけれど、アカウントが必要な理由まで載せているアプリはあまり無いのではないかと思う。このことについてはiOSヒューマン・インタフェース・ガイドラインにも書かれていて、アカウントが必要な理由や利点を明記しておくのが望ましい。アカウント無しで使えることと併用すれば、ユーザは安心できるだろうし、アカウント登録するタイミングを自分で判断できるなど、メリットがある。
このボタンを押した遷移先では、理由や利点の説明に加え、アカウント無しで始められるようになる（先延ばしにする）ボタンが用意されている。
アカウント登録なしで始める
これもよくあるパターン。アカウントの登録を先延ばしにする。どこかのタイミングでアカウントが必要になった場合、もしくは目玉の機能を利用する場合はアカウントが必要なるよということ。こちらとしては、「まぁとにかくどんなものか使ってみたいのだよ」という気持ちで初回起動しているのでとても良い。
使い方の解説動画が面白い
アカウント無しでアプリを使いはじめると、まず「ヒント」というか使い方の説明を見させられた。動画で見られるのでとてもわかり易かったのだが、何より面白い。「えっ！そんなことできるの!?」というのが動画を見ていた時に思っていたこと。特にスケッチ機能に驚き、すぐに使ってみたくなった。直後、これは動画で見せるのが一番上手いなと思った。AppStoreで読んでいた説明文は、あまり注意深く読んでいなかったのもあるだろうが、全然印象深くなく、頭に残っていなかった。だからヒント動画を見てはじめてこのアプリを使ってみたいと思い、同時にちょっと感動していた。AppStoreって動画も載せれたはずなので、載せるべきだなと思ったし、動画での説明ってこんなにも魅力的なのかと思い知った。
解説者の使用しているタッチペンも商品
解説動画は全部で10数本。１つの時間が短いので、さほど時間をとらずに全部見れる。一通り見ていると気づくのだが、解説者が使用しているタッチペンがカッコいい。それだけでなく、描きやすそうに見える。良いな、欲しいなと思えてくる。
実はこれ、アプリを出しているFifty Threeの商品でもある。アプリを使用していると分かるが、あるところでこの商品を扱うショップへのリンクボタン（専用の画面まで）用意されている。なるほどなぁ、上手いなぁと感動した。買わないだろうけど、欲しい。
整形される図形
動画でも解説されているが、スケッチでは例えば適当に四角形を描けば、ちょっと整形されて背景色まで付けられた四角形が描画される。言葉だけでは伝わらないが、ぐにゃぐにゃしていない良い感じの四角形や円、三角形を描くことができる。単なるお絵かきアプリであれば、逆にこういう機能は要らないように感じるが、これがメモアプリで、思いついたことを即席で描いていくものであることを考えると、とても必要な機能であるように思える。これだけでも、どんどんメモしたいなと思えてしまう。
とりあえずカッコいい
見た目も操作感もかっこいいので、個人的には触っていてとても楽しい。まだ使い始めたばかりであまり分かっていないことがあるが、使いこなせれば面白そうなアプリだと思う。
「前回の続き」という感覚？
iOSヒューマンインタフェースガイドラインを読んでいてハッとしたことについて。
アプリがいつ閉じられても良いように
ユーザはいつアプリを閉じるかわからない。そのため、可能な限り必要なデータは適宜保存しておく必要がある。例えば、何かを編集しているのであれば、途中データを保存しておいた方が親切。
また当然だが、中途半端な状態でアプリが閉じられてしまった場合に、その後アプリがクラッシュしてしまったりすることは避けたい。前回のデータや状態が破壊されてしまった場合は、その旨をユーザに伝えるのも良いかもしれない。
アプリ起動時は前回開いていた画面から
アプリを閉じる直前の状態を保持しておくことで、アプリを再開した時に前回開いていた画面から始めることができる。これはiOS HIGにも書かれていること。すべてのアプリが実装しているわけではないが、有名なところだとiOS標準アプリ、Twitter、Dropboxなど。
例えばTwitterは、タブバーの各画面から開始されるようになっている。つまり、ホーム画面の検索アイコンを押して検索画面を開き、検索している途中でアプリを閉じた場合、再開後はホーム画面からとなる。
必ずしも前回開いていた状態を復元することが難しい場合もあるが、なるべく近い状態に持って行く方が親切なんだと思う。もちろんこれはアプリの特性と踏まえた上で吟味する箇所だと思うけれど。
デザインっぽくないデザイン
単純に見た目（グラフィック的な）の話ではないので一見デザインっぽくないように感じるが、上述の話はデザイナーが意識するところかなと思う。このあたりはエンジニアに頼むしかないので、仮にデザイン上大事な要素だとしても、優先度が落ちる場合がありそう。ユーザの期待した動作をするように作るのは大切だが、意識していないと見落としがちな点だなと思った。
