黒田こうすけ｜Webコーダー

【🍖 制作実績を公開しました！】 炭火・七輪 ホルモン焼のお店「珍満」さんのWebサイトで、コーディング・サイト構築・本番適用を担当しました。 kurodafolio.com/works/chinman/ ディレクション：こんさん（@design_ikon47） デザイン：mikiさん（@miki_webbb） おふたりが作り上げた世界観を、できる限り忠実に再現することを意識して実装しました。 ご注文がスムーズに伝わるサイトを目指して、丁寧に形にしています。 実装の中身はリプ欄でご紹介します↓ #Web制作 #WordPress #コーディング

💭実装について。 デザイン通りだけど実装を見るとぐちゃぐちゃ…とはならないように特に注意を払っています。 デザイン生成時のコードを流用しないことをClaudeCodeでルール化して、自作したLPテンプレートから0ベースで実装することで品質を担保しました。 以下、今回実装した動きまわりを具体的に。 ・GSAPによるローディングアニメーション ・ページ全体のスクロールをなめらかにする処理（Lenis） ・スクロール連動のパララックス（Heroビジュアルが奥行きを持って動く。GSAP ScrollTriggerで制御し、reduce-motion時は静止） ・施工事例の横スクロール（ライブラリに頼らずネイティブ実装。overflow-xに慣性スワイプとスクロールスナップを効か せています） ・「スクロールできます」と誘導するScrollHintの導入 ・施工事例をタップで開くモーダル（ライトボックス） 併せてprefers-reduced-motion対応・アクセシビリティ・保守性も意識しました。見た目の再現だけで終わらせない実装を心がけています。

💭要件定義・WF・デザイン作成について。 今回のWFは「余白を設計する＝引き算の邸宅」というコンセプトを1ページの情報設計に落とし込みました。 思想（Concept）を先に語ってから施工事例（Works）で証明する構成にして、事例は横スクロールで体験的に見せる。 また、今回はチャレンジでデザインも作ってみましたが正直自分はデザインの知識は乏しく良し悪しの判断がついていないというのが現状だと思っています。 AIとの壁打ちでもあーでもないこーでもないと半端なく迷子になっていました。デザイナーさんすごい。 やってみて「デザインはやっぱり本業のデザイナーさんにお願いするべき」と改めて実感できたので、協業いただけるみなさまと今後とも協力してやっていけたらと思います！

第3回 #デイトラチャレンジ AI編 に応募します！ お題は「AIを活用した架空のハウスメーカーLPを1ページ構築」 架空の注文住宅ブランド「間 -MA-」 AIによる作業ワークフローがかなり形になってきたので、その成果として挑戦することにしました！ 「動きの質」と「実装の品質」に特にこだわりました。 実務と同じ工程・流儀でそのまま使えるようにAIを組みこむことを意識しています。 要件定義からWF、デザイン、実装までのAI活用の概要は以下の通りです。今回実際にかかった工数も記載しています。 ◆要件定義／WF（約2h） Claude Codeで世界観を壁打ちし、その結果をプロンプト化してClaudeDesignでワイヤーフレーム作成 ◆デザイン（約3h） WFをClaude Codeに渡してフォント・色・行間・使うアニメを壁打ち → プロンプト化してClaudeDesignでデザイン出力 ◆画像（約2h） 確定した画像ごとにClaude Codeでプロンプトを作りGoogleFlow（nanobanana2）で生成 ◆実装（約3h） 実案件でも使うLP生成用テンプレートをベースにClaude Codeで実装。CSS記法や内部SEOも整えて品質を担保 実際に触れます（架空のデモサイトです） demo-lp.kurodafolio.com/ma-house/ ※Basic認証あり ID: demo / Pass: demo #デイトラ

AIを活用してWeb制作を進めるようになってから、納品前の検品にAIコーディングを前提とした仕組みを追加しました。 AIのコードは動く状態で出てくるため、確認の抜けにきづけないことがあります。そこで、見る順番を決めて毎回同じ流れで確認するようにしました。 💡チェックリスト概要 (1) 表示・デザイン再現 　→カンプとの目視差分／ダミー・残骸の消し忘れ (2) レスポンシブ・モーション 　→中間幅のリサイズで崩れないか (3) HTML構造・アクセシビリティ 　→見出し階層・alt・ariaの盛りすぎ (4) CSS設計・命名 　→案件の規約との整合／重複定義 (5) 依存・過剰実装 　→頼んでいないlink/script/importがないか ポイントは、軸の並び順＝チェックする順番になっていること。どこから見るか迷いません。 チェックは全部で15項目で、YES/NOで判定できる形でブログにまとめました。AIのコードを確認する時の参考になればうれしいです。 frontend-note.blog/ai-html-css-ch…

