AirbnbがReact Sketch.appのβ版を公開。UIデザインの常識が変わるのかも…?

更新日:2017年4月27日

Webデザインといえば、Photoshopで1つの画面をキレイに作り上げるのが常識でした。
しかしスマートフォンアプリのUIデザインにはそのやり方は通用せず、新しいやり方が模索されてきました。
UIデザインのあらゆる課題解決はSketchが牽引し、Adobe XDがそのあとを追っているという状況です。
ですがSketchが解決できていないこともたくさんある。Airbnb社はそれを他とは違ったアプローチで解決しようとしたようです。

Painting with Code

Airbnbのデザインチームは自分たちの理想のデザイン制作フローを実現するために、React Sketch.appというツールを作っていることを発表しました。
Painting with Code Introducing our new open source library React Sketch.app.

このツールはReactのコンポーネントをSketch上にレンダリングするというもの。
これまでの制作工程ではSketchでパーツを描き、それを書き出したりしてエンジニアが画面に再現するという流れでした。
このツールはこれまでの制作工程を真逆の流れにして、コードで画面に再現したものをSketch上に描画するというもののようです。

UIデザインで重要なコンポーネント管理

iPhone・iPad・Android・PCなどなど、UIデザインが対象とするデバイスはそれぞれ画面サイズも違うため、フレキシブルに画面要素が変化するデザインが当たり前のように求められるようになりました。そのため昔のような一枚の絵をキレイに作ることは価値がなくなり、デバイスによって可変するパーツ(コンポーネント)をきちんと作り込むことが重要になってきています。

Airbnb社は全世界に向けてアプリを作っているため、デバイスの画面サイズだけでなく、言語の違いなどにも対応した、世界共通のデザインコンポーネントを作っています。このコンポーネントの管理、そしてエンジニアへの受け渡しを効率化するために、React Sketch.appは作られたようです。

1画面ずつデザインする時代じゃないのかも?

React Sketch.appはサンプルのファイルをいじることができます。
airbnb/react-sketchapp
うまくいくとSketchアプリ内にこんな感じで描画が行われます。

今までは1画面ずつ丁寧にUIを考えて画面の設計を行うのが普通だったかもしれませんが、もうこれからは違うのかもしれません。
コンポーネント管理を意識したデザインをきちんとして、エンジニアと一心同体でデザインをする、まさにテクニカルクリエイターに求められるようなスキルが、どの現場でも当たり前になっていきそうです。

React Sketch.appはどのような形で正式に提供されるかわかりませんが、目が離せないツールになりそうです。
Reactのこともちゃんと理解しておかないと…やばいな…。

書き手:小島 芳樹
Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。
Twitter: @yoshikikoji

この記事が気に入ったらいいね・フォローお願いします!

『デザインツール』の記事