きら@デザイナー

【要チェック】 ちょっと私のLPを全員 見て欲しいです。 これ、Lovartで出した画像を Webに貼っただけのLPを作りました → work.cocolife.pro/p/2ahuAJytjd57 コーディング、 していません。 文字も画像に正確に 含まれています。 ボタンだけコピペで追加。 Lovart × GPT image2最強説 5/28・29、21時〜 この作り方を【無料で全公開】します。 みんな見て、 参加して欲しい。 直ぐに実践できる方法を 無料で知る事ができる。 そして Lovartのアカウントがない方は この勉強会に参加すると 2日間で ーーーーーーー 【BASICプラン】 が抽選で6名様に当たります (Lovart公式様からの協賛です） ーーーーーーー Lovartのアカウントを まだ持ってない人も 絶好のチャンス✨ ここで勉強すると Lovart公式(@lovart_jp)さんが 現在開催している 賞金付きのコンテスト企画に そのまま応募もできる これ、、、、 今しかないチャンスです 誰でも参加可能。ぜひご参加ください。 参加方法はリプ欄の オープンチャット内にてご案内します

【保存版】 Claude Codeを使い始めてから 仕事の進め方が変わりました。 正確には 「コード(指示)を書く仕事」の 定義が変わった。 私はWebデザイナーなので コーディングは「できる」けど プログラマー程は 流石にかけない。 でも今は違う。 Webマーケ歴13年、 デザイン制作10年以上の私が Claude Codeを使って変えたことを 徹底的にまとめてみました。 ブクマ推奨です👇 具体的な指示のコツお伝えします 正直、 コーディングに 苦手意識がある方こそ 読んでほしい内容です。 ＝＝＝＝＝＝＝＝＝＝＝＝ ❶ Claude Codeとは何か（まず整理します） ＝＝＝＝＝＝＝＝＝＝＝＝ コードのことが 全然分からなくてもいい。 Claude Codeは コードベースを読んで ファイルを編集して コマンドを実行して 開発ツールと連携する これを全部やってくれる AIコーディングツール。 ターミナル、VS Code デスクトップアプリ ブラウザからも使える。 つまり、もしあなたが 今まで 「コードが書けない」と いう壁で諦めていたことや 外注でお願いしてた事は 言葉で指示するだけで 動くようになった。 触ってみるとその便利さに気づく 私自身も「もっと早く使えばよかった」 と感じる。 ＝＝＝＝＝＝＝＝＝＝＝＝ ❷ デザイナーとして実際に使うコツ ＝＝＝＝＝＝＝＝＝＝＝＝ 初めから具体的に書くのが 最もおすすめ。 ✅ LPやWebサイトの HTML・CSSの修正だとしたら デザインはできあがっているけど 細かい実装の調整が必要なとき。 「ボタンのホバーエフェクトをフェードインに変えて」 「スマホ表示でメニューが崩れているので直して」 「h2のフォントサイズをPC32px・スマホ20pxに変えて」 こういった具体的指示を出すと ファイルを直接編集してくれる。 今まではコードエディタで 試行錯誤しながら直していたところが 格段に速くなった。 ✅ アニメーションの実装 LPにCSSアニメーションを 入れたいときは、 「スクロールしたら要素がフェードインするように」 「ヘッダーが一定量スクロールしたら固定されるように」 「ボタンをホバーしたら右に少し動くように」 こういった指示で実装してくれる。 JavaScriptが苦手でも問題なし。 ✅ レスポンシブ対応 PC表示とスマホ表示の両方を 整えるのは地味に 本当に時間がかかる作業。 「このファイルのレスポンシブ対応をして。 ブレイクポイントは768pxと1200px」 というように指示するだけで もう対応してくれる。 ✅ バグ発見と修正 「表示がずれている気がするけど 原因がわからない」というとき コードを渡して 「問題のある箇所を見つけて修正して」と伝えると 原因を特定して修正案を提示してくれる。 更にエラーメッセージが出たら それをコピーして 「このエラーを直して」と 渡すだけでも動く。 ✅ プロジェクト構成の把握 初めて触るコードを渡して 「このプロジェクトの構成を教えて」と言うと 全体を読んで説明してくれる。 引き継ぎ案件や 人から受け取ったコードのとき 特に助かる ✅ 定型コンポーネントの作成 よく使うボタンやカードの HTML+CSSをセットで作らせる。 「角丸でシャドウのあるカードコンポーネントを HTML+CSSで作って。 ホバーで少し浮き上がるようにして」 こういった使い方で 繰り返し使える部品を どんどんストックできる。 これ、実は地味に自分でやってた作業 今となってはAIがストックを作ってくれます ＝＝＝＝＝＝＝＝＝＝＝＝ ❸ Claude Codeを使うときのコツ ＝＝＝＝＝＝＝＝＝＝＝＝ ✅ まずプロジェクト全体を読ませる Claude Codeは コードベース全体を理解する。 「このプロジェクトの構成を説明して」 と最初に聞いておくと その後の指示の精度が格段に上がる。 ✅ 何をしてほしいかを明確に言う 「なんか良くして」はNG。 「〇〇ファイルの△△の部分を □□に変えてほしい」と できるだけ具体的に。 ただし細かすぎなくてもいい。 「このボタンをもっと クリックしたくなるデザインにして」 でも意外と動いてくれる。 ✅ 変更前に確認する習慣をつける ファイルを直接編集してくれるのは 便利だけど 意図しない変更が入ることもある。 大事なファイルを触る前に 「変更内容を教えてから実行して」と 一言添えておくと安心。 ✅ IDEと組み合わせるとさらに強い VS CodeのClaude Code拡張機能を使うと インライン差分の確認や @メンションでのファイル指定ができる。 JetBrainsにも対応している。 使い慣れたエディタ上で動かせるのが 個人的にはポイント高い。 ✅ エラーはそのままClaude Codeに渡す エラーメッセージをコピーして そのまま「このエラーを直して」と渡すだけ。 原因と修正方法を一緒に説明してくれる。 自分で調べる時間が大きく減った。 ＝＝＝＝＝＝＝＝＝＝＝＝ ❹ 使って一番感じたこと ＝＝＝＝＝＝＝＝＝＝＝＝ 「外注や作業が減った」ということ。 コーディングは 「できるけど時間がかかる」作業だった。 Claude Codeを使い始めてから その時間コストが大きく変わった。 クライアントワークで 累計9,500万円超の売上支援をしてきた中で 「LP制作のスピードと質」は いつも大事なテーマだった。 1商品で1,050万円を達成した販売も 土台にはしっかりしたLPとデザインがある。 そのLP制作の速度と精度が 今、もう一段変わろうとしてます デザイン × マーケ × AI。 この3つが揃った人が これからのWebの世界で強くなる。 私はそう感じてて、、 正直、Claude Codeを触る前は まぁ話題だから みんな触っているんでしょ ぐらいの 「自分には関係ない」と 思っていた部分もありました。 でも実際に使ってみたら デザイナーにこそ メリットが大きいツールです。 デザインのゴールをきめたなら どう実装すれば いいかが分からない人もいる そのギャップを埋めてくれるのが Claude Codeです。 他のAIツールもできますが 使える用途の広さが違う。 デザインができる人が コードも簡単に 動かせるようになる。 それがこれからの Webデザイナーの 標準スペックになると めちゃ感じます 最後に。 まだ導入してない人は ＝＝＝＝＝＝＝＝＝＝＝＝ ❺ インストール方法（参考まで） ＝＝＝＝＝＝＝＝＝＝＝＝ ターミナル（Mac・Linux・WSL）： curl -fsSL claude.ai/install.sh | bash Windows PowerShellの場合は irm claude.ai/install.ps1 | iex インストール後は プロジェクトフォルダで「claude」と打つだけ。 最初のログイン設定が終われば すぐ動かせます。 迷っている方は まずインストールだけしておくと いざというときに動ける。 Webマーケ歴13年の私が 今ではもう 毎日触り続けているツール。 迷っているなら それだけで試す価値はあると思う。 「触れた人」と 「触れていない人」の差は大きいです まだ慣れてない人のための 初心者用の講座も しようと思うんだけど 知りたいと思った方は リプ欄からよかったら教えてね☺️👇

x.com/i/article/2030…

x.com/i/article/2028…

x.com/i/article/2023…