サイト・デザイン

ウェブデザインの参考にしたい!7つの海外ギャラリーサイト

ウェブデザインの参考にしたい!7つの海外ギャラリーサイト

海外のデザインは、なぜかカッコイイ

ふと「あぁ、日本のサイトって微妙だなぁ……海外のサイトってカッコいいなぁ、イケてるなぁ」と海外のデザインにやられてしまうこと、ありませんか?
勢いで、そのまま海外的なものにかぶれていってしまったり。

「カッコいい」は主観的なものかも知れませんが、たとえば、
アパレルブランドで輸入物が多いとか、
外車が人気だとか、
海外家電がシンプルでカッコいいだとか、
本棚にちょっと洋書を置いておくとおしゃれだとか……
なんだかんだで「海外もの」に影響されちゃうことがありますよね。

ウェブサイトに関しても同じことがいえて、パッと見て「あ、素敵」とか「あぁ……なんて洗練されているんだ」とか感じちゃうことが多いのは、やっぱり海外のサイトだったりします。

ユーザービリティや、ユーザーエクスペリエンスの設計という意味でも、「視覚からガツンとくる魅力的なデザイン」で作られたウェブサイトは記憶に残りますし、何より頭がもうそのサイトを「好き」になってて、気がついたらそのサイトの「味方」になっちゃいませんか?

デザインの源はアイデアだとして、そのアイデアの源は「知識」なんだと仮定すると、海外のカッコいいウェブサイトをウォッチするのは、いわゆる守破離の「守」です。
何事もまずは「知る」ことから。
引き出しが多いに越したことはない。
ということで、海外のギャラリーサイトをピックアップしてみました。

7つの海外ギャラリーサイト

本当は70個でも足りないくらいだと思いますが、キリがないので、まずは7つをご紹介。
見ていくとわかりますが、デザインが好きな人であれば、1つのサイトだけでも滞在時間(見とれちゃう時間)がえらいことになるハズです。

1. AWWWARDS

https://www.awwwards.com/
AWWWARDS

Aから始まるので最初にもってきました。
このサイトは「インパクトってなんだ?」と迷った時におすすめです。
見せ方というか魅せ方が凝ってるサイトがてんこ盛りです。

サイト内で賞を競い合ってるみたいで、ギャラリーサイトをクリックして下層に潜ると、ユーザーが採点してる様子が。

2. Collect UI

http://collectui.com/
Collect UI

このサイトは「デザインってのは見た目のことを言ってるんじゃあない」ということを教えてくれる、非常にカバー範囲の広いギャラリーサイトです。
いきなりずら~っといい感じの画面が並んでくれてて、もうそれだけで「はぁはぁ」しちゃいますが、なかんずく「ナビゲーション」が秀逸です。
あ、なかんずくってのは「特に」って意味です。

ナビゲーションがこれまた細かくて、「アカウント登録」だとか「ランディングページ」だとか「お会計」だとか、まさにUIを集めたよ!という感じ。
それぞれのシーンごとにギャラリーサイトを抽出できちゃいます。
これは本当に勉強になります。自分のために、日本語のサイトで同じことをしようと思うくらい。

3. design shack

https://designshack.net/gallery/
design shack

デザイン小屋って意味なのかな?
こちらはシーンやテーマというよりも、もっと即物的な絞り込みが特徴のサイトです。
構造(たとえば、ブログとかコーポレートサイトとか、ウェブマガジンとか)で絞り込んだり、使われている色で絞り込んだり、「探す」ことを手助けしてくれる機能が備わっています。

アイデアの引き出しを増やすためのお勉強タイムなときは「画面にでてくるキャプチャをひたすら眺め続ける」というのがよいと思いますが、仕上がりのイメージに近いモノからひらめきを拾いたい場合には特にお役立ちな機能です。

掲載されているギャラリーサイトをクリックして下層に潜ると……似たデザインのサイトを教えてくれるのでした。これじゃあエンドレスだよ……見終われないよ……

4. html inspiration

http://www.htmlinspiration.com/
html inspiration

こちらはサイト内で「評価」があるので、「結局みんなはどれがいいっていってるの?」という視点でチェックしたいときなんかにおすすめです。
たとえばTOP10というカテゴリがあったりしますが……10サイトと言わず、もっと見せてくれ!ってなっちゃうこと請け合いです。
さすが海外だぜ。

ちなみに、ギャラリーサイトをクリックして下層に潜ると……下側に「関連するサイト」がズラズラ出てきて、やはりエンドレスに見続けるはめになります。

5. siteinspire

https://www.siteinspire.com/
siteinspire

こちらも、他のギャラリーサイト同様、いわゆる「絞り込み」ができますが、その切り口が細かく、そして大量にあります。

たとえば「どんなスタイル?でかい文字でインパクトがある系?それとも可愛い感じ?」とか、サイト構造だと「コミュニティ系?それとも動画がメインのやつ?」とか、あるいはそのサイトが何を扱ってるかだとか。
なんせ絞り込みの中にある項目の数が多くて、中には「Web 2.0」とかも。

他のサイトと決定的に違うのは「探したいテーマは1つだけじゃなく掛け合わせることもできる」という機能。
時間がないときなんかは「でかい文字を使ってる、インテリア関係のサイト」なんていう、かなりわがままなオーダーもまかり通ってしまいます。

これまた、ギャラリーサイトをクリックして下層に潜ると「似たサイトを紹介するね」とやってくれるので、あとはもうエンドレスです。

6. The FWA

https://thefwa.com/
The FWA

これは時間があるときにダラダラ眺めるのがおすすめなサイト。
なんだか時系列でいろんなサイトを紹介してくれますが、「あ!知ってる~」って言っちゃうような企業やサービスがそこかしこに。
絞る機能は……ないのか。ダメじゃないか!そんなことされたら、ずっと見ちゃうじゃないか!

7. WEBDESIGN INSPIRATION

http://www.webdesign-inspiration.com/
WEBDESIGN INSPIRATION

最後は、見てる人の気持ちに寄り添ってくれようとするサイトです。

さて今日もチェックしますか!とパトロールを開始しようとすると
「メルマガ登録するといいよ!今月のベスト10をお知らせするよ?」
というポップアップが出てきます。
普段は邪魔に感じることが多いアラートも、こんなに洗練されたデザインで出されてしまっては、あまり嫌な感じがしません。

▼ちなみに、こんな感じでアラートされます。
WEBDESIGN INSPIRATION

こちらも「絞り込み」は充実しています。構造、色、内容(ジャンル)、あとは見せ方。
見せ方は、「クラシカルな」とか「文字ベース」とか、「パララックス」とか、ついつい絞ってみたくなる要素が満載です。

気持ちに寄り添ってくれてるのは……「気になるサイトがあったら、すぐに見にいってくれていいからね!」と、サムネイル画像から直接リンクできること。
もったいつけたりしません。
ちなみに下層に潜ると?もしかして?あわわわわ……やはり「きっとこんなサイトも好きだと思うよ!」と、おすすめを羅列してくれるのでした。
今夜もエンドレス。

まとめ

これだけギャラリーサイトが充実してるのに、世の中にはTumblrやPinterest、Instagramなんかもあって、さらに充実させてこようとするので、もうパトロールが終わる気がしません。

デザインが好きで、きれいなサイトを見るだけでもごはん3杯はいける……なんて人は、時間のあるときにゆっくりとどうぞ。
時間のない人は、絞り込みが優れているサイトで、ササーっとインスピレーションを得るのがおすすめです。