Joined September 2023
34 Photos and videos
LPは作って終わりではなく、 見た人が不安なく行動できるかが大事です。 だから、デザインだけでなく 訴求、構成、導線、スマホでの見やすさまで見て制作しています。 LP制作をご検討中の方は、プロフィールから詳細をご確認ください。
1
3
148
おはようございます!🫡🫡 AIやWEBデザインについて発信してます。 皆様、本日もよろしくお願いします🙇
4
AIが作るLPでよく出るやつ ■それっぽく見える ・きれいな配色 ・整った余白 ・おしゃれな画像 ・それっぽいCTA ・長めの説明文 →全部トラップ ■成果が出るLPに必要なこと↓↓
1
1
60
・誰の悩みか明確 ・最初の3秒で伝わる ・不安を先回りして消す ・CTAまで迷わせない ・スマホで読みやすい ・申し込む理由がある AIは作るのが速い。 でも、売れる理由までは勝手に作ってくれない。 LPで大事なのは綺麗さより、誰に何をどの順番で伝えるか。 AI時代ほど、設計できる人が強い。
1
38
おはようございます。 完璧なポートフォリオを待つより、 80%でも出して改善する方が前に進みますね。 今日も1投稿、1改善、1行動。 小さくても動ける人でいたいです。
33
こんにちは。 WEBデザイン副業で大事なのは、 綺麗に作ることより 相手の悩みを形にすることですね。 今日は1つでも、 誰かの課題を見つける視点を磨いていきます。
2
65
炎上覚悟で言いますが、 AIでWEBデザインのゼロイチ(アイデア→初公開→初収益)を達成したいなら、記号プロンプトの理解が必須です。 「かっこいいサイト作って」とだけ入力しても、AIはあなたの頭の中を読めません。 * {} [] <> - "" の意味を知ってるだけで、生成品質と速度が劇的に変わります。 Webデザイン初心者さん向けにまとめました。
1
2
66
4.「[]」選択肢・オプションを示す 例:トーンを [ミニマル / ビジネスライク / 親しみやすい] で書いて 5.「<>」プレースホルダー 「ここに実際の内容を入れてね」という意味 例: <あなたのサービス名> の強みを活かしたLPをお願いします 6.「-」箇条書き・手順リストの区切りに使う 例: 手順1:Claudeで要件定義 手順2:v0で複数バリエーション生成 7.「””」言葉の意味を固定する 例: ・高級感を出す → 雰囲気重視 ・高級感”を演出 → 具体的な表現指示 これらを組み合わせれば、2026年現在のAIツール(v0・Figma AI・Cursorなど)を最大限活かせます。 AI slop(AI臭いデザイン)を避け、人間らしい戦略で差別化する第一歩です。 30日で最初の1件を目指す具体的なロードマップ・テンプレート・チェックリストはこちらの有料noteで公開中! 保存して後で読み返してください! noteはこちらから↓
1
23
おはようございます。 WEBデザイン副業で大事なのは、 綺麗に作ることより 相手の悩みを形にすることですね。 今日は1つでも、 誰かの課題を見つける視点を磨いていきます。
27
AIでWebデザインの「ゼロイチ」を爆速で達成するために本当に必要なこと ワイヤーフレーム、シンプルなLPでも1〜3時間かかってました💦 Claudeにしてからは、10分かかりません🏃‍♀️💨 これ、ただの時短テクニックじゃありません。 副業・フリーランスで「最初の1件(ゼロイチ)」を現実にするための、制作における最重要スキルです。 なぜ今これが重要なのか
1
4
50
AIでWebデザインのゼロイチを達成するために必要な5つのこと 1. 要件を「AIが理解しやすい形」に構造化する力 クライアントの要望をただコピペするのではなく、 ・掲載情報(テキスト) ・参考サイトのスクショ(複数推奨) ・デザインシステムがあればそのリンク を整理して渡す。これだけで出力の質が劇的に変わります。 2. Claude(特にArtifacts)を活用した高速ワイヤーフレーム生成スキル 「完成形」を最初から目指さない。 まずは構造と情報設計を確認するためのグレー基調ワイヤーを爆速で作る。 クライアントとの初回壁打ちで「ここをこう変えたい」と具体的に話せる状態に持っていくのが最強です。 3. 効果的なプロンプト設計力(これが一番大事) 以下が実際に使っているベースプロンプトです(コピペして使ってください): ---------------------------------- 以下の掲載情報をもとに、LPのワイヤーフレーム用HTMLを作成してください。 【条件】 ・テキストは一切変更せず、そのまま使用 ・セクションごとに明確なラベルを付ける(例: [ヒーローセクション]、[特徴セクション]など) ・画像部分はすべてグレーのプレースホルダーボックス+[画像: ここに〇〇の画像]と記載 ・フォントは Noto Sans JP ・カラーは白・黒・グレーのみ使用。シャドウ・グラデーション・不要な装飾は一切なし ・改行は自然で読みやすいものに ・レスポンシブ対応(モバイルファースト) ・クライアントとの初回壁打ち用なので、ビジュアルより「情報設計とレイアウトの明確さ」を最優先 ・参考サイトのスクリーンショット(添付)をレイアウトの参考にしてください Claude Artifactsでプレビュー確認しやすい形でお願いします。 ---------------------------------- これで不要な英語や余計な装飾が出にくく、クライアントが見やすいワイヤーが一発で出てきます。 4. AI出力の評価・改善スキル+デザイン基礎リテラシー AIは完璧じゃない。 「このレイアウトで本当に伝わるか?」「アクセシビリティは大丈夫か?」「2026年のトレンド(ミニマリズム、目的あるモーション、AIエージェント対応など)に合ってるか?」を判断できる目を持つことが重要です。 5. 「AIをパートナーとして使う」マインドセット AIに丸投げするのではなく、時短と質の底上げに使う。 0→1のドラフトをAIが爆速で作ってくれるからこそ、人間であるあなたが「センス」と「クライアント理解」を注ぎ込める時間が増える。 このサイクルを回せると、 ・1案件あたりの制作時間が激減 ・より多くのクライアントと関われる ・初回案件のクオリティが上がり、信頼→リピート・紹介につながる という好循環が生まれます。 実際にどう変わるか
1
1
27
実際にどう変わるか Before:ワイヤー作成だけで1〜3時間 → クライアント確認 → 修正でさらに時間 After:10分以内で初稿 → その場で壁打ち → 即修正イテレーション これが積み重なると、30日で最初の1件を現実にするのも夢じゃないレベルで現実的になります。
1
18