[{"data":1,"prerenderedAt":497},["ShallowReactive",2],{"content-/three-business-sites-anti-ai-design":3,"related-/three-business-sites-anti-ai-design":439,"all-pages-for-dir":495,"og-image-/three-business-sites-anti-ai-design":496},{"id":4,"title":5,"body":6,"category":417,"description":418,"extension":419,"meta":420,"navigation":421,"path":422,"project_name":423,"published":424,"publishedAt":425,"seo":426,"stem":427,"tags":428,"todo":437,"unpublished":424,"updatedAt":437,"__hash__":438},"pages/2026-06/2026-06-13/three-business-sites-anti-ai-design.md","AIっぽくないWebデザインで3業種サイトを業種別にリビルド - ワークショップ用プロンプトに学びを還流",{"type":7,"value":8,"toc":405},"minimark",[9,13,18,21,24,46,49,53,56,67,70,73,76,87,90,98,105,190,193,196,200,203,210,218,221,327,333,337,340,343,354,357,360,363,390,398,401],[10,11,12],"p",{},"3業種（和菓子舗・美容室・飲食店）のランディングページが、全部同じテンプレートをかぶせただけで「どこかで見た角丸カード3枚並び」になっていた。ワークショップの題材として配るものなので、そのまま渡すと受講者が同じ顔のサイトを量産することになる。今日はここを業種ごとに分解して、ついでに今回効いた指示をワークショップのサイト作成プロンプトに焼き直すところまで持っていった。",[14,15,17],"h2",{"id":16},"出発点-aiっぽいをまず言語化する","出発点: 「AIっぽい」をまず言語化する",[10,19,20],{},"最初に Claude Code へ渡した指示が、今日いちばん効いた。フワッと「いい感じに」と頼むと、結局またAI定番のグラデが出てくる。回避リストを先に細かく書き下した。",[10,22,23],{},"避けたいパターンとして列挙したもの:",[25,26,27,31,34,37,40,43],"ul",{},[28,29,30],"li",{},"濃紺背景＋青〜紫グラデーション",[28,32,33],{},"ネオン発光、抽象的な球体・粒子・波形・ニューラルネット風ライン",[28,35,36],{},"右側にダッシュボード／チャットUIモックを置いたヒーロー",[28,38,39],{},"均一な3カラム構成",[28,41,42],{},"角丸カードを並べただけのセクション",[28,44,45],{},"ガラスモーフィズム、青紫グラデ背景の上に半透明カード",[10,47,48],{},"「AIで作ったとひと目で分かるサイト」の輪郭が、こうやって書き出すと一気にハッキリした。あとは「業種・対象ユーザー・利用シーンを想定した独自性の高いデザインで」と添えて、frontend-designスキルを適用させて投げた。",[14,50,52],{"id":51},"_3業種を独立デザインで全面リライト","3業種を独立デザインで全面リライト",[10,54,55],{},"共通テンプレートを廃止して、3ページとも業種固有の構成に書き直してもらった。ヒーローの方向性だけメモしておく:",[25,57,58,61,64],{},[28,59,60],{},"和菓子舗: 和の佇まいに振った構成。余白を取り、書体と縦組み的なリズムで落ち着かせる",[28,62,63],{},"美容室: 風の音を連想させる軽やかな縦配置。カードを並べない",[28,65,66],{},"飲食店: 青海波（あおみのは）のモチーフを織り込んだ和食店らしい構図",[10,68,69],{},"完成後は、デバッグChromeを立ち上げて3ページともデスクトップ幅とモバイル幅でスクショ確認。コンソールエラーゼロ、レイアウト崩れなし。「悪くないですね」が出たところで止めて、次の工程に進んだ。",[14,71,72],{"id":72},"効いたプロンプトはワークショップ用に一般化して還流する",[10,74,75],{},"ここで自分のなかで切り替わったのが、「この指示はワークショップの題材プロンプト本体に組み込んだほうがいい」という判断だった。受講者ごとに毎回「AIっぽい定番を避けて」と書き直すのは無駄だし、書き忘れた人のサイトだけ既視感まみれになる。",[10,77,78,82,83,86],{},[79,80,81],"code",{},"apps/web/app/pages/index.vue"," の ",[79,84,85],{},"sitePrompt","（題材として配られるサイト作成プロンプト）を更新して、今日の回避リストを一般化した形で組み込んだ。コピーボタンの文面も、内部で参照しているのでそのまま新版に置き換わる。",[10,88,89],{},"プロンプト側に正解を寄せるほど、同じ素材で別の業種を作っても再現性が出る。これが今日の一番大きい学び。",[14,91,93,94,97],{"id":92},"google-マップ埋め込み-apiキー不要の-outputembed-で","Google マップ埋め込み: APIキー不要の ",[79,95,96],{},"output=embed"," で",[10,99,100,101,104],{},"「住所を調べたら埋め込めるよね？」と振られたので、3店舗それぞれにGoogleマップを差し込んだ。APIキー不要の ",[79,102,103],{},"https://maps.google.com/maps?q={店名+住所}&output=embed"," 方式のiframe。",[106,107,112],"pre",{"className":108,"code":109,"language":110,"meta":111,"style":111},"language-html shiki shiki-themes vitesse-light vitesse-light","\u003Ciframe\n  src=\"https://maps.google.com/maps?q=店名+住所&output=embed\"\n  loading=\"lazy\"\n  referrerpolicy=\"no-referrer-when-downgrade\"\n>\u003C/iframe>\n","html","",[79,113,114,127,148,163,178],{"__ignoreMap":111},[115,116,119,123],"span",{"class":117,"line":118},"line",1,[115,120,122],{"class":121},"shFtX","\u003C",[115,124,126],{"class":125},"sHkkW","iframe\n",[115,128,130,134,137,141,145],{"class":117,"line":129},2,[115,131,133],{"class":132},"s4oTP","  src",[115,135,136],{"class":121},"=",[115,138,140],{"class":139},"sMJiu","\"",[115,142,144],{"class":143},"sdGka","https://maps.google.com/maps?q=店名+住所&output=embed",[115,146,147],{"class":139},"\"\n",[115,149,151,154,156,158,161],{"class":117,"line":150},3,[115,152,153],{"class":132},"  loading",[115,155,136],{"class":121},[115,157,140],{"class":139},[115,159,160],{"class":143},"lazy",[115,162,147],{"class":139},[115,164,166,169,171,173,176],{"class":117,"line":165},4,[115,167,168],{"class":132},"  referrerpolicy",[115,170,136],{"class":121},[115,172,140],{"class":139},[115,174,175],{"class":143},"no-referrer-when-downgrade",[115,177,147],{"class":139},[115,179,181,184,187],{"class":117,"line":180},5,[115,182,183],{"class":121},">\u003C/",[115,185,186],{"class":125},"iframe",[115,188,189],{"class":121},">\n",[10,191,192],{},"枠線・余白・角丸は各ページのデザインに合わせて変えた。飲食店ページでは、藍ベースの店舗情報セクションのなかに朱のアクセントで枠を作って差し込む、といった具合。3店舗ともピンの位置が正しいことをブラウザで確認した。",[10,194,195],{},"ここもサイト作成プロンプトに1行加えて「地図はAPIキー不要のembedで入れること」を恒常化した。",[14,197,199],{"id":198},"ヒーロー写真の差し替え-薄めのプレースホルダーで","ヒーロー写真の差し替え: 薄めのプレースホルダーで",[10,201,202],{},"ユーザーから実店舗の写真（ショーケースと地域絵地図が写っているもの）が送られてきた。「もっといい写真は後で撮るから、いまは薄めのプレースホルダーとして入れて」という指示。",[10,204,205,206,209],{},"PNGをそのまま ",[79,207,208],{},"public/"," に置いて、ヒーロー背景に低めの不透明度で重ねた。文字が読めるコントラストは確保しつつ、写真の存在感が前に出すぎない塩梅に調整。差し替え予定の素材だと分かっているので、CSSの数値を変えるだけで本番写真に切り替わるよう、画像パスとオーバーレイの透過率を分離しておいた。",[14,211,213,214,217],{"id":212},"電話ボタン-右上固定の-tel-リンク","電話ボタン: 右上固定の ",[79,215,216],{},"tel:"," リンク",[10,219,220],{},"「よくあるランディングページみたいに、右上に電話番号置けない？ クリックで電話かかるやつ」と振られた。3ページとも右上固定の電話ボタンを、各ページのデザイントーンに合わせて追加。",[106,222,224],{"className":108,"code":223,"language":110,"meta":111,"style":111},"\u003Ca href=\"tel:0972XXXXXX\" class=\"cta-phone\">\n  \u003Cspan class=\"cta-phone__label\">お電話でのご予約\u003C/span>\n  \u003Cspan class=\"cta-phone__number\">0972-XX-XXXX\u003C/span>\n\u003C/a>\n",[79,225,226,259,291,319],{"__ignoreMap":111},[115,227,228,230,233,236,238,240,243,245,248,250,252,255,257],{"class":117,"line":118},[115,229,122],{"class":121},[115,231,232],{"class":125},"a",[115,234,235],{"class":132}," href",[115,237,136],{"class":121},[115,239,140],{"class":139},[115,241,242],{"class":143},"tel:0972XXXXXX",[115,244,140],{"class":139},[115,246,247],{"class":132}," class",[115,249,136],{"class":121},[115,251,140],{"class":139},[115,253,254],{"class":143},"cta-phone",[115,256,140],{"class":139},[115,258,189],{"class":121},[115,260,261,264,266,268,270,272,275,277,280,284,287,289],{"class":117,"line":129},[115,262,263],{"class":121},"  \u003C",[115,265,115],{"class":125},[115,267,247],{"class":132},[115,269,136],{"class":121},[115,271,140],{"class":139},[115,273,274],{"class":143},"cta-phone__label",[115,276,140],{"class":139},[115,278,279],{"class":121},">",[115,281,283],{"class":282},"sG7-3","お電話でのご予約",[115,285,286],{"class":121},"\u003C/",[115,288,115],{"class":125},[115,290,189],{"class":121},[115,292,293,295,297,299,301,303,306,308,310,313,315,317],{"class":117,"line":150},[115,294,263],{"class":121},[115,296,115],{"class":125},[115,298,247],{"class":132},[115,300,136],{"class":121},[115,302,140],{"class":139},[115,304,305],{"class":143},"cta-phone__number",[115,307,140],{"class":139},[115,309,279],{"class":121},[115,311,312],{"class":282},"0972-XX-XXXX",[115,314,286],{"class":121},[115,316,115],{"class":125},[115,318,189],{"class":121},[115,320,321,323,325],{"class":117,"line":165},[115,322,286],{"class":121},[115,324,232],{"class":125},[115,326,189],{"class":121},[10,328,329,330,332],{},"和菓子舗は墨色＋朱、美容室は明るいニュートラル、飲食店は藍＋朱、と業種別の色から外さない範囲で組んだ。ここも忘れずサイト作成プロンプトに「電話番号は右上固定の ",[79,331,216],{}," リンクで入れる」を1行追加。",[14,334,336],{"id":335},"飲食店ページの作り直し-ベストプラクティスクチコミ調査","飲食店ページの作り直し: ベストプラクティス＋クチコミ調査",[10,338,339],{},"飲食店ページだけは、デザインを変えただけでは中身が物足りなかった。agent-browser で Google マップの店舗ページを開いて、口コミとメニューを抽出。",[10,341,342],{},"得られたもの:",[25,344,345,348,351],{},[28,346,347],{},"看板メニューの価格帯（ひゅうが丼 1,100円 など実数値）",[28,349,350],{},"客が繰り返し言及しているポイント（魚の鮮度、店主の人柄など）",[28,352,353],{},"ランチ／ディナーの構成",[10,355,356],{},"これをもとに「即答ストリップ」（人気メニューを一発で見せるセクション）と、写真＋クチコミ要約を組み合わせたブロックを追加。デザインだけ整えるより、実データが乗ったときに初めてLPの説得力が出ることを再確認した。",[10,358,359],{},"この調査工程も「業態別のベストプラクティス調査＋クチコミ抽出をやってから作る」という1ステップとしてサイト作成プロンプトに組み込んだ。",[14,361,362],{"id":362},"今日の流れと学び",[364,365,366,369,372,375,378,381,387],"ol",{},[28,367,368],{},"AIっぽい定番パターンを言語化して回避リスト化",[28,370,371],{},"3業種を独立デザインで全面リライト、frontend-designスキル適用",[28,373,374],{},"効いた指示をワークショップのサイト作成プロンプトに還流",[28,376,377],{},"APIキー不要の地図埋め込みを3ページに追加",[28,379,380],{},"実店舗写真をプレースホルダーとしてヒーロー差し替え",[28,382,383,384,386],{},"右上固定の ",[79,385,216],{}," 電話ボタンを3ページに統一追加",[28,388,389],{},"飲食店はクチコミ・メニュー調査をしてから書き直し",[10,391,392,393,397],{},"一番大きい学びは、",[394,395,396],"strong",{},"「一回うまく効いた指示は、その場の成果物だけでなくプロンプト本体に焼き直す」"," の感覚を3回連続で実行できたこと。同じワークショップ題材を別の業種で再利用したときに、今日と同じ品質が再現される。プロンプトを更新したぶんだけ、未来の自分と受講者の手間が減っている。",[10,399,400],{},"逆に言えば、今日 Claude Code に何度も「AIっぽいの避けて」「地図入れて」「電話ボタン右上に」と口頭で投げ続けていたら、それは全部「プロンプト本体に書いておくべきだったこと」のシグナルだった。会話のたびに同じ指示が出てきたら、source（プロンプト本体）を直す合図、というルールを自分のなかに置く。",[402,403,404],"style",{},"html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}",{"title":111,"searchDepth":129,"depth":129,"links":406},[407,408,409,410,412,413,415,416],{"id":16,"depth":129,"text":17},{"id":51,"depth":129,"text":52},{"id":72,"depth":129,"text":72},{"id":92,"depth":129,"text":411},"Google マップ埋め込み: APIキー不要の output=embed で",{"id":198,"depth":129,"text":199},{"id":212,"depth":129,"text":414},"電話ボタン: 右上固定の tel: リンク",{"id":335,"depth":129,"text":336},{"id":362,"depth":129,"text":362},"dev","和菓子舗・美容室・飲食店の3業種サイトを、共通テンプレートを廃止して業種固有の独立デザインに作り直した。frontend-designスキルで既視感の強いSaaS定番を避け、地図埋め込み・電話ボタン・クチコミ調査までを一気に追加し、ワークショップのサイト作成プロンプトに反映した記録。","md",{},true,"/three-business-sites-anti-ai-design","komatsu-sos",false,"2026-06-13T00:00:00.000Z",{"title":5,"description":418},"2026-06/2026-06-13/three-business-sites-anti-ai-design",[429,430,431,432,433,434,435,436],"frontend-design","デザイン","サイト制作","ワークショップ","Google Maps","プロンプト設計","Vue","Nuxt",null,"2r7nCAgMgIS8DCMYNFVToZIM0eNglB0a5hQKzIiumh4",[440,452,462,472,487],{"title":441,"description":442,"path":443,"tags":444,"publishedAt":425,"updatedAt":437},"コーディング原則ページのUX大改修：Bad/Good横並び・フローチャート・ベン図抽象化・難易度レベル付け","Vue製のコーディング原則ページに4つの大型UX改善を入れた1日。Bad/Good横並び、前提条件フローチャート、ベン図による光と影（ド・モルガン）の抽象化、全62トピックへの初級・中級・上級レベル付けまでを Codex レビュー込みで進めた記録。","/coding-principles-ux-overhaul",[445,435,446,447,448,449,450,436,451],"コーディング原則","UX","Codexレビュー","ベン図","ド・モルガン","フローチャート","レベル設計",{"title":453,"description":454,"path":455,"tags":456,"publishedAt":461,"updatedAt":437},"Synthesia風「降ってくる音符」のピアノアプリをWeb Audio + Canvasで作った——実装の詳細メモ","音符バーが上から降ってきて鍵盤に届くと音が鳴るピアノビジュアライザー /piano-roll の実装記録。曲データの持ち方、88鍵レイアウト計算、落下バーの座標系、Web Audioによるピアノ音合成、運指番号表示、楽譜データの入手方法やMIDIキーボード対応の展望まで。","/piano-roll-implementation",[457,458,435,459,460,436],"Web Audio","Canvas","ピアノ","音楽","2026-06-11T00:00:00.000Z",{"title":463,"description":464,"path":465,"tags":466,"publishedAt":471,"updatedAt":437},"Micron個別ページを作った（工場マップ＋月間キャパシティ詳細）","/memory-makers/micron を新規作成。USA / Japan / Taiwan の工場地図をSVGで描き、Fab別の月間キャパシティ推移を5マイルストーンで可視化した。3カラムから上下レイアウトへ作り直し、会計四半期に暦月併記を足すまでの過程をまとめる。","/micron-fab-page-with-capacity-map",[467,468,469,435,470,436],"Micron","DRAM","memory-makers","SVG","2026-06-07T00:00:00.000Z",{"title":473,"description":474,"path":475,"tags":476,"publishedAt":486,"updatedAt":437},"memory-makers ページに台湾系3社（Apacer / Phison / Etron）と TSMC・Samsung のチャートを足した日","Samsung のセグメント売上を積み上げ棒に揃え、Apacer・Phison・Etron を新規追加し、TSMC を含めて月次売上＋EPS チャートを差し込んだ。漢字社名が頭に入らないので、表記順をローマ字優先に直した。","/memory-makers-tw-fabless-add-and-charts",[469,477,478,479,480,481,482,483,484,485],"apacer","phison","etron","tsmc","samsung","finmind","turso","vue","nuxt","2026-06-05T00:00:00.000Z",{"title":488,"description":489,"path":490,"tags":491,"publishedAt":494,"updatedAt":437},"メモリーメーカー動向ハブを新設し、DRAM市場シェアの推移を可視化した一日","サムスン電子とSK Hynixの個別ページを揃えたメモリーメーカー動向ハブを新設。会社ごとに違う決算データの構造をどう吸収したか、過去8四半期のDRAM市場シェアをどう可視化したかを記録する。","/memory-makers-hub-dram-share",[492,468,436,493,435],"メモリー半導体","データ可視化","2026-06-02T00:00:00.000Z",[],"https://log.eurekapu.com/og/blog/three-business-sites-anti-ai-design.png?v=2026-06-13T00%3A00%3A00.000Z&title=AI%E3%81%A3%E3%81%BD%E3%81%8F%E3%81%AA%E3%81%84Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%A73%E6%A5%AD%E7%A8%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E6%A5%AD%E7%A8%AE%E5%88%A5%E3%81%AB%E3%83%AA%E3%83%93%E3%83%AB%E3%83%89%20-%20%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%83%E3%83%97%E7%94%A8%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E3%81%AB%E5%AD%A6%E3%81%B3%E3%82%92%E9%82%84%E6%B5%81&author=Kei%20Komatsu&sig=c9e1ec7ccfef2f60",1781423423243]