シシガミ🦌SHISHIGAMI

新宿→中野間が最強と言う事が分かりました。 #終電 #東京終電マップ #総武線 #神ツール

AI時代は健康に投資したい。フィジカルで勝負するしかない #ai #医療 #パーソナルドクター #健康

人類超えました。良い週末でした。AIに全振りした男のアプリ開発事情がヤバすぎる #ai #アプリ開発 #プログラミング #デザイン

面白すぎる！官公庁オークションが掘り出し物の宝庫だった #官公庁オークション #メルカリ #神サイト

生成AIによる画像悪用問題は今後どう解決するのか。行く末を見守りましょう #grok #ai #生成ai画像 #nanobananapro

スライド画像の再編集ツール...私も開発を試みましたが、断念したので、ぜひ頑張ってもらいたいです。 #ai #スライド #nanobananapro #notebooklm #kirigami

絶対保存して！デザインAIで好き放題画像を作りたい人はこれ必見ですわよ #nanobanana #ai #デザイン #神サイト

イヌ語翻訳アプリを開発して$4万稼ぐヤバいアプリがあるらしい #バイブコーディング #app #プログラミング #ai

俺の写真や動画は好きにおもちゃにしてください。 #AI #画像生成ai #社会問題

この凄さが分からない人は、仕事経験が浅い人。ToDoアプリやWBSじゃダメなんだって。 #アプリ #プログラミング#ビジネス #進捗管理

デザイン一発変換アプリ『SEKAIKAN』を作りました。デザインが得意な人もそうじゃない人も便利で楽しめるアプリになってると思います。 #デザイン#アプリ開発 #プログラミング#sekaikan

忘年会で使ってくれよな！！！ #m-1 結果発表アプリ #真空ジェシカ #ヤーレンズ #エバース #アプリ開発

まぁ今年は...ヤーレンズだよね。頑張ってくれ！！ #M-1 #ヤーレンズ #エバース #真空ジェシカ #

控えめに言って最高かよ...。議事録や資料を投げるとAIが60種の中から超本格的な図解資料を作ってくれる『ディアグラムジェネレーター』を開発しています。 自分の業務に欠かせない最高のツールになってる。という訳で一般公開に向けてテストユーザーさんを募集してます。 ##ai##図解##資料##パワポ##ビジネス

