開発ブログ Tailwind v4の余白がわからない！mb-6の中身「calc(var(–spacing) * 6)」を調べた話
お薬タイマーの開発中、Tailwindの余白がなぜかうまく動かず悩みました。mb-6の正体「calc(var(--spacing) * 6)」のしくみと、余白が変わらないときの原因、私が使った調整方法を初心者目線でまとめています。
開発ブログ
開発ブログ 
開発ブログ URLからモックアップ画像を作る機能｜canvasが汚染された状態から画像プロキシを使った方法で解決
私が作ったポートフォリオ用のモックアップを作成するアプリ「Mockup Generator」。開発ブログ↓一番欲しかったのはURLからモックアップを作り、PNG画像で出力する機能だったのですが、CORS（Cross-Origin Resou...
開発ブログ 個人開発Webアプリを7つ公開して、かかった費用は月いくら？サーバー代とドメイン代の内訳
個人開発のWebアプリを7つ公開して、実際にかかったサーバー代とドメイン代を公開します。サブドメイン運用にした理由、格安サーバーから乗り換えた経緯、料金比較までまとめました。
開発ブログ ユーザーの声で追加した機能｜「操作方法がわかりにくい」を改善した話
ユーザーの声をきっかけに、お薬タイマーへ操作ガイドを追加した開発エピソードを紹介。実際に使ってもらうことの大切さについて解説します。
開発ブログ AIに丸投げしてはいけないと思った理由｜便利だからこそ「理解すること」が大切
AIに開発をすべて任せて感じた課題を紹介。丸投げのリスクや、コードを理解しながら活用することの大切さについて、実体験をもとに解説します。
開発ブログ AIが書いたコードを読むのは意外と大変｜便利だけど理解には時間がかかる
AIが生成したコードは便利ですが、読み解くのは意外と難しいこともあります。実際に開発で感じた、AIコードのメリットと苦労した点を紹介します。
開発ブログ WebアプリでLocalStorageを採用した理由｜ログイン不要で手軽に使える仕組みを選んだ話
WebアプリでLocalStorageを採用した理由を開発者目線で解説。ログイン不要のメリットや、データ消失リスクへの対応、注意事項について紹介します。
アプリ紹介 画像を最短で目的のサイズへ編集できる無料トリミングツールをつくりました【Image Crop Studio】
切り抜くだけを速く終えたくて、トリミング特化の無料ツール「Image Crop Studio」をつくりました。登録不要で、画像はブラウザ内だけで処理されます。サムネイルのプリセット付きです。
MedTimer お薬タイマー 開発記録 元看護師がつくった、次に飲める時間だけがわかるお薬タイマー｜Webアプリ【開発ログ】
「あと何時間で薬が飲めるか」だけを確認できる無料タイマー「MedTimer」をつくりました。元看護師の視点で項目を絞った理由と、初めて実装したログイン機能についてまとめています。
アプリ紹介 ビフォーアフター画像を残したくて、写真コラージュツールを自作した話【Photo Timeline】
美容ケアの変化を残したくて、写真を並べるだけでビフォーアフター画像がつくれる無料ツール「Photo Timeline」をつくりました。開発のきっかけと、写真を外に出さない設計にした理由をまとめています。
開発ブログ Canvasのプレビューと書き出し画像がズレる…実際にハマった原因と解決方法
Canvasでプレビュー画像と書き出し画像がズレる原因と解決方法を実体験をもとに解説。座標・倍率・Canvasサイズの考え方まで初心者向けに紹介します。
アプリ紹介 自分専用のスケジュール管理アプリを作った話｜毎日続けられる仕組みが欲しかった
自分専用のスケジュール管理アプリを開発した理由をご紹介。三日坊主を防ぐ工夫や、Firebaseを使ったデータベース化など、日常で活躍している個人開発アプリについて書きました。
MedTimer お薬タイマー 開発記録 お薬タイマーをアプリ化したい｜アプリを作るためにかかる費用｜調べてみて分かった現実とこれからの目標
お薬タイマーのアプリ化を考えて調べたことをまとめました。iOSアプリ公開に必要な費用や個人開発で感じた現実、今後の目標についてご紹介します。
開発ブログ 「テキストファイルとして貼り付ける機能」を諦めた話｜QuickAiMemo開発の裏側
QuickAiMemoで実装したかった「テキストファイルとして貼り付ける機能」を断念した理由をご紹介。ブラウザの制約と、個人開発で感じた難しさをまとめました。
開発ブログ QuickAiMemoを作ったきっかけ｜AIとのやり取りをもっと快適にしたかった｜各機能について
QuickAiMemoを開発したきっかけをご紹介。AIへの指示を書いているときに感じた小さなストレスを解消するために作った軽量メモアプリです。
開発ブログ DotGothic16の使い方｜ゲーム風デザインにおすすめのGoogle Fonts
DotGothic16の使い方を解説します。Google Fontsで無料利用できるゲーム風・レトロ・サイバー風デザインにおすすめのフォントです。導入方法やCSSの設定、デザインのコツも紹介します。
開発ブログ 【カラーコード付き】サイバー風デザインにおすすめの配色4選
サイバー風デザインにおすすめの配色を5パターン紹介します。カラーコード付きなので、ゲーム風・AI・近未来デザインのWebサイト制作にそのまま活用できます。
開発ブログ 【コピペOK】CSSでガラス風UI（Glassmorphism）を作る方法
CSSだけでガラス風UI（Glassmorphism）を作る方法を解説します。backdrop-filterを使った透明感のあるデザインや、ぼかし・枠線・影の付け方をコピペOKのサンプル付きで紹介します。
開発ブログ CSSでサイバーパンク風タイトルを作るテクニック【ゲーム風デザインを再現】
CSSでサイバーパンク風タイトルを作る方法を解説します。ネオンカラーやグラデーション、フォント選び、文字装飾など、ゲーム風・近未来風デザインを作るテクニックを紹介します。
開発ブログ 【コピペOK】CSSだけでネオン文字を作る方法｜ゲーム風・サイバー風デザインを作ろう！
CSSだけでネオン文字を作る方法を解説します。text-shadowを使った基本の光る文字から、ゲーム風・サイバー風デザインまで、コピペで使えるサンプルコード付きで紹介します。