どうも、まさとらん（@0310lan）です！

Webデザインのセンスを、「手っ取り早く磨きたい！」という人に朗報です。
素人っぽく見られないように、世界中の人気Webデザインを参考にしながら、効率的にスキルアップできるWebアプリが徐々に増えています。

そこで今回は、Webデザインの独学に最適なサービスを厳選してご紹介しようと思います！

Web最新トレンドの仕組みまで解説してくれるサービス！

【 CodyHouse 】

最近、よく見るWebデザインやUIパーツなどを、丁寧にまとめてくれているサービス。

3DアニメーションするWebサイトや、エフェクト効果を使ったナビゲーション、画像を効果的に見せるテクニックまで一通り揃っています。



特徴的なのは、そのまま実際のデモ画面を見れるようになっており、作り方を解説した記事も一緒に読むことが出来る点です。

さらに、「ダウロード」ボタンをクリックするだけで、ソースコードも丸ごと入手できるようになっているので便利です！

最低限、知っておきたい今のWebテクニックを、効率よく学習できる最適なサービスとなっています。

「Webデザイン収集」のまとめサイトを横断チェックするサービス！

【 Muzli 】

Google Chromeの拡張機能として提供されているサービスで、人気のWebデザインをコレクションする有名サイト「Dribbble」「Awwwards」「Behance」などを横断的に閲覧できます。


また、左メニューには、受賞歴のある有名Webサイト、参考になりそうな画像収集サイト、勉強になる海外ブログなどのリンクが並んでいるので便利です。

Web業界のトレンドに乗り遅れないように、日々チェックするには最適なサービスではないでしょうか。

スマホに特化した、Webデザイン集を公開するサービス！

【 TETHR 】

スマホ用の「Webサイト」や「アプリ」にも使える貴重なサービスで、今人気のデザインを豊富にコレクションしています。

pinterest風に閲覧することができ、SNS系、ナビゲーション系、ショッピング系、マルチメディア系など幅広く揃っているのが特徴です。



「TETHR」は、Webデザインをオンラインで多人数ブレストできるサービス「inVision」が提供するサービスでもあります。

「inVision」を使い、スマホ用のデモサイトやアプリを作る時に「TETHR」を活用すれば、かなり便利に使えますよ！
【詳細はコチラ】

国内の人気Webデザインも合わせてチェックできるサービス！

【 I/O 3000 】

海外のトレンドだけでなく、国内の厳選されたWebデザインも収集して公開してくれるサービスがコチラ！

気になったWebサイトを訪問して分析するのも良いのですが、海外と日本のデザインがどのように違うのかを調べるのも面白いです。

また、カテゴリから目的のWebデザインをチェックしたり、「タグ」や「カラー」といったキーワードからも調べられるようになっているので便利です。

人気の「UIパーツ」を学べるサービス！

【 Call to Idea 】

PC・スマホのWeb制作で参考になる「UIパーツ」について、様々なサンプル事例を豊富に集めているサービスです。

ユーザー登録用のフォーム、ログインボタン、フッターのレイアウト、ナビゲーション、ポップアップ事例など、とにかく必要なパーツが豊富に揃っているのでとても参考になります。


ちなみに、ティザーサイト用のレイアウトや、「404 Not Found」用のサイトデザインなども収集されているのは面白いです。


類似サービスとして、【Design Patterns on CodePen】も合わせてご紹介しておきます。

コチラは、コード共有サービスで有名な「CodePen」が提供しているだけあって、作りこまれた「UIパーツ」のソースコードも閲覧することが出来るので便利です。

フォントデザインの疑問を解消するサービス！

【 Type Genius 】

種類の違うフォントを組み合わせて利用する時に、最適なフォントを教えてくれる珍しいサービスがコチラ！

利用方法はシンプルで、使いたいフォントを選択するだけで、最適な組み合わせのフォントを表示してくれます。

さらに、実際にその組み合わせを利用しているサイトまで掲示してくれるので、とてもイメージしやすいかと思います。

日本語には未対応ですが、英語フォントを使う機会は多いかと思うので、応用範囲は広いのではないでしょうか。

Webデザインのノウハウを学び、自分で制作も出来るサービス！

【 Canva Design School 】

こちらは、以前にアプギガでもご紹介しているWebデザイン制作サービスです。

ブラウザ上で、自分の好きなデザインを制作できるエディタが利用でき、豊富な素材を使って簡単にクオリティの高いデザインが作れるのが特徴です。


「デザインなんて無理！」という人のために、豊富なチュートリアルが用意されているのですが、面白いのは人気のデザイン事例を随時紹介してくれている点です。


背景画像を効果的に見せるテクニックや、フォントの使い方、画像とフォントを組み合わせるプロの技など、英語ですが詳細に解説しています。

勉強しながら、自分でもデザインを制作したい方には最適なサービスと言えるでしょう！
【Canvaについての詳細はコチラ！】

「レスポンシブデザイン」の収集に特化したサービス！

【 Gridgum 】

最近では当たり前のように使われている「レスポンシブデザイン」だけを、ひたすら集めているサービスがコチラ！

世界中のWebデザイナーが「販売目的」で公開しているのが特徴で、さすがにクオリティの高いデザインばかりが揃っている面白いサービスです。

サイトのプレビューが直接見れるようになっており、どのような仕組みになっているのかを研究するのには最適でしょう！

一定の基準を満たせば、自分で作ったデザインを販売することも可能です。

おまけ

最後に、Webデザインの制作などで、Adobe製品のソフトウェアを利用している方に最適なサービスをご紹介しておきます。

【フォトショ、イラレなどの使い方を本気で教える「Adobe Pinch In」の充実度がヤバイ！】

初心者にはちょっと難しい「Photoshop」や「Illustrator」などを、分かりやすく具体的な活用事例と共に紹介してくれる入門サイトになっています。

Adobe社が公式に運営しているだけあって、内容の充実度は高く、このまま電子書籍化してもおかしくないほどです。

ご興味ある方は、ぜひ一度訪れてみてください！

まとめ

Webデザインに関しては、勉強したからすぐに作れる…という分野ではないと思います…。

そのため、人気のデザインを日々チェックしていくことで、少しずつWebデザインの「見る目」を養っていくことが重要かと思います。

今回ご紹介したような便利サービスを使って、ぜひ自分だけのノウハウを蓄積してみましょう！


written by まさとらん