Hatena Design Hour #2 in Kyotoに行ってきました
2015年終わるので下書き整理しようと思ったら，イベントレポート埋もれてしまっていた．
参加したのはこのイベントです．
もったいないので加筆して公開したいと思います．
Hatena Design Hour #2 in Kyoto
8.27に，京都のはてなで開催されてたデザインイベントに参加してきた．
Hatena Design Hour #2 in Kyoto
東京で開かれていたイベントを京都でもやってもらえるということでとても嬉しかった．
やっぱり人気があって，定員40人で60人くらい応募があったっぽいので，抽選通ってよかった．
講演聞きながら自分なりにMarkdownでまとめていて，改めてまとめ直す意味と，来れなかった人のためにまとめて記事にする．
Twitterで#hatenadesignで呟いていたことも合わせてまとめ直す．
漏れとか勘違いのところもありそうなので，そのあたりはよしなにお願いします．
目次
- B!KUMAガールズ リブランディング - mochapiさん
- Mackerelのデザイン - 村田 智さん
- 村上さんのところ - 種村司さん
- はてなブックマークのアートディレクション - 川上淳さん
- なぜ、こんなご時世にブログサービスを作っているのか - uedayさん
B!KUMAガールズ リブランディング
mochapiさんのお話．
独自の世界観を感じた．
熊野ナンシー
!KUMAガールズのシロクマ，「熊野ナンシー」というらしい．
アダ名は「くまこ」．
もっちりしてて，且つちょっと人間的なところが特徴的．
人間的というか，熊だけどOLで人間(本人談)．
あと，もっちり感がこの熊のアイデンティティに関わってくるのですがそれは後述します．
熊野ナンシー，mochapiさんご本人がモチーフになっているようで，説明でも
「これは，寝転んでスマホを触っている時の私です」
みたいな感じだった．
もはやモチーフというよりもmochapiさんだった．
デザインコンセプト
現在のデザインになるまで，複数回のブラッシュアップがあったみたいです．
こだわりの点は，目と鼻と口の位置，全体的なもっちり感．
ここの調整に時間をかけていたようで，そのため多少崩してもくまこ自体の雰囲気が保たれるという感じ．
表情によって目や口の形は変わるけど，位置が変わらないから同じクマに見える．
寝転んだり歩いてたりすると，形は大きく変わるけど，もっちり感はキープ．
この目と鼻と口の位置，もっちり感がくまこのアイデンティティを確立している．
個人的なまとめ
自己の投影という話を聞いて，デザインとは違うところの話のように感じていたけれど，このへんの一貫性を持たせるためのこだわりみたいなところに，ブランディングデザインを感じた．
自分っぽい人他にもいるはず！みたいな感じで共感を得ようとしたデザインは，対象となってる'ガールズ'な感じがしてとてもわかりやすい．
過程が主観っぽい感じでも，一貫性を持たせるためのコンセプトがあれば，最終的に客観性を帯びてくるという感じがとても新鮮な感じがした．
Mackerelのデザイン
村田智さんのお話．
Mackerelは実際に使ったことはないけれど，以前
この記事は拝読していた．
Mackerelについて
そもそもMackerelとはどういうものなのかという説明．
おそらくその辺は調べていただいたほうが良さそうなのでここでは割愛．
ほぼエンジニア'しか'使わないツールなので，一般的なサービスのデザインとは少し異なる．
デザインの方針
Mackerelのデザインの方針として，
- 信頼できる
- わかりやすい(使いやすい)
- モダンである
が挙げられていた．
・信頼できる
ツールの特性として，信頼性は第一に必要．
情報を正確かつ確実に伝達してくれるツールだということを，ソフトウェアの機能は勿論，デザインでも示さなければならない．
だから，ピンクとか黄色とかポップな色を使うのは，絶対違う．
信頼感を持たせる青色をメインの配色として，その他は可能な限り色数を抑えている．
・わかりやすい(使いやすい)
先述した信頼性のためのデザインはあくまで印象であり，実際に信頼'できる'と思わせるには，正確でわかりやすいデザインが必要．
そのために，グラフをどのように表示・比較するか，WARNINGやCAUTIONといった警告表示をどのような色で表わすか，といった機能に大きく関わる見た目の部分にこだわっている．
・モダンである
モダンである，つまりカッコいい，イケてるものでなければならない．
これは当たり前のことで，わかりやすさとかそういうのに加えて，カッコいいに越したことはない．
ツール自体のデザインに限らず，リーフレットやフライヤーのデザインもきちんと行うことで，サービス全体のデザインイメージがモダンでカッコいい印象になる．
個人的なまとめ
複雑な情報を，わかりやすく正確に可視化するというところがデザインの本質という感じがした．3つの方針がまさしくデザイン，見た目の良さだけが注目されがちな今時のデザインへの認識をぶっ飛ばしてくれるシンプルで最高の方針．エンジニアとデザイナーというのは，分野も違うのでなかなか相容れないが，Mackerelのデザインはその架け橋って感じがする．
村上さんのところ
種村司さんのお話．
「村上さんのところ」というのは，村上春樹さんが読者から質問を受けてそれに回答するサイト．
存在はもちろん知っていたけど，はてなブログでやっていたとはいざ知らず．
現在は公開終了のようで，とても残念．
情報デザイン
情報デザインは，グラフィックとかwebとか，様々なデザインを内包しているもの．
モノに関係性を与えるデザインという感じで，レイアウトなどが大きな役割を果たしている．
(ex.見出しと本文の関係性を文字の大小や距離によって表現する)
情報デザインとは，新しさと向き合うツールのことである
つまり，「今までやったことなかったけど，やってみよう」と向き合うためのツールであり，仕事でもある．
村上さんのところのデザインを見て
夏目漱石の書簡集を読んでいるような感覚がする
という読者の声があった．
私信感
「村上さんのところ」は，村上春樹と質問者の関係だけでコンテンツが成立する
→村上春樹と質問者の私信のやりとりを，読者(訪問者)が閲覧し，共感するという仕組み
つまりデザインは，この私信感を意識したものとなっている．
私信，手紙の雰囲気を出すために以下の点で工夫を行っている．
- 質問者の文章には引用符(>)を用いる
- 質問と回答の背景色を変える
- かしこまったタイポグラフィと暖かい色彩
質問に引用符(>)を用い，回答には何も記さないことで，実際にその質問に村上春樹が返信しているような印象を与えている．
また，質問と回答を背景色を変えることで更に区別し，それらが二通の独立した手紙であることを表している．
→しかし，そのちょうど境界の所に村上春樹のイラストを用いることで境界を曖昧にし，それらが完全に独立したものではなく，私信のやりとりであることを表現．
タイポグラフィはかしこまった雰囲気が出るように整列されていて，使用する色は温かみを出しつつ彩度を落として，落ち着いた雰囲気を表す．
個人的なまとめ
そもそも"情報"というのは形を持たないものであって，それが文章や絵によって装飾，デザインされることによって僕たちは情報として認識することができる．「村上さんのところ」では，私信のやり取りをインターネット上で表現するという新しいことに向き合う上で，いかに私信感や手紙のような雰囲気を出すことができるのかを，情報デザインを用いて解決した．それは感覚や雰囲気という目には見えない"情報"を，レイアウトや色彩によって表現するという情報デザインであるように思った．
はてなブックマークのアートディレクション
川上淳さんのお話．
お話聞いているときは存じ上げながったんですが，数日後たまたま見かけた最高のフォントが川上さんの作られたフォントで興奮したのを覚えています．
めっちゃ最高なフォント見つけて，よく調べたらはてブのアートディレクションについてお話してくださった方だったので興奮してる http://t.co/RxypSpf46D
— サクライユウト (@rumo_r) August 30, 2015はてなブックマークのアートディレクションということで，本格的な，デザインに関するディレクションの話が聞けた．
プロダクトの寿命
そもそも，プロダクト，webサービスはどうやって終わっていくのか．
- 導入期
- 成長期
- 成熟期
- 衰退期
衰退期に入るともうサービスは死んでいくだけなので，なんとか衰退期にならないように，常に新しい成長曲線を描くようにする．
そのために，webサービスは絶えず変化しなければならない．また，多様であることが求められ，それらの部分から全体が作られるというようになることが理想的．
常に改良され続けて，ユーザーに刺激を与えることが必要．
アートディレクションはwebサービスに適していない？
一貫性を持たせるために必要なアートディレクション．
常に変化が必要なwebサービスには必要ないのでは？
→ 常に変化するために，基準となる秩序が必要
- 変化と多様性を許容する秩序設計
- 部分の積み重ねで全体を作る
- 定期的な全体像のアップデート
→ サービスの体験がそれらの評価軸となる．
デザインレビュー
デザインレビューは3つの視点から．
- 直感的に美しいと感じるか
- 企画要件を満たしているか
- 設計的に問題はないか
レビューは，アートディレクターとサービス自体のディレクターが一緒に行う．
そのためデザイナーが後々，アートディレクターとサービスのディレクターの間で板挟みにならない．
まずはガイドラインが足枷にならないようにデザイナーが自由に設計し，その後レビューなどを通じてアートディレクターがサービスの統一感を担保するという流れ．
明確な価値観を持って部分を積み重ねることで全体像を作る．
アートディレクションで"明確な価値観"を担保して，デザイナーが自由な"部分"をデザインすることで変化が生まれ，全体像が出来上がっていく．
個人的なまとめ
アートディレクションというのはまさしくサービスの"顔"となる部分だと思った．そして，その"顔"はサービス全体を表している．ずっと同じ顔だと飽きるけど，秩序がなければ決して綺麗には見えない．パーツそれぞれがよくても最後にその顔の印象を決めるのはバランスで，そこを保つのがアートディレクションだということを実感した．個人的には，デザイナーが板挟みにならないように考えられているやさしさがよかった．
なぜこんなご時世にブログサービスなのか
uedayさんのお話．
なぜTwitterとかFacebookが流行ってるこんな時にブログサービスを始めたのか．
タイトルからデザイン関係ないと思ったらめちゃくちゃはてなブログのデザインの話が聞けた．
なぜ今ブログ
ブログがオワコンになっていた2011年にはてなブログのベータ版公開．
「なぜ，今なのか」ではなく，「むしろ，今である」ということ．
SNSで友達と繋がり，ブログで社会と繋がる．
SNSは(基本的に)短文で何気ない日常，ブログは(比較的)長文で腰を据えて書く．
というように，役割が明確化してきた．
はてなブログのデザイン
ブログの役割が「ちゃんと文章を書きたい人のためのサービス」というように明確化してきた．
そのためには普通に使えることが大切
- 過度に主張しないUI
- ユーザーが迷わない
- カスタマイズ性がある
派手なUIでは毎日使うと疲れてしまう．また，何がどこにあるかわからないような複雑な管理画面だと使いたくなくなるが，ある程度自分が使いやすいようにカスタマイズはしたい．
というユーザーの想いがある．
はてなブログのデザインが意識しているのは3つ．
- 自然とそこに落ち着く形を目指す
- 時代が変わっても通用する強度がある
→ 流行っているものを取り入れるときは一旦立ち止まって考える - ただし，紙や文房具の作法をそのまま持ち込まない
この3つを意識して，ポジティブな普通を目指す．
そして，使いやすいこと，使いにくいことを確かめて改善するには自分たちで使ってみるのが一番であり，そのためにドッグフーディングは必要不可欠．
design.hatenastaff.com
はてなブログは何がしたいのか
まとまった形で書き残すという文化を作りたい．
だって，人生について語るのに140字じゃ足りないでしょ．
個人的なまとめ
今こうして書いているブログの管理画面も，デザインの背景を知ると少し違って見えて面白い．確かに，はてなブログは機能が痒いところに手が届くみたいなのが多くて，書いてて楽しくなることがある．腰を据えて長文を書く文化を作りたい，という想いがよくて，話を聞いているだけでもそれが伝わってきて良いなあと思った．
全部のまとめ
各サービスごとのお話でしたが，どの話も様々な目線からのデザインの話であり，全体を通して聞くことによって，はてな全体のデザインに対する考え方がわかるイベントだったと思います．会社のデザインに対する考え方というのは，言い換えると会社そのもののアートディレクションであって，それが会社のイメージをつくるブランディングに繋がります．ブランディングはサービスが伝えたい，実現したい想いを支え，サービスのデザインがブランディングを支えるという相互作用も働きます．その会社がどういうデザインの考え方をしているのか，というのはこうして話を聞かなければ推測でしか考えられないことなので，ここまではっきりと全体について教えてくれるというのは非常に興味深く，ためになりました．
個人的にはデザインには"想い"がなければならないと思っていて，その"想い"っていうのは「こうなってほしいからこのデザイン」「こう伝えなければならないからこのデザイン」というような，そのデザインを説明できる"理由"のことだと思っています．今回はその"想い"がいろんなところに現れていて，勉強になったと同時に，漠然と良いなあという気持ちになりました． ちょうどオリンピックのエンブレム問題でデザインというものが揺れていて，僕も改めてデザインを意識し直している中で，今回のイベントで綺麗でまっすぐな"デザイン"の考え方に触れられたことはとても自分にとって良かったと思います．
やっぱりデザインって楽しいなあと感じられた一日でした．
