バイブコーディングとは
こんにちは、フリーランスデザイナーのちふねこです。
今日は、バイブコーディングでも使える、デザインが垢抜けるコツというのをお話ししていきたいと思います。
皆さん、バイブコーディングやってますか?
巷で流行ってるバイブコーディングですけれども、どうでしょうね。
まだ全然聞いたことない方も、もしかしたらいるかもしれないんですが、
最近はもうAIに指示するだけで、コーディングをやってくれるっていう。
その指示の仕方も全然、専門的な言葉とか知識がいらなくって、
本当にこういうツール作りたいんだけど、作ってみてっていう感じでできちゃうんですよ。
例えば、最近私が練習で作ってるもので言うと、QRコード生成ツール作ってとか、
あとはパスワード生成ツールとか、
あとは、初めに自分でオリジナルで作ってみたのが、
ディスコードの装飾コードを一覧でまとめたサイト作ってみたいな。
そういう、何だろう、日本語、自然な日本語で全然細かい指示しなくても、
ある程度一発でそういうサイト作ってくれちゃうんですよね。
そういうのをバイブコーディングって言ったりするんですけど、
そういったものをする時に、より、何だろう、もう一歩デザインをブラッシュアップしたいとか、
自分が作ったものがちょっとまだ素人っぽいんだよなとか、
初期設定感抜けないなみたいな、
そういった感じで悩まれてる方に今日のお話は参考になるのではないかと思います。
バイブコーディング以外にもね、そもそもデザインのコツではあるので、
全然、ただ普段作ってるSNSバンナーとかあれば、
そのデザインにも活かせる内容になっていると思います。
デザイン改善のコツ1
早速デザインが垢抜けるコツ、
今日は2つご紹介するんですけど、
まず1つ目は絵文字をアイコンに差し替える。
2つ目はタイトルで個性を出す。
それぞれ詳しくご紹介していきます。
まず1つ目の絵文字をアイコンに差し替える。
これはどういうことかというと、
バイブコーディングやったことある方は分かると思うんですけど、
バイブコーディングで作ったサイトだったりツールって、
随所に絵文字を散りばめてくれるんですよ。
散りばめるというか、ちゃんと見出しの始めに
ワンポイントとして絵文字を入れてくれてたり、
サイトだったら3つの特徴とかを表示しているところに
3つの象徴となる絵文字を載せてくれたり、
っていう差し絵的なポジションで絵文字を使ってくれるんですよね。
ただこれのちょっと残念なところが、
デザイン的な観点でいうと、絵文字を乱用すると色数が増えちゃうっていうのと、
テイストが混在しちゃうっていうデメリットがあります。
どういうことかというと、基本的にデザインをする時のコツって、
何か強調、強弱をしっかりつける。
メリハリって言ったりもするんですけど、
しっかり伝えたい内容、強調するポイントと、
そうじゃない部分の強弱をはっきりする。
かつそれを強くした部分がしっかり目立つように、
他は違和感をなくすっていう考え方が大事になってくるんですよ。
なので強弱をつけるとか、
統一感をしっかり作って違和感をなくすみたいな、
そういう強弱と統一感っていうのが大事になるんですけど、
今回の絵文字の話に戻すと、
絵文字っていろんな色が基本的に使われてるじゃないですか。
それによって色数が増えちゃうんですよ。
デザインの画面の中に。
それが例えば斎藤だったり鶴のメインカラーがしっかり決まってて、
ブルーとかで統一されてる中に赤とか緑とかいろんな色が使われた絵文字が散りばめられてると、
せっかく配色整ってたのに、なんだろうチグハグな色が差し込まれて、
せっかく作った世界観とか印象が弱くなっちゃうっていうことがあるんですよ。
だからそういう色数を下手に増やすとそれがノイズになって、
本来強調したいというか伝えたい印象だったりメッセージの邪魔をしちゃうっていうことがあるんですよね。
なのでそれを回避するためにも、そういう色をたくさん使ったものとか、
最近の絵文字ってパソコンとかで表示すると立体的?なんだろう3Dっぽいものだったりするじゃないですか。
そういったものってフラットなサイト上で変に悪目立ちするっていうこともあるので、
絵文字よりはやっぱりフラットなイラストアイコンとかで統一した方が、
違和感もなくなってそのデザイン全体が垢抜けるっていうことにつながります。
じゃあ具体的に5コーディングでどうやってそのイラストアイコン使えばいいのかっていうと、
おすすめが一つありまして、
Googleが提供しているフリーアイコンのサイトがあるんですよ。
Googleフォントっていうサービスを知っている方は、それの同じ系統でアイコンバージョンがありまして、
その使い方も同じ感じで、
フォント自体をダウンロードしなくても、専用のそれを使う用のコードをコピペして、
それをサイトとかに貼り付けると、そのアイコンだったりフォントが表示されるっていう仕組みになっていて、
それが使えるので、そのGoogleのフリーアイコンのサイトのURLを5コーディングでAIに教えて、
ここから適切なアイコンを選んで絵文字と差し替えて、みたいなそういう指示をするだけで勝手に選んで使ってくれます。
本当に賢いですよね。
これするだけでかなり統一感出てくるので、ぜひ試してみてください。
このGoogleのフリーアイコンサイト、またこれすごく便利でですね、ちょっと語り尽くせないんですけど、今回は割愛するんですが、
普通のデザインでも使えるので、気になる方ちょっと覗いていろんな機能を触ってみてください。
デザイン改善のコツ2
URLは一応概要欄の方に貼っておきます。
続いてコツ、デザインが垢抜けるコツ2つ目は、タイトルで個性を出すなんですけど、
これは具体的に言うと、まずタイトルってサイトだったりツール作った時に上の方にどういうサイトなのかみたいなタイトルが大体出てくるじゃないですか。
その部分で個性を出すっていうことなんですけど、具体的に言うとタイトルのフォントを変える。
フォントを初期のシンプルなゴシックタイとかじゃなくて、しっかり作りたい印象、そのサイトに合ったイメージのフォントを使うっていう感じで個性を出すと、
一気に、なんだろう、デフォルト感がなくなって、ちゃんとこだわってる感が出て垢抜けるっていうことが起きます。
なのでこのフォントについても、まさに先ほど紹介したGoogleフォントっていうフリーで誰でもフォントを使えるサイトがあるので、
そこから好きなフォント選んで、バイブコーディングする時に指示してもいいですし、別に具体的なフォントわからなくても、
AIにこんな感じのもっと可愛らしいフォントにして、とかデジタルっぽいフォントにして、みたいなそういう指示するだけでタイトルフォント変えてくれるので、そういうのも試してみるといいかなと思います。
あとはフォントの種類だけじゃなくて文字感を少し広くする。文字と文字の間を広めにするっていう指示もおすすめです。
これのいいところはそのタイトル以外の情報とより差別化ができるんですよね。
見た目の文字感広げるだけでゆったりしてタイトルっぽさがより出るので、タイトル部分はフォントを変えてみるっていうのと文字感を少し広めにしてみるっていうのはぜひ試してみてください。
今日ご紹介した内容を実際に私も活用して調整していった例をツイッターで投稿したので、そのリンクも概要欄の方に貼っておきますので、気になる方ぜひ見比べながらその変化、ここ変えたんだっていうのを確認してみていただければよりわかりやすいかなと思います。
以上です。今日も最後まで聞いてくださりありがとうございます。