プライベート発信🙌 本日発売のジョジョ一番くじ挑んできました。ジャイロ推しの妻とあわせて32回で上位賞制覇。悔いはありません！！！ ジョニィとスローダンサーのセットが良すぎる。SBRさいこー🐎

【🔧フロントエンド制作用のツール集を公開しました⚙️】 案件対応時に自分が使うように作成していたツールを公開することにしました。フロント制作者の皆さまの役に立てば！ kurodafolio.com/tools/ 第一弾は画像の圧縮および変換を行うツールです。 既存の画像圧縮ツール、こんな悩みありませんか。 ・圧縮が強すぎて画像が荒くなる ・圧縮率が選べなくて思った仕上がりにならない ・逆に設定が自由すぎてどれくらい圧縮すればいいのか毎回悩む そこで、フロント実装でよく出る画像の種別ごとに、最適な圧縮率と変換フォーマットをあらかじめ規定しました。 背景・装飾／写真／イラスト・図版／アイコン・ロゴ／スクショ・UI、種別を選ぶだけで迷わず最適化できます。 ・WebP / AVIF 出力（種別により可逆PNG・減色も） ・Before/After の容量比較 ・一括ZIPダウンロード ・処理はブラウザ内で完結（画像をサーバーに送信しません） 無料・登録不要です。よかったら使ってみてください👇 kurodafolio.com/tools/image-co… #フロントエンド #Web制作 #画像最適化

制作のたびに新しい学びがあります。 特に表示速度やアクセシビリティは、これからも磨き続けたいテーマです。今回の経験を次の一歩に活かして、もっと良いものを届けられるよう精進します。 素敵なデザインを形にする機会をくださったこんさん（@design_ikon47）、mikiさん（@miki_webbb）、ありがとうございました🙏🙌 ▼制作実績 kurodafolio.com/works/chinman/ ▼お仕事のご相談はこちら kurodafolio.com/contact/

【制作のポイント】 (1) 受注フォーム（Contact Form 7） 　メニュー別に数量を選べる形にし、受取日は flatpickr（日付選択カレンダー）で「明日以降のみ選択可」に。当日・過去日は選べないようにしました。 (2) メニューの更新しやすさ 　メニューPDFをカスタムフィールド化。差し替え手順書もお渡しし、お店側で更新できる設計に。 (3) 動きのある表現 　パララックスと横スライドは splide で実装。軽さと保守性のバランスを意識しました。 (4) 表示速度への配慮 　画像のWebP化・遅延読み込み、ヒーロー画像の fetchpriority でLCPを軽減。CSS設計は FLOCSS を採用し、後から触りやすい・壊れにくい構造にしています。

【🍖 制作実績を公開しました！】 炭火・七輪 ホルモン焼のお店「珍満」さんのWebサイトで、コーディング・サイト構築・本番適用を担当しました。 kurodafolio.com/works/chinman/ ディレクション：こんさん（@design_ikon47） デザイン：mikiさん（@miki_webbb） おふたりが作り上げた世界観を、できる限り忠実に再現することを意識して実装しました。 ご注文がスムーズに伝わるサイトを目指して、丁寧に形にしています。 実装の中身はリプ欄でご紹介します↓ #Web制作 #WordPress #コーディング

@Aonagi_web 遅ればせながらおめでとうございます！よい30代になりますように！ 体調でご迷惑かけてしまいましたが完全回復しています🥹 ご心配おかけしました🙏 関東越してきたらお酒のみにいきましょー🍻

私事ですが、30歳になりました！！ 自分の長所も弱みも少しずつ分かってきて、やりたいことや挑戦したいことも増えてきました！ 30代最初の1年。 まずは去年の自分を超えられるように頑張ります💪 30代もよろしくお願いします！😊

@naga_design ありがとうございます✨ とはいえやっぱりデザインは本職の方には全然敵いません😇 AIのポン出しデザインは活用しつつ、本格的なデザインはデザイナーさんを頼るべきと再確認できていい経験になりました！

