愛犬パピちゃんのイラスト

こんにちは、Katz Kawai です

Web 開発を楽しみながら、モダンなフロントエンドや PWA を試している個人サイトです。

このサイトについて

KKLab は、Web 制作の練習と実験を記録するための小さな個人サイトです。 派手なものより、軽くて速く、きちんと動くものを目指しています。

作ったものは少しずつ GitHub に置いています。気になることがあれば お問い合わせからどうぞ。

作品

GitHub Pages で公開している制作物です(33件)。

LP

浜名湖うなぎ LP(NVIDIA)

静岡県浜名湖産うなぎの魅力を紹介するランディングページ。

サイト

浜名湖うなぎ紹介サイト(Kimi)

浜名湖の自然・歴史、うなぎの特徴・調理法・名店・アクセスを掲載した静的サイト。

アプリ

シンプル電卓(Flet)

Python 製フレームワーク Flet で作ったシンプルな電卓アプリ。

LP

浜名湖うなぎ LP(Qwen3)

浜名湖うなぎを紹介するランディングページ。

サイト

浜名湖うなぎ紹介サイト(HY3)

浜名湖うなぎを紹介する静的サイト。

LP

浜名湖うなぎ 和モダン LP(OpenCode)

和モダンのシングルページ・コンセプトサイト(HTML/CSS/JS, ゼロ依存)。

サイト

浜名湖うなぎ文化サイト(Composer)

静岡・浜名湖のうなぎ文化を紹介する静的 Web サイト。

サイト

たい焼き店「浪花屋」紹介サイト

大阪・天満橋のたい焼き店「浪花屋」の静的紹介サイト。

サイト

浜名湖うなぎ 和モダンサイト(MiniMax)

浜名湖うなぎを紹介する和モダンデザインの静的サイト。

LP

浜名湖うなぎ LP(DeepSeek V4)

静岡・浜名湖うなぎの魅力を紹介するランディングページ。

LP

名古屋たい焼き 金鯱堂 LP

大須の架空たい焼き店「金鯱堂」のランディングページ。

サイト

浜名湖うなぎ観光サイト(Kiro)

観光客向けに浜名湖うなぎの魅力を伝える静的紹介サイト(HTML/CSS/JS)。

アプリ

電卓アプリ(Flet)

Python 製フレームワーク Flet で作った電卓アプリ。

アプリ

TODO アプリ(Flet)

Python 製フレームワーク Flet で作った TODO 管理アプリ。

クリエイティブ

KKLab ロゴアニメーション(Flet)

ピクセルアート文字が散らばって再集合する Flet 製ロゴアニメーション。

サンプル

Web ページサンプル集

さまざまな Web ページのサンプル集。

クリエイティブ

ml5.js サンプル集(19 本)

ml5.js v1.3.1 のサンプル集(19 個)のライブデモ。

クリエイティブ

p5.js チュートリアル・ゲーム集

書籍『p5.js 包括的チュートリアル』(河合勝彦)のサンプルゲーム集。

ポートフォリオ

ポートフォリオサンプル 02

HTML/CSS/JS と GitHub Pages による静的ポートフォリオサイト。

ポートフォリオ

ポートフォリオサンプル 01(Dark Glass)

ヒーロー・作品・スキル・連絡先を備えたダークグラス調の 1 ページ。

アプリ

ワンコお世話 TODO アプリ

ワンコの世話に関する TODO アプリ。

アプリ

フレンチブルドッグ TODO アプリ

フレンチ・ブルドッグをモチーフにしたかわいい TODO アプリ。

スライド

名古屋観光スライド(Reveal.js)

名古屋城・熱田神宮・なごやめしなどを紹介する Reveal.js スライド。

サンプル

Web サンプル集(Claude)

Claude で作成した Web ページのサンプル集。

サイト

浜名湖ウナギ公式サイト

🍱 静岡県浜名湖の伝統的なウナギ養殖を紹介するレスポンシブ対応サイト。

サンプル

Web サンプル集(Codex)

Codex で作成した Web ページのサンプル集。

アプリ

名古屋市 区割り地図

GeoJSON を用いた名古屋市の区割り地図。

クリエイティブ

画像カルーセル

JavaScript による画像カルーセルのサンプル。

ポートフォリオ

ポートフォリオサンプル(Grok)

Grok で作成したポートフォリオサイトのサンプル。

スライド

名古屋スライド(Claude)

名古屋を紹介するスライドプレゼンテーション。

SSG

Jekyll サンプルサイト

静的サイトジェネレーター Jekyll で構築したサイト。

SSG

MkDocs ドキュメント

MkDocs で構築したドキュメントサイト。

SSG

Hugo サンプルサイト

静的サイトジェネレーター Hugo で構築したサイト。

取り組んでいること

技術そのものを楽しむのが好きです。

モダンフロントエンド

HTML / CSS / JavaScript の素の力で、軽量で読みやすい UI を作ります。

PWA

Service Worker とマニフェストで、オフラインでも動くアプリ的な体験を。

パフォーマンス

遅延読み込みや最小限の依存で、速く軽いサイトを意識しています。

アクセシビリティ

セマンティック HTML とキーボード操作に配慮した作りを心がけています。

よく使う技術

HTML5 CSS3 JavaScript PWA React GitHub Pages 静的サイト