UI/UXデザイナーのためのAPI基礎講座 実施報告レポート

梅村 圭
2021-02-19

アンカーデザインのデザイナー・梅村です。

2021年2月17日に『【ANKR DESIGN Open Lecture】UI/UXデザイナーのためのAPI基礎講座』を開催しました。多くの方に参加いただいたこのセミナー(ご参加いただいた皆様、ありがとうございました!)。平日夜の開催だったため、参加できなかった方にも届いてほしい……!そのため、ここでので、内容を一部ご共有させていただきます。

開発の経緯

デザイナーがUIを設計→エンジニアが実装 して、初めて操作できるプロダクトになります。エンジニアがどういう作業をして動くものにしているのかの入り口を知るために開催しました。

今回のセミナーでは、API設計の概要を理解して、UI/UXデザイナーがエンジニアとAPIについて講論できるようになることをが目的としています。

デザイナーのみなさん、こんな悩みを持っていたりしませんか?

デザイナーの悩み

・Webやアプリが、どのようにしてサーバーと通信しているのかわからない
・実現したいUIが今あるAPIで実現できるのかわからない
・AP仕様書の読み方がわからない
・API仕様書をもとにデザインしたUIが実現可能か検討できない
・デザインしたUIモックを見ながら、今のAPIで十分なのか、新たなAPIが必要かわからない
・新しいAPIが必要そうだけれど、エンジニアとどうコミュニケーションを取ったら良いかわからない

こういった悩みがアンカーデザイン社内でもあり、社内レクチャーを実施しようとしていました。そんなとき、代表の「どうせなら公開してやっちゃおう」という鶴の一声で、公開セミナーとなりました。


参加方法と実施した参加者の反応

Peatixにて無料イベントとして募集いたしました。
(今後もこういったイベントをPeatixを通して開催していきます。どうぞご登録をお願いいたします。)

イベント応募ページ

参加人数は、のべ285名で、思っていた以上の多くの方がご参加・ご視聴していただけました。


基礎講座の内容

レクチャー(のちほど一部抜粋にて内容をご紹介します)

前半生粋のエンジニアでありデザイナーでもあるANKR DESIGN代表の木浦から、APIについてのレクチャーがありました。ZoomとYouTube LIVE同時に実施し、双方から活発に質問をいただきながら進めました。


miroを利用して、ワークショップを実施

後半は家計簿アプリの設計を想定して10名のワークショップ参加者と一緒にAPIについて考えました。Miroの画面上で皆さんと考えて進めるスタイルが、結構面白かったです。今度もどんどん改善していって、よい学びを持ち帰ってもらえるようにしたいです。


画像2


実施後の参加者の反応

・なんとなく理解していたが、今更ちょっと聞きづらいけど実は「ふわっと」していたものがそれがクリアになった。
・APIの仕様書を初めて見た。Postmanを初めて使用した。いろいろ触ってみると面白い。
・本講座くらいの知識は得ていて間違いない。

など、好意的なご意見をいただくことができました。
当日の様子は、 #ankr_seminar のハッシュタグでTwitterにて多くの方につぶやいていただいています。をぜひご覧ください\(^o^)/

デザイナーは、デザイナーで常に学ばなければならないこともあります。し、優秀なエンジニアの方が周りにいれば、ついつい任せてしまう……。そうなると、なかなかエンジニアの領域のことをデザイナーが学習していくことは、(必要だとはいえ)大変なことでしょう。

今回のようなデザイナー、PM向けの実装に関する勉強会は、デザイナーである私個人にとっても有意義であったと感じています。


スライド内容を紹介(抜粋)

スクリーンショット 2021-02-19 22.21.27



APIとは・・・

Webアプリや、スマホアプリ がサーバーと通信するためのインターフェース。このインターフェースを用いて、データをやりとりしてアプリケーションを動かすものです。

スクリーンショット 2021-02-19 22.22.40


画像6



デザイナーは、UIを設計した際に、この操作は[GET][POST][PUT][DELETE]どれが当てはまるのかなどを意識してみましょう。今までと違った意識で設計することができると思います。


APIの確認方法(一例)

1. Chrome Developer tools
2. Charles iOSの通信をみる用 (今回の講座では紹介していません)
3. Postman (というシステムを使ってAPIが動いているか確認する)


[Postman]を利用してAPIを確認してみた。

スクリーンショット 2021-02-19 22.26.21

企業が公開しているAPI仕様書をみんなで見てみた


「HeartRails Express」

Webサイトへ移動する

「クラウドサイン Web API」

Build, Collaborate & Integrate APIs | SwaggerHub


説明も丁寧に書かれていて、API初心者にはとても優しい仕様書でした!!

PMやデザイナーは、なかなか業務の中でエンジニアの知識を得ることが難しいことだと思います。ちょっとしたジレンマ、たとえば「ここの仕組みについて本で読んでもよく分からなかった」といった思いが生まれがちです。そういうお悩みについても、本講座が何か解決のきっかけになっていたら幸いです。


今回の様な、学ぶスタイルのイベントを開催し、皆様ともっと学ぶ機会が作れたらなと思いました。今後とも、ANKR DESIGNをよろしくお願いします!

記事一覧に戻る