まだAIの「ポン出し」で消耗してる？実務で使える「高品質LP」の作り方完全ロードマップを公開します。 #AI #nanobanana #figma #web制作 #LP 今回は、ランディングページ（LP）を作る方法を紹介します。 巷では「AIにポン出しでデザインを作ってもらう」「AIコーディングツールで実装まで自動化する」といった方法が紹介されていますが、いずれもデザインのレベルが低かったり、編集がしづらくクライアントワークや自分の思うようにカスタマイズできない仕様になっています。 そこで今回は、細かくコントロールしながら自分の作りたいLPを確実に作る方法を紹介します。 おそらく他では誰もやっていない方法ですし、実力やスキルがない人でも作れる再現性の高い方法です。 初めてLPを作ってみたいという方も歓迎です。 使うツールとしては「Figma」と若干のお金がかかりますが、そこは必要経費としてご了承ください。 --- ▼【STEP 1：Geminiで構成とワイヤーフレームを作る】 まず最初に「Google Gemini」を使います。 1. 構成案の作成 自分が作りたいLPの構成をGeminiに作ってもらいましょう。 サービス内容やターゲット、ニーズや解決策などを記載すると良いです。 ここには構成作りのコツがありますが、基本的には「PASONAの法則」に沿って構成を作ってもらうのがおすすめです。 細かい文言についてもここでGeminiに作成してもらいます。 2. ワイヤーフレーム（骨組み）の作成 作った構成を、今度はGeminiの「キャンバス機能」を使ってワイヤーフレームに起こしていきます。 Geminiへの指示（プロンプト）は超簡単なものとしては以下を参考にしてください。 > 「ワイヤーフレームを作成してください。白黒のアウトラインで作成してください。レイアウトは2カラム、3カラムなど自由に組んでください。またHTMLでレスポンシブ対応で作成してください。」 このように指定して、Geminiのキャンバス機能で白黒のHTMLデータを作ってもらいます。 --- ▼【STEP 2：ブラウザ表示とデザインの画像化】 1. ワイヤーフレームのキャプチャ 作成したワイヤーフレームのHTMLコードを、VS Codeなどのテキストエディタを使ってローカルPCに保存し、ブラウザで開いてください。 そして、開いたHTML自体を画面キャプチャします。 Macの場合：開発コンソールから「Command + Shift + P」を押し、「Full」とコマンドを打てばフルサイズキャプチャが撮れます。 その他：Chrome拡張機能などでページ全体をキャプチャしてください。 2. Geminiでデザイン化 キャプチャしたワイヤーフレーム画像をGemini（NanoBanana Proなどを呼び出し）に添付し、作りたいデザインを指定していきます。 参考になりそうなLPデザインを添付するのも良いですが、著作権などが心配な方は自由にGeminiに作ってもらいましょう。 自分の作りたい方向性、色、雰囲気、トンマナなどを言語化して伝えます。 （例：今回の動画で紹介しているサイトであれば、「B2Bっぽいサイトで白基調」「バナナを前面に」「B2Bながらもポップで親しみやすいフォントを使って」など） ここは一発ではなく、複数回トライして自分の満足いくデザインを作れるようにしましょう。 --- ▼【STEP 3：Figmaへのデータ化（ここが重要）】 デザインができたら、次はFigmaに落とし込む作業です。 複雑な一枚絵を一発でFigmaのレイヤーデータ（ベクターデータ）に落とすことは困難です。 Figmaが使える方は自分でトレースする方法もありますが、多くの人は難しいと思います。 ここでの解決策： 一度Figmaのデータを専門家に起こしてもらいましょう。日本の方に頼むと高くなるので、海外のクラウドソーシングを使うと良いです。 英語が苦手な方は翻訳ツールを使うか、もしくは私の方にご依頼いただければ専門のクリエイターを紹介し、簡単にFigmaデータまで起こすことが可能です。 ※Figmaにデータを起こす際は、ウェブで実装しやすいように必ず「オートレイアウト」を指定してください。 --- ▼【STEP 4：実装（ノーコードツールの活用）】 Figma上でデータを編集し、デザインが完成したら実装です。 1. 実装ツールの選定 ClaudeやCursorとMCPを用いてHTML/CSSベースで書くことも可能ですが、難しい人はノーコードツールを検討しましょう。 Figma Site / Figma Makeなど： 単純なデータなら有効ですが、デザインが複雑な場合は機能しないことがあります。 推奨ツール： 日本の「Studio」、または海外の「Webflow」「Framer」を使いましょう。 2. 実装の作業 ノーコードツールへの移管が面倒な方は、これも50〜100ドル程度で海外クラウドソーシングに依頼可能です（私の方で専門家への依頼も可能です）。 今回、私はStudioのプラグイン「Figma to Studio」を使って一括でインポートしました。 その後、Studio上で微調整を行って公開しています。自分で作業する時間はほとんどありませんでした。 --- ▼【まとめ：このワークフローの価値】 素人がAIでデザインを作り、LPまで起こし、実装して公開する一連の流れをお伝えしました。 これは「AIポン出し」で一瞬でできるものではありません。一定時間はかかります。 その分、自分の欲しいものを細かくコントロールし、他者との合意形成を取りながら構築を進めることができる最適なツール・手法です。 実際に私はこのフローを用いながら、クライアントワークで複数のLP制作案件をこなし、納品まで至っています。 --- 【📢 重要なご案内とプレゼント】 動画でも触れましたが、LPは特定の目的を達成するために構築するものです。 特に重要なのが、「LPとは何か」「基礎的な知識（ファーストビュー、サブヘッド、CTA、1LP1メッセージの原則など）」を知っておくことです。 これを知っている方がより良いLPが作れます。 ① LP基礎知識の資料配布 この特定の資料を用意しているので、欲しい方はコメントかDMをください。 ② LPジェネレーター（テストユーザー募集） 「専門知識やデザインスキルがない」という方向けに、それを一括で生成できるLPジェネレーターを現在開発しています。 ほぼ出来上がっているので、テストユーザーとして使ってみたい方はぜひご依頼（DM）ください。 ③ ツール開発に興味がある方 私はこういったツール開発が得意です。 「自分もツール開発をして欲しい」という方も、ぜひコメントやDMをいただけると嬉しいです。 ④ ウェビナー・コンサル相談 ここまで解説しても「やっぱりわからない」という方を対象に、ウェビナーやコンサルなども行う予定です。 制作代行やサポートが必要な方は、何かしらご依頼をいただければと思います。