Vue でサクッと作る: Studio でのプロトタイピング開発

by Ryunosuke Watanabe

Slide 1

Slide 1 text

Vue でサクッと作る Studio でのプロトタイピング開発 Vue Fes 2024 Ryunosuke Watanabe

Slide 2

Slide 2 text

Ryunosuke Watanabe ＠heavenosk Studio Inc. でフロントエンドエンジニアとして働いています。最近は格ゲーにハマっています。自己紹介

Slide 3

Slide 3 text

Studioは、コードを書かずにWebサイトの構築・公開・運用が完結するノーコードWeb制作プラットフォーム

Slide 4

Slide 4 text

Design Editor

Slide 5

Slide 5 text

Studio CMS

Slide 6

Slide 6 text

プロトタイピングについて

Slide 7

Slide 7 text

アジェンダプロトタイピングって何プロトタイピングそのものについてお話しして、皆さんと共通認識を作るプロトタイピングの方法エンジニア視点で提案する際の、プロトタイピングする方法や、着目するポイントについてお話しする Studio でのプロトタイピング実際の例を交えて Studio でのプロトタイピング開発について紹介する

Slide 8

Slide 8 text

プロトタイピングって何

Slide 9

Slide 9 text

プロトタイピングプロトタイピング（Prototyping）とは、実働するモデル（プロトタイプ）を早期に製作する手法およびその過程を意味する。その目的は、設計を様々な観点から検証する、機能やアイデアを形にすることでユーザーから早めにフィードバックを得るなど、様々である。  (Wikipedia: プロトタイピングより)

Slide 10

Slide 10 text

ChatGPT による説明

Slide 11

Slide 11 text

私的な「プロトタイピング」「試しに作ってみようよ」という開発活動全般

Slide 12

Slide 12 text

本来の意味でのプロトタイピング開発プロジェクトの早期に、実際に動くものを作ることでプロダクトの方向性の検証や技術検証を行うコミュニケーションの一形態ユーザーインターフェースや操作感について、空中戦の議論を避け、実際に動くものを作った上で議論するエンジニア視点での提案エンジニアの立場で機能や仕様の提案をする際に、動くものを作って提案する私的な「プロトタイピング」

Slide 13

Slide 13 text

プロトタイピングの方法

Slide 14

Slide 14 text

プロトタイピングは手軽になっている（生成AIのおかげで！）

Slide 15

Slide 15 text

Claude がおすすめ

Slide 16

Slide 16 text

Claude

Slide 17

Slide 17 text

Claude を使ったプロトタイピング Claude に言葉で指示を出して、雑にユーザーインターフェースを作る。ユーザーインターフェースのイメージが湧かない場合にも有効。

Slide 18

Slide 18 text

生成した右側のコードは Publish もできる (このサンプルのリンク)

Slide 19

Slide 19 text

Claude Artifacts を使ったプロトタイピング

Slide 20

Slide 20 text

よくやるプロトタイピングの手順 ( Claude で雑に作る Claude に指示して、言葉だけでイメージを膨らませる d 手元で整える Claude で生成したコードを、実際のプロジェクトに貼り付けてロジックを整えます。Cursor が便利 t 同僚に見せるできたら見せる・触ってもらう

Slide 21

Slide 21 text

デザイナーのためのプロトタイピング入門キャスリン・マッケルロイ著プロトタイピングを使ったユーザーインタビューなどの手法・方法論がまとめられている

Slide 22

Slide 22 text

忠実度 ”プロトタイプやエクスペリエンスが、ビジュアルの精度、機能の幅広さ、機能の深さ、インタラクティビティ、データモデルの5つの要素において最終製品にどの程度近いかを示す度合い” キャスリン・マッケルロイ. デザイナーのためのプロトタイピング入門

Slide 23

Slide 23 text

Studio でのプロトタイピング

Slide 24

Slide 24 text

実例の紹介

Slide 25

Slide 25 text

HSL カラーピッカー従来の RGB のピッカーではなく、HSL の色空間を使ってワンアクションで色を選択できる。Arc というブラウザの機能を参考にした。

Slide 26

Slide 26 text

Demo: HSL カラーピッカー

Slide 27

Slide 27 text

セクションのインタラクション UI で伸び縮みするセクションを提案

Slide 28

Slide 28 text

Demo: セクションのインタラクション

Slide 29

Slide 29 text

コピーライティング分析ツール生成AI を使ってコピーライティングを分析して、どのようなスペクトラムを持っているか分析するツール。他メンバーに「こんなことができるよ」と技術デモをする目的でもプロトタイプを作ったりします。

Slide 30

Slide 30 text

Studio のプロトタイピング文化 Y Studio は創業者がエンジニア兼デザイナーだっ8 Y 社内のメンバーがプロトタイピングをやっているのを見て、自然に新しいメンバーが真似て文化になっている

Slide 31

Slide 31 text

開発の一つのアプローチとしてプロトタイピングをぜひ試してみてください

Slide 32

Slide 32 text

ご静聴ありがとうございました Vue Fes 2024 Ryunosuke Watanabe