デザイナーからディレクターに肩書きを変えて約2年。直接デザインを作る機会は減りましたが、インプットは変わらず続けています。

コンセプトの立案や情報設計、デザインレビュー、社内外への提案など、デザイナーでなくとも「デザインを選ぶ力」と「より良くする意見」を求められる場面はたくさんあります。デザインのプロジェクトに関わる以上、どんな肩書きであっても、審美眼を鍛え続ける必要があります。

またデザイナーに丸投げするのではなく、チームで良い仕事をしてプロジェクトを成功させるためにも、ディレクターとしてインプットは欠かせないと思っています。

この記事では、わたしがよく見ている「パーツ別」ギャラリーサイトを9つ紹介します。

サービスサイト・LP・ウェブサイト全般

まずは国内外のSaaSサービスサイト、LP、その他のサイトで使用されるデザインパーツをまとめたサイトを5つ紹介します。

Parts.

Parts. – パーツ別Webデザイン集

SaaSのサービスサイトやLPのデザイン実例をまとめた、日本のギャラリーサイトです。

ヘッダーやCTAなど多くのサイトで使われるセクション・パーツのを参照できます。日本語サイトが基本のため、見出しやキャッチコピーの参考にもなります。

UI LIBRARY

UI LIBRARY – 参考になるWebデザインをUIごとにまとめたギャラリーサイト

コーポレートサイトやメディアサイトなど、さまざまなサイトのパーツをまとめた日本のギャラリーサイトです。

セクションごとの分類やPC・SPの表示切り替え、デザインシステムのまとめ、お気に入り登録機能などもあり、活用できる場面の豊富さが魅力。

姉妹サイトにバナーギャラリーメルマガギャラリーECギャラリーCSSアイコンマテリアルサイトもあります。

saaspo

Saaspo – The best SaaS Web Design Inspiration

海外のSaaSサービスサイト・LPをまとめたギャラリーサイトです。

ページによってPC・SP・OGPの切り替え表示ができ、たまにワイヤーフレームが見れるものもあります。OGPだけのまとめページも珍しくておもしろい。

イギリスのデザイナー・デベロッパーさんが運営されていて、ご本人が得意とされているWebflowの制作実例が多く掲載されています。

Landbook

Landbook – website design inspiration gallery

世界中の優れたサイトを集めたギャラリーサイトです。ナビゲーションから「Sections」を選ぶことで、パーツ別にデザインを参照できます。

わたしは「Websites」でサイトを見ることがほとんどですが、パーツ別でも見れるのでご紹介。海外サイトをセクションごとに絞り込んで閲覧できます。

サインインするといいねができるようになり、お気に入りのデザインを保存できます。

Collections – Awwwards

Collections – Inspirational Resources For Web Designers & Developers

ウェブデザインのアカデミー賞的な存在、Awwwardsにもパーツ別でデザイン実例を参照できるページがあります。

世界中のハイクオリティーなサイトから、最新技術のトレンドつかんだり、WebGLやThree.jsといった高度な技術を使ったサイトを見てインスピレーション得たりしています。

コンポーネント特化:The Coponent Gallery

The Component Gallery

ウェブサイトやアプリのデザインに欠かせない、コンポーネント単位でデザインをまとめたサイトです。

ボタンやバッジといった細かいパーツのデザイン参照できます。「これは何と呼べばいいんだっけ?」とコンポーネントの命名に迷ったときも助かります。デザインシステムのまとめページもあります。

ナビゲーション特化:Navbar Gallery

Navbar Gallery – Navigation Design Inspiration

ナビゲーションのデザインに特化したギャラリーサイトです。世界中のウェブサイトから、見やすくて使いやすいメニューの実例を参照できます。

固定メニューやドロップダウン、フルスクリーンメニュー、パンくずリストなど、さまざまな種類のメニューを絞り込んで閲覧できます。

フッター特化:Footer

Footer – The only footer gallery on earth.

フッターのデザインに特化したギャラリーサイトです。世界中のウェブサイトから印象的で工夫されたフッターを参照できます。

タイポグラフィやイラスト、カードを使ったデザインなど中心となるスタイルで絞り込んで閲覧でき、見ているだけでワクワクします。PC・SP両方のデザインを見れるのもありがたいです。

CTA特化:CTA.gallery

CTA.gallery – The Best Call-to-Action Inspiration for Designers

CTA(Call to Action)のデザインに特化したサイトです。世界中のウェブサイトから、効果的でコンバージョンにつながるCTAが集められています。

CTAはサイトの成果を左右するもっとも重要な要素のひとつ。良いCTAをまとめて見れることで、デザインやコンバージョンにつながる設計のヒントが得られます。

まとめ:デザイナーに丸投げしないために

わたしが日常的に参照する、国内外のパーツ別ギャラリーサイトを9つ紹介しました。

冒頭でもお伝えしましたが、直接デザインを作成しないディレクターの立場でも、デザインの視点や審美眼は鍛え続ける必要があります。良いデザインをたくさん見て、「なぜこれが良いのか」を考える習慣が、自分の成長と仕事の質につながっていきます。

プロジェクトの全プロセスにまたがって提案や意思決定をするディレクターこそ、デザインのインプットを怠ってはいけない。そんな思いで、日々学んでいます。

この記事が、デザインの引き出しや視点を増やしたいディレクター、デザイナー、エンジニアの役に立ちますように。今後も良さげなサイトを見つけたら追加していきますね。

ABOUT ME
Fuyuna
都内のデザイン会社勤務のディレクター・エディター|元デザイナー・元理学療法士|三重県出身|インテリア・本・週末のカフェモーニングが好き