高専カンファレンスlolでほげほげしてきました #kosenconf 【発表編】
シリーズはこちら
息をするように高専カンファ高専カンファと宣伝してきた 「高専カンファレンスlol」 が4/30にありました。高専カンファレンスlolの説明はサイトをご覧ください。
この記事には、カンファの発表者として言いたかったことや感じたことのほげを書いていきます。運営をして思ったことは【運営編】に書こうと思っています。
「lolカンファを支える技術」
裏話
上のタイトルでLTをさせてもらいました。選考では運営が多少不利になる仕組みがあった(たぶん運営も発表もしたら忙しいから)んですが、私も含めて5人ぐらい選考に通っていました。お前らどんだけ筋肉ムキムキなの。
実はこの発表もともとは一般発表として出す予定で、当選直後も一般発表だと信じてたんですが、なんと 間違えてLT発表のほうに出していたみたいです 。10分でしゃべることを5分にまとめるとかまず無理だったんです。ごめんなさい。でもlolでしょ。
自己紹介
スーツに恨みとかはありません。よろしくお願いします。
電気情報系の学科に通っていて、アルバイトもコードを書くところを選ぶのでエンジニア寄りかもしれません。また、色・構成・動きやCSSが好きなのでデザイナー寄りかもしれません。自己紹介では「デザイナー寄りのエンジニアっぽいもの」という言葉を使っています。どちらでもないしどちらでもある中途半端な存在だといいなーと思っています。
エンジニアリングとデザイン、最低限のことはどちらもできるので、lolカンファでも両方を担当していました。そんな中途半端な目線からやってきたことや考えたことを紹介します。
前半戦
デザイナーとしてjoinしました
去年の11月頃だったか、100カンファのイケメンデザイナーでなりさん( @denari01 )に「高専カンファレンスのデザイナーやってみない??」とお誘いを受けて参加することになりました。そのときもらった情報がこんな感じです。
- 高専カンファレンスっていうイベントがある
- みんなでほげほげする
- 101回目
- lol (lots of laugh) っていうテーマ
- 全国から高専生やOBOGが来るねん
- こんど関西でやるねん
- オタクのオフ会
でもわたし高専カンファレンス行ったことないし…そんなこと言われても…わかんないわかんないわかんないよ!!!わかんないよーーーっあっあっあーーー!!
あまりの情報の少なさにびっくりして怒りながらも、ロゴやポスターを作ったり、デザイナーらしいことをしました。このへんのくるしい話は、もし書いてもいいのなら【運営編】で書こうかな。
ロゴをつくりました
よくあるプロジェクトのように、まずは高専カンファレンスを視覚的に代表する「ロゴ」を作りました。
個人的に、ロゴはざっくり「① 識別できるか」「② 展開できるか」で評価できると思っています。(もちろんカッコいいかとかも判断基準に成り得るけど、個人差が大きいのであんまり有力な理由ではないかも)
それぞれについて気をつけたこと、気づいてくれたらうれしいなってことを箇条書きでまとめておきます。
① 識別できるか
ざっくりいうと「印象に残るか」「次見たときに思い出せるか」、ちょっと進んで「ロゴを見て何かわかるか」のこと。
- 「101」「lol」で掛けてるんだから、どっちにも読めるようにしたい
- そのためにエルは直線がいい。下のほうがくにゅって曲がってるとイチっぽくない
- どちらも直線と円の組み合わせなので、全体的に記号っぽいロゴにしたい
- 記号感を出すためにテクノ的なフォントを使いたい
- 有料フォントだと他の人が使いにくい
- フリーの「スマートフォントUI」を使用
- そのままだとゆるい感じだったので、幅を80%ぐらい狭めてシュッとさせる
- 高専カンファレンスをこれと表すモチーフがない
- 一度ロゴを見た人には、次にロゴの一部だけ見たとき「高専カンファレンスだ!」と思ってもらえるように、そんなモチーフを入れたい
- 白基調に黒文字
- サイト( http://kosenconf.me )が一番わかりやすい例
- ぽわぽわ
- 白基調に黒文字
② 展開できるか
オリンピックの佐野さんのロゴはこの点ですごいよなぁと思うのですが、要するに「バリエーションに未来はあるか」「どこにあってもそれと分かるか」ですね。 自分的にはここを一番気をつけました。
- ロゴはスライド・名札・運営パーカー・ステッカー・その他配布物…いろんなところで使われる
- 企画ごとに色が決まっているので、スライドや案内貼紙に応用できる
- オレンジがプレゼン発表、緑がブース発表、ピンクが懇親会でした。名札の色もそうしてたから、気づいてもらえたかな…?
- お手伝いしてくれたあみたんもそれをわかってデザインしてくれたから成功したと思ってる
- 「lol」の文字なし、ぽわぽわだけで構成してみる
- 色や形だけでなく、動きでlolと感じさせる
- サイト( http://kosenconf.me )のあちこちに散りばめたマウスhover時のぽわぽわアクション
最後のは平面デザインだけじゃなくて、webならではの展開方法って感じする。楽しかった。
余談だけどオリンピックとかでっかいやつのロゴデザインは立体展開もありだと思っていて、個人的に楽しみです。
後半戦
前半戦もまだ書き足りないし議論の余地はあるけど気になったらTwitter( @yamasy1549 )とかにリプください。いっぱいお話聞きたいです。
webサイトをつくりました
See:
技術的なこと
技術関係で書いておくことは「Jade(Pug)」「gulp」「CSS animation」「Mixin based (S)CSS」ぐらいでしょうか。
Jade(Pug)
HTMLを書くためのテンプレートエンジン、という説明になるのでしょうか。タグを省略して書いたり、専用の構文を使ってちょっとプログラマブルに書いたりできる、生HTMLをゴリゴリするのと比べると断然効率良くHTMLを書けるやつです。最近Pugって名前に変わったみたいです。名前かわいい。
gulp
こちらはJade(Pug)やSCSSのコンパイルを自動化したり、ファイルに変更があれば自動的にブラウザをリロードさせる機能を組み込んだりできるタスクランナー(タスク自動化ツール)です。いちいちコマンド叩いたりするの面倒くさいしコード書いてるときに余計な割込み入るの嫌ですよね。怠惰最高。
CSS animation
あんまり参考にしたサイトとかないので、こんなこともできるよっていうまとめ記事を貼っておきます。私は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 に触れてみたスライド も公開したのでざっくりと知りたい方はこちらもどうぞ。
デザイナーさんのお仕事ってなんですか
前半戦と後半戦って分けてるのに、さらにまだ章が続くなんて5分でしゃべり切る気ないのが見え見えなアレ。
見習いデザイナーとして見える範囲では上のようなことをしてきたわけですが、じゃあデザイナーさんのお仕事ってなに?って聞かれても…わかんないわかんないわかんないよ!!!わかんないよーーーっあっあっあーーー!!
パッと思い浮かぶ制作物はこんな感じでしょうか。
でも「あーそっか、デザイナーさんは目に見えるこんなものを作るのがお仕事なのか」って納得されたらちょっと困るのです。それ以前に大事なことがあると思っています。
例えばロゴデザインは他グッズとの間に統一感を与えるため、Tシャツデザインやパンフレット制作は参加者が記念に残しておけるため、さらには会話のきっかけを作るためでもあります。
目に見えるモノを作るだけがデザイナーさんですか?
私の答えはNOです。デザイン業を通して、「会場の雰囲気」「統一感」「ワクワク感」をつくるお手伝いができればいいな、できていたらいいな、と考えています。
この話のオチは、それがデザイナーの私自身にはわからないことです。 ご清聴ありがとうございました。lollol最高。
おまけ
デザイナー制作物を公開しています。100カンファのと比べたらレベルはお察しですがまあ何かの参考になればと思います。
あと、いろいろ作っていく過程でボツになった子たちにも報われてほしいと思うので、その子たちが登場する記事も書きたいです。
追記: 書きました
がんばりましたのでごほうびください http://www.amazon.co.jp/registry/wishlist/3KDNW63RQCCKNwww.amazon.co.jp