1. TOP
  2. Webデザイン勉強の参考に!トレンドをまとめてチェックできるWebアプリとサイト6選

Webデザイン勉強の参考に!トレンドをまとめてチェックできるWebアプリとサイト6選

Webデザインのトレンドを学ぶためにどのような方法を使えばいいでしょうか?

知識の豊富なデザイナーに聞いたり、
教則本を購入したり、ブログを閲覧したり・・・。

これらは、いずれも有効な手段ですが、さらにWebアプリを使うことで、より効率的に学習できます。※ウェブアプリとは、JavaScriptやHTML5などで構成されたウェブ上で動作するアプリ、またはGoogle Chrome拡張機能などのことです。

また、(これはウェブアプリと呼べるかは微妙ですが)洗練されたサイトインターフェイスにより検索性に優れた「UIパーツ」ごとのアイディアサイトも増えてきました。※UIパーツとは、ウェブサイト制作では必ず必要となるボタンやアイコンなどです。

今回の記事では、最新のWebデザインのトレンドを学ぶことのできる
海外ウェブアプリおよびUIパーツアイディアサイトを6個ご紹介します。

超おすすめ!学ぶだけではなくソースコードのダウンロードもできるWebアプリ

CODYHOUSE

1

▷1.CODYHOUSE

近年よく見かける、「フラットデザイン」に則した
ウェブデザインに触れることのできるウェブアプリです。

各デザインにはその仕組みの説明がきちんと記されており(英語)、
動作をサポートしているブラウザも表示されています。

ソースコード自体のダウンロードも可能(HTML・CSS・JaveScript)なので、
気に入ったものがあれば制作しているウェブサイトへ簡単に導入することもできるでしょう。

Google Chrome拡張機能

Muzli

2

▷2.Muzli

Google Chromeの拡張機能として提供されているウェブアプリで、
海外の良質ウェブデザイン収集サイト/関連技術紹介サイトとして
有名な「Dribbble」「Awwwards」「Tuts+」「CSS Winner」「Behance」
に掲載されたサイトたちをまとめてチェックすることができます。

画面左部には項目ごとに表示を切り替えるためのメニューが表示されており、
必要な情報にすぐアクセスすることができます。

UIパーツを学ぶ

Call to Idea

3

▷3.Call to Idea

ログイン画面、入力フォーム、フッターなど、
場面ごとにUIパーツのアイディアがまとめられています。
トレンドを踏まえた当り障りのないデザインが多い印象です。

Design Patterns on CodePen

4

▷4.Design Patterns on CodePen

こちらでも場面ごとにUIパーツのアイディアが紹介されており、
しかもソースコードのダウンロードが可能です。

トップページの背景が暗いので少し驚かれるかもしれませんが、
紹介されているアイディアには様々な種類のものがありますので安心してください。

全体的に「よりフラットなフラットデザイン」が多めな印象です。

UICloud

5

▷5.UICloud

こちらも同様で、トップページの検索バーに任意のパーツ名(例えばloginなど)を
入力することで多様なアイディアに触れることができます。
ソースコードではなくPSD・AIファイルでの配布が行われています。

Ui Parade

6

▷6.Ui Parade

「UICloud」同様、PSD・AIファイルでの配布が行われています。
ノブやスイッチなど、ウェブサイト制作だけではなくアプリ開発でも
有効活用できそうなデザインが多めです。

まとめ

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

今回紹介したものはすべて海外のサイトですが、
「和風で縦書きのウェブサイトを作りたい!」という場合でもなければ、
日本でのサイト制作においても非常に役に立つものばかりです。

今回紹介したサイトをすべて合わせるとデザインの数は膨大ですが、
使い勝手の良いデザインのアイディアを探すのに活用してください。

\ SNSでシェアしよう! /

注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!