きっかけは社員旅行のフォトコンテスト。

先日、鍋谷(@nabe_spicato)が社員旅行のブログ記事を投稿しました。
詳しくは、ぜひ該当ブログを見ていただきたいのですが、簡単に言うとグループ対抗のフォトコンテストが開催されました。

社員旅行のブログはこちら↓

トラブルあり、奇跡あり!スピッカート社員旅行 in 北海道

私は普段から全く写真を撮らない人でした。
しかし、このフォトコンテストをきっかけに、どうすればいい写真を撮れるのかを考えるようになりました。
社員旅行中は、「どうすればバランスの良い構図になるか」「どの角度で撮れば魅力的に映るか」など意識して、被写体にスマホを向けていました。

この時、「CREATIVE CLASS」にて岡部さんがデザイナーさんに美意識で劣らないために写真をはじめたという話を思い出しました。

社員旅行を経て「写真を撮る文化」が芽生えたため、せっかくなら自身の美意識を上げるためにも習慣にしていきたいと考えました。

開発者が「美意識」を持つべき理由

そもそも技術力が大切なのは言うまでもありませんが、これからの AI 時代を考えると「美意識」も同じくらい重要だと思っています。

デザイナーさんが作ったデザインをただコーディングするだけでなく、

「どう動かせば心地いいか」
「どう見せれば意図が伝わるか」

を対等にコミュニケーションできるように、デベロッパーが美意識を持つことで、「こう動かした方がより気持ちいいのでは?」とデザイナーさんと同じ目線の提案ができるようになります。

写真を撮る習慣は、この美意識を育てる良いトレーニングになってくれます。

写真の習慣がアニメーションの表現にもたらす3つメリット

ここからは、写真を撮る習慣が具体的にどのようにアニメーションへ結びつくのか、私の個人的な考えをお話しします。

1. 構図で意識する、画面の「バランス感覚」

カメラを構えたとき、四角いフレームの中に被写体をどう配置するかを直感的に考えます。
この「空間を切り取る作業」は、Webブラウザの画面内で文字やボタンの余白をどう美しく配置するかというバランス感覚に直結します。
写真を通じて美しいバランス感覚が身についてくると、画面全体のレイアウトを美しく魅せる感覚が自然と磨かれていくと考えています。

2. 三次元の視点で考える、立体的な空間把握

写真は、目の前にある3次元のリアルな空間を、2次元に落とし込みます。
そのため、日常的に写真を撮ることで、空間の奥行きや距離感を意識するようになります。
この空間把握能力は、Web上で奥行きを表現するパララックス※1などの実装時に、破綻のない自然な動きを作る力になると考えています。

※1 パララックス:画面をスクロールする際に、背景と手前の要素の移動速度をずらすことで、画面に奥行きを感じさせる手法のことです。

3. 一瞬の切り取りから学ぶ、心地いい「イージング」の緩急

写真は時間を一瞬だけ切り取るものですが、良い写真には「動く直前」や「止まる直前」の予備動作を感じることが出来ます。
風に揺れる植物や、人が走り出す瞬間などを写真から観察することで、アニメーションをつける際にイージング※2を想像する力が向上すると考えています。

※2 イージング:アニメーションの動きの緩急(じわじわ動き出して急に止まるなど、加速・減速の度合い)のことです。

スマホのカメラから始める、デベロッパーの表現力アップデート

社員旅行のフォトコンテストがきっかけでしたが、写真を撮る習慣はデベロッパーとしての表現力を確実にアップデートしてくれると思いました。
デザイナーさんの意図を120%汲み取り、さらにそれを超えるインタラクション※3を提案できるデベロッパーを目指すために、美意識を磨くことは大きな武器になります。

今持っているスマートフォンを使って、日常の「なんかいいな」と感じた景色を切り取ることから、皆さんも始めてみませんか?

※3 インタラクション:ユーザーの操作に対するWebサイトの反応や動きのこと