Public ハッカーズチャンプルー2018でesaのデザインの話をしてきました #hcmpl

ハイサイ :hibiscus: 
デザイナーの[@ken_c_lo](https://twitter.com/ken_c_lo)です。台風接近中の沖縄・那覇からお送りしています。


[ハッカーズチャンプルー2018]()という沖縄で開催されたイベントで、『[esaのデザインの話 - 自分たちのWebサービスを作るデザイナーとしてやっていること](https://speakerdeck.com/ken_c_lo/design-talk-of-esa) 』というタイトルで発表をさせていただきました。

![IMG_3540.jpg (2.0 MB)](https://img.esa.io/uploads/production/attachments/105/2018/07/02/2/c7e3cf39-adb8-4c5f-9b2c-a885f389221b.jpg)


<script async class="speakerdeck-embed" data-id="df42593d88544ffaa62b36e65c94a685" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>

## 発表の補足など

懇親会やネットなどで質問やリアクションをいただいたり、色々お話できたりしたので、それも踏まえて何点か補足したいと思います。

- デザインは理論か？感覚か？
    - 今回は、デザインするときの思考プロセスをわかるように説明しようと整理したので、一見ロジカルに段階を踏んで考えているように見えるのですが、実際にはここまできれいに段階を踏んで考えているわけでもなくて、割と感覚的に瞬間的に思いついたことを、後から理屈が通っているかどうか、ひとつひとつ検証した結果がこんな感じである、という方が実感には近いです。
    - 色を決める場合でも、エメラルドグリーンにしようというのは最初に実は心に決めていました。自分の中で暫定的に結論を出した後から、「本当にこの色でいいんだっけ？大丈夫なんだっけ？」という検証をスライドのような考え方でやっているような感じです。
    - 色の場合はすぐに結論を出しましたが、ある程度込み入った（ページレイアウトやUIを設計したり、CIを考えたりするような）ケースだと、最初にテキストで問題点や条件、考えられる解決策などを書き出して整理していくというプロセスは必ず踏んでいます。
    - 直感的に思いついたことを、理屈が通った説明が可能な状態にしておくということが重要だと思っていて、また、すべてのデザインは説明可能であると思っています。
    - 自分の場合、よいアイデアをリニアなプロセスを踏んで考え出すのはなかなか難しくて、色んな可能性をインプットした中から、それらが脳内で結びついてひらめきのように降りてきたり、感覚的に（気持ち良い | 気持ち悪い）みたいな感じで自分の中に表出するので、それはやはり感覚的ではあるというのが正直な実感です。その中から、分解して理屈が通った説明が可能なもののみ採用しているという感じでしょうか。
    - そして、「感覚を磨く」ことによって、理屈が通ったものを直観的に思いつける、ひらめきの精度が上がってくるのではないかなあと思っています。
    - 感覚を磨く…というとセンスの話みたいになってきちゃうのですが、色んな理屈を頭に入れておき、色んな表現を見たり、手を動かして経験することによって、色んなソースが脳内にインプットされるので、知識と経験で、その脳内ソースの幅を広げて、色んなアイデアを思いつける状態にしておくことが、感覚を磨くということなのだろうなあと思っています。（自分もまだまだなので、精進したいです。）
    - 自分以外の誰かを巻き込んで何かをする場合、他人を納得させるような「説明能力」がとても重要になってきますが、一方で、テキストでの説明はわかりやすくするために事象を歪に単純化してしまうという弊害もあると思っています。無理に言語化するとこぼれ落ちてしまう大切な本質が、実物の意匠の中にはあると思います。テキストでの説明ってわかりやすいので色んな人に評価されやすいのですが、あまり説明能力ばかりが偏重されるのもどうなのかなあと感じます。デザイナーの意図など説明しなくても、成果物を見ただけで狙いが伝わって、納得して楽しんで使ってもらえるという事がデザイナーとしては理想だなと、そういうものを作れるようになりたいと思います。
    - というわけで、理論と感覚は両輪であると思っています。（ある意味スポーツや音楽にも通じるものがあるかもしれません。）
- 先日、[テーマカラーを選べる機能](https://docs.esa.io/posts/274)をリリースしましたが、それらの色は消去法で消えてしまう色もあるのではないか？ 
    - メインカラーの場合、ブランドカラーとしての条件を兼ね備えていないといけないのですが、テーマカラーの場合はブランドカラーとしての機能は必要がないので、採用条件が減る感じです。
    - 「競合が少ない色」「カジュアルで明るい色」「先入観の少ない色」は、ブランドカラー寄りの条件なので、テーマカラーを考える場合はそこまで気にする必要がなさそうです。
    - 一方で「目に優しい色」「リンク色にも使える色」は使用感に直結してくる条件なので、マストで考えました。
- 色んなプロダクトを作って数打ってきたからこそesaが成功した？
    - これは、ある意味ではそうかもしれないし、ある意味では違うのではないかという気がしています。
    - 過去に作ってきたものすべて、あまり成功か失敗かという視点で考えていなかったような気がします。また、esaが成功しているのかどうか…というと、今の時点ではとてもうまくいってるとは思いますが、まだまだ課題も抱えています。
    - ビジネスならお金が稼げなければ失敗かもしれませんが、過去のプロダクトたちはいずれも趣味で作っていたので、自分が良いと納得できるものが作れて、それがたとえ少人数にでも喜んで使ってもらえたらそれは自分の中では結構成功で、その意味ではここに挙げているものは全部成功です (笑)。
    - 一方で、[Receibo](http://d.hatena.ne.jp/ken_c_lo/20111218/1324226353)、[Ktra](https://github.com/taea/ktra) なんかは、今では自分もほとんど使っていないし開発も止めてしまったので、その点では今一歩だったなあと思っています（いずれもコンセプト自体は今でもよいと思っているので、また気が向いたら開発再開するかもしれません）。
    - [pplog](https://pplog.net/) はほとんどお金は稼げてないですが、リリースから5年近く経った今でも普通にニッチに使われて続けてるし開発も続けている、なかなかいいサービスだなあと思っております。
    - 趣味プロダクトは、まず自分が満足できたら成功で、さらに人に使ってもらえたり喜んでもらえたりした日には大成功だと思うので、「趣味プロダクトは気楽でいいぞ」という話でした。
    - いずれにしても、人に愛されて使ってもらえるというのは、サービスがスケールするための最初の一歩だと思うので、趣味から小さくはじめるのはとてもいいひとつのやり方なのではないかと思っています。
- 今、esa社は3人でやっているけど、これから強い競合が現れてきたりして将来危機を迎えることになったらどうするのか？そのために、人を増やして組織を強くしたり、新規事業を考えたりはしないのか？
    - esaは今やとてもたくさんの方々や企業に使っていただいており、その責任はとても重く強く感じています。なにより私達がesaをとても愛しています。なので、長く継続させ、よいサービスであり続けられるよう最善を尽くしたいと考えています。
    - 一方で、そのために人を増やして組織を強くするだけが、そのやり方だろうか？とも考えています。個人的に、従来型の組織があまり得意ではなくてこのようなスタンスを取っているというのもあり、組織化には慎重な姿勢を取っています。
    - 仲間はほしいなあと思うことは正直あります。特にフロントエンド回りとかネイティブアプリ系はノウハウが足りない部分があり、そういうところにフィットする人がいればいいなあと思うことはあるのですが、まだ誰かが増えた時の明確なイメージが湧いておらず、あまりイメージが湧かないことはやりたくないなあというのが正直なところです。今はまだその時期ではないかもしれません。
    - 新規事業に関してはよく考えています。また新しい技術や可能性を試すために時間を取るようなこともたびたびしています。
    - 一方、esa自体もまだ足りていない部分があるので、最近は足場を固めるような地道な作業をしっかりやっていくような感じのことに注力しています。
    - 未来のことはわからないですが、何かあった時にできるだけ対策をとりやすいような体勢をとりつつ、何より技術を磨くということを怠らないようにしていきたいです。
- [@esa_io](https://twitter.com/esa_io) の中の人は誰なんですか？
    - よく私だと誤解されてるんですが、殆どの半角ｶﾅのTweetは [@fukayatsu](https://twitter.com/fukayatsu) さんによるものです。

## オススメ本

デザインの基本的な考え方を身につけるためには、どんな本が役に立つのか？という質問もいただきました。
実は私自身は、あまりデザインを読書を通して勉強してこなかったタイプな気がするのですが（すみません…恥）、最近読んだ中で役に立ちそうだなあと思ったものを紹介します（アフィリンクです）。
<br>
<div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;margin:0px 12px 1px 0px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4862670903/millionstreet-22/ref=nosim/" name="amazletlink" target="_blank"><img src="https://images-fe.ssl-images-amazon.com/images/I/41LuasXm0HL._SL160_.jpg" alt="デザイン仕事に必ず役立つ 図解力アップドリル" style="border: none;" /></a></div><div class="amazlet-info" style="line-height:120%; margin-bottom: 10px"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4862670903/millionstreet-22/ref=nosim/" name="amazletlink" target="_blank">デザイン仕事に必ず役立つ 図解力アップドリル</a><div class="amazlet-powered-date" style="font-size:80%;margin-top:5px;line-height:120%">posted with <a href="http://www.amazlet.com/" title="amazlet" target="_blank">amazlet</a> at 18.07.01</div></div><div class="amazlet-detail">原田 泰 <br />ワークスコーポレーション (2010-09-02)<br />売り上げランキング: 23,201<br /></div><div class="amazlet-sub-info" style="float: left;"><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4862670903/millionstreet-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jpで詳細を見る</a></div></div></div><div class="amazlet-footer" style="clear: left"></div></div>

よい本でした。デザインにおける色んな表現方法のバリエーションやそれぞれの考え方を丁寧に掘り下げて解説しています。意図や考え方を的確にデザインに反映させるために、役立つ知識になると思います。
帯やタイトルにはデザイナー向けと書いてあり、確かにデザイナーにも役に立つ内容だと思うのですが、ノンデザイナーやエンジニアにとっても、デザインとはどういうものなのか？を理解するためのよい内容になっていると思いました。
<br>
<div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;margin:0px 12px 1px 0px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4022511745/millionstreet-22/ref=nosim/" name="amazletlink" target="_blank"><img src="https://images-fe.ssl-images-amazon.com/images/I/41vSKtwnH0L._SL160_.jpg" alt="センスは知識からはじまる" style="border: none;" /></a></div><div class="amazlet-info" style="line-height:120%; margin-bottom: 10px"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4022511745/millionstreet-22/ref=nosim/" name="amazletlink" target="_blank">センスは知識からはじまる</a><div class="amazlet-powered-date" style="font-size:80%;margin-top:5px;line-height:120%">posted with <a href="http://www.amazlet.com/" title="amazlet" target="_blank">amazlet</a> at 18.07.01</div></div><div class="amazlet-detail">水野 学 <br />朝日新聞出版 (2014-04-18)<br />売り上げランキング: 2,712<br /></div><div class="amazlet-sub-info" style="float: left;"><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4022511745/millionstreet-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jpで詳細を見る</a></div></div></div><div class="amazlet-footer" style="clear: left"></div></div>

くまモンのデザインなどで知られる著名なデザイナーさんが書いた本です。
デザインの現場でよく言われる「センス」という言葉の正体について、またそれを身につける方法について、わかりやすく平易な言葉で実践的に書かれています。
センスとは数値化できないものごとを最適化する能力であり、それは決して生まれ持ったものではなく、多様な知識を吸収し、客観的なものの見方ができるようになることで身についてくるそうです。よい本でした。

<br>

<div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;margin:0px 12px 1px 0px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4532321271/millionstreet-22/ref=nosim/" name="amazletlink" target="_blank"><img src="https://images-fe.ssl-images-amazon.com/images/I/51oPeW2d-fL._SL160_.jpg" alt="ネーミング全史 商品名が主役に躍り出た" style="border: none;" /></a></div><div class="amazlet-info" style="line-height:120%; margin-bottom: 10px"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4532321271/millionstreet-22/ref=nosim/" name="amazletlink" target="_blank">ネーミング全史 商品名が主役に躍り出た</a><div class="amazlet-powered-date" style="font-size:80%;margin-top:5px;line-height:120%">posted with <a href="http://www.amazlet.com/" title="amazlet" target="_blank">amazlet</a> at 18.07.01</div></div><div class="amazlet-detail">岩永 嘉弘 <br />日本経済新聞出版社 <br />売り上げランキング: 307,947<br /></div><div class="amazlet-sub-info" style="float: left;"><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4532321271/millionstreet-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jpで詳細を見る</a></div></div></div><div class="amazlet-footer" style="clear: left"></div></div>

esaはネーミングは単純に決まってしまったので、あまり掘り下げていませんが、ネーミング重要です。
「イオカード」「からまん棒」など数々のネーミングを手がけた著者が、過去の数々の商品ネーミングについて、アプローチを分類し解説した本です。ネーミングの中にコピーや宣伝要素を含めたり、日本語をもじるのが流行ったり、時代背景に合わせてネーミングのアプローチも変わってきているんだなあと、面白い本でした。
巻末で解説されているネーミングの実践法は本気で役に立つと思ったので、次何か名前をつけることがあったら参考にしようと思いました。
（ただ、「全史」というタイトルから期待するようなクロニクルっぽい感じではないですね。コラム集みたいな感じ。「◯◯全史」とネーミングすると売れるみたいな戦略があったのかな。）
<br>

<div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;margin:0px 12px 1px 0px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4568103428/millionstreet-22/ref=nosim/" name="amazletlink" target="_blank"><img src="https://images-fe.ssl-images-amazon.com/images/I/5127BY9PAAL._SL160_.jpg" alt="岡本一宣の東京デザイン" style="border: none;" /></a></div><div class="amazlet-info" style="line-height:120%; margin-bottom: 10px"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4568103428/millionstreet-22/ref=nosim/" name="amazletlink" target="_blank">岡本一宣の東京デザイン</a><div class="amazlet-powered-date" style="font-size:80%;margin-top:5px;line-height:120%">posted with <a href="http://www.amazlet.com/" title="amazlet" target="_blank">amazlet</a> at 18.07.01</div></div><div class="amazlet-detail">岡本 一宣 <br />美術出版社 <br />売り上げランキング: 274,215<br /></div><div class="amazlet-sub-info" style="float: left;"><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4568103428/millionstreet-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jpで詳細を見る</a></div></div></div><div class="amazlet-footer" style="clear: left"></div></div>

スライドのジャンプ率のところで少し例に取り上げさせてもらったのですが、エディトリアルデザイナーの岡本一宣さんの作品集です。写真と日本語テキストだけで、こんなに美しく心を踊るものを作ることができてしまうのかと感動します。
これに限らず、デザイン集をパラパラめくってヒントにするというのはとても良くて、最近はネットで色々イメージ検索できてしまうのですが、そうすると自分の視野が自分の検索条件に縛られてしまってセレンディピティがなかなか得られないということもあり、最近は紙のデザイン本をよく見るようにしてたりします。
本屋さんのデザイン書コーナーとかで色々見てみるのも良いです。

## ハッカーズチャンプルーはいいぞ

最後になりましたが、今回参加させてもらった「[ハッカーズチャンプルー](http://hackers-champloo.org/2018/program.html)」というイベントは、本当に楽しいイベントでした。
esa社は、4年前の2015年開催のハッカーズチャンプルーに登壇させていただいて以来、すっかりハッカーズチャンプルーが好きになってしまい、連続4年スポンサーをさせてもらっています。
今回も、「ハッカーズ」と銘打っているにもかかわらず、デザインの話をさせていただき、さらに、ClojureやGoやPerl、UnityやVTuberの話まで、全国から色んなゲストを呼んで、LTもバラエティに富んだ楽しい話ばかりで、なんでもありのまさにチャンプルーで楽しいイベントになりました。

どのトークも素晴らしかったのですが、個人的には [@motemen](https://twitter.com/motemen) さんの 『[ソフトウェア開発と私 / Software Development and I - Speaker Deck](https://speakerdeck.com/motemen/software-development-and-i)』がめちゃくちゃ良かったです。「できることとやりたいことは両輪」至言ですね。おこがましいですがesaの開発スタンスとも重なる部分を感じ、聴いてて泣きそうになりました。生で聴けてよかった。。

また、驚くのが参加している学生さん率の高さです。東京のイベントではなかなか見ない割合で学生さんがたくさんいらっしゃいました。学生さんの懇親会割引とかもやっていたり、また、地元の大学の教授もいらしてたのですが、教授自ら学生さんたちにカンファレンスへの参加を推奨されているようです。すごい。
久しぶりに若い方々とお話できてよかった。みなさんすごく優秀で、色んなことをやられていて、私この人達の倍くらい生きてるのに何やってたのか…と思いました。

そして、沖縄の風土と人々の暖かさ。多様性を受け入れるふところの広さとおおらかさが最高でした。みんないきいきと楽しんでいて、本当にいいイベントでした。

また、数年前に参加させてもらった時からますますパワーアップしており、スポンサー企業も増え、スタッフさんも増えて（これまた学生さんが多く活躍されてました）、いい感じにスケールしているのを感じました。
特に今回のMVPとも言える、[学生フリーランス](https://speakerdeck.com/aokabin/huriransufalseliang-sae-sa)の [@d_ishitaka](https://twitter.com/d_ishitaka)さんの活躍と指笛がすごかった。ありがとうございました。

本当楽しかったです。来年も行くぞ！
スタッフのみなさん、お会いできたみなさん、主催の[@k_nishijima](https://twitter.com/k_nishijima)さん、本当にありがとうございました！おつかれさまでした(\\( ⁰⊖⁰)/) 

## みなさんのハカチャン感想

（すでにこんなにたくさん感想エントリが出てるというのも…すごいっす！！(´；ω；｀) ）

- [ハッカーズチャンプルー2018まとめ - Togetter](https://togetter.com/li/1242446)
- [ハッカーズチャンプルー2018を運営した話 - Entertainer Engineering](http://aokabin.hateblo.jp/entry/2018/07/01/021344)
- [ハッカーズチャンプルー 2018 感想 - ほとラボ](https://blog.hotolab.net/entry/hcmpl2018)
- [ハッカーズチャンプルー2018 参戦!!!!!! - ayataka's 備忘録](http://ayataka00.hatenablog.jp/entry/2018/07/02/015653)
- [ハッカーズチャンプルー2018 行ってきたよ。作ってきたよ。 - clonekoの日記](http://cloneko.hatenablog.jp/entry/2018/07/02/004610)
- [ハッカーズチャンプルー2018で運営やってきました（イベント自体初参加） - あごが伸びる物語](http://tell-u-immature.hatenablog.com/entry/2018/07/02/002037)
- [ハッカーズチャンプルー2018 感想 - shimabukuromegの日記](http://shimabukuromeg.hatenadiary.jp/entry/2018/07/01/233629)
- [はかちゃんに参加してきた！ - Ryu君の備忘録的な](https://ryu1kun.hatenablog.com/entry/2018/07/01/223435)
- [Hackers-Champloo 2018 で(スタッフ|LT)してきました - Acme::AnaTofuZ->new;](https://anatofuz.hatenablog.com/entry/2018/07/01/181320)
- [Hackers-Champloo 2018 が最高でした - アルパカ三銃士](https://codehex.hateblo.jp/entry/2018/07/01/174842)
- [来兎 公式ブログ - ハッカーズチャンプルー2018 - Powered by LINE](https://lineblog.me/raito/archives/1062440157.html)
- [ハッカーズチャンプルー2018 参戦!!!!!! - ayataka's 備忘録](http://ayataka00.hatenablog.jp/entry/2018/07/02/015653)
- [ハッカーズチャンプルーに参加して Goとコンテナで作るWebアプリケーションベンチマーカー という話をしてきた #hcmpl - 酒日記 はてな支店](https://sfujiwara.hatenablog.com/entry/2018/07/02/125531)
- [ハッカーズチャンプルー2018に参加してきました - nakamar1’s diary](https://nakamaritc.hatenablog.com/entry/2018/07/02/142125)
- [ハッカーズチャンプルー 2018 行ってきたー（まだいるー） - なにかあったら書くところ](http://vkgtaro.hatenablog.com/entry/hackers_camploo2018)
- [ハッカーズチャンプルーに参加した – 沖縄在住プログラマのメモ](https://ktaskn.blog/2018/07/02/%e3%83%8f%e3%83%83%e3%82%ab%e3%83%bc%e3%82%ba%e3%83%81%e3%83%a3%e3%83%b3%e3%83%97%e3%83%ab%e3%83%bc%e3%81%ab%e5%8f%82%e5%8a%a0%e3%81%97%e3%81%9f/)
- [ハッカーズチャンプルー2018でClojureの話をしてきました - ayato-p](https://scrapbox.io/ayato-p/%E3%83%8F%E3%83%83%E3%82%AB%E3%83%BC%E3%82%BA%E3%83%81%E3%83%A3%E3%83%B3%E3%83%97%E3%83%AB%E3%83%BC2018%E3%81%A7Clojure%E3%81%AE%E8%A9%B1%E3%82%92%E3%81%97%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F)
- [ハッカーズチャンプルー2018という最高のカンファレンスの運営として参加しました！ - ゆーじのろぐ](http://arakaji.hatenablog.com/entry/2018/07/03/092107)
- [ハッカーズチャンプルー2018で、『ソフトウェア開発と私』という発表をしました #hcmpl - 詩と創作・思索のひろば](https://motemen.hatenablog.com/entry/2018/07/hackers-champloo)

## 追記: スポンサーセッション & アカデミックプラン、OSS・技術コミュニティ無償提供について

スポンサーセッションの中で触れた、学生さん向けのアカデミックプラン、OSSコミュニティプランについてはこちらになります（書き忘れてしまいました…追記します）

- スポンサーセッションのスライド: [イベント/2018/06/30/ハッカーズチャンプルー2018/esaの話 - esa-pages.io](https://esa-pages.io/p/sharing/3/posts/1871/8fa1854cea956bf5a8e4-slides.html#/)
- [#129:  help/アカデミックプラン（学割: 教育機関・学生・教職員向けの無償プラン）](/posts/129) 
- [#239:  help/OSS・Web技術関連コミュニティ向け無償提供（ツールスポンサー）](/posts/239)