【AI × 個人開発】ゼロから始めるアプリ制作 #02：UI設計と素材準備：スマホベースで画面構成を考える

2025-06-18 | lain

ゼロから始めるアプリ制作。２回目となる今回は、UI設計と素材準備：スマホベースで画面構成を考えます。

タグ： #アプリ開発#スマートフォン#スマホ#初心者#UI#設計#素材#AIと開発#AI開発支援

【Next.js #37】Three.js + MMD 時計アプリに動画壁紙を実装 — mp4をIndexedDBへ保存してループ再生する

2026-03-13 | lain

Three.js + MMD 時計アプリに、静止画壁紙に加えて mp4 の動画壁紙機能を追加。ドラッグ＆ドロップで IndexedDB に保存し、Wallpaper UI から選択、無音ループ再生、起動時復元、動画サムネ表示まで実装した記録。

カテゴリ： Next.js

タグ： #Three.js#JavaScript#IndexedDB#Video Texture#UI#MMD#Wallpaper

[Next.js #35] MMD時計アプリの設定UIを実装 — 壁紙・時計色・床シェーダー・MotionAssets保存対応

2026-03-12 | lain

Three.js製MMD時計アプリに設定UIを実装。アナログ時計・デジタル時計・壁紙・床シェーダー・MotionAssetsの各種設定をGUIから変更し、localStorage と IndexedDB で保存・復元できる構成を整備しました。

カテゴリ： Next.js

タグ： #Three.js#MMD#IndexedDB#localStorage#WebGL#GLSL#Shader#UI

[Next.js #28] MMD時計アプリに Wallpaper カスタマイズ機能を追加 — 背景画像・Tint・UI切替

2026-03-07 | lain

MMD時計アプリの背景壁を単色から画像対応へ拡張し、Wallpaper UIから壁紙・Tint Color・Texture ON/OFFを切り替えられるようにした実装メモ。Three.jsのMeshStandardMaterialに画像テクスチャを適用しつつ、onBeforeCompileで既存シェーダー演出も維持。さらに画面サイズに応じて背景壁が追従するようリサイズ処理も追加した。

カテゴリ： Next.js

タグ： #Next.js#Three.js#MMD#UI#Wallpaper#Shader#Texture#WebGL

[Three.js #27] MMDのMorph検証UIを実装 — Rigパネルで表情を直接確認

2026-03-07 | lain

Three.js + MMD の時計アプリに Rig パネルを追加し、Bone / Morph 一覧表示、検索、Morph の Apply / Reset を実装。Morph が効かない原因を UI 上で切り分けながら、actor.mesh への適用で表情変化を確認できるようにした記録。

カテゴリ： Next.js

タグ： #Three.js#MMD#PMX#Morph Target#UI#Rig#デバッグ

[Next.js #26] Three.js×MMD：複数モデル表示とactor管理、順番トーク制御を実装

2026-03-06 | lain

Next.js×Three.js×MMDで作った3D時計に、複数MMDモデルの同時表示と actor ベース管理を導入。MMDAnimationHelper の個別化、UIからのモデル追加・削除、talkトグル、複数キャラを1人ずつ順番に喋らせる制御までを整理する。

カテゴリ： Next.js

タグ： #Next.js#Three.js#MMD#UI#JavaScript

[Next.js #25] Three.js×MMD：モデル情報スナップショット→UI反映→デバッグ機能まで一気に固める

2026-03-05 | lain

3D時計UIは“レイアウト”より先に“文字”で完成度が決まる。巨大な時刻表示・HUD・右パネルを崩さず、数字/曜日/天気を作品っぽく整えるフォント設計とCSS変数の管理をまとめる。

カテゴリ： Next.js

タグ： #Three.js#MMD#Typography#UI#CSS

[Next.js #24] 3D時計UIを“作品”に変えるタイポグラフィ設計（Three.js×MMD）

2026-03-04 | lain

3D時計（Next.js×Three.js×MMD）にUIパネルを実装したので、次は“フォントで仕上げる”。数字・曜日・HUD・パネルを統一するためのタイポグラフィ方針、サイズ階層、文字間、影、可読性、そしてCSS変数による運用をまとめる。

カテゴリ： Next.js

タグ： #Three.js#MMD#UI#Typography#CSS#DOM

[JavaScript] Three.js RenderTarget ミニマップを“ゲームUI”にする（円形マスク＋フレーム＋時計表示）

2026-01-31 | lain

前回の RenderTarget + サブカメラ方式ミニマップを、円形マスク（alphaMap）とUIフレーム重ね、CanvasTexture で日時・称号テキストまで表示する“ゲームHUD”へ進化。renderOrder / depthTest / toneMapped のハマり所も整理する。

カテゴリ： JavaScript

タグ： #Three.js#WebGL#MiniMap#RenderTarget#SubCamera#UI#CanvasTexture#alphaMap#HUD

カテゴリ：UI