＜本記事のターゲット層＞
- Blazorでデザインがうまくいかない人
- デザインが苦手な人
はじめに
エンジニアの皆様こんにちわ！！
さて今回はデザインが苦手であろうエンジニアの皆様に生成AIを使ったデザイン改善方法についてご紹介したいと思います。
あっというまに終わるデザインの改善
やり方は非常にシンプルです。
自分が「ださい」、あるいは「もう少しなんとかならないかな」と思っているデザイン部分をSnniping Toolなどで撮影し、生成AIにお願いするだけです。「良い感じのデザインにしたいです。いい感じのデザインをいくつか提案してください」と。
そうするとこれが・・・・
こうなります(笑)
そしてこちらのモーダル表示できなかった画像が・・・
このようにモーダル表示できるようになります(笑)
デザイン改善の試し方
これだけでは話が終わってしまうのでもう少し説明をすると、生成AIは最初にお願いした段階ではデザインサンプル、またはHTML & CSSでの提案をしてきます。
こちらはそれを検証する必要があるので、HTML & CSSで吐き出された内容をファイルにコピペして、デザインをブラウザで表示させる必要があります。
そのときに便利なものがあります。
エディターはVS Codeをお勧めいたします。これからのVS CodeはAIエディターとして成長していくので、触ったことがない方は今の内になれておいたほうがよいでしょう。
VS Code拡張機能については、Auto Rename Tag、indent-rainbow、Live Serverをお勧めいたします。
それぞれ、役割は以下の通りです。
- Auto Rename Tag：タグをリネームしたときに、対になるタグの名前を自動で変更してくれます。
- indent-rainbow：インデントに色がつき、html/cssを読みやすくしてくれます。
- Live Server：右下にある「GO Live」をクリックすると、localhost表示してくれて、html/cssを保存するだけで画面をリフレッシュしてくれるので、デザイン調整の作業が捗ります。
これらを駆使して、生成AIが作成したデザインを確認したり、微調整を行い、再度生成AIに効率的に指示をすることで、デザインが苦手なエンジニアのデザイン改善を効率的にサポートしてくれます。