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

フリーのWebコーダー｜東京・埼玉｜業務委託3社｜LP・Webサイト／WordPressテーマ制作対応｜前職SEの経験を活かし、システム全体を見据えた実装で課題解決に貢献します｜趣味：テニス🎾 将来はWebを通じてテニス業界に関わる環境づくりに携わるのが夢｜ご依頼はこちらから✉[email protected]

[黒田こうすけ｜Webコーダー @kurodalog]

【🔧フロントエンド制作用のツール集を公開しました⚙️】

案件対応時に自分が使うように作成していたツールを公開することにしました。フロント制作者の皆さまの役に立てば！
https://t.co/QlWLMMz02H

第一弾は画像の圧縮および変換を行うツールです。
既存の画像圧縮ツール、こんな悩みありませんか。

・圧縮が強すぎて画像が荒くなる
・圧縮率が選べなくて思った仕上がりにならない
・逆に設定が自由すぎてどれくらい圧縮すればいいのか毎回悩む

そこで、フロント実装でよく出る画像の種別ごとに、最適な圧縮率と変換フォーマットをあらかじめ規定しました。
背景・装飾／写真／イラスト・図版／アイコン・ロゴ／スクショ・UI、種別を選ぶだけで迷わず最適化できます。

・WebP / AVIF 出力（種別により可逆PNG・減色も）
・Before/After の容量比較
・一括ZIPダウンロード
・処理はブラウザ内で完結（画像をサーバーに送信しません）

無料・登録不要です。よかったら使ってみてください👇
https://t.co/YrInUk9cZr

#フロントエンド #Web制作 #画像最適化

[黒田こうすけ｜Webコーダー @kurodalog]

制作のたびに新しい学びがあります。

特に表示速度やアクセシビリティは、これからも磨き続けたいテーマです。今回の経験を次の一歩に活かして、もっと良いものを届けられるよう精進します。

素敵なデザインを形にする機会をくださったこんさん（@design_ikon47）、mikiさん（@miki_webbb）、ありがとうございました🙏🙌

▼制作実績
https://t.co/xgXTqQeF5x

▼お仕事のご相談はこちら
https://t.co/rOUN9FZ1KM

[黒田こうすけ｜Webコーダー @kurodalog]

【🍖 制作実績を公開しました！】

炭火・七輪 ホルモン焼のお店「珍満」さんのWebサイトで、コーディング・サイト構築・本番適用を担当しました。
https://t.co/SwElKZQahw

ディレクション：こんさん（@design_ikon47）
デザイン：mikiさん（@miki_webbb）
おふたりが作り上げた世界観を、できる限り忠実に再現することを意識して実装しました。

ご注文がスムーズに伝わるサイトを目指して、丁寧に形にしています。
実装の中身はリプ欄でご紹介します↓

#Web制作 #WordPress #コーディング

[黒田こうすけ｜Webコーダー @kurodalog]

【制作のポイント】

(1) 受注フォーム（Contact Form 7）
　メニュー別に数量を選べる形にし、受取日は flatpickr（日付選択カレンダー）で「明日以降のみ選択可」に。当日・過去日は選べないようにしました。

(2) メニューの更新しやすさ
　メニューPDFをカスタムフィールド化。差し替え手順書もお渡しし、お店側で更新できる設計に。

(3) 動きのある表現
　パララックスと横スライドは splide で実装。軽さと保守性のバランスを意識しました。

(4) 表示速度への配慮
　画像のWebP化・遅延読み込み、ヒーロー画像の fetchpriority でLCPを軽減。CSS設計は FLOCSS を採用し、後から触りやすい・壊れにくい構造にしています。

[黒田こうすけ｜Webコーダー @kurodalog]

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

[黒田こうすけ｜Webコーダー @kurodalog]

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

[黒田こうすけ｜Webコーダー @kurodalog]

【ポートフォリオサイトを公開しました🎉】

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

https://t.co/kLh5twDTdP

#Web制作 #フロントエンド

[黒田こうすけ｜Webコーダー @kurodalog]

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

[黒田こうすけ｜Webコーダー @kurodalog]

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

https://t.co/kLh5twDTdP

[黒田こうすけ｜Webコーダー @kurodalog]

【制作のポイント】

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

[黒田こうすけ｜Webコーダー @kurodalog]

【今週の予定・目標】 6/1～6/7

🧑‍💼案件対応
　☐SWELL内LP作成

📘インプット
　☐ ClaudeCode
　☐ Astro習得（Udemy）

⚙️その他
　☐ ポートフォリオ作成
　☐ 技術記事作成

————————————

おはようございます！早くも6月！今月もよろしくお願いします☀️
最近は業務委託系の案件を対応させてもらいつつ、時間に余裕があるので業務効率化やインプットに力をいれています。案件の対応範囲を広げていけるようにできるこを増やしていきます💪

あとClaudeCodeの練習もかねて、要件定義→デザイン→コーディングまでワンストップで自分のポートフォリオを作成してみています。今週中には完了予定なのでこちらで報告します！

[黒田こうすけ｜Webコーダー @kurodalog]

お久しぶりです！
X低浮上でかなり時間が空いてしまいました

体調を崩して少しお休みをいただいていました。
この5月からまたお仕事に励んでいきますのでよろしくお願いします💪

胃腸まわりでやられていて軽く入院などしていました。案件対応中だった方、ご依頼をお断りしてしまった皆さまにはご迷惑おかけしました💦🙇
くれぐれも皆さまお身体にお気をつけください🥲

現在はすっかり回復し元気にPCに向かっています。コーディング関連でご依頼があればぜひぜひご連絡ください。まずはご相談からでも構いません！

引き続きみなさまよろしくお願いします！

[黒田こうすけ｜Webコーダー @kurodalog]

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

[chobi@Webデザイン @chobi_tt]

こちらデザインを担当させていただきました。

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

[黒田こうすけ｜Webコーダー @kurodalog]

【🎾 制作実績公開！】

テニスのストリング張替サービスのLP型小規模WordPressサイトを制作しました！

今回はディレクションにも携わり、ワイヤーフレーム作成から設計を担当しました。
デザインはchobiさん（@chobi_tt）にご担当いただき、
魅力がしっかり伝わる素敵なビジュアルに仕上げていただきました✨
その世界観を大切にしながら丁寧に実装いたしました。

✔︎ LINE登録につながる導線設計
✔︎ サイト規模に適したUIライブラリ（Splide）採用で軽量＆保守性◎
✔︎ 適切なclamp()活用で柔軟なレスポンシブ対応
✔︎ 更新しやすいカスタムフィールド設計
✔︎ 表示速度・内部SEOにも配慮
✔︎ FLOCSSによる保守性・拡張性を意識したCSS設計

公開後の保守・運用も任せてもらうことになったので、SEO関連の知識も増やしつつ引き続き精進します💪

ぜひご覧ください👇
https://t.co/FSeRuU67k0

#Web制作 #WordPress #コーディング

[黒田こうすけ｜Webコーダー @kurodalog]

@maxim_president ありがとうございます！
クライアントの希望に応じて既存テーマを使うかオリジナルで作るか適切に使い分けられるようになりたいですね😄

[黒田こうすけ｜Webコーダー @kurodalog]

委託先の制作会社様からSWELLの案件をいただいたので復習がてら自前のSWELLでローカル構築してポチポチ

オリジナルテーマのサイト構築とは違って、SWELLの持つ特色を活かした実装方法を柔軟に提案できるように知識を増やしていきます

写真は、あったか座布団をモニター裏にひいたらまんまと居座ってくれた猫様
最近の作業中の癒しです🐱

[黒田こうすけ｜Webコーダー @kurodalog]

【今週の予定・目標】 2/9～2/15

🧑‍💼案件対応
　・小規模WP構築案件
　　☐ コーディング
　・SWELL内LP作成
　　☐ コーディング

📘インプット
　☐ 新規エフェクト作成 & スニペット登録

⚙️その他
　☐ 技術記事作成

————————————

最近はSWELLの案件に連続で携わらせていただいています。
オリジナルのコーディングを減らして、極力SWELLの機能を使うことでユーザー自身があとから修正できるような実装を心がけています。

幅の広い提案をするためにもWordPressの個別テーマについても知識広げていきます💪

[黒田こうすけ｜Webコーダー @kurodalog]

@8760stories そこそこおばあちゃんなので基本眠そうな顔してます😴

[黒田こうすけ｜Webコーダー @kurodalog]

＼ 新たに業務委託契約を結びました🎉 ／

制作会社様と新たなご縁をいただきました🙌
直接メールをいただいて面談という流れだったのですが、なんとXを見てご連絡をいただけたとのこと🥹

うれしいと同時に、最近X低浮上だったことを反省。。
また定期的に発信していきますので引き続きみなさまよろしくお願いします！

最近もありがたいことに連続して案件いただいて忙しく活動しています。
2月はまだスケジュールに余裕ありますのでご依頼あればお気軽にご相談ください💪💪💪