【Webデザイナー必見】Webデザインのアイデアの出し方を解説します

こんにちは。

この記事では、一目を惹くWebデザインのアイデアを出す方法を紹介していきます。

まず、Webデザインといっても、作成したいサイトによってデザインの種類も変わってくるかと思います。

この記事ではどんな種類のサイトも対象にした、カッコいいユーザーインターフェイス（UI）やビジュアルレイアウトの着想を得る方法を紹介します。

企業ホームページや個人ポートフォリオを作りたい方、独自にWebサービス・アプリを開発したい方など、ぜひ参考にしてみてください。

※本記事でお伝えるするのは、魅力的なユーザーインターフェース(UI)とレイアウトを構想する方法です。Figmaでデザインを形にしたり、HTMLやCSSでコーディングする方法については解説していません。

①Webデザイン特化サイト

一番手っ取り早いのがこの方法です。

Webデザインの権威のようなサイトが日本語英語を問わずたくさん存在します。

ただ、当然英語の方が情報量が多いので、英語で検索するのをオススメします。

例えば、英語で「web design websites」などと検索すると、Webデザインを羅列してくれてるサイトがたくさん出てくるはずです。

ここではWebデザインで参考になるサイトをいくつかピックアップします。

・siteinspire.com

→シンプルで美しいUIがめっちゃ参考になります

・awwwards.com

→表彰経験のあるWebデザインが散りばめているサイトです。どれもめちゃくちゃ美しいです。トップページで「websites」と検索orフィルタかけることをオススメします。

 ・dribbble.com

→海外のデザイナーの中では言わずと知れた超有名サイトです。正直ここだけ参考にしていれば間違い無いくらい情報量は多いと思います。

---

②画像生成AIの活用

画像生成AIを使うのも個人的にオススメです。筆者は毎月サブスクしています。

最近だと、MidjourneyやDALL・E3が有名どころかなと思います。どちらも月額で1,000~2000円くらいです。

使い方は簡単。英語で適切なプロンプト（指示）を出すと、それに応じた画像が返ってきます。4つ返ってきます。

例えば、Midjourneyで以下のようなプロンプトを入力してみました。

（掲示板のための、シンプルで美しいUI）

simple and beautiful UI for forum websites.

すると、こんな画像が返ってきました↓

文字はおかしくなっていますが、それでも十分デザインの参考にはなると思います。

出力される画像は大抵4つなのですが、記事の関係上他の画像は省略します。他の画像もめちゃくちゃ綺麗でどれも参考になりました。

---

③動画で学ぶ

Youtubeなどで動画からWebデザインのインスピレーションを得ることもできます。

これもやはり日本語より遥かに英語の情報量が多いので、英語で検索することをオススメします。

あくまでもデザインを参考にするため、言葉はわからなくても大丈夫かと思います。

 オススメのYoutuberを挙げてみます。

・DesignCourse

→登録者100万人超えのWebデザイン界では有名な方です。コーディングも参考になります。

・developed by ed

→「dev ed」でお馴染みのユーモア溢れるYoutuberです。何を専門としたエンジニアかは存じ上げていないですが、彼の作り上げるWebサイトはどれもデザインが非常に美しいです。才能でしょうか。

・Bring Your Own Laptop

→Udemy（オンライン学習サイト）では絶大な人気を誇るデザイナーです。デザインを作る過程も非常に参考になると思います。

今回紹介するのは3人だけですが、参考になるYoutuberはもっとたくさんいます。

---

いかがだったでしょうか。

Webデザインを作りたいけど、そもそもアイデアが浮かばない、といった方は上記の手段でいろんなところを漁るのがデザインの着想を得る一番の近道だと思います。