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

アプギガトップ > Webサービス > 最速で、人気Webデザインを独学できる至高のWebアプリ8選がヤバイ!
注目記事ピックアップ
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
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...

ページトップへ戻る