
デザインのアイデア出しや画像生成など、デザイン業務にAIを活用する機会が増えてきました。
AIにデザインの指示を出すとき、「なんとなくこんな感じ」と伝えるよりも、デザインの特徴を表す言葉やUIの名称などを使って具体的に説明できると、よりイメージを伝えやすくなり便利になります。
そこで今回は、デザインの基本やUI・UX、配色などを学ぶ際に役立つWebサイトをご紹介します。
1. お役立ち知識:デザインの4原則|デザインパートナー
デザインの基本を改めて学びたいときにおすすめなのが、「デザインの4原則」について紹介しているこちらの記事です。
「近接」「整列」「反復」「対比」という、デザインの基本となる4つの原則について、具体例を交えながら解説されています。
普段Webサイトを制作していると、「なんとなくここは余白を空けたほうがよさそう」「この部分は目立たせたほうがよさそう」と感覚的に判断することがあります。
こうした感覚をデザインの原則として整理してみることで、自分のデザインを見直すきっかけにもなります。
デザインの基本を復習したい方はもちろん、これからデザインを学びたい方にもおすすめです。
また、デザインの基礎の書籍についても紹介されているので是非ご一読ください。
2. NameThatUI
「このUIの名前って何だろう?」と思ったことはありませんか?
そんなときに便利なのが「NameThatUI」です。
Webサイトに使われているUI要素やコンポーネントを、画像から探して名前を確認することができます。
例えば、普段何気なく使っているメニューやボタンなども、正式な名称を知ることで「この部分をこうしたい」と説明しやすくなります。
AIにデザインについて説明するときにも、UIの名前を知っていると役立ちそうです。
「見たことはあるけれど、名前がわからない」というUIを調べるときに活用してみてはいかがでしょうか。
3. AIでデザイン指示に役に立つ専門用語集
AIにデザインについて指示するとき、「もう少しおしゃれに」「今っぽい感じで」といった曖昧な表現だけでは、なかなか思った通りの結果にならないことがあります。
こちらの記事では、レイアウトやデザインのスタイル、トレンドなど、AIへのデザイン指示にも活用できる専門用語が紹介されています。
「こんな雰囲気のデザイン」というイメージを具体的な言葉に置き換えるときの参考になります。
知らなかったデザイン用語を知るきっかけにもなるので、AIを使うときだけでなく、デザインの引き出しを増やしたいときにも役立ちそうです。
4. Color Hunt
Webサイトのデザインを考えるとき、毎回悩むのが「色の組み合わせ」ではないでしょうか。
そんなときに参考になるのが「Color Hunt」です。
世界中のユーザーが投稿したカラーパレットを見ることができ、気に入った配色のカラーコードをコピーすることもできます。
「この色を使いたいけれど、組み合わせる色が決まらない」というときに、たくさんの配色例を眺めてみるだけでも参考になります。
人気のカラーパレットを見ることもできるので、最近の配色の傾向を知りたいときにも便利です。
まとめ
AIをデザインに活用する場合、AIに何をしてもらうかだけでなく、自分の考えているデザインを言葉で説明する力も大切になります。
今回ご紹介したサイトは、それぞれ違った角度からデザインの知識を身につけることができます。
- デザインの基本を学ぶ → デザインの4原則
- UIの名前を調べる → NameThatUI
- デザインを表現する言葉を増やす → デザイン専門用語集
- 配色のアイデアを探す → Color Hunt
AIを使う・使わないにかかわらず、デザインについて「知っていること」「説明できること」を少しずつ増やしていくと、日々の制作にも役立つのではないでしょうか。
「このデザインって何ていうのだろう?」と思ったときや、デザインの引き出しを増やしたいときに、ぜひ活用してみてください。
また、デザインについての書籍については下記の過去記事にて紹介させていただいているので、見ていただければと思います。








