シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > 最速で、人気Webデザインを独学できる至高のWebアプリ8選がヤバイ!
注目記事ピックアップ
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
スタートアップや企業Webサイトの作成に必要な機能全部入りの「uKit」が無料公開中!
share0
スタートアップや企業Webサイトの作成に必要な機能全部入りの「uKit」が無料公開中!
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
share0
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
share0
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
share0
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
share0
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
share0
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
share0
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
小学生でもゲーム制作を可能にするWeb統合エディタ「Tynker」が、むしろ大人がハマると話題に!
share0
小学生でもゲーム制作を可能にするWeb統合エディタ「Tynker」が、むしろ大人がハマると話題に!
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
share0
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
Webサービス
2014/11/26 21:30

最速で、人気Webデザインを独学できる至高のWebアプリ8選がヤバイ!

web_design_collection_app_01
どうも、まさとらん(@0310lan)です!

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

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


Web最新トレンドの仕組みまで解説してくれるサービス!
CodyHouse
web_design_collection_app_02
最近、よく見るWebデザインやUIパーツなどを、丁寧にまとめてくれているサービス。

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


特徴的なのは、そのまま実際のデモ画面を見れるようになっており、作り方を解説した記事も一緒に読むことが出来る点です。
web_design_collection_app_04
さらに、「ダウロード」ボタンをクリックするだけで、ソースコードも丸ごと入手できるようになっているので便利です!

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


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


また、左メニューには、受賞歴のある有名Webサイト、参考になりそうな画像収集サイト、勉強になる海外ブログなどのリンクが並んでいるので便利です。
web_design_collection_app_06
Web業界のトレンドに乗り遅れないように、日々チェックするには最適なサービスではないでしょうか。


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

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


「TETHR」は、Webデザインをオンラインで多人数ブレストできるサービス「inVision」が提供するサービスでもあります。
web_design_collection_app_09
「inVision」を使い、スマホ用のデモサイトやアプリを作る時に「TETHR」を活用すれば、かなり便利に使えますよ!
詳細はコチラ


国内の人気Webデザインも合わせてチェックできるサービス!
I/O 3000
web_design_collection_app_10
海外のトレンドだけでなく、国内の厳選されたWebデザインも収集して公開してくれるサービスがコチラ!

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

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


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

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

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

類似サービスとして、【Design Patterns on CodePen】も合わせてご紹介しておきます。
web_design_collection_app_15
コチラは、コード共有サービスで有名な「CodePen」が提供しているだけあって、作りこまれた「UIパーツ」のソースコードも閲覧することが出来るので便利です。


フォントデザインの疑問を解消するサービス!
Type Genius
web_design_collection_app_16
種類の違うフォントを組み合わせて利用する時に、最適なフォントを教えてくれる珍しいサービスがコチラ!

利用方法はシンプルで、使いたいフォントを選択するだけで、最適な組み合わせのフォントを表示してくれます。
web_design_collection_app_17
さらに、実際にその組み合わせを利用しているサイトまで掲示してくれるので、とてもイメージしやすいかと思います。

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


Webデザインのノウハウを学び、自分で制作も出来るサービス!
Canva Design School
web_design_collection_app_18
こちらは、以前にアプギガでもご紹介しているWebデザイン制作サービスです。

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

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

背景画像を効果的に見せるテクニックや、フォントの使い方、画像とフォントを組み合わせるプロの技など、英語ですが詳細に解説しています。
web_design_collection_app_21
勉強しながら、自分でもデザインを制作したい方には最適なサービスと言えるでしょう!
Canvaについての詳細はコチラ!


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

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

サイトのプレビューが直接見れるようになっており、どのような仕組みになっているのかを研究するのには最適でしょう!
web_design_collection_app_23
一定の基準を満たせば、自分で作ったデザインを販売することも可能です。


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

フォトショ、イラレなどの使い方を本気で教える「Adobe Pinch In」の充実度がヤバイ!
web_design_collection_app_24
初心者にはちょっと難しい「Photoshop」や「Illustrator」などを、分かりやすく具体的な活用事例と共に紹介してくれる入門サイトになっています。

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

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


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

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

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


written by まさとらん



まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る