はじめに

「これ、一から試行錯誤するより、正解を見て覚えた方が早いかも」――TODOリストのチェックボックス作りにハマった新人ぷらむんが、そう気づいた話です。

会社で自称マスコットキャラをやってるのに、社内で一番空気が読めない、ぷらむんです🐯

最近ぷらむん、個人開発の練習でシンプルなTODOリストを作っていたんですけど、見た目の部分で思いのほか苦戦したんですよね。

機能自体はちゃんと動くようになったのに、デザインの細かい部分になると急に手が止まってしまって…。

AIに聞いてもなぜか変な仕上がりになって、結局CSSの学習は「正解を見て覚えた方が早い」って気づいたので、その気づきをシェアしていきます！

ーこんな人に読んでほしいー

🟠 CSSは書けるのに、実際に画面を作るとなんか垢抜けない仕上がりになる
🟠 デザインの細かい部分をAIに聞いても、思った通りの見た目にならないことがある
🟠 「これくらい」の見た目の調整に、想定より時間を溶かしてしまう
🟠 コピペに頼るのは良くない気がして、なんとなく気が引ける

🐯AIに聞いてコードをもらったら、なぜかチェックボックスが右側に…

TODOリストのチェックボックス、タスクの文字の左側につけたかっただけなんですけど、AIに聞いて出てきたコードをそのまま貼ったら、なぜかチェックボックスがタスクの右側にきてしまったんです。

「え、そこじゃない」って思わずツッコミそうになりました。

🐯位置の修正だけで、思ったより時間がかかった

たかが位置だけの話だと思って軽く直そうとしたんですけど、CSSのどこを触れば直るのか分からなくて、あちこち触っては崩れて…を繰り返してるうちに、気づいたら結構な時間が経っていました。

機能に関わる部分ならまだしも、見た目の微調整にこんなに時間がかかるのかと、地味に凹みました。

🐯「正解を見て覚えた方が早いのでは」と気づいた

ここで、ぷらむん、はっとしました。

こういう見た目の細かい調整って、AIに一から聞いて試行錯誤するより、すでに完成してる正解を見て、そのまま覚えた方が早いんじゃないか、と。

🐯先輩に相談したら「Uiverse」というサイトを教えてもらった

そのことをプラ美先輩に相談してみたら、「Uiverse」というサイトを教えてもらいました。

＞＞UiverseのHPはこちら

👩‍💼：プラ美先輩
「ボタンとかチェックボックスとか、よくあるUI素材のコードがそのままコピペで使えるサイトだよ。HTMLとCSSだけで完結してるから、フレームワークの知識がなくてもすぐ使えるのがいいところ」

実際に見てみると、ボタン・カード・トグル・ローディングアニメーションなど、4,000種類以上のUI素材が並んでいて、気に入ったものをそのままコピペするだけで、一気にそれっぽい見た目になりました。

似たようなサービスに、Tailwind UI・Flowbite・shadcn/ui・DaisyUI・MUIなどもありますが、これらは基本的にTailwind CSSやReactなど、特定のフレームワークが前提のものが多いです。

その点Uiverseは素のHTML/CSSだけで完結しているので、フレームワークをまだ触ったことがない未経験者・初心者でもそのまま使えるのが大きなメリットだと感じました。

ライセンスもMITライセンスなので、クレジット表記なしで商用のプロジェクトにもそのまま使えるのも安心ポイントです。

🐯ただコピペするだけじゃなくて、コードを少し読んでみたら学びがあった話

せっかくなので、コピペする前にコードを少しだけ覗いてみることにしました。すると、チェックボックスとテキストの並び順がCSSの書き方ひとつで決まることが分かって、「あ、さっきの右にズレてた原因ってこれだったのか」と繋がったんです。

全部を理解してから使おうとすると大変ですが、気になったUI素材だけ少し覗いてみる、くらいの気軽さで十分学びになるなと感じました。

コピペに罪悪感を持つ必要はなくて、「使う→気になったら覗いてみる」を繰り返すことで、いつの間にか自分でも書ける引き出しが増えていく気がしています。

ただ、いずれはぷらむんも「AIが書いたコードをチェックする側に回る仕事」をしたいので、きちんとコードをコピペした時には
なぜそれが動いたのかをコードを見て理解する
癖をつけたいと思います！

👨：プラ太郎先輩
何も考えずにコピペだけしてたら、いずれAIに淘汰されるエンジニアが出来上がってしまうぞ！

との助言も受けたので、ぷらむんはしっかり原因と流れを理解できる虎になりたいと思います。

ー今回学んだことをまとめるとー
🟠 見た目の細かい調整は、一から試行錯誤するより正解を見て覚える方が早いこともある
🟠 UI素材のコピペは悪いことじゃない、罪悪感を持たなくていい
🟠 Uiverseは素のHTML/CSSだけで完結していて、初心者でもそのまま使いやすい
🟠 コピペで終わらせず、気になった部分だけ覗いてみると学びに変わる

見た目のデザイン、センスがないと諦めていた部分もありましたが、頼れるものにはどんどん頼りつつ、少しずつ自分の引き出しも増やしていきたいと思います。

🦁おわりに

CSSのセンスがないと思い込んでいましたが、頼れるものに頼ることで、悩んでいた時間がうそみたいに解決しました。

PRUMのエンジニアの多くは未経験からの採用です。新人の失敗や気づきも含めて発信できる環境が気になった方は、ぜひコーポレートサイトも覗いてみてください。
▶ PRUM採用ページ

エンジニアの方に役立つ記事をまとめたサイトも運営しています。よければこちらもどうぞ。
▶ エンジニアに役立つ記事サイト

また今度、ぷらむんの奮闘記をシェアします。ここまで読んでくれてありがとうございました🐯