爆速でアウトプットを鍛えるハッカソンのすゝめ

2019.11.17 デザイナーゆるふわもくもく会 大作業祭のLT資料です。

詳細: https://bosyu.me/b/dz2b_d5_7OM

Transcript

1. by Brian November, 17th 2019 ハ ッ カ ソ ン の す ゝ め 爆 速 で ア ウ ト プ ッ ト を 鍛 え る
2. skinnybrian.com 2 ブ ラ イ ア ン( 2 7 ) 本 名 : 堀 口 慎 之 介 　 出 身 ： 山 口 県 下 関 市 趣 味 : 洗 濯 、 音 楽 、 フ ル マ ラ ソ ン 、 筋 ト レ n ot e .m u / s ki n n y b r i a n @ s ki n n y b r i a n _ t w
3. skinnybrian.com 3 イン ハ ウ ス デ ザ イ ナ ー ③ 年 目 工 業 大 卒 か ら の 福 岡 工 業 大 学 短 期 大 学 部 九 州 工 業 大 学 情 報 工 学 部 編 入 留 年 H a m e e 株 式 会 社 入 社 デ ザ イ ン 部 配 属 → グ ラ フ ィ ッ ク ( W E B , D T P ) 、 動 画 制 作 → U I / U X デ ザ イ ン 、 　 フ ロ ン ト エ ン ド ( H T M L / C S S / J S / R e a c t ) 、 　 バ ッ ク エ ン ド ( P H P ) 開 発 部 へ 異 動 ( サ ー ビ ス 改 善 チ ー ム 配 属 ） 2 017 2 018 2 015 2 014 2 012
4. skinnybrian.com 4 と に か く も の づ く り が 好 き な の で 肩 書 き は そ れ が ブ ラ イ ア ン と い う 人 間 で す → 「 も の づ く り す る 人 」
5. skinnybrian.com 5 さ て 本 題 で す
6. skinnybrian.com 6 っ て 知 っ て る ？ Hackathon
7. skinnybrian.com 7 = H ac k + M a r a t ho n Hackathon
8. skinnybrian.com 8 と は … エ ン ジ ニ ア 発 祥 な の も あ り 、 ソ フ ト ウ ェ ア 系 の も の づ く り が 多 い 印 象 制 限 時 間 内 に 何 か も の づ く り す る イ ベ ン ト Hackathon
9. skinnybrian.com 9 国 内 / 海 外 問 わ ず ハ ッ カ ソ ン イ ベ ン ト は 存 在
10. skinnybrian.com 10 1 日 、 2 日 、 数 時 間 、 数 日 … 制 限 時 間 っ て ど の く ら い ？
11. skinnybrian.com 11
12. skinnybrian.com 12 イ ベ ン ト も い い け ど …
13. skinnybrian.com 13 勝 手 に （ 身 内 で い い ） ハ ッ カ ソ ン し ち ゃ う の も た の し い よ ( ´ ▽ ` ) ﾉ
14. skinnybrian.com 14 勝 手 に ハ ッ カ ソ ン す る と い い こ と ① お 手 軽 ア ウ ト プ ッ ト ② す ぐ 反 応 み れ る ③ 楽 し い
15. skinnybrian.com 15 僕 の 個 人 目 標 の た め と い う の も 続 け て い る 理 由 毎 年 1 つ We b サ ー ビ ス を リ リ ー ス す る
16. skinnybrian.com 16 最 近 つ く っ た も の 紹 介
17. skinnybrian.com 17 制 作 期 間 : ２ 日
18. skinnybrian.com 18 2019.01.27 17:00 日 本 中 が 震 撼 し た 、 あ の 日 。
19. skinnybrian.com 19 嵐 、2 0 2 0 年 を 持 って 活 動 休 止 を 発 表 h t t p s : / / w w w . o r i c o n . c o . j p / n e w s / 212 8 3 0 6 / f u l l /
20. skinnybrian.com 20 そ の 1 5 分 後 ( 1 7 : 1 5 頃 ) 鳴 り 響 く 僕 の S l a c k
21. skinnybrian.com 21 そ の 1 5 分 後 ( 1 7 : 1 5 頃 ) そ の 週 中 に リ リ ー ス す る こ と が 決 ま っ た 。 嵐の感謝サイトを 爆速で作る！
22. skinnybrian.com 22 メ ン バ ー が 集 ま っ た そ の 3 0 分 後 ( 1 7 : 1 5 頃 )
23. skinnybrian.com 23 B r i a n （ デ ザ イ ン ） お と も だ ち （フロント / バックエンド） お と も だ ち （ 総 指 揮 ） お と も だ ち
24. skinnybrian.com 24 お と も だ ち （嵐ファン） B r i a n （ デ ザ イ ン ） お と も だ ち （フロント / バックエンド） お と も だ ち （ 総 指 揮 ）
25. skinnybrian.com 25 ま さ か の 嵐 監 修 が 入 る よ う に な っ た 嵐のことなら うちに任せて！
26. skinnybrian.com 26 ① 日 目
27. skinnybrian.com 27 要 件 定 義 F I X • サ ー ビ ス 名 は 「 # 嵐 あ り が と う 」 • あ り が と う コ メ ン ト ( 1 0 0 文 字 く ら い ) • 色 が 選 べ る • 送 信 ボ タ ン • T w i t t e r シ ェ ア • O G P 画 像 で メ ッ セ ー ジ 内 容 表 示
28. skinnybrian.com 28 サ イ ト の ワ イ ヤ ー が 完 成
29. skinnybrian.com 29 正 味 1 0 秒 く ら い
30. skinnybrian.com 30 そ の ま ま デ ザ イ ン 落 と し 込 み
31. skinnybrian.com 31 嵐 フ ァ ン の 監 修 ① 嵐のカラーは 決まってるよ！ 担当カラーには 順番があるよ！ 相葉 : 緑 松本 : 紫 二宮 : 黄 大野 : 青 櫻井 : 赤
32. skinnybrian.com 32 メ イ ン ペ ー ジ だ け ま ず リ リ ー ス
33. skinnybrian.com 33 ② 日 目
34. skinnybrian.com 34 メ ッ セ ー ジ 画 像 デ ザ イ ン
35. skinnybrian.com 35 ピ ク セ ル 指 定 と か
36. skinnybrian.com 36 メ ッ セ ー ジ の 入 力 U I
37. skinnybrian.com 37 嵐 フ ァ ン の 監 修 ② カラーのところ 「担当カラー」で！
38. skinnybrian.com 38 シ ェ ア で き る よ う に な っ た
39. skinnybrian.com 39 そ し て で き た も の が こ ち ら h t t p s : / / a - r a - s h i . f a n / s h a r e
40. skinnybrian.com 40
41. skinnybrian.com 41 現 時 点 で 9 3 9 シ ェ ア バ ス ら せ た か っ た か ら M ス テ の 嵐 出 演 タ イ ミ ン グ 狙 っ た り し て
42. skinnybrian.com 42 n o t e で 発 信
43. skinnybrian.com 43 Q i i t a で 発 信 ( 5 0 0 シ ェ ア き た )
44. skinnybrian.com 44 学 び と 、 今 日 の ま と め • そ の タ イ ミ ン グ で 旬 な も の が 作 り や す い • 仲 間 集 め 実 際 大 変 （ 俺 た ち は 運 が 良 か っ た ） • ク オ リ テ ィ < < < < ス ピ ー ド ！ • リ リ ー ス ま で や っ て み ん な に 知 っ て も ら う • や っ ぱ り 作 る の は 楽 し い
45. skinnybrian.com 45 ぜ ひ チ ー ム 組 ん で 何 か 作 っ て み て く だ さ い ！ そ し て シ ェ ア ！ ハ ッ カ ソ ン た の し い よ ！
46. skinnybrian.com 46 Thanks for your Attention! 1. Fu tu ra P T ( B o o k , B o o k Obliqu e ) f ro m A do be Fo n t s 2 . 筑 紫 B 丸 ゴ シ ッ ク S t d ( L , R , M , D , B , E ) f r o m F o n t w o r k s 3 . 筑 紫 A オ ー ル ド 明 朝 P r 6 ( E ) f r o m F o n t w o r k s 3 . K s o 般 若 ( R e g u l a r ) f r o m F o n t w o r k s 使 用 フォント