実例から学ぶ CSSアニメーション
DIST.15 「アニメーションで差を付ける演出とデザイン」 に参加して、LT をする。
なぜ LT をするか
CSS Transition や CSS Animation の使い方がわかっても、実際に活用するイメージが限定的な場面でしか思いつかなかった。
たとえば、CSS アニメーションを使うシーンとしてはリンクやボタンのマウスオーバー、ローディングとかまではイメージつくけど、その先が思いつかない。また、Codepen とかにあるデモは見た目は派手で格好いいけど、活用シーンが限られていたり、まったく現実的じゃないものが多い。
この状態では日々の製作に活かしづらいと思ったので、今回の LT を通して、CSS アニメーションに対する自分の視野を広げてみようと思った。
資料
デモ
デザイナーとして、何者になりたいか #3
前回の続き。
前回は、社会に対して自分が「個々の進化を助ける」ことに貢献したい、という話をした。
今回は、ここからより身近なフィールドに舞台を移し、考えてみる。
同じ職場で働く人、同じ仕事をしてる人にどんな価値を提供したいか
進化というのを、職場でよく聞くキーワードに置き換えたらスキルアップという言葉になると思う。で、このスキルというのは職種によって違うものと、そうでないものがある。例えば以下のように。
職種によるもの:
- デザイン
- プロジェクト進行
- プログラミング
- マーケティング
- ライティング
- サービス設計
一般的なもの:
- コミュニケーション
- タスク管理（時間管理）
- 目標管理
では、どのようにしてこれらのスキルアップを助けることができるか？
「職種によるもの」に対しては、あまりできることはないと思う。専門的な能力になるため、僕が持っている能力を使ってもらうのが難しい。それでも一つ上げるなら、"デザインの考え方を理解してもらうことで、各分野のフィールドで役立ててもらう" というのはあるかもしれない。 たとえば、言葉だけじゃ伝わりにくい企画をペーパープロトタイピングなどのイメージを通して伝えること、など（これは具体的すぎて考え方というより手法だが）。
「一般的なもの」に対しては、そもそも曖昧なものが多い感じがするので、なんでも助けられる気になってる。しかし、大きすぎてどう助けたらいいのかわからない。コミュニケーションとか… これだけでサービスになったりするし（チャットとか）、タスクも同じ。
あかん。考え始めるところ間違ったみたい。
同じ職場で働く人、同じ仕事をしてる人にどんな価値を提供したいか
これ、次の機会にまた最初から考える。
CSS アニメーションを勉強する
まずは。
学ぶ
- CSS Animation for Beginners
- いい感じのボリュームで、デモイメージなんかもありつつシンプルにまとまってる
- CSS アニメーション - CSS | MDN
- いつもの
動きをイメージする
デモを見たり簡単な方法でアニメーションを動かしながら、作りたいものをイメージする。
- Animate.css
- サイトを見るだけでも、アニメーションの名前と動きを覚えるのに役立つ
- CSS3 Keyframes Animation Generator
- ジェネレーターを使って、アニメーションを作りながら動きを確認できる
- Learn CSS Animation
- CSS アニメーションが使われてるサイトを見る（これが良いかどうかは知らん）
リファレンス
デザイナーとして、何者になりたいか #2
前回の続き。
前回は何も考えず思いついたことを書いた。あれじぁ答えにたどり着きそうにないので、ちょっとやり方考えた。
こんな感じで上から考えていって、「4. そのとき自分は」のところで結論だそうと思う。
- 社会にどのように貢献したいか
- 同じ職場で働く人、同じ仕事をしてる人にどんな価値を提供したいか
- 家族、友達にはなにを提供したいか
- そのとき自分は
- 持ってるスキル
- お金
- 心
この 1234 もいくつかの記事に分かれる… 。
社会にどのように貢献したいか
「個々の進化を助ける」
個々の進化を助けた結果、健全な社会ができると思ってる。
ぼくは “進化” を「停滞せずに一歩進もうとすること」と捉えている。成功しようと行動することが大事で、結果的に失敗してもそれは失敗を学んだという意味で進化だ。
また、社会全体でみると、データから紙に戻ろうとすることは進化とはいえないかもしれない。紙は処分しなければいけないゴミをだすこと、これだけ考えても地球やそこに住む人々にとって良いことではないだろう。
しかし、ぼくはこういった人こそ助けたい。人類の未来は（言ってることがデカくなってきたぞ）、"人間" ってひとまとめに言えないくらいオリジナルが増えて、それぞれ個性を活かした生活をして、自分自身でその生活を幸せに感じられる未来になればいいなと思っている。
さっきのゴミの処分の話だけど、たとえ紙を使う人が増えたことでゴミの量が増えたとしても、人の個性を伸ばした未来ではいい感じにゴミをエネルギーに変換できる何かが生まれているかも。それかゴミを安全にきれいさっぱり跡形もなく処分する技術か、地球を捨てて別の星に行く技術か、人間の細胞を変える技術か。
かなり手前勝手な意見だけど、社会の目が自分が本当にやりたいことの邪魔をするなら、社会なんて気にせずにやりたいことをやればいい。
この「なんとかなるさ論」は正しいかわからないけど、正しい可能性はある。であれば、社会全体に合わせてみんな同じ方向を向いた未来よりも、バラバラでもなんかうまくいってる未来のほうがぼくは楽しそうに感じるし、その未来に向けて自分の能力を活かしたい。
また、「助ける」というキーワードをいれたのは自分がデザイナーだからというわけではない。いま一番能力を発揮できるのはモノをデザインすることだろうが、言葉で人を助けてもいいし、（物理的に）手を貸すことで助けてもいい。
最後に、人の進化を助けることの最低条件は、自分自身の進化にもつながるものであること、としたい。
デザイナーとして、何者になりたいか
一年に一回くらいはやってるな、これ。つまりよく自分を見失ってるわけだけど、今年もやる。
考えることが多そうなので、記事はいくつかに分ける。
何を作りたいか
「一目惚れするほど魅力的、使い始めに説明書いらず」、こういったものが作りたい。
たとえばこういうのが作りたい。
- 落ち着いた見た目に惹かれて買った Nexus5X、発売から数年経った今もこれ以上に魅力的な見た目の携帯は見つからない。最初にした設定はいくつか個人情報いれたのと Wi-Fi の設定しただけで、あとは自分のペースに合わせてアプリをいれるだけ
- Paul Smith の赤の長財布。これぞ一目惚れ。赤い革の色合いは自分の年齢の経過とともに落ち着いてきて、ちょうどいい。お札やカード、小銭をどこに入れたらいいかなんて、すぐわかる（財布だから当たり前！）
- 他
- 陶器、PS2、64
たとえばこういうのは作りたくない。
- 雑貨屋さんでアッ！と思うものを見つけて、手にとってみるとたしかにステキなんだけど、何に使えば良いかわからないから棚に戻す
- 機能が豊富で買ったデジタルカメラ、PCと連携して使うつもりだったのに、設定でつまづいて放置
機能をデザインしたいか
ここで言ってるのは、「使いやすい」を実現するために用意する機能、そういうのもデザインしたいかという話。結論としてはデザインしたい。
たとえば機能までデザインされたものとして、iPhone があると思う。あれは機能を先に作って、それに “デザインあてる” やり方では作れないと思う。
すべてのケースで機能までデザインできると思ってないけど、できることなら機能まで口を出していきたい。作った機能をユーザーにどこまで提供するか、そもそもその機能はいるか、など。
ハーフマラソンは新鮮
ハーフマラソンに参加した。
僕が過去に走った最長距離は8キロ、今回のマラソンは約20キロなのでこの記録を大きく更新した。
走ってる間の話はあまりない。しんどかった。
走ったあとの体験がおもしろかった。まず走り終わったあとはへとへと、ゴールしたあとはすぐ地面に寝ころんだ。
20分くらい寝ていると、自分がすごくお腹が空いていることに気づく。給水所に輪切りのバナナとクッキーがあったので、スタッフのおばちゃんにひと声かけてから両手いっぱいにそれらをいただく。これを食べたあとに持参した弁当を食べたがそれでも足りず、コンビニでパンとおにぎりとお菓子を買って食べた。まだお腹は減っていたが、これ以上はなんか体にやばいと思ったのでやめた。
マラソンの会場から離れて銭湯に入る。この銭湯には電気風呂があったので、走って疲れた足の筋肉をほぐすために、電気が流れてる場所に足を入れる。「ブルブルブルッ！」足がおかしくなったかと思うくらい震えたので、すぐやめた。
帰り道、親指にできた血豆が痛くて、靴を履いてられなくなった。靴を脱ぎ、人目を避けながらはだしで帰った。
取り戻したい過去の習慣
電車が止まる。どうやら前の電車との距離が詰まってるらしい。なかなか目的地につかない、暇だ。この暇を活かしてブログを書く。ポエム。
先週、先々週とやっていた流し読みシリーズ記事のおかげで、最近は情報のインプットがはかどってる感じがする。情報を得ているのは主に Nuzzle とはてブ（テクノロジーカテゴリー）で、技術的やデザインの記事をよく読む。あとはクソ長いポエムなんかもなんか気になって読む。時間は朝 30分、他で 10分くらいでやってる。
情報収集を積極的にしたり、他にも実験的な CSS をちょいちょい書いたり、少しづつ “取り戻したい過去の習慣” が戻ってきてる感じがする。
昔より仕事はできるようになったが、その分時間も仕事に使うようになった。それは喜ばしいことだけど、その分仕事以外で知識をためたり、個人的な実験をしたりすることが減った。これは悲しい。
今の良いところ、昔の良いところをうまく生活に取り入れていきたい。