@kurodalog 公開おめでとうございます😀 デザイン、素敵です！！！

【ポートフォリオサイトを公開しました🎉】 フリーランスのWeb制作者として、制作実績・スキル・お問い合わせをまとめたサイトです。あえてCMSを使わずフルスクラッチした静的サイトで、表示速度を強く意識して設計しました。 ぜひご覧ください！ kurodafolio.com #Web制作 #フロントエンド

@ponponco241012 ご無沙汰してます！ありがとうございますうれしいです✨️🥹 AIも使いつつコーディング以外でもやれること増やしていこうと試行錯誤の日々です❤️‍🔥

@kurodalog お久しぶりです。 画面全体から圧倒的なプロフェッショナル感が感じられて、圧巻でした👏👏 全部やられたのがすごすぎます！！

今回、企画・デザイン・コーディング・公開・運用まで一人で一貫して作成しました。 実際に手を動かすと、表示速度はまだ伸びしろがあるなと感じる部分も。公開して終わりではなく、ここから少しずつ改善を続けていきます。 制作のご相談もお待ちしています😊 kurodafolio.com

【制作のポイント】 ・Vite + Handlebars のフルスクラッチ実装で表示の軽さを意識した設計 ・ライト／ダークモード切り替えボタン ・アクセシビリティ配慮（aria・スキップリンク等） ・構造化データ／SEO基盤も自前で用意

【今週の予定・目標】 6/1～6/7 🧑‍💼案件対応 　☐SWELL内LP作成 📘インプット 　☐ ClaudeCode 　☐ Astro習得（Udemy） ⚙️その他 　☐ ポートフォリオ作成 　☐ 技術記事作成 ———————————— おはようございます！早くも6月！今月もよろしくお願いします☀️ 最近は業務委託系の案件を対応させてもらいつつ、時間に余裕があるので業務効率化やインプットに力をいれています。案件の対応範囲を広げていけるようにできるこを増やしていきます💪 あとClaudeCodeの練習もかねて、要件定義→デザイン→コーディングまでワンストップで自分のポートフォリオを作成してみています。今週中には完了予定なのでこちらで報告します！

お久しぶりです！ X低浮上でかなり時間が空いてしまいました 体調を崩して少しお休みをいただいていました。 この5月からまたお仕事に励んでいきますのでよろしくお願いします💪 胃腸まわりでやられていて軽く入院などしていました。案件対応中だった方、ご依頼をお断りしてしまった皆さまにはご迷惑おかけしました💦🙇 くれぐれも皆さまお身体にお気をつけください🥲 現在はすっかり回復し元気にPCに向かっています。コーディング関連でご依頼があればぜひぜひご連絡ください。まずはご相談からでも構いません！ 引き続きみなさまよろしくお願いします！

@__to__my こちらこそです！フォローありがとうございます🙌 今後ともよろしくお願いします😌

@kurodalog こうすけさん、自習室での相席・フォローありがとうございました☺️ Xでもよろしくお願いします✨

こちらデザインを担当させていただきました。 事業を新しく立ち上げるクライアント様、 黒田さんと共に話し合いながら作成しました。 このサービスが多くの方に届くきっかけになれば嬉しいです🙌

【🎾 制作実績公開！】 テニスのストリング張替サービスのLP型小規模WordPressサイトを制作しました！ 今回はディレクションにも携わり、ワイヤーフレーム作成から設計を担当しました。 デザインはchobiさん（@chobi_tt）にご担当いただき、 魅力がしっかり伝わる素敵なビジュアルに仕上げていただきました✨ その世界観を大切にしながら丁寧に実装いたしました。 ✔︎ LINE登録につながる導線設計 ✔︎ サイト規模に適したUIライブラリ（Splide）採用で軽量＆保守性◎ ✔︎ 適切なclamp()活用で柔軟なレスポンシブ対応 ✔︎ 更新しやすいカスタムフィールド設計 ✔︎ 表示速度・内部SEOにも配慮 ✔︎ FLOCSSによる保守性・拡張性を意識したCSS設計 公開後の保守・運用も任せてもらうことになったので、SEO関連の知識も増やしつつ引き続き精進します💪 ぜひご覧ください👇 faststring-racketsports.com #Web制作 #WordPress #コーディング