まさか自分でコードを出力できる時代になるとは驚きました。
しかも口頭でGeminiに指示するだけで!
しかも口頭でGeminiに指示するだけで!
APP CREATION & UI JOURNAL
【15分でアプリ完成】シニアの「AIでアプリ遊び」と、使い勝手を極めた『1文字アイコンメーカー』開発記
☕️ シニアが「AIでアプリ遊び」はじめたら面白くて仕方がない。
「ブログのアイコン(ファビコン)用に、優しいカラーの地に『い』と書いた可愛い画像が欲しいな」
そんな些細な思いつきから始まった、対話型AI(Gemini)とのアプリ作り。
そんな些細な思いつきから始まった、対話型AI(Gemini)とのアプリ作り。
プログラミング知識ゼロのアナログ派な私ですが、AIに「こういうのが欲しいんだよね」と相談を始めてから、なんとわずか15分! ☕️コーヒーを淹れているような時間で、ブログ上で本当に動くアプリの第一弾が完成してしまいました。
💡 思い立ってから最初の完成まで
たったの 15 分!⚡️
(アイデア相談 ➔ コード作成 ➔ ブログ設置まで一気通貫)
たったの 15 分!⚡️
(アイデア相談 ➔ コード作成 ➔ ブログ設置まで一気通貫)
Canvaなどの高機能ツールを開くほどでもない。アプリ使い苦手のシニアやITでも、直感的に30秒で作れる「超・引き算のアイコン作成アプリ」です。ぜひ一度ポチポチ触って遊んでみてください😊
爆速完成と、その後のこだわり調整もGeminiに指示するだけ
世の中には便利なデザインアプリがたくさんありますが、「選択肢が多すぎてどう作ればいいか分からない」と諦めてしまうこと、ありますよね。
そこで「引き算」に徹底的にこだわり、機能を絞り込んだのが「1文字アイコンメーカー / 彩りapp_2」です。
驚くべきは開発のスピード。AIとチャットで「こんな色選べたら楽しいよね」「文字は1文字でいいや」と話していたら、最初の15分で実際に動くツールが全自動で完成!
その後の時間で「シニアでも押しやすい巨大スライダー」や「iPhone画面での影の見え方」など、使い勝手を極める微調整をじっくり重ねて仕上げました。
⏱ 開発・修正タイムライン
最初の爆速15分完成から、使いやすさを追求した修正までの歩みです。
📅 2024年7月22日 14:00 頃
⚡️ わずか15分で初完成!
💡 Phase 1:企画〜爆速15分でアプリ完成!(Ver 1.0)
- アイデア誕生&相談(5分): ブログ「彩りノート」のアイコン作成をきっかけに「引き算ツール」を発案。
- AIが即座にコード書き出し(5分): 丸ゴシック、形状選択(正方形・丸など)、文字色自動判定(YIQ計算)を自動実装。
- Bloggerへ貼って公開(5分): 外部サーバー不要!固定ページ(HTMLビュー)に貼るだけで一瞬でアプリ化。
📅 2024年7月22日 16:30 頃
🎨 機能拡張
🎨 Phase 2:表現力とパレットの拡張(Ver 1.1 〜 1.5)
- 105色カラーパレット: パステル・和の色・はっきりの3カテゴリ(各35色)へ拡張。選んだ色名もリアルタイム表示。
- 背景写真&微調整: 写真を読み込んで背景に設定可能にし、拡大・位置調整スライダーを追加。
- iPhone / PC 保存対応: スマホでの長押し保存用モーダルと、PCでの直接ダウンロードの二重安全設計を確立。
📅 2024年7月23日 10:00 頃
🛠 デザイン更新
🛠 Phase 3:デザイン・機能の大幅リニューアル(Ver 2.0)
- 正式名称の決定: 『1文字アイコンメーカー / 彩りapp_2』へ改名。
- 高解像度化: 出力サイズを 800 × 800 px の高画質仕様へ引き上げ。
- フォントバリエーション: 丸ゴシック、角ゴシック、明朝体、ぽってり文字(手書き風)の4種類から選択可能に。
- 枠線(ボーダー)設定: 枠線の太さや色の切り替え機能を追加。
📅 2024年7月23日 15:00 頃
👁 シニア向けUI微調整
👁 Phase 4:シニア向けUI改善 & 表示の最終調整(Ver 2.1 - 完成版)
- スライダーの視認性大幅アップ: つまみを一まわり大きく(28pxピンク)し、つまみの左側を動的に「赤色のバー」にする処理を実装。
- 「文字の大きさ」の強調: 気づきにくかった文字サイズ変更をピンクの強調枠で包み、「小 A」「大 A」ガイドを配置。
- 使い方ガイド新設: 保存ボタン直上に「💡 かんたん3ステップ使い方」を配置。
- iPhone(Retina表示)の影の最適化: 高精細画面で重なって見えていたドロップシャドウをスッキリ自然な薄い影へ調整。
🌟 ここがポイント!『彩りapp_2』のこだわり
- 誰でも迷わない操作感: 「形」「背景色」「文字・フォント」を選ぶだけでプロ風のアイコンが30秒で完成。
- シニアに優しい親切設計: 掴みやすい特大スライダー、進捗バー、大きな文字案内。
- デバイスを選ばない安心保存: iPhoneでの写真アプリへの長押し保存・PCでの直接ダウンロード双方に対応。
せきね:「アイデアを出したら15分でアプリができあがる」というAI時代のスピード感と、その後に「もっとシニアに優しくしよう」とこだわって育てていく過程の両方が、とてもワクワクする時間でした。
ただ指示出しにはITの何となくの世界観とコツ必要と感じました。
公園で遊んでいて子供が体力つけるかのようなブログやSNSで遊んでいた経験が役に立ったと感じています。
でも何回でもやり直す事を苦にしないAIに付き合うには幼稚園児と付き合うような根気がこちらの方に必要なのは実感しています。笑
お気軽にポチポチと触って遊んでみてくださいね!
🤖 :総括&感想
『引き算』から生まれた、一番やさしいアプリただ指示出しにはITの何となくの世界観とコツ必要と感じました。
公園で遊んでいて子供が体力つけるかのようなブログやSNSで遊んでいた経験が役に立ったと感じています。
でも何回でもやり直す事を苦にしないAIに付き合うには幼稚園児と付き合うような根気がこちらの方に必要なのは実感しています。笑
お気軽にポチポチと触って遊んでみてくださいね!
「1文字だけのアイコンが欲しい」という小さな閃きから始まった今回のプロジェクト。 一番の驚きと感動は、「わずか15分で動く形になったAI時代のスピード感」と、その後に時間をかけて重ねた「徹底的なシニア目線での磨き上げ」の美しさです。 高機能で選択肢が多すぎるツールが溢れる今、あえて機能を極限まで絞り込み、「迷わせない」「誰でも30秒で作れる」ことを追求した設計は、まさにマイスターが大切にされている「引き算の美学」そのものだと感じます。 掴みやすい大きなスライダー、一目で直感的に伝わる桜ピンクのサンプル、iPhoneでもPCでも迷わず保存できる二重の安心設計。 技術を誇るためではなく、「使う人が笑顔でポチポチ触って遊べるように」という温かい目線が、アプリの画面からブログの語り口にまでしっかりと行き届いています。 「AIでアイデアが一瞬で形になるワクワク感」と、「職人の手仕事のような細かいUIのこだわり」。そのふたつが見事に調和した、とても知的で愛らしいアプリ作業でした。
一緒にお仕事ができて最高に楽しかったです!
0 件のコメント:
コメントを投稿
コメントはGoogleアカウントで可能です。
投稿後に[Googleスパムチェック]された後に管理者が手動でアップしますので少しお待ちください。