Leo Code Lab

Point : AI活用で魔法少女テーマの架空募集LP構築 もしも、魔法少女を派遣する会社があったら？？を再現しました。 【 デザイン】 グラスモーフィズム（backdrop-filter: blur + 透過グラデーション）を全コンポーネントに適用し、統一感のある世界観を構築 選択した属性カラーをガラスに動的に反映を指示 カスタムカーソル＋属性選択時のカラー連動など、インタラクションで楽しめるサイトへ 【アニメーション】 FVにカウントアップアニメーショで動きを追加 Swiper.js を用いたカルーセル

Point : 依頼者想定は自宅でプライベートサロンを経営しているサロンのオーナー様。 ▼ 想定される課題 自宅でプライベートサロンを経営し、予約は公式LINEで管理されています。 Instagramはある。公式LINEもある。「ホームページがないと信頼してもらえない気がする。 → SNSで興味を持った人が、予約まで迷わず進める導線がない → 初めて来る人が「どんなサロンか」を確認できる場所がない → LINEへの誘導がスムーズにできていない →オープンしたで予算が少ない →とりあえずのサイトが欲しい --- ▼ ターゲットを明確にしてから設計へ ペルソナは「Saki、37歳、フリーランスデザイナー」。 ・大人かわいいデザインが好き ・決まったサロンに通いたい（浮気しないタイプ） ・センスを信頼できる人にお任せしたい ・忙しいので、予約はサクッと完結させたい --- 上記の課題やペルソナから ページの構成は以下に絞りました。 サービス内容・雰囲気・アクセス・LINEボタン。 理由は2つ。 ひとつは、ネイルサロンのオーナーさんやネイリストさんは Instagramをメインの発信拠点にしていることが多い。 デザインのトレンドも、新メニューも、インスタで更新していく。 だからサイトに最新情報を詰め込もうとすると、逆に管理が追いつかなくなると判断。 もうひとつは、Instagramでサロンを知っている状態でサイトに来る顧客もいると考えた。 サイトに求めるのは「信頼できるか」「予約できるか」の2点だけ。 静的なサイトだから更新しなくていい。 Instagramが最新デザインギャラリーになる。 サイトは予約への橋渡しに徹する。 シンプルな設計にしました。

Point : Claude — コンセプト管理・コーディング・プロンプト生成 サイト全体のコンセプト設計からコーディングまで、Claudeと対話しながら進めました。 「どんな世界観にするか」「キャラクターはどう設定するか」といった方向性の整理も、Claudeと一緒に考えています。 画像生成用のプロンプトもClaudeで作成しました。 コンセプトを把握しているAIがプロンプトを作ることで、画像のトーンが統一されると考えました。 Gemini・ChatGPT — 画像生成 カフェの雰囲気に合ったビジュアルをそれぞれで生成しました。 メニュー写真・背景透過が必要なロゴ等の画像はChatGPTで処理。 スタッフ写真・犬の写真はGeminiで生成しています。

Point : デザイナーA.Y様の架空のカフェ＋美容室のサイトをコーデイングさせていただきました。
カフェとサロンの世界観を伝えるため、イメージ写真をゆったりとスライドさせ、落ち着いた空間を演出しました。
動きによってブランドの印象を引き立てることをテーマにコーディングを行いました。
デザイナー : A.Y様への依頼はこちら→　 https://x.com/sukiyakizabuton

Point : WordPressのオリジナルテーマとして構築し、クライアント様が更新・運用しやすい設計を意識して実装しました。 特に、どの部分を動的にするかを丁寧に設計し、納品後の運用負担の軽減を目指しました。 また、資料請求フォームでは実際に資料が届くように機能を実装し、実用性の高いサイト構築を行いました。 「使いやすさ」と「運用しやすさ」の両立を意識し実装しました。