第一回 プログラマ向けデザイン勉強会 #design4p で「ズルいデザインテクニック」発表させていただきました。

design Sass 作ったもの

どうも。
書くのが遅くなりすぎてもう半月ほども前のことになってすごく今更感があるのですが、書いておくべきことを書きそびれると、その後出てくる他の書きたい小ネタがどんどん書けなくなっていってドンづまるパターンになるので、やはり書いておきますね。。
先日、第一回 プログラマ向けデザイン勉強会というイベントで下記のスライド発表させていただきました。

少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck

反響の大きさに驚き！ありがとうございました。

実はあんまり発表自体は、盛り上がったという手応えがあまりなくて、一方で他の2人の発表が素晴らしすぎて、割としょんぼりしながら帰ってきたんですが、スライドをアップロードしたらあれよあれよという間に2000ブクマ超え…驚きました。読んで下さった皆様、ありがとうございました。何が原因だったのか考えてみたのですが、デザインTIPSを知りたいというニーズの多さに加え、やはり一番は、「ズルい」というフレーズのキャッチーさだったのではないかとおもいます。

「ズルい」というフレーズはもともと@machidaさんのパクリでした…すみませんでした。

しかし、アレを一番最初に「ズルい線」と呼んだのは、今回の勉強会でも発表した友人のデザイナー@machidaさんでして、私はそれを適当にパクって使わせてもらったらヒットしてしまって、うまい！とか言われてしまって、二重に、メタ構造にズルい感じになってしまい、本当にすみませんでした。
たまにこうやって、人の言った良いフレーズを気に入って真似して言ってるうちに、自分の言ったことみたいに広まってしまって申し訳ありません…みたいなことがあるので、このへんの生き方を今後改めていかないと、ズルさのあまりあの世で重い裁きを受けることになるような気がしています。

ファッション誌のような単純明快なノリでWebデザインのアドバイスができないか？

今回の発表に当たって思いついたのは、ファッション誌のファッションアドバイスのようなことを、Webデザインでもやってみたらどうかというアイデアでした。
アウター30日間着回しテクニック！…みたいなアレです。本来、明確な正解のないファッションの世界で、これはOK! これはNG！と親切に明確な正解と不正解を教えてくれるアレです。
デザインといっても色々意味はありますが、見た目の装飾・意匠という面ではファッションと割と共通点があると思っていて、一定のセオリーを守って、流行を押さえたアイテムづかいを心がけ、その時代にNGとされてることを避けて通ればそこそこまともに見えるんですね。
例えば、上下両方柄物、長袖のポロシャツ、ケミカルウォッシュ…やー、そりゃおしゃれな人はオシャレに着こなすかもしれないけど、普通の人にはまあ難しいからやめといた方がいいよー。っていうのと同じような意味で、大きすぎる角丸や、色の濃いシャドウや、大柄の背景パターンがNGだったりするわけです。たまにカッコよく使いこなしてる人がいるけど、あれは熟練の「センス」の賜物なので素人はやめておいた方が無難なわけです。
ファッションでもデザインでも、「センス」と言われるものの大部分は、少なくとも一定のレベルまでは、既出のセオリーをきちんと踏襲しつつ、多くの参考事例を学習して取り入れた成果で、それは学習と経験で育むことができるものだと思います。
そんなわけで、当初はファッション誌のデザインやコピーを真似た感じのスライドにしようと思ったんですが、作りこみがめんどくさい上にウザくて恥ずかしい感じになり、これ、トークでハズしたらやだなあと思って早々にやめました。ファッション誌みながら研究とかちょっとやったんですが・・・やめて正解でした。

デザインスキルが欲しいのはデザインのプロだけではない

今回は「デザインを覚えたいプログラマ」さんたちに向けて発表したのですが、SassやCompassなどのWebの専門的な内容が中心になっていたにも関わらず、Web制作畑以外の方々からの反響があったのも、嬉しい誤算でした。
良質で便利な制作環境やソフトが安価で手に入り、制作方法自体も簡単になってきている今、例えば営業さんが作る営業資料なども、デザインで差別化する時代に入ってきているようです。
デザインも、プロ級のスキルを得るためには、どうしても多くの経験と時間的投資が必要になりますが、そこまでじゃなくてもいいから、とにかく時間も手間もお金もかけずに、パッと見良さげに見えるデザインTIPSを自分で使いこなしたいというニーズが、業種を問わず顕在化してるのかもしれません。
紙やWebやPCを使って何かを表現し、コミュニケーションを図る手段が安価で万人に開放された今、グラフィックデザインやWebデザインもファッションと同様に、それなりにできないと異性にもモテない！お客様もおもてなしできない！みたいなユニバーサルなスキルになってくるのかもしれない……と、すると、…いやー、ちょっとまて、そうすると…我々プロはどうしたらいいんでしょうね、大丈夫なんですかね、ご飯食べられるんですかね・・・あはー・・・（遠い目

プログラマ向けなのでむしろ、Sassやmixin、Compassの利用をデフォルトで盛り込んだ

プログラマの方にもCSSやSassなどもバリバリ書ける人も多いですが、一方で、CSSを敬遠してる方も結構多いと思います。
私もデザイナーでありながら、CSSはあまり好きになれなくて、その理由はやはり、同じ事を長々と何度も書かなきゃいけないあの冗長な感じと、理不尽なIEハック周り。あれがやはり辛い。ロジカルで刺身たんぽぽ的作業が大嫌いなプログラマ的にはあの作業はなおさら辛いんではないかと想像します。
Sassなら、不毛な繰り返し部分を抽象化してプログラムっぽくできるので、工夫すればするほど楽に楽しく書くことができます（なんか色々やりすぎてよくわからなくなったりもします…）さらに、ブラウザごとにそれぞれ違うベンダープレフィックスや、IEハックなどの、CSSの理不尽に大変な部分は、大体SassのフレームワークであるCompassが吸収してくれるので、そのへんの細かな知識がなくても割と作れちゃったりします。
この際もうCSS本体のことはあんまよく知らなくてもいいんで、SassとCompassで、CSSのおいしい部分だけを使ってデザインをhackするプログラマさんが増えたりすると面白いなあと思います。

反省点

たくさんありますが

  • 発表、トーク下手すぎ。
    • 体感時間よくわからなかったけど、気づいたら45分経ってて、聞いてる人多分すごい疲れてたｗ すみませんでした。
    • スライド書き終わったのが、発表のために家をでる20分前で当然練習してる時間なかった。
    • もっと余裕をもって。何日か前に書き終わって練習するべき。べき！
    • スライドの1Pの文字量が多い。発表に向かない構成。（逆に配布資料としてはよかったのかも）
  • Sass? Compass?
    • いつもRubyistが比較的多い勉強会なのだけども、今回比較的少なめで、SassやCompass知らない人も結構いて、もう少し前提の説明が必要だった。
    • 結果的にSassなどに興味を持ってもらうきっかけにはなったのでよかった。
  • 表層的な話になりすぎたかも
    • あくまで表層的で即物的な話しかしないのがコンセプトだったんですが、プログラマさんはわりと「なぜ、このデザインがイケてるのか？」のWhyをきちんと理解したい人が多いという印象を受けました。
    • ので、もう少しWhyの部分に突っ込んで話があってもよかったなという気がしています。また別の機会にでも、そういうこともやりたいなあと思いました。
    • おばらさんの色の発表も、きちんとWhyの部分に踏み込んでいて面白かったですしねえ。ああいうのいいなあ。
  • スクリーン上で見えづらい要素が多かった。
    • ズルいデザイン、どれも1pxだったり透明度高かったりして割と見づらいもの多いので、当然スクリーンからよく見えないものがあり、たまに画面拡大したりしたものの、テンパッて拡大のやりかたよくわかんなくなっちゃったりして、もう少しレイアウト上で工夫できたよなあと後悔。
  • フォントづかいの話と色の話なども入れたかったんですが、間に合わなかった。

他、発表してみて気づいたこと、面白かったこと、よかったこと

  • ケンシロウと読めてない人が意外と多かった
  • 男性だと思ってた人が何人かいた
  • 台湾のWeb業界の一部の間でもバズってた
    • 調子に乗って英語版を作ってみたんですが、英語がダメなせいか、みんなもう飽きたせいか、大して広まらなくてションボリしました。世界進出は難しかった。
    • 英語版を読んで下さった方が、「ズルい」という表現を使わないほうがいいのでは？みたいな感想を台湾語でおっしゃってて、やっぱり「ズルい」のニュアンスは海の向こうには伝えられなかった。"Sly"よりも"Foxy"の方がニュアンスが近いんですかねえ。
  • 発表2日後くらいにさっそくズルいデザインを使ってWebサービスを作って下さった方がいてうれしかったです。
  • プログラマ、エンジニアの方々のデザインへの関心の強さに改めて驚きました。そしてやはり、勉強熱心な方が本当に多い。頭が下がります。。
  • スライドp49のズルいボタンの @extendについて @terkelさんから下記のようなアドバイスをいただきました。ありがとうございました！


# （追記）記事もかいてくださいました。すごい、これ便利！
CSS ボタンのグラデーションとボーダーをグレースケールの RGBA で – terkel.jp

Rails gemができてた！ズルいSass、Less、Stylusが揃ってた！

本来「ズルい〜」のようなアドバイスは必要ないような、既にデザインも上手なズルいプログラマの @mah_labさんによって、Rails gemが作られておりました！


Railsプログラマはこれを入れればすぐにズルいデザインをはじめられます！ - blog.mah-lab.com
sampleページもかっこよくてズルいです！

そして次の日には@kawasima さんによって、ズルいless for Javaが作られておりました！ズルいれすぅ〜。

さらに、node.js使いの@japboyさんによって、ズルいStylusも作られておりました！Σ(ΦωΦ)

もう、ズルい◯◯は私の存在などとうに超えて、一つのミームになった感があってすごい。そして自分で何もしないうちに人様の手によって色々コードが出来上がってて、またさらにズルい感じになっているのもいいですね。あぁ、ズルいなぁ。すごくズルい。

今回のプログラマ向けデザイン勉強会について

私以外にも2人のデザイナーさん @machida さん @saucerjp さん が発表したのですが、お二人の発表がまた素晴らしく、イベント自体の注目度も非常に高くて、改めて意義深く良いイベントだったと思います。普段、エンジニアに比べてデザイナーはこのような発表をすることが少ないせいもあるかもしれません。
第二回の開催も予定されており（日時は未定）、@9d さん, @monoookiさん、@hmbrw さんというまたステキなデザイナーさんたちが発表して下さるそうなので、すごい楽しみです！

RailsエンジニアのためのTwitter Bootstrapカスタマイズ例 by @machidaさん


RailsエンジニアのためのTwitter Bootstrapカスタマイズ例// Speaker Deck
「ズルい線」の提唱者、私が勝手に師と仰いでいる @machida さんのスライドです。ちょいちょい小ネタ挟んで笑わせてくるところもズルいです。
Twitter Bootstrapという我々デザイナーから仕事を奪う脅威のツール…しかしアレを使って作ったサイトはどれも似たような「Bootstrap臭」がただようサイトになってしまうという罠があり、そこに辛うじて我々は救われているところでありますが、このスライドはそのBootstrap臭を見事に、しかも楽ちんに、しかもなんかプログラマーっぽいやり方でもって、消してしまえる方法を伝授するという、我々デザイナーにとっては悪魔のような神スライドです。中島Bootstrapヤバイｗ中島じゃないけどまあ同じようなことを日頃からやってます…バレた。。
「Railsエンジニアのための」ってタイトルについてますが、RubyやRails以外のエンジニアにもものすごい役立つし、デザイナーにも役立つし、役立つけどこのスライドのせいでデザイナーの仕事は確実に減ると思うんで、やはり神のような悪魔のようなスライドです。Sassのfunctionを使って計算でカラーセットを作ってしまうところが特に個人的に面白かった。あれやってみたい！カッコイイ。
Rails gemもあるでよ。ありがたや・・・
machida/CustomizedTwitterBootstrap · GitHub

ノンデザイナーのための配色理論 by @saucerjp さん

ノンデザイナーのための配色理論
この日一番の感動を生んだのは間違いなくこの発表でしょう。ムーン&スペンサー理論、恥ずかしながら全然知りませんでした。すごく面白かったです。これしゃべってる@saucerjpさんが、完全に大学教授でした。またスライドのデザインがかわいいんだこれ。
で極めつけはこのアプリですね。ナンダコレかっけえええええ！！！！
[ HUE / 360 ] The Color Scheme Application
このカラーパレットから色を適当に選ぶと、調和しない色が消えて行くので、適当にポチポチ押していくだけでオシャレな色の組み合わせが作れる。これ本当に何も考えないでポチポチ押してくだけでかわいい色の組み合わせができちゃうんですよ…すごい！！次から色選ぶときこれ使います！ぜひお試しあれ。理論だけでは結局解決しないんでアプリ作ったとおっしゃってましたが、最初からこれ作りたかったんでしょう？作りたかったんでしょう？ﾌﾌﾌ…(Φω|素晴らしすぎる…


そんな感じで、次回の#design4pも楽しみです。
参加者の皆様、発表者の皆様、主催の@satococoaさん、読んで下さった皆様も、ありがとうございました！