見出し画像

ピクシブサマーインターン2020に参加した話

Nanami Mizuno

8/5〜7の3日間ピクシブ株式会社の技術職向け夏インターンシップ「PIXIV SUMMER BOOT CAMP 2020」の、（CSS芸の高みを目指す）CSSアニメーションコースに参加してきました！

何をしたのか、何を得たのか、備忘録として拙い文章力でゆる〜く書き綴ってゆきます。

なんで参加しようと思ったの？

私がこのインターンを知ったきっかけは、CSSアニメーションコースのメンターであるyui540さんのツイッターの投稿でした。

yui540さんの存在を知ったのは2年ほど前、ポートフォリオサイトをみて、”CSSでこんなことまでできるのか！！”とCSSの可能性に衝撃を受けたことは今でも鮮明に覚えています。

ずっと一ファンとして憧れていた身としては直接CSS芸を伝授してただける機会を逃すわけには行かない...!ということで当たって砕けよう！精神で応募しました。

選考の流れ

初めてのWeb面接（それどころかちゃんとした面接も初めてでした）人と話すのが得意な方ではない私はガクガクブルブルで挨拶すらまともに出来ていなかった気がします。（本当に失礼しました。）コーディングテストがあったのですがそれもボロボロ、、

自分の無能さゆえの恥ずかしさと反省とでほぼ記憶もなく終わりました。この面接をさせてもらっただけでもいい経験になったとほぼほぼ諦めモードだったわけですが、数日後インターンに参加頂きたいとのメールが届いた時の衝撃と嬉しさといったら、、。

こうしてコロナの状況などいろいろあり、リモートで3日間と言う短い期間となってしまいましたが、無事参加できることになったのでした。

何したの？

さて、少し前置きが長くなりましたがここからが一番伝えたい箇所です。
日にちごとに書いてゆきます。

DAY1

10時30分、Google Meetにアクセスし、インターンの流れの説明を受けた後、会社全体の会議に出席せていただきました。社内の数字がバンバン出てくる感じの会議。こんな会議をインターン生に聞かせてしまっていいのかというほどオープン、、笑

とても新鮮で貴重な体験ができました。


午後はメンターさんからの今回のインターンの概要などの説明を受け、下のような簡単なCSSコーデンングを行いました。簡単といってもメンターさん曰くこれがCSSアニメーションの”全て”ここに全てが詰まっているそうです。やっぱり基礎は大事です。

15時ごろにFANBOXチームで桃会(桃を食べる会)があり、そこでFANBOXチームの方々と少しお話しました。（桃美味しそうでした！桃を転送する技術があれば...！笑）

1日目の残りの時間は、上のスライドアニメーションベースにオリジナルのアニメーション（下 gif）を作成し、フィードバックをいただきました。
（仮に本当に404ページにこの表示するとしたら404と言う文字列が出るまでに時間がかかり過ぎてしまっていますね。。。反省）

自分のコーディングのフィードバックを頂くことで、ブラウザによってバグが出やすい記述や、他の人に引き継いだり、将来修正加えるときにスムーズな方法など、自分で調べて解決していてはたどり着けないであろう知識を沢山得ることができました。

早速自分のコーディングの汚さや遅さを突きつけられる１日目でした。


DAY2

10時から、CSSの強みや、CSSアニメーションの2つのプロパティ、transitionとanimationにはどのような違いがあるのか、それぞれの注意点や特性などを講義形式で説明していただいた後、それを踏まえてオリジナルのボタンアニメーションと、レスポンシブ を意識したオープニングアニメーションを作り、それぞれフィードバックをいただきました。

CSS プロパティについてはなんとなくわかっているつもりでしたが、実際言語化するとなるとうまく説明できず、自分の理解が足りていなかった部分が明確に炙り出され、とても勉強になりました。要点を少し共有しておきます。

世の中の流れ
・技術者目線 -- WebGL,Canvas,SVG　など
・デザイナー目線 -- AE + Lottieなど
CSSの持ち味
・メインスレッドではなくコンポジタスレッドで実行される
・Webであれば、どのプロジェクトにも適用できる（新規でライブラリなどを入れる必要がない）
・レスポンシブ 有利
・単位が多い（px , vw , vh , % , fr）
・シンプルだけど強力なアニメーションのためのプロパティ
↓
結論
・Webサイトに、ある程度の表現力のアニメーションをつけたいときはCSSアニメーションを使った方が都合がいい！

そして、Day2のお昼はGoogleMeetをつないで、FANBOXチームの社員方とお昼を食べました。それぞれの言語遍歴などいろいろなお話が聞けて楽しい時間でした！（私自身はエンジニアと言うよりデザイナーよりの人間なので、実際に働くエンジニアさんたちのお話を聞くことができとても貴重な時間でした）

こんな感じでDay2もあっというまに19時になってしまいました。2日目の成果物はこちらです。(gifが不具合であげられずリンクになってしまいました泣)


DAY3

最終日と言うことで今回のインターンをテーマにオリジナルのアニメーションを作ると言う課題でした。定期的にメンターさんに進捗報告をして進めていきました。できたものがこちらです。

（圧倒的に時間が足りなかった...💦）まだまだ作り込みたかったですが、ブラッシュアップしたものはまた後日どこかにあげようかなと思っています。

また、Day1,Day2とやることが盛り沢山で時間がなく出来ていなかった社内見学を最後の時間にさせていただきました。人事の方にPCを持って歩いていただき画面越しに社内を見学させていただくことが出来ました。

こんな感じになっています↑
（オフィスに行けなかったので写真を共有していただけました。感謝）
チームラボがデザインしたオフィスで、ただ可愛いだけではなく効率を考えられたつくりになっていて、遊び心満載で楽しい雰囲気が面越しでもとても感じました。こんな場所で働けたら生産性上がりそう…！状況が落ち着いたらいつかオフィスに伺いたいなと思ってます。


インターンを終えて**

Web 業界の人ならかけるのが当たり前で、簡単な技術だと思われがちなCSSですが、その技術をちゃんと意図を持って”ちゃんと”書けて、他の人が中々真似できないレベルまで極めることは本当にすごいことだなと実感する3日間でした。CSSアニメーション意外にも沢山の学びがあり、私も自分の得意技と呼べるものを見つけて極めていきたいと強く思いました。
CSSに関しても「書ける」のではなく「ちゃんと書ける」ようになるまでやり込んで、CSSヤクザの子分のレベルと呼べるくらいのすごい作品が作れるように精進していきたいと思います🔥

そして、CSSを極めて仕事レベルで活かしているメンターさんの元で学べて、直接フィードバックを頂ける機会をくださったピクシブ株式会社の皆様にこの場を借りて感謝を申し上げます。


また今回のインターンの一部内容などはyui540さんがもっと分かりやすくまとめてくださっていますので詳しく知りたいかたは是非こちらをご覧ください！