吉波拓夢 | DiningX CTO
@yoshi8__
Followers
3,980
Following
479
Media
342
Statuses
2,343
株式会社DiningX CTO / アプリ開発 + 生成AI開発 + PM全般 / 前職Rakuten / 飲食店評価に特化したAIアンケートサービスRECOPO 自然言語処理・生成AIサービス開発に興味のあるエンジニア・PMを募集中📣
東京
Joined May 2023
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
LINGORM FILL
• 1327427 Tweets
برشلونة
• 768300 Tweets
ليفركوزن
• 744385 Tweets
بنفيكا
• 743128 Tweets
BRICS
• 516880 Tweets
John Kelly
• 184364 Tweets
#tusaş
• 93335 Tweets
ボボステ
• 59645 Tweets
Hopkins
• 43598 Tweets
#6GoldenYearsWithATEEZ
• 40638 Tweets
#편도행_해적선_6년째_순항중
• 39500 Tweets
Türk Havacılık
• 39176 Tweets
Penarol
• 34516 Tweets
Şehitlerimize Allah'tan
• 33888 Tweets
Titans
• 32139 Tweets
HAPPY ATEEZ DAY
• 29736 Tweets
Charly
• 23663 Tweets
Medina
• 14034 Tweets
Kilmeade
• 12065 Tweets
Turkish Aerospace Industries
• 11986 Tweets
Recreio
• 11905 Tweets
ワイルズ
• 10136 Tweets
いち早くアプリ開発者になる方法
1. Claudeに「UI/UXとは？」を質問
2. Claudeに「DBスキーマとは？」を質問
3. Claudeに「ER図とは？」を質問
4. Claudeに「APIとは？」を質問
ここまで行った方は次のステップ↓
5. 開発環境（Cursor）を準備
6. Githubのアカウントを作成
7.
6
99
1K
Claude使う上で覚えておくと良い用語8選
1. PRD（要件定義書）
2. TSD（技術仕様書）
3. SRS（ソフトウェア要求仕様書）
4. SAD（アーキテクチャ設計書）
5. ERD（ER図、実体関連図）
6. MVP（最小限の製品）
7. DFD（データフロー図）
8. UI/UX（ユーザーインタフェース、ユーザーエクスペリエンス）
1
57
775
アプリを設計するためのプロンプトを作りました。v0で使うと相性抜群です！🙌
プロンプト:
✂︎--------
{作りたいアプリ}を作成するための要件定義と詳細設計を行います。以下のコマンドスタックに従って進めてください。
"""
## 要件定義の作成
0
58
673
ClaudeのArtifacts使う上で覚えておいた方が良いこと
「SPAでお願いします」
これを言うだけでリッチなUIが完成する✨
0
46
561
GPT Engineerがすごいので、使えそうなプロンプト放出しときますね🙌
プロンプト：
「このシステムに足りない機能を要件定義し、ステップごとに機能実装して。機能実装した後には厳しく批評し改善点を与えて再実装して。このループを続けて最高の成果物を出力して下さい」
4
40
462
v0 は開発に特化しているので、バックエンドをpython、フロントエンドをReact、デプロイ先をVercelのように一気通貫して開発することができる！🙌
さらに開発手順やフォルダ構成、ソース情報も載せてくれるので、アシスタントとして活用することが可能☺️
1
26
349
話題の「しごできジャイアン」をプロンプトにしてみた
✂︎--------
あなたは優秀なプロンプトエンジニアです。以下の指示に従って、SNSボット「しごできジャイアン」の投稿を生成してください。
1. **テンプレート**:
「{挨拶}、のび太。{アドバイスや冗談} {追加のコメント}」
2.
1
24
331
v0を使うと画像付き説明書が作れる！🙌
プロンプト
「LinearProcessFlowを使って、コーヒーの淹れ方の画像付き説明書を作って」
2
22
317
ついにスマホだけでスライド作成できた！🙌
明日使えるClaudeのプロンプト
「marp形式でインフォグラフィックスなスライドを作成して。画像ソースはunsplashを使って」
Claudeの出力をコピーして、に貼り付けるとスライドが完成します！！
4
26
319
v0でSaaS作りたいけど始め方が分からない方、こちらの会話履歴をどうぞ！
1
20
308
Claudeを使う上で便利なタイプ診断
1. ドキュメントを作成？
YES → Markdown
NO → 2へ
2. プレゼンテーション資料？
YES → Marp
NO → 3へ
3. 図解やチャートが必要？
YES → 4へ
NO → 5へ
4. どのタイプの図解？
フローチャート → Mermaid
静的図解 → SVG
データベース図 → Mermaid ER図
0
20
298
アイデア出しやブレストをClaudeにお願いするときに使える数式圧縮プロンプト、分かった。
プロンプト↓
✂︎--------
BrainStorm: ∑(i=1 to 4) Idea_i([トピック]) → {MD + SVG_Code}
where:
Idea_i = {T, D(2), C(1)}
SVG_Code = GenerateSVG(Ideas, Layout, Style)
Layout = {S: 800x600, G:
2
28
281
カスタマージャーニーマップを図解するときに使える数式圧縮プロンプト、分かった。
プロンプト↓
✂︎--------
CustomerJourneyMap: ∑(i=1 to 4) Phase_i([サービス]) → {MD + SVG_Code}
where:
Phase_i = {T, A(3), E(2), TP(3), CA(3)}
SVG_Code = GenerateSVG(Phases, Layout, Style)
Layout =
1
27
267
何すれば良いか分からない人に捧げる、アプリ開発における技術選択
1. Webアプリケーション
- React + Vercel
- React + Netlify
- React + AWS Amplify
- React + Firebase Hosting
- React + GitHub Pages
2. モバイルアプリケーション
iOS:
- Swift + UIKit + Xcode
-
2
19
254
v0を使う上で覚えておいた方が良いこと↓
「LinearProcessFlowを作って」
見やすいロードマップが作れます！🙌
0
14
242
ClaudeのArtifact使う上で覚えておいた方が良いこと
「rechartsで高度なグラフで作って」
これを言うだけでリッチなグラフが出力される✨
0
12
240
note記事執筆のプロンプト作った↓
✂︎--------
# noteプラットフォーム向け記事執筆プロンプト
このプロンプトを使用して、noteプラットフォームに最適化された魅力的な記事を作成してください。以下の各セクションに従って、記事を構成し執筆してください。
## 1. 記事の基本情報
-
0
22
256
Cursor Composerと環境構築用スクリプトファイルを使って、ゼロから10分くらいでフロントエンド、バックエンド、データベースを連携するローカル環境構築手法を見つけました🙌
3
17
211
chatGPTのo1が出たのでプロンプト作りました！🙌
✂︎--------
# マルチエージェント開発シミュレーションシステムプロンプト
1
20
203
ダッシュボード生成一般化プロンプト作った
① プロンプトをv0にコピペ
② 「ゴール＝〇〇」と送信
③ プロンプトが生成される
④ 「1つのファイルで全て実装」と送信
✂︎--------
instructions:
- ユーザーは {ゴール} = 〇〇 の形式で入力します
- {ゴール}
2
12
194
v0でインタラクティブなフロー図を作成できるようになった！🙌
「Eコマースアプリの遷移図をreact flowで作って」
1
13
196
誰か、v0でこのプロンプト試してほしい
✂︎--------
C1 こちらの画像の背景情報、図形情報、文字情報、サイズ情報、フォント情報、レイアウト情報を絶対座標系で言語化し、各パラメータをyaml形式で出力して
C2 yaml情報をもとに画像を完全再現するコードを実装して
C1→C2
----------
2
9
176
システム生成ツール bolt を使ってみました！
✅ v0 や Claude ArtifactsのようにUIの生成
✅ バックエンドのコードも生成
✅ npm install や npm dev をbolt環境で実行
✅ フロントエンドをlocalhost:5173で、バックエンドをlocalhost:3000で実行し、APIのコード生成時にも参照
✅
1
22
173
v0ではGoogle Fontsが使えます！🙌
◇プロンプト
「next/fontを使って〇〇のフォントにして」
◇フォント一覧
✂︎--------
Roboto: 汎用性の高いサンセリフフォント
Inconsolata: スタイリッシュな等幅フォント
Lobster: カジュアルなスクリプトフォント
Pacifico: 遊び心のあるスクリプトフォント
1
11
169
Cursor Composer使って、Airbnbのクローン作れました🙌
Composer使ったシステム開発、だいぶ慣れてきた☺️
1
12
160
ClaudeのArtifactsで技術系の説明書を作りました！
活字読むのが苦手なので、タブ切り替えとアイコンで見やすくしてます！🙌
URLを公開してるので、触ってみてください！
1
9
158
text-to-image-to-videoできました！🙌
Luma Dream Machine API と FLUX.1 [dev]を使って実装してます。8秒あたりが生成画像、1分29秒あたりが生成動画です。
画像生成に使用したプロンプトはこちら↓
✂︎--------
A wide-angle aerial shot of Tokyo's bustling Shibuya Scramble Crossing during
2
17
155
このプロンプト、もうほぼプログラミングやんw
✂︎--------
<prompt>
<instructions>
shadcn/uiを使用して、以下の仕様に従った金銭管理ダッシュボードを作成してください：
</instructions>
<layout>
<overall>
1
6
153
ClaudeのArtifacts使う上で覚えておいた方が良いこと
「0から3秒でフレームごとに画像生成し、手順書を作って」
これを言うだけで分かりやすい操作ガイドが完成する✨
0
7
152
Claudeでスライド自動生成できるの強すぎるな。今までKeynoteやGoogleスライドとかでまとめてた作業が1/10に減った印象🔥
2
6
150
要件定義はo1が圧倒的ですね！🙌
要件定義 : o1
コード生成 : claude-sonnet-3.5
この使い分けで良さそう
やっぱり gpt o1 圧倒的だわ。
何度やっても要求概要の記載がClaude3.5の比じゃない。
これまで日本語における要件定義書の生成、修正はCladueがダントツ一番だったけど、確実に超えた。
3月から半年に渡る日本語文書生成能力におけるClaude天下を塗り替えた。
2
111
702
0
15
148
なぜなぜ分析を綺麗に可視化するためのプロンプト、分かった。
プロンプト↓
✂︎--------
ProblemAnalysis(P) → {5W + SVG_Code} where: P = ∑(i=1 to n) S_i([メイン問題]) S_i = {T, W(5)} SVG_Code = GenerateSVG(S, Layout, Style)
定義:
P: メイン問題 S_i: サブ問題 (i = 1 to n) T:
1
15
140
note執筆プロンプトの強化版「note執筆用-動的生成メタプロンプト」を作りました！
{テーマ} = 〇〇を変更するだけで、実行できます
✂︎--------
{
"メタプロンプト": {
"ステージ1": {
"タスク": "note記事執筆のためのメタ認知分析",
"入力": {
"テーマ": "string"
},
"出力": {
0
9
144
ちょっと思いついたのでプロンプト作った。chatGPTの4oで機能するやつ。
✂︎--------
Step 0: ユーザーに｛テーマ｝を聞いてください
Step 1: ｛検索結果｝に基づき｛記事のタイトル｝を決めてください
Step 2:｛検索結果｝に基づき｛セクション数｝と｛各セクションタイトル｝を決めてください
0
10
134
Claude Artifactsのシステムプロンプトっぽいの見つけたので、日本語で翻訳し、簡単な説明を作成しました！
リプにソースも貼っておくので、ご確認ください✨
✂︎-----------
1. アーティファクトについて:
1
8
130
note記事プロンプトジェネレーターを作りました！
タイトルを決めて、選択肢を選ぶだけで、最適なキーワードをコピペすることができます🙌
URLを公開しているので、ぜひ試してみてください↓
2
6
130
v0にベットして正解だなって思うくらい、エコシステムは強者すぎる。GPT EngineerでGitHub連携ができると思ったら、v0も1つのコマンドだけでシステムの依存関係を Cursorに持って来れる。エコシステム圧倒的だわ
2
2
125
Claude Artifactsを使う上で覚えておいた方が良いこと↓
「〇〇について、Github issueを作成して」
〇〇＝「商談の成約率UP」のように設定するだけで、分解したタスクを見やすくまとめてくれる！🙌
0
9
119
ClaudeのArtifactsで一筆書きアニメーションを作りました！
サインを書くみたいで楽しい！🙌
リプ欄に公開リンクも貼っておきます↓
1
3
108
Claude Artifacts使ったループプロンプト作った↓
# 検定本執筆のためのループプロンプト
```
<system_prompt>
あなたは検定本の執筆を支援するAIアシスタントです。与えられた章とセクションに基づいて、本文を作成するループ処理を行います。以下の手順に従って作業を進めてください：
1.
0
14
105
Xのポストを生成するメタプロンプトできた↓
✂︎--------
# 過去ポストを分析してXのポストを生成するメタプロンプト
1
9
104
【v0ライブ 開催！】
フォロワー3000人記念で「v0ライブ」を開催します！
僕が実際にv0を使って制作物を作っている様子をzoomで配信しようと思います！
参加を希望される方は、こちらのGoogleフォームから回答お願いします！（なるべく参加人数が多い日時で開催させていただきます🙇）
0
8
100
ClaudeのArtifactsで起きるエラーをまとめました！
これらのエラーの多くは「Artifactsの制限」によるものなので、通常の開発では問題にならない場合があります。
エラー文が出てもすぐに諦めずに、スレッドに記載しているプロンプトを試してみましょう！🙌
1
6
100
boltはチャット欄の下にある各種ロゴをクリックするだけで、スターターキットを起動できます！🙌
【用意されているもの】
・React
・Next.js
・Vue.js
・Nuxt.js
・Vite
・Remix
・TypeScript
・Slidev
・Astro
・Svelte
・NativeScript
1
8
96
Claude Artifactsを使う上で覚えておいた方が良いこと↓
「v2」
Claudeの出力に納得いかなかったら、v2, v3と言うだけで改善したバージョンを出力してくれます！🙌
0
10
89
面白いプロンプト思いついたw
「スティーブ・ジョブズとして厳しくUIUXを指摘して下さい」
これ実際にやってみたら結構効果ある！🙌
4
4
84
フォロワーが3000人になりました！🙌
嬉しすぎる…6月から情報発信続けてきて良かった！
Claudeやv0などの生成AIを使って、皆さんがワクワクするような情報発信を心がけてますので、今後ともぜひよろしくお願いします！！✨
13
0
82
v0で作ってみた！🙌
これ面白いね！
0
5
77
ClaudeのArtifactsで物理の教材作ってみました！
放物線のシミュレーションとか方程式の導出とか良い感じ！
4
13
77
ClaudeのArtifactsでビジュアルプログラミングを作りました！
こどもにも分かりやすい制御ブロックで猫を動かしたり、回転させたりできます！🐈
URLを公開しているのでぜひ遊んでみてください↓
（画像表示のため、PCのSafari推奨）
1
5
78
ClaudeのArtifacts互換のオープンソース版だって！みんな見よう！
0
9
78
ClaudeのArtifactsで天気予報アプリ作りました！☀️
地名を入力すると、実際の天気や湿度などを教えてくれます！
リプ欄にURLあるので、試してみてください↓
2
4
76
ClaudeのArtifacts機能がiOS, Androidのアプリに登場しました！🙌
Today, we're making Artifacts available for all Claude users. You can now also create and view Artifacts on the Claude iOS and Android apps.
Since launching in preview in June, tens of millions of Artifacts have been created. But where did it all begin?
Here's how we built it.
116
338
2K
4
6
74
明日の社内共有用のスライド完成しました〜🙌🎉
せっかくなので、皆さんにも共有します！生成AIに詳しくなりましょう〜
（8割AIで作成しました。色んな方の知見も取り入れてます🙇）
0
7
71
ClaudeのArtifactsでタスク分解プロンプトを作成しました！
ゴールに対してタスクを分解し、GitHubのissue形式で綺麗に表示できます！✨
プロンプトはリプ欄に↓
1
6
71
最近、行動の源流を辿ることが大事に思えてきた。生物としての"ヒト"の行動原理と集団における個の特性を理解して、そのコンテキストを可視化することで、事業立案やプロダクト開発に活かせると思った
3
1
69
v0にフルスクリーン機能がつきました！🙌
コードが image-gallery.tsxのようなファイル名で表示されるのも嬉しい！☺️
1
7
67