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