読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

デザイナーだけど、アプリのUI実装してみたら、面白いし流行ると思った話

人生 iOS アプリ デザイナー 開発フロー

僕はデザイナー職ですが、主に、HTMLやCSS、JSを使って、Webのフロントエンド部分を実装する仕事をしてきました。
しかし、今年の4月からは、同じ職場で、iOSアプリのUI部分を実装する仕事を始めました。
新しい言語を学ばなければいけなかったので、それなりに大変だったのですが、将来の展望も含め、いろいろと発見があったので、紹介したいと思います。

アプリの時代になったとき、Web屋はどうなる?

まず、なぜ、Webからアプリのフロントエンドに転身したのかということですが、アプリの時代になったというのが大きいです。つまり、Webの仕事がなくなってきたのです。

全くないわけじゃないですが、あっても、過去のテンプレートを使い回したり、時折発見される表示崩れや誤表記の修正、画像の差し替え、https対応、といった運用業務に限定されるようになってきました。
正直、「これって、デザイナー社員がやる必要なくね?」って思いました。
だって、

  • 特別な技術を必要としていない(アルバイトや業務委託でもできる)
  • 頭をそんな使わない、ルーチンワーク
  • 将来的には、人工知能がやりそう

な気がしたからです。
この仕事を批判するわけじゃないですが、ずっとこれやってると、将来仕事を失うことが目に見えてきました。

アプリにおける、デザイナーの役割

アプリの時代になったとき、コードを書くデザイナーはどうしたら良いでしょうか。
デザインツールを駆使してアプリのモックを作る人になるか、アプリのエンジニアになるか。

答えとしては、その中間、アプリのUIを実装する人になるのが良いのではないかと思います。
そしてこの動きは、すでに始まっています。有名なのは、こちらの資料ですかね。

また、噂によると、ITの聖地、シリコンバレーでは、デザイナーがコードを書くのは当たり前のようですね。(実際に、シリコンバレーで働いてるデザイナーの仕事現場を見てみたい!)

一般的にデザイナーというと、画面デザインや動きを考える人を指し、最近はUIUXデザイナーなんて呼ばれたりしますが、それはそれで、確固たるポジションだと思います。
ウェブもアプリも関係なくスキルを活かせるので、時代の変化に影響されにくい強みがあります。

しかし、そのデザイナーが考えたUIUXをエンジニアが再現する際に、コミュニケーションコストのハードルがあるように思います。
その象徴として、プロトタイピングツールの戦争があるのではないでしょうか。

定番のプロトタイピングツールがない

アプリでは、ウェブ以上に、アニメーションの動きが重視されます。
特に、タップなど、ユーザーが何かしらのアクションをした後のフィードバックの表現がうまいと、ユーザーは心地よさを体験することができます。
Googleのマテリアルデザインや、Twitterのハートボタンなんかが良い例だと思います。

この2つの例が、実際にどんな作業フローで実装されたかはわからないですが、こういったアニメーションの実装は、だいたいはデザイナーがプロトタイピングツールで再現して、それをエンジニアが見てプログラミングする、という流れではないでしょうか。

しかし、このプロトタイピングツール、今まさに戦争状態です。

どんだけあるんだっていうね。。
Pixateに関しては、ついこの前、終了宣言されました。学び損だったとショックを受けたデザイナーもいるのではないでしょうか。
そして時を同じくして、FacebookがOrigami Studioをリリースしてきました。

ウェブのJavaScriptフレームワークも似たような戦争状態ですが、正直、全てのツールを学習してる時間なんてありません。もう、これ以上新しいツール出さないでくれって感じです。
かといって、勝ち残るツールが何かを予想するのも、まだ難しいです。

対して、XcodeAndroid Studioなど、エンジニアが使っているアプリ開発ツールは定番、というか、もうそれしか手法がないようなもんです。
なので、もし、デザイナーがXcodeAndroid Studioを使ってアプリのUIを実装することができれば、長期的に見ても、チーム全体にとっても、かなり効率的です。

デザイナーがUIを実装する方法

では、デザイナーがアプリのUIを実装できるようにするには、何をしたら良いでしょうか。
これには、以下に挙げるコツがあります。(やみくもに、プログラミングをゼロから丁寧に学んでいくと、挫折します)

  1. コーディングの経験があるデザイナーがやる
  2. エンジニアに勉強会を開いてもらう
  3. 学習サイトを有効に使う

1の「コーディングの経験があるデザイナーがやる」に関しては、もし、チームにWebのHTMLやCSS、JSなどのコーディング経験があるデザイナーがいれば、その人にやってもらうのが良いでしょう。
Webコーディングの経験がそこそこあれば、既存のコードを真似て、既存のコーディングルールを守りつつ実装するということができるので、エンジニア側も教えるハードルが格段に下がります。
また、そういった経験がないデザイナーに対しても、先にアプリのUI開発を学んだデザイナーが上手く教えられるので、長期的に見ても、コスパは良いでしょう。

2の「エンジニアに勉強会を開いてもらう」ですが、どのページ・モジュールが、どのファイルで作られているか、を中心に説明すると良いです。
デザイナーは、ページ単位、モジュール単位で構成を考えているので、それに紐づけて、ファイル構成などを教えると理解しやすいです。
また、作業フローについては、エンジニアが普通に使っている専門用語はたいていデザイナーにはわからないので、ライブコーディングをしながら説明すると、感覚的に理解しやすくなります。

3の「学習サイトを有効に使う」ですが、最近は、インターネットで学習できる環境が整ってきたので、独学でも身につけやすくなりました。
おすすめはドットインストールとスクーです。どちらも月額980円の課金が必要ですが、それだけの価値はあります。

僕は、iOSアプリを担当しているので、受講したのもiOSのものですが、Androidでも同タイプの授業があるはずです。
あとは、ネット上にもけっこう知見があるので、グーグル先生に聞くのも良いと思います。

以上に挙げました、デザイナーがアプリのUIを実装するための3つのコツですが、具体的にはまた別途書こうと思います。これだけで、けっこうな量になりそうなので^^;

結果、どうなったのか

デザイナーがアプリのUIを実装するようになって、3つのことが起きました。

  1. エンジニアの開発工数が減った
  2. 溜まっていたUIの修正案件が消化できるようになった
  3. エンジニアとのコミュニケーションコストが減った

今まで、エンジニアがやっていたUIの実装をデザイナーがやるようになったので、単純にその分、エンジニアの開発工数が減ります。
代わりにデザイナーのやることが増えるわけですが、仕事を失いつつあるWebのコーダーにとっては嬉しいことです。
また、デザイナーがやりたかったけど、後回しになって結局やれないままの案件ってけっこうあると思うのですが、そういうのを消化できるようになったので、トレードオフなんじゃないかと思います。
そして、この取り組みの一番大きな効果は、「エンジニアとのコミュニケーションコストの削減」にあると思います。

先に挙げた、プロトタイピングツールの例でもそうですが、デザイナーの考えてることをエンジニアに伝えるのは、特にアニメーションなどの動きの部分では、一筋縄では行きません。
やり方を間違うと、双方イライラすることもあります。
しかし、デザイナーが直接、実際のアプリで動きを作ってしまうことができれば、コミュニケーションコストはゼロになります。

デザイナーもエンジニアも、両方幸せになるのなら、やる価値があるのではないでしょうか。

この先、アプリ対ウェブはどうなる?

こうして、僕自身はウェブからアプリへの転向を果たしたわけですが、巷でよく言われる「アプリ対ウェブ」に決着がついた、というわけではないです。

個人的な見解ですが、おそらく、ウェブが勢いを取り戻す時がやってくると思っています。
それは、「Web Components」の技術が正式勧告された時です。
Webページをコンポーネント単位で作っていく作業はとても効率的だし楽しいです。
そして、アプリですが、衰退はしませんが、おそらく、スマホアプリの市場はもうそんなに大きくならないと予想しています。一昔前の、デスクトップのソフトウェア的な位置付けになり、人材のニーズは一定に留まるように思います。

もしかしたら、この先、ユーザーが常に身につけるような、新しいデバイスが出現するかもしれません。
そこに使われる技術がアプリなのかウェブなのか、あるいは別の言語なのかはわかりません。

ただ、今がアプリの時代なのは、事実です。
仮にウェブが返り咲いたとしても、2,3年はかかるように思います。なので、それまでは、アプリの世界で、新しいこと、楽しいことをやってみてはいかがでしょうか。