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

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

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

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

Design Editor

Studio CMS

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

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

プロトタイピングって何

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

ChatGPT による説明

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

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

プロトタイピングの方法

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

Claude がおすすめ

Claude

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

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

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

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

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

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

Studio でのプロトタイピング

実例の紹介

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

Demo: HSL カラーピッカー

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

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

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

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

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

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

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

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

Ryunosuke Watanabe

More Decks by Ryunosuke Watanabe

Featured

Transcript