20201027_FGDC_LowCodeプラットフォームNoodlでブラウザゲーム開発！

Transcript

1. LowCodeプラットフォーム でブラウザゲーム開発！
2. 加藤 健大 Kato Takehiro UXデザイナー Noodlアドボケイト 理系大学でデザイン工学 （デザインとエンジニアリングの融合領域）を学ぶ 同大学の大学院にてアイデアの発想法を研究 株式会社テイ・デイ・エスに入社 Noodl のアドボケイトとして ユーザーコミュニティ運営などの活動開始 UXデザイナーとして プロジェクトの上流工程の調査 /分析に関わる アドボケイト： 　自社製品やサービスを社外の開発者に啓蒙する職種。みなさんと同じ目線でみなさんの課題を一緒に解決していく。 　※エバンジェリストは、人々の前に立って先導、主導をしていく "伝道師"のイメージ。 （参考：https://codezine.jp/article/detail/11486、中津川篤司氏） 趣味：今年に入ってからずっと藤井風さんの曲を鬼リピしています 　　　キングダムハーツが好き ３やってないからそろそろやらなきゃ ...（義務感） 特徴：デザインを学んでからというものの、物事を突き詰めて考える楽しさを覚え　　　　てしまい 思考の森に迷い込むこともしばしば ...
3. デザインに戦略性を、ロジックに創造性を 私たちはクリエイティビティあふれる論理と、戦略に基づいたデザインによって、 人、モノ、社会の間にあるコミュニケーション課題を解決に導くデザインファームです。
4. ツイート大歓迎です！ #FGDC #Noodl
5. Noodl？ ヌ ー ド ル
6. 写真：Pixabay、Văn Đặng
7. これは Noodle e が付いているのは麺 ヌ ー ド ル
8. Noodl とは？ ヌ ー ド ル
9. Noodlとは？ Webアプリケーション を開発するための プラットフォーム 超ざっくり、webアプリケーションとは？ 　WEBブラウザ（例：Chrome / Safari）で動くもの 開発して出来上がるものは？ 　webサイト：企業サイト、ブランドサイト ... 　webサービス：Twitter、Wikipedia、Amazon… 　ブラウザゲーム：
10. デモ ころぴゅーた（ブラウザゲーム） https://www.replug.jp/coro-puter/
12. そんなNoodlの背景にある 思想 とは？
13. 意思決定を 触れられる形にせよ。 多くの企業が「デザイン思考」の導入を急ぐが、うまく実現できず苦労している。 ・意思決定に時間がかかる ... ・アイデアはある、でもなるべく理想に近い形を実際に触れるものとして作る方法がわからない ... アイデアが降ってきたら、触れられる形を早く作って、実際に使って、判断できるようにする。 そんな開発元の考え方が、 Noodlに反映されています。
14. 思考し、実行する。
15. そんな思想を持つ 組織 とは？
16. TOPP Swedish design & innovation agency 拠点： 　Malmö（マルメ） 　スウェーデン南部にある第３の都市 創業： 　2013年 　Black Berry時代からイケてるものを作っていて、 　その開発に関わっていたメンバーで創業 メンバー： 　・デザインテクノロジスト 　・UX デザイナー 　・ストラテジスト 　・エンジニア 　・ビジュアル & モーションデザイナー　など
17. Noodl（Company） ・TOPPでNoodlの開発をしていたメンバーが独立 ・現在、Noodlのプロダクト開発に注力している
18. TOPP WAY OF WORKING THINK / DO 思考し、実行する MERGE MANY MINDS 多くの考え方を溶け合わせよ EXPERIMENT RAPIDLY 高速で実験せよ MAKE DECISIONS TANGIBLE 意思決定を触れられる形にせよ PROTOTYPE THE STORY ストーリーを試作せよ FIND INTERESTING TRUTHS 興味深い真実を発見せよ CREATE MOMENTUM 勢いを創造せよ
19. Client 2013年の創業以来、TOPPは国境を越え、ユー ザー体験を作り出すために、数多くの公私企業の クライアントと協働してきました。 業界範囲： 　・航空業 　・自動車 　・消費者向け電化製品 　・コネクテッドホーム　　など クロスプラットフォームサービスの最先端を行く企 業がTOPPのクライアントです。 いずれの業界であっても、技術によって何百万も のユーザー体験を改善できる可能性を秘めてい ます。
20. Noodlについて詳しく
21. Node ノ ー ド
22. つなげていく... = コーディング
24. Noodl ヌ ー ド ル 論理 （ if 文 , for 文 … ） データ （ データベース, API, IoT ） UIデザイン 機能をつないで、 １つに。
25. Noodlで作ることができるのは、 Webアプリケーション ・webサイト（PC / スマートフォン） ・webサービス（PC / スマートフォン） ・IoTデバイスのUI 　→ データベースと連携可能（ = ID/PWで個人情報の管理可能） 　→ APIと連携可能 ・HTML / CSS / JavaScript ・React ベース ・ブラウザで動くよ ↑ Noodlで作ったアプリケーション例
26. 機能 Noodl のココが嬉しい ① ヌ ー ド ル プロトタイピングツール Low-code 開発プラットフォーム（絶賛開発中！） プロトタイプ version 1 プロトタイプ version 2 プロトタイプ version 3 本番 アプリケーション リリース デザイン プロトタイプが本番にも使えるものになる！
27. Noodl のココが嬉しい ② ヌ ー ド ル プロトタイプ version 1 プロトタイプ version 2 プロトタイプ version 3 本番 アプリケーション リリース テスト１ テスト２ UX テスト３ 利用 / 購入 UX（ユーザー体験）の向上に大活躍！
29. Noodl ヌ ー ド ル デザイナー エンジニア プロジェクト 関係者 人をつないで、 １つに。
30. キーワードは Low-code ロ ー コ ー ド
31. No-code と Low-code の違い ロ ー コ ー ド ・簡単なアプリケーションを作る場合は、コードを書く必要がない ・ゼロから自由にデザインを構築可能 ・今後、デザインツールの Figma や Sketch から UIデータをインポートできるようになっていく ・レベルの高いアプリケーションを作りたい場合は、通常よりも少ないコード記述量で開発ができる ノ ー コ ー ド 表：Wikipedia「No-code development platform: No-Code vs. Low-Code」の情報を元に作成
32. お知らせ
34. Twitter
35. Noodl 2.1 情報
36. @pentake： 今回お話しした内容の一部のまとめ Qiita 記事 @macole さん： インストール方法や機能のご紹介
37. 11/11 (水) 19:30 - 21:10 お申込みは connpass から！
38. Thank you！