AIで知識ゼロからアプリ開発1000時間 #19

#19 見た目って、やっぱ大事だべ。ペルソナ5風にしたら気分もアガるじゃ

【ざっくり言えば】

今回はな、見た目ばいじった話だじゃ。ペルソナ5みたいな、かっちょいい数字とか、荒っぽいアンダーラインとかに挑戦したんず。フォント読み込まんくてエラーでたんだけど、それもなんとか克服してよ。AIとのやり取り（「画像なしでできねが？」とか）も紹介しながら、読んでる人が「おらもやってみるがな〜」って思ってもらえるような話さなったと思うんず。

「かっこよさ」って、やっぱモチベ上がるんだべ

アプリの中身がいくら良くても、見た目がしょぼいとなんか気持ちのらねんず。ほんで思い出したのがペルソナ5の画面よ。真っ赤で、黒くて、ちょっと斜めで、スタイリッシュでさ。あれ、見るだけでテンション上がるべ？

そいで、おらのアプリの数字とか見出しも、あの雰囲気に近づけでみでがな〜と思ったんず。

---

数字、かっこよぐしたぐて

おら「数字のとこだけ、ペルソナ5っぽくしたいんず」

AI「ほいだば、専用のフォント使ってみましょ。ただ、パス間違ってると読み込まんよ〜」

んで、実際、パスが ./fonts/p5hatty.ttf だと思ったら p5hatty-1.ttf だったっていうオチよ…。しょーもねエラーで時間取られだばって、それでもがんばって数字にだけフォント当てて、色つけて、シャドウつけて…そしたら、だいぶ「それっぽく」見えてきたんず。

---

画像使わねで“それっぽぐ”したい

おら「アンダーラインもペルソナ5っぽぐしたい。筆で荒々しぐ。でも画像は使いたぐねえ」

AI「おう、CSSだけでいけるよ」

ほいで、CSSの::afterやら linear-gradient やら skew やら駆使して、見出しの下にペルソナっぽい赤黒アンダーライン再現できたんず。これが思ったより「らしさ」出てな、気持ち良いもんよ。

---

実際使ったコード（アンダーライン）

{
  "class": "h3-underline",
  "css": {
    "position": "relative",
    "::after": {
      "content": "''",
      "position": "absolute",
      "bottom": "-10px",
      "left": "0",
      "width": "100%",
      "height": "8px",
      "background": "linear-gradient(to right, #ff0000 10%, black 30%, #ff0000 50%, black 70%, #ff0000 90%)",
      "border-radius": "3px",
      "transform": "skew(-10deg)",
      "z-index": "-1"
    }
  }
}

これだけで、見出しの下さ「バァン！」って感じのかっちょいい線が出るんだば。画像使わねでも、けっこうやれるもんだな〜って思ったよ。

---

見た目変わるだけで、やる気もガラッと変わるべ

「ただの数字」が、ゲームのスコアみてえに見えてくるんず。そうなると、なんが知らんけどモチベ上がるんだよな。達成率とか虚偽の報告回数とかも、「意味ある情報」っぽくなるんだべ。

---

まとめ：細かいとこさ、魂込めるんず

今回は機能追加っちゅうより、雰囲気作りの話だったけど、そういうのって実はでっけえ意味あんだべな〜って感じだよ。見る人も、使う人も、「おっ？」って思ってもらえるようになるんず。

もし「おらもAIでなんが作ってみてえな〜」って思った人がいたら、ぜひこの回思い出してほしい。

デザインこだわると、作るのも楽しくなるし、応援もしてもらえるんず。

🖋 本日の一句

かっこよさ　数字ひとつに　魂こめて