もっとUIの話をしよう

steelydylansteelydylan

ここ最近のフロントエンドについて思うこと

最近、SPAがどうとかReactがどうとかよりもむしろ、UI/UXをJavaScriptを使って向上させることに興味がある。ここ数年フロントエンドエンジニアの関心があまりにも技術的な方向に向かいすぎているような気がしてならない。Webpackの設定がどうとか、Reduxの非同期用のMiddlewareはredux-sagaがいいとかそんな話ばかりだ!自分はJavaScriptとCSS3を上手に使ったかっこいいUIが好きだし、そういったUIへの議論がもっとエンジニアの間で活発にされたらいいのになと思っている。だが、決して僕がReactやVueなどの技術を毛嫌いしているわけではない。実際、案件でReactをつかったこともある。個人プロジェクトでReactを使ってAtomic Labというスタイルガイドジェネレーターを作ったこともあるくらいだ。
ただ、「この動きが気持ちいい」とか、「ページ遷移はこんな感じでしてほしい」とかそういったことをブログで書いている人をあまりみる機会がなくなったので、まずは自分からそういった記事を書いていこうと思う。

僕が尊敬するエンジニア

今回は自分が尊敬するエンジニアの一人を紹介したい。この人のことを知って自分はもう一度、物理を勉強したいと思えた。UIを考えられるフロントエンドエンジニアになりたいと思った。


David DeSandro

Designer/developer at Metafizzy. Brooklyn, NY.


この方は自身をデザイナーと名乗っている。JavaScriptをバリバリかける人があえてデザイナーと名乗るところがかっこいい。作品として、一番有名なのがMasonryだが、その他にも画像が全部読み終えた後にcallbackを呼ぶためのimagesLoadedや、コンテンツを無限にスクロールさせるためのInfinite ScrollFlickityというスマートフォンでも操作できるスライダーなんかも作っていたりする。クロスブラウザ対応がしっかりされているし、npmへの公開やスタンドアロンでの提供もしているからすばらしい。Bowerのロゴを手がけたのもこの人らしい。


Bower logo

Gist

Bower logo



Metafizzy

Metafizzy makes delightful web UI like Isotope, Flickity, and Packery.




Dribbble

あと、最近Dribbbleをみることにした。今までデザイナーが見るものだと思ってみなかったが、エンジニアがみても色々と参考になる。実際にDribbbleに上がっているようなUIの動きをJavaScriptで模写するのは相当難易度が高い。


Talkup - Winner transition

Dribbble

Hello! It is also with great pleasure that I finish a new project with the AgenceMe team. A very exciting project, we look forward to showing you the online version! Talk-up i...



Thunder Interaction Concepts

Dribbble

Some fun interaction concepts using our ?? UI Kit - Our Marketplace | IG | FB | TW


まとめ

すべてのエンジニアがdesandroさんを目指すべきとは思わないが、少なくとも僕の目指すべきエンジニアはこの人だなと最近気づいた。この人に負けないようなかっこいいUIを追求できるエンジニアになりたい。そのためには、いろんなUIやWebサイトをみて審美眼を養う必要がある。CSSやJavaScriptの技術もまだまだ全然足りない。

堀 悟大

エンジニア