高専カンファレンスlolでほげほげしてきました #kosenconf 【発表編】

シリーズはこちら

yamasy1549.hateblo.jp

息をするように高専カンファ高専カンファと宣伝してきた 「高専カンファレンス lol」 が4/30にありました。高専カンファレンス lolの説明はサイトをご覧ください。

kosenconf.me

この記事には、カンファの発表者として言いたかったことや感じたことのほげを書いていきます。運営をして思ったことは【運営編】に書こうと思っています。

「lolカンファを支える技術」

裏話

f:id:yamasy1549:20160504180318p:plain

上のタイトルでLTをさせてもらいました。選考では運営が多少不利になる仕組みがあった（たぶん運営も発表もしたら忙しいから）んですが、私も含めて5人ぐらい選考に通っていました。お前らどんだけ筋肉ムキムキなの。

実はこの発表もともとは一般発表として出す予定で、当選直後も一般発表だと信じてたんですが、なんと 間違えてLT発表のほうに出していたみたいです 。10分でしゃべることを5分にまとめるとかまず無理だったんです。ごめんなさい。でもlolでしょ。

自己紹介

f:id:yamasy1549:20160504180432p:plain

普通にスーツを着て就活はしたくない - Google 検索

スーツに恨みとかはありません。よろしくお願いします。

電気情報系の学科に通っていて、アルバイトもコードを書くところを選ぶのでエンジニア寄りかもしれません。また、色・構成・動きやCSSが好きなのでデザイナー寄りかもしれません。自己紹介では「デザイナー寄りのエンジニアっぽいもの」という言葉を使っています。どちらでもないしどちらでもある中途半端な存在だといいなーと思っています。

f:id:yamasy1549:20160504180732p:plain

エンジニアリングとデザイン、最低限のことはどちらもできるので、lolカンファでも両方を担当していました。そんな中途半端な目線からやってきたことや考えたことを紹介します。

前半戦

デザイナーとしてjoinしました

去年の11月頃だったか、100カンファのイケメンデザイナーでなりさん（ @denari01 ）に「高専カンファレンスのデザイナーやってみない？？」とお誘いを受けて参加することになりました。そのときもらった情報がこんな感じです。

高専カンファレンスっていうイベントがある
みんなでほげほげする
101回目
lol (lots of laugh) っていうテーマ
全国から高専生やOBOGが来るねん
こんど関西でやるねん
オタクのオフ会

でもわたし高専カンファレンス行ったことないし…そんなこと言われても…わかんないわかんないわかんないよ！！！わかんないよーーーっあっあっあーーー！！

f:id:yamasy1549:20160501222336p:plain

あまりの情報の少なさにびっくりして怒りながらも、ロゴやポスターを作ったり、デザイナーらしいことをしました。このへんのくるしい話は、もし書いてもいいのなら【運営編】で書こうかな。

ロゴをつくりました

よくあるプロジェクトのように、まずは高専カンファレンスを視覚的に代表する「ロゴ」を作りました。

f:id:yamasy1549:20160504182734p:plain

個人的に、ロゴはざっくり「① 識別できるか」「② 展開できるか」で評価できると思っています。（もちろんカッコいいかとかも判断基準に成り得るけど、個人差が大きいのであんまり有力な理由ではないかも）

それぞれについて気をつけたこと、気づいてくれたらうれしいなってことを箇条書きでまとめておきます。

① 識別できるか

ざっくりいうと「印象に残るか」「次見たときに思い出せるか」、ちょっと進んで「ロゴを見て何かわかるか」のこと。

「101」「lol」で掛けてるんだから、どっちにも読めるようにしたい
- そのためにエルは直線がいい。下のほうがくにゅって曲がってるとイチっぽくない
- どちらも直線と円の組み合わせなので、全体的に記号っぽいロゴにしたい
記号感を出すためにテクノ的なフォントを使いたい
- 有料フォントだと他の人が使いにくい
- フリーの「スマートフォントUI」を使用
- そのままだとゆるい感じだったので、幅を80%ぐらい狭めてシュッとさせる
高専カンファレンスをこれと表すモチーフがない
- Androidのイベントならドロイドくんをモチーフとして入れられるけど、高専カンファレンスにはそれがない
- 歴代の高専カンファレンスのロゴ（オレンジのやつ）はあるけど、過去のイベントと区別しにくい
- そのまま「高専カンファレンス」の文字を入れるほうがわかりやすいし、ロゴと結びつけて覚えてくれると思った
一度ロゴを見た人には、次にロゴの一部だけ見たとき「高専カンファレンスだ！」と思ってもらえるように、そんなモチーフを入れたい
- 白基調に黒文字
  - サイト（ http://kosenconf.me ）が一番わかりやすい例
- ぽわぽわ
  - バリエーションを増やすため（Tシャツ・チョコ・貼紙の一部はlolの文字がなかったはずです）
  - 案内貼紙には重なった半透明の◯だけ載せてメタファー（「重なった◯といえば高専カンファレンス lol」）に

② 展開できるか

オリンピックの佐野さんのロゴはこの点ですごいよなぁと思うのですが、要するに「バリエーションに未来はあるか」「どこにあってもそれと分かるか」ですね。自分的にはここを一番気をつけました。

ロゴはスライド・名札・運営パーカー・ステッカー・その他配布物…いろんなところで使われる
企画ごとに色が決まっているので、スライドや案内貼紙に応用できる
- オレンジがプレゼン発表、緑がブース発表、ピンクが懇親会でした。名札の色もそうしてたから、気づいてもらえたかな…？
- お手伝いしてくれたあみたんもそれをわかってデザインしてくれたから成功したと思ってる
「lol」の文字なし、ぽわぽわだけで構成してみる
- 色や形だけでなく、動きでlolと感じさせる
- サイト（ http://kosenconf.me ）のあちこちに散りばめたマウスhover時のぽわぽわアクション

最後のは平面デザインだけじゃなくて、webならではの展開方法って感じする。楽しかった。

余談だけどオリンピックとかでっかいやつのロゴデザインは立体展開もありだと思っていて、個人的に楽しみです。

後半戦

前半戦もまだ書き足りないし議論の余地はあるけど気になったらTwitter（ @yamasy1549 ）とかにリプください。いっぱいお話聞きたいです。

webサイトをつくりました

See:

kosenconf.me

github.com

技術的なこと

技術関係で書いておくことは「Jade(Pug)」「gulp」「CSS animation」「Mixin based (S)CSS」ぐらいでしょうか。

Jade(Pug)

qiita.com

HTMLを書くためのテンプレートエンジン、という説明になるのでしょうか。タグを省略して書いたり、専用の構文を使ってちょっとプログラマブルに書いたりできる、生HTMLをゴリゴリするのと比べると断然効率良くHTMLを書けるやつです。最近Pugって名前に変わったみたいです。名前かわいい。

gulp

liginc.co.jp

こちらはJade(Pug)やSCSSのコンパイルを自動化したり、ファイルに変更があれば自動的にブラウザをリロードさせる機能を組み込んだりできるタスクランナー（タスク自動化ツール）です。いちいちコマンド叩いたりするの面倒くさいしコード書いてるときに余計な割込み入るの嫌ですよね。怠惰最高。

CSS animation

blog.codecamp.jp

あんまり参考にしたサイトとかないので、こんなこともできるよっていうまとめ記事を貼っておきます。私はJSが苦手なので装飾にはできるだけJSを使いたくないと思っていて（そもそもwebサイトの装飾はなるべくCSSが担うべきでもある）、うまいことCSSだけでanimationを完結させられないかなーと頑張ってほげほげしてました。トリガーとしてどうしてもJSを挟まないといけないところもありますが、ぽわぽわやマウスhover時のanimationなど大体はCSSで完結しています。気になった方は、汚いし特殊なディレクトリ構造だけどソースコード読んでください。

Mixin based (S)CSS

SCSS には mixin っていう便利な機能（関数みたいによく使うプロパティを集めて、いろんなところでincludeして使える）があって、それを中心にスタイルを当てています。例えばボタンなら button って名前のmixinを作って、 .button(class) や button(selector) にのみinclude…適用することで、変更範囲・汚染範囲をなるべく狭めています。…むずかしいのでLTで話してないです。

CSSの設計やディレクトリ構造は「Atomic Design」を参考にしています。 mixin based な書きかたと相性が良いと思っています。今年のはじめに Atomic Design に触れてみたスライドも公開したのでざっくりと知りたい方はこちらもどうぞ。