【Webデザイン参考】おしゃれな海外まとめサイトご紹介
![](https://soranoco.design/wp/wp-content/uploads/2020/10/1335_01.jpg)
こんにちは、まきすずです。
Webデザインに慣れていない方はよく聞く話だと思いますが、初心者はほかのWebデザインをよくみて、盗むことが大切!みたいな内容、聞きませんか?
![](https://soranoco.design/wp/wp-content/uploads/2020/12/maki_left.png)
![](https://soranoco.design/wp/wp-content/uploads/2020/12/maki_left.png)
![](https://soranoco.design/wp/wp-content/uploads/2020/12/maki_left.png)
わたしもWebデザインに慣れていない時は、よく「ほかのサイトをみて勉強して」という言葉を先輩から言われておりました。
わたしは日本のWebデザインをすることが多いので、日本人が作った日本人好みのサイトをよくみるのですが、時折海外サイトもみてトレンドなどの把握もしっかりとしています!
![](https://soranoco.design/wp/wp-content/uploads/2020/12/toshi_.png)
![](https://soranoco.design/wp/wp-content/uploads/2020/12/toshi_.png)
![](https://soranoco.design/wp/wp-content/uploads/2020/12/toshi_.png)
海外サイトは、日本サイトにはないおしゃれさがあるんですよね。
英語だから余計かっこよく感じてしまうというのもありますが、技術的にもすごいサイトも多く、勉強になることがたくさんです!そのため、今回はわたしが普段からよくみているサイトをご紹介したいと思います!
海外サイトは気晴らし程度でもいいので、たまにみるとすっごく勉強になるのでおすすめです!
Awwwards
![](https://soranoco.design/wp/wp-content/uploads/2020/10/c50aeeb5b7b96b07bbe05e396f3deafb.png)
![](https://soranoco.design/wp/wp-content/uploads/2020/10/c50aeeb5b7b96b07bbe05e396f3deafb.png)
なんと!投票のできるサイト集。そのため、受賞歴があるような世界でもトップクラスのWebデザインをみることができ、次元の違いを感じるサイトが集まっている印象です。Webデザインは、JavaScriptなどの動きも含めてのデザインだと思うのですが、そういった細かい演出も気を抜いていないものばかりです!
デザイン性が高すぎるので、基本は目の保養程度になりますが、、、やっぱりこういったレベルの高いサイトをみておくのは感性の面でも大切かなと思っています!
![](https://assets.awwwards.com/assets/images/pages/about-certificates/awwwards.jpg)
![](https://assets.awwwards.com/assets/images/pages/about-certificates/awwwards.jpg)
Lapa Ninja
![](https://soranoco.design/wp/wp-content/uploads/2020/10/6045180546e690e9b23d372a7cc91c37.png)
![](https://soranoco.design/wp/wp-content/uploads/2020/10/6045180546e690e9b23d372a7cc91c37.png)
海外サイトの中で、わたしが1番みているサイト!上のサイトに比べると、真似しやすく実践レベルで参考になるサイトが集まっています!おしゃれなトレンドを取り入れたいとき、洗練されたWebデザインが必要なときに重宝します。
海外サイトは、日本人向けサイトにないような細かいディテールのところをよく盗めるなと思っているのですが(アイコンの使い方だったり、影の付け方だったり、色の使い方だったり)、このサイトに集まっているサイトはそういった実践的な部分が参考になるので、日頃から役立つサイト集です!
![](https://cdn.lapa.ninja/assets/social/og-image.jpg)
![](https://cdn.lapa.ninja/assets/social/og-image.jpg)
Land-book
![](https://soranoco.design/wp/wp-content/uploads/2020/10/47fafa908f1c631062bff8e7ed52a569.png)
![](https://soranoco.design/wp/wp-content/uploads/2020/10/47fafa908f1c631062bff8e7ed52a569.png)
アカウントを持てばお気に入り登録もできるので、気に入ったサイトをためておくことができます。上記Lapa Ninjaと同様、実践的に参考になるサイトが集まっているので、見やすく取り入れやすい参考Webデザインがたくさんあります。
良いサイトがたくさん掲載されていますが、Lapa Ninjaの方が個人的に好きなUIということでLapa Ninjaをよくみていました。でも、こっちのサイトでもトレンドの参考やディテールの参考探しに重宝しています!
![](https://land-book.com/images/og-image.webp)
![](https://land-book.com/images/og-image.webp)
Code My UI
![](https://soranoco.design/wp/wp-content/uploads/2020/10/bfd719333a896383adf54f619fbbd9b3.png)
![](https://soranoco.design/wp/wp-content/uploads/2020/10/bfd719333a896383adf54f619fbbd9b3.png)
Webデザインというよりも、ボタンやアニメーションなどのパーツ単体での参考サイト。こうゆう単体のパーツが以外と便利だったりします!
ボタンひとつとっても、たかがボタン、されどボタン。ちょっと凝るだけでもデザインが格段に上がるので、気を抜けない大切な部分です。そのようなときには、このサイトをちょっと覗いて良いアイディアを探してみてください。
Collect UI
![](https://soranoco.design/wp/wp-content/uploads/2020/10/bbf9ccb8d3c7b8e09749db61e21dde24.png)
![](https://soranoco.design/wp/wp-content/uploads/2020/10/bbf9ccb8d3c7b8e09749db61e21dde24.png)
こちらも上記同様、1つのサイトを紹介するというよりも、パーツやページのまとめになっているサイト。例えば、フォームのデザインをどうしようと悩んだときに、左のカテゴリーから「form」で検索することで、フォームデザインの一覧がみられます。
パーツ探し同様、フォームの素敵なデザインも探すのは意外と大変。。参考デザインを探そうと思うと、Webサイトの中に入ってフォームのページを自分で探さなければいけません。ですが、Collect UIのようにまとまっていることでパッと探しやすく、ほかのデザインとも比較しやすいので、効率的にデザインイメージを膨らませることができますね。
![](http://collectui.com/img/facebook-share.png)
![](http://collectui.com/img/facebook-share.png)
海外サイトのわたし的まとめ
以上、海外の参考Webデザインをご紹介してきました!どれもおしゃれで魅力的なサイト集ですよね。
最後に1つ、わたしが気をつけていることをお伝えします。
![](https://soranoco.design/wp/wp-content/uploads/2020/12/maki_left.png)
![](https://soranoco.design/wp/wp-content/uploads/2020/12/maki_left.png)
![](https://soranoco.design/wp/wp-content/uploads/2020/12/maki_left.png)
日本のWebデザインは日本語がベースとなるため、英語ベースの海外のデザインをそのまま取り入れてしまうと「なんか合わないな。。」ということになることも正直多いです。。逆に近寄りがたいという印象にもなりかねません。
そのため、日本人が普段から目にしているイメージからあまりにもかけ離れてしまうと、「おしゃれだけど、ちょっとおしゃれすぎ・・・」なんて感じさせてしまう可能性は大!!
日本っぽさも出しながら、でも上手に海外のサイトを真似してトレンドも取り入れていく・・・そういったバランスが、よりユーザー目線の良いサイトづくりで大切になると思います。
ちなみに日本の参考Webデザインも、食材関連のサイトを下記でまとめています!よろしければご参考ください!
![](https://soranoco.design/wp/wp-content/uploads/2020/10/45321b9867e45b3a3d263532c512b201-300x169.jpg)
![](https://soranoco.design/wp/wp-content/uploads/2020/10/45321b9867e45b3a3d263532c512b201-300x169.jpg)
とはいえ、海外サイトはデザインの勉強になるので、ぜひ自分のデザインの引き出し追加に有効活用してみてくださいね!
コメント