皆さんこんにちは。

本日も、私たちから「日々の学びをちょっと面白くするヒント」として、Udemyの講座を制作されている講師の方々の想いや、講座制作の裏側に迫る「コンテンツ制作日誌」をお届けいたします。

第19回のコンテンツ制作日誌は、国内だけでなく海外のプロジェクトでもソフトウェア開発の分野で幅広く活躍されている沢田 俊介さんにお話を伺いました！現在公開されている講座、『初心者から始めるアプリデザイン＜UI/UXデザインをFigmaで学ぼう！＞Webデザインにも応用可能』の概要や習得できるスキル、デザイナーとして活躍するコツを教えてもらいます！

単純作業はFigmaで効率化して、考える時間を大切にしてほしい

ーーまずは今回ご紹介いただく講座の概要と、講座を通して身につけられるスキルを教えてください。

基本的なFigmaのスキルはもちろんですが、デザインを効率的に組み立てる方法を学べます。Figmaというアプリケーションの操作方法を身につけることで、単調な作業を自動化することができ、クリエイティブな時間を最大化することができるんです。

また、Figmaの強力なプロトタイプ機能を使って、本物のアプリと見間違うくらいリアルなプロトタイプを講座を通して作っていきます。クライアントと共通認識を作り上げるためのプロトタイプですが、近年ますます重要度が高まっていますので、ぜひマスターしていただきたいです。

それに加えて「一貫性のあるデザイン」についても解説しています。たとえば、アプリのデザインに無計画な配色を施してしまうと、エンジニアが実装するときに大変になってしまったり、全体的な世界観が崩れたりしてしまいます。そのようなデザイナーが知っておくべきポイントについても解説していますので、アプリやウェブのデザインに興味のある初心者の方にぜひ受講していただきたいです。

ーーどんな受講生に向けて作られた講座ですか？

初めてUIUXデザインにチャレンジする方にとっては役立つ内容だと思います。何もわからずに進めても最終的なアウトプットが完成するので、モチベーションも維持しやすいのではないでしょうか。

Figmaの機能について詳しく説明しており、SketchやAdobe XDから乗り換えたいデザイナーの方、デザインに興味があるエンジニアの方にもおすすめです。デザインにはどのような作業があるのかを知りたいマネージャー層の方も受講していただけると良いかもしれません。

ーーデザイナー、そしてエンジニアやマネージャーの方も対象とのことですが、この講座の特徴は何でしょうか？

ビジュアルデザインの質を上げるというよりかは、どちらかというと作業効率を高めたり、より本物らしいプロトタイプを作ることに注力しています。もちろん効率が上がって単純作業の時間が圧縮されると、その分デザインを考えたりブラッシュアップする時間が増えるので、結果的には成果物のクオリティ向上につながると思います。

ーーFigmaを使うと作業効率化につながるんですね！効率化へのこだわり、もう少し詳しく教えていただけますか？

デザインの業務は「企画、制作、テスト、フィードバック」の繰り返しです。この繰り返しのことを「イテレーション」と呼んだりしますが、イテレーションが速ければ速いほど正解に辿り着く可能性が高まります。そしてイテレーションを速めるには、できるだけ余分な作業を自動化すると同時に、変更に強い柔軟な構成にしておく必要があるんです。デザインは個人の「作品」ではありませんから、出来上がったものを壊す勇気も大切です。

また、理由はさまざまですがデザインには「常に」変更が加わります。簡単な変更でも画面数が多ければ作業量は膨大になり、一つひとつ修正していたら1日が終わってしまいますよね。最初にきちんとした設計にしておけば、このような単純作業に追われることもありません。デザイナー自身のモチベーション維持にも作業効率化は大切なんです。

ーークライアントや社内の他部門と共通認識を得るには、プロトタイプが必須だと思われますか？

はい。ソフトウェア開発の知見がある方は、画面デザインだけでおおよそ全体像を想像できますが、それを関係者全員に期待することはできません。特に日本企業の場合、決済権を持つステークホルダーが現場から遠い存在なことも多く、実装後に「やっぱり違う」とならないためにも、完成形のイメージを共有しておくことが最重要です。
Figmaを使わなくてもプロトタイプは作れますが、現時点で最も効率的に高品質なプロトタイプを作れるツールはFigmaである、と私は考えています。

ーーありがとうございます！Figmaで作るプロトタイプのメリットをしっかり理解できました！ちなみに、沢田さんの他の講座はどんな受講生向けですか？

受講する方のモチベーションがどこにあるかですが、デザインも含めコードも触ってみたい方ならオールインワン講座から始めるのが良いと思います。

エンジニア寄りのことを学びたい方には、アプリ開発の講座がおすすめです。

プロジェクト全体を俯瞰する知識を身につけたいならプロダクトマネージャーの講座が向いていると思います。スタートアップで10人くらいの規模でのプロダクト制作される方には特におすすめですね。

デザイナーとして働くなら、周りとの連携も大切なポイントの一つ

ーー沢田さんがUdemyの講座を作る上で意識されているポイントはありますか？

一つひとつの作業を解説するときは、理由をちゃんと説明することです。今この作業をすることで、最終的にどのように役立つのかを説明するように心掛けています。
また、学習のモチベーションを保つために、アウトプットをできるだけ早い段階で作れる構成を意識しています。

デザイナーであれば、自分自身だけではなく、周りのエンジニアやマネージャーのことも意識しながらデザインしてほしいということも講座で伝えたいです。

ーーUdemyで講座を制作しようと思ったきっかけを教えていただけますか？

最初に公開した講座で取り扱っている React Nativeというフレームワークが非常に優れていて個人的にも好きだったんです。自分で使ってみたときにすごく可能性があるなと感じ、世に広めたいと思ったことがきっかけでしたね。そして実は私も、UdemyでReact Nativeの英語版の講座を受講していました。それが初めてのUdemy体験です。

YouTubeにもスポットで学べるコンテンツはありますが、Udemyで見つけた講座は体系立てて説明されていることに魅力を感じました。一気通貫して最初から最後まで教えてくれる講座である点に惹かれ、同じような講座を自分で作ってみました。

Figmaも同じで、Figma自体が非常に優れていて、エンジニア、デザイナー、マネージャーがコラボレーションできる機能に感銘を受けました。これを使って日本の生産性が上がってほしいと思いながら講座を作っています。

UIデザインを学ぶコツは、デザイン以外の領域についても興味を持つこと

ーーUIUXデザインを学ぶコツを教えてください。

UIデザインは、美しさと同じくらい機能性が重要なので、ユーザーが何をすればいいのか直感的にわかるデザインを作るべきです。悩ませたり、考えさせたりといった負荷を与えないような「思いやり」が大切ですね。

そして、UIデザインはコードと切り離せない関係にあるので、フロントエンドの技術に挑戦しても良いのではないでしょうか。ボタン1つがどのように表示されるのか、その仕組みを理解しておくと結果的にデザインにも活かされるはずです。

さらにバックエンドまで意識できると、全体を俯瞰して見ることができます。たとえば、インスタグラムの投稿を例に挙げると、投稿はユーザーに紐づいていて、投稿の配下に“いいね”やコメントがぶらさがっている。こういったデータの「モデル」が頭に入っていると、自然とUIは制限されてくるんです。「各投稿の枠の中にコメントが配置されていないとおかしいよね」というように。

ボタンやテキストなどの各パーツは、それぞれ単独で存在するわけではありません。ほかの要素や機能との関係性を考える必要があります。アプリに登場する主要なデータを把握しておくことで、そのような結びつきが明確になり、より良い体験のためのUIデザインが可能になるのではないでしょうか。

ーーデザインを学んでいて、挫折しやすいポイントってどんなところでしょうか。

デザインを作っても反応がないとモチベーションの低下につながります。それを乗り越えるために、コードを学んでアプリやウェブサイトを公開できたら最高ですね。それができなくてもポートフォリオサイトなどに登録して、作ったものを誰かに見てもらうことが大切です。ブログやツイッターでも良いです。まずは世に出してみないことには、フィードバックももらえないので！

ーー改めて、UIデザインを学ぶメリットを教えていただきたいです。

使う人のことを考える習慣が身につくことではないでしょうか。細部の美しさはもちろん大切なのですが、それだけではソフトウェアプロダクトは成立しません。ユーザーが目的を達成するまでの一連の流れを考えられるようになる利点があると思います。

そういった経験は、プロダクトマネージャーとしてのキャリアにもつながっています。デザイナー出身のプロダクトマネージャーはまだまだ少数派ですが（エンジニア出身が大半）、ユーザー体験を第一に考えるデザイナーだからこその視点があると思います。

ーープロダクトマネージャーではなくても、デザイナーとして実装について深い理解があると、エンジニアとの連携もスムーズになるのでしょうか？

なります！そんなデザイナーがひとりでも増えてくれたら嬉しいです。デザイナーとエンジニア同士が直接コミュニケーションできるのが理想的で、そうなればプロジェクトも上手く進むはずです。開発の全体像や実装について理解しているデザイナーは、間違いなく引く手あまたな人材です。

ものづくりが好きだった幼少時代。今も変わらずにプロダクトを作り続ける

ーー沢田さんの人生にとって学びとはなんですか？

学びは遊びですね。勉強だと思ったことはなく、趣味みたいな感じです。最近は物理的なDIYとかが好きで、休日はそれに費やしています。水道工事も勉強して自分で（笑）。

とにかく一貫して小さい頃から作ることが好きでした！それがソフトウェアでも物理的な何かでも。ただし「向いてないな」と思ったら、すぐにやめてしまう性格です。基本的に興味を持ったことはなんでも手を出してしまうので、それがコンプレックスでもありましたね。デザイナーだったらデザインを極める道にも憧れたりするものです。今は幅の広さが求められている傾向もあり、コンプレックスではなくなりました。

ーー学ぶことが好きなのは学生時代からでしたか？それとも、社会人になってから学びへの考え方が変わったのですか？

学生時代の勉強は勉強としか思えなかったですね（笑）。社会人になってからは勉強の科目は誰にも決められないじゃないですか。だから自分の興味のあるものばかり学んでいけばいいので、楽しめているんだと思います。

ーー受講生の方へメッセージをお願いします！

プロダクトやサービスを世に出す楽しさは格別です。単純作業を軽減する方法はこの講座で学んで、「つくる」世界にチャレンジしてみてほしいです！

ーー最後に、沢田さんが出版された書籍についても教えていただけますか？

Figmaの初級者〜中級者に向けた本です。辞書的に使える前編とデザインやプロトタイプを作る後編に分かれており、デザイナーの効率性だけでなく、実装のしやすさも意識した制作方法を解説しました。プロジェクトの生産性を上げるスキルが盛りだくさんなので、ぜひ参考にしてみてください！

執筆担当のひとこと

沢田さんのお話を伺えば伺うほど、Figmaに魅力しか感じませんでした！デザインって、それぞれの主観によって好みや良し悪しが変わってきてしまう気がします。だからこそ、共通認識を持って同じ視点でブラッシュアップしていくことが大切なんですね。Figmaは本番環境でなくてもそれを実現でき、操作もわかりやすいということのなので、デザイナーの方々にとってはこれから必須ツールになるのではないでしょうか。

また、デザイナーでも開発について理解しておくことで、エンジニアとのコミュニケーションが円滑になるというのも納得です。キャリア的にも幅が広がり、メリットしかなさそうですね！

こういったお話を、デザインについて詳しくない私がたくさん質問させていただきましたが、優しく答えてくださった沢田さんでした。