# プログラマーの感覚とデザイン。 _published: 2011/09/20_  プログラミングとデザインにおける論理と感覚って、同じようなものなんじゃないかな。とようやく実感してきた。だからこそ、僕たちがプログラミングに触れてきたようにデザインに触れてきたデザイナーさんの力を借りたいよね。あと、コミュニケーション大事。そんな話。 祝日の朝にカフェでダラダラ書いたので、グダグダで読み返すと何言ってるかわからない。でも、休みの日にカフェでプニプニと文章書いてると、気分転換になってよかった。食事をとらずに食費を浮かせてカフェラテを注文したかいがあった。 ![[5933575792_126d6ca525_c.jpg|500]] ## デザインが見えない。 今年の1月ごろからずっと「デザイン」「デザイン」と言ってるけど、まったく何もやってない。とっかかりがわからなくて、手が出せない感じ。デザインという言葉自体、幅が広くて、デザインの対象がコミュニケーションだったりユーザーインターフェイスだったりする。そこも絞れていない感じ。絞れていないというか、共通する基礎の部分があると思んだけど、それが見えてない。 そういうわけで、この文章中ででてくる「デザイン」という単語はその時々で違うものをイメージしてたりする。もう、JavaとJavaScriptって違うの？というレベル。LISPってアイドルユニットだよね！というレベル。何もわかってないので、とにかくフワフワしてるものを扱ってる感覚でいる。 ## プログラマーの「感覚」。 ちょっとここで、プログラマーの「感覚」について。プログラミングというと論理的なんて言われるんだけど、僕は特にダメなプログラマーなので、論理的に考えることができない。感覚だけでコードを書いてる。で、プログラムであったりプログラミング言語に対して「冷たい」とか「やわらかい」とか表現すると、技術系じゃない人に驚かれたりする。 ちゃんと論理的にやってるプログラマーであっても、こういう感覚というのは絶対持ってると思う。他人のコードを読んでて、読むほどに体調が悪くなる気持ち悪いコード。さわやかで癒されるコード。え？まさか！？すげー！というアクション映画の様なコード。僕は自分のコードが不快で、破れ窓理論そのものなんだけど、最初の1箇所を妥協してそのまま酷いことになることが多い。そうすると、見ただけで体調が悪くなるコードができあがる。 ## デザインは感覚？ このプログラマーの感覚って、プログラミング初心者がいきなり抱くものではないと思う。変数とか関数とか、分岐とか繰り返しとか、もっといけばアルゴリズムとかパターンとか、基本要素を組み合わせて考えるのが最初なんだろう。そこから感覚的なところまでのギャップがあって、それが初級者と中級者の差なんじゃないだろうか。 一方でデザインは「センス」と思われがちだけど、実はプログラミングとまったく同じなんだという気がする。デザインわかってないので、推測でしかないけど。4つの基本原則とか、最初はそいういう基本要素を組み合わせてやって、そのうち感覚的なところに行き着く。もちろん、感覚的に見えても裏側は理詰めになってるのもプログラミングと同じ。 - [[デザインの勉強をしたいドシロウトの参考書＆リンク集。]]  ## なんで、そうするのか。 最近は本屋に行っても技術書コーナーには立ち寄らず、デザイン関係本を見て回ってる。天神のジュンク堂は、Webとかデジタルのデザインとそうでないデザインは違うフロアにコーナーが設けてある。なので、その差が目に付きやすい。デジタルなデザインの本は、サンプル集であったりテクニック集であったり、表面的なものが多いように見える。なんでそうするのか、なんでそれを使うのか、説明した本が見つからない。デジタルじゃない方（なんて呼ぶんだろう？）は、もっと本質に迫った本が並んでいるように見える。 プログラミングにおけるデザインパターンは、実装方法だけを暗記しても意味がない。デザパタには、実際のプログラミングで発生する問題に対して、何が問題なのか、それをどう解決するのかということがまとめられている。そこの背景を理解せずに実装方法だけを知っても効果はない。デザインも同じじゃないだろうか。グランジ風のフォントを使ったタイポグラフィーのテクニックとかを身につけても、それをどこでどう使うか理解してないと意味がないと思う。 ## プログラムもデザインも目的なしにつくれない。 TwitterとかFacebookとかの自分のアイコンを作ってみた。写真をここまで加工するのは初めてだし、写真にテキストを配置したのも初めて。そうすると、何をどうすればいいのか、まったくわからない。構図とか色とかフォントとか。でも、後で気づいたんだけど、何も目的がないから何も決まらないんじゃないかなと。例えば、赤にするのか青にするのかって、どっちがいいかって話じゃなくて、先に「何を伝えたいのか」というメッセージありきなんだろうなと。 ![[6161885189_ee54cb5779_c.jpg|500]] なんとなくアイコン変えようと考えてて、青山裕企さんの写真を見て、とりあえずジャンプしようと。ジャンプするのも行為を真似ただけで、本質的に何かあるわけじゃない。アイコンも、とくにどう見せたいというのもない。そんな状態なので、デザインできないのも当然な話だ。といっても、目的があったとして、それに応じた表現を調べる能力はないけれど。 ## 背景を伝える。 コードを書くとき。パフォーマンスの良いコードが必ずしもいいわけじゃない。読みやすいコードが必ずしもいいわけじゃない。そのプログラムの目的があって、その目的に応じたトレードオフが必要になる。逆に言えば、目的がなければどういうコードを書けばいいのかわからない。結局、自分が気持ちいいコードを書いて、それはプロダクトを生み出してるんじゃなくて、一種の自己満足アートだ。 デザイナーさんにデザインを依頼するとき、このサイトっぽいイメージで、このアプリっぽいデザインでと依頼しがちだ。けど、デザイナーさんに伝えなければいけないのは、自分のサイトやアプリの目的だったりコンセプトだったり、ユーザーに感じて欲しかったりすること。そこを共有してないと、うまくいかないんじゃないかと思う。 ## これからのプログラマーとデザイナー。 最近はスマートフォンのアプリ開発が多くて、画面サイズや人の指なんかの制約の中での、それでいて非常にリッチなユーザーインターフェイスが求められている。それより制約は少ないけど、HTML5の流れもそんな感じだろうと思う。 そうすると、動くデザインが必要になるんだけど、この辺はデザイナーも模索中なんだと感じている。動きが見えてるデザイナーさんに会える機会は少ない。まあ、こうなると従来のデザイナーではなくて、新しい肩書きになるのかもしれないけど。 で、動きの部分を把握してるのはプログラマーなので、それをデザイナーに伝えるのはプログラマーの役割なんだと思う。とにかくコミュニケーションをとらないと。そして、コミュニケーションにはコストがかかるんだけど、経営者はそこを計算にいれとかないと厳しいんじゃないかな。 ## 共通言語。 開発の仕事を受けるときに、相手が技術についてまったくわからないとき、むしろまったく興味がないとき、開発者が積極的にコミュニケーションをとらないとうまくいかない。逆に、技術に関して浅くても知識がある人だと話がはやい。そこに共通言語があるから。 プログラマーがデザイナーにデザインを依頼するときも、そこに共通言語があるとないでは大違いだと思う。僕がデザインの基礎に興味があるのは、自分でデザインしたいからではなくて、デザイナーさんとの共通言語が欲しいというところが大きい。 デザインを依頼するコストだけを考えて、自分でデザインをできるようになろうと考えてるプログラマーは多いと思う。自分でデザインできたら楽しいだろうと妄想するんだけど、Webサービスをつくるために仕方なくやるのは話が違う。しかも、白基調のシンプルなデザインを好むプログラマーが多い気がするんだけど、あれはめちゃくちゃ難しい気がする。コストをかけてもデザイナーさんと力を合わせた方がいいものができるんじゃないだろうか。 チームとして協力するならまだいいんだけど、デザインを発注とかいうときにどうすればいいのか、それが目下の課題。 ## デザインの重要度。 長くなったので最後にするけど、とにかくデザインは重要。クライアントとかボスとかにプロトタイプを見せる段階でも、でっち上げでも何でもデザインを当てておきたい。まったく、違うものになるから。 App Storeに並んでるアプリを見てみると、デフォルトのUI部品がどんどん使われなくなってきてるのを感じる。本質的にそれがいいか悪いかは別にして、ユーザーのデザインに対する要求は高くなってると思う。Webサービスと違って、iPhoneアプリは「所有する」「身に付ける」ものなんじゃないだろうか。iPhoneアプリは関しては、僕は、デザインが8割と考えてる。 デザインというものがまったくわかってないので、だいぶゴチャゴチャになってるけど、コミュニケーションのデザインだったり、ライフスタイルのデザインだったり、デザインなしではサービスもアプリも成立しない。たぶん。たぶん。そこも、デザインって一括りにしていいのかすらわかってないけど。 そう考えると、自分でぜんぶやるよりも、その道の人といっしょにやっていきたい。お互いにコミュニケーションをとるための共通言語はこれから学んでいくとして。いいものをつくりたいとか、世界を変えたいとかいう、共通意識はすでにあるはずだから。まとまった？ ## そんな感じ。 個人的には、ありがたいことに、身近にすごいデザイナーさんたちがいるので、お話しを聞きに行こうと考えてる。途中からタイトルと関係ない話になったけど、スシが食べたい。 初心者でもわかりやすく読める記事。 - [デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則](http://webdesignrecipes.com/4-factor-of-designing/)[](http://b.hatena.ne.jp/entry/http://webdesignrecipes.com/4-factor-of-designing/) - [デザインの基礎力をワンランクアップしたい私（Webデザイナー）の注意書き](http://webdesignrecipes.com/web-design-beginner-learning-dtp-design/)[](http://b.hatena.ne.jp/entry/http://webdesignrecipes.com/web-design-beginner-learning-dtp-design/) - [年末年始にWebデザインを学び直すための3つのステップ | Stocker.jp / diary](http://stocker.jp/diary/web_design_3step/)[](http://b.hatena.ne.jp/entry/http://stocker.jp/diary/web_design_3step/) - [配色パターンからWebデザインを考える | Webクリエイターボックス](http://www.webcreatorbox.com/tech/web-design-color-scheme/)[](http://b.hatena.ne.jp/entry/http://www.webcreatorbox.com/tech/web-design-color-scheme/) - [webデザイナーの色彩スキルを磨くエントリーまとめ*ホームページを作る人のネタ帳](http://e0166.blog89.fc2.com/blog-entry-807.html)[](http://b.hatena.ne.jp/entry/http://e0166.blog89.fc2.com/blog-entry-807.html) - [Webデザイナーな私の勉強方法まとめ](http://blog.v-colors.com/my-web-study.html)[](http://b.hatena.ne.jp/entry/http://blog.v-colors.com/my-web-study.html)