スライドショースライドショースライドショー

Webデザインを無料で独学するためのサービスをまとめてみた!


Webデザインってどうやって学習すればいいの?
無料で独学できるWebデザインのサービスが知りたい
Webデザイナーに必要な知識ってどんなもの?

これからWebデザインを学習しようと考えている人にとって、いったい何から学べば良いのか悩んでいる人も多いのではないでしょうか?

実際のところ最近のWebデザイナーが作業する範囲は、デザインだけに収まらず簡単なHTML・CSSのコーディングスキルまで求められるのが一般的になってきました。このような背景において、独学はやっぱり難しいのかな…と挫折する人も少なくありません。

そこで、この記事ではWebデザインを無料で学べるサービスやサイトについて分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

Webデザインスキルが学べるサービス

この章では、もっとも重要なポイントになるデザインスキルについて参考になるサイトについてご紹介します。主に、直感的なデザインセンスやカラートレンドについて学べるサイトを見ていきましょう。

Dribble


Dribbbleはプロのデザイナーが作品を投稿・共有する世界最大のコミュニティサイトです。

既存のDribbbleユーザーから招待されないと作品を投稿できないというユニークな性質を持っていることから、このサイトに集まるデザイン作品は高品質なものばかりなので勉強には最適というわけです。

PC・スマホのWebデザインからモバイルアプリ、アニメーション、タイポグラフィ…など、さまざまなデザインが集約されています。

まずは、このサイトを毎日欠かさずチェックする習慣を付けて、トレンドデザインやプロの作品からインスピレーションを得るようにすると良いでしょう。

以下に、Dribbbleのポイントをまとめておきます!

  • プロのデザイナーによる作品をチェックできる
  • 招待制による高品質な作品ばかり
  • 幅広いジャンルのデザインをまとめている

ColorHunt


Color Huntは現在のトレンドカラーになっているパターンをチェックできるサイトになります。

Webデザインにおいてカラーパターンは重要なポイントの1つですが、トレンドパターンを毎日チェックすることで自然とオシャレな色使いを覚えられるようになっています。

クリックするだけでカラーコードを簡単にコピーできるので、自分でサイトのカラーを変更したりなど実験するのも良いでしょう。また、黄色・青色・赤色などのタグによる関連パターンを検索できる機能は便利です。

さらに、カラーパターンの詳細ページをリンクでシェアできるので、友人・知人と共有するのも簡単です。(画像としてダウンロードも可能)

以下に、Color Huntのポイントをまとめておきます!

  • カラーのトレンドパターンを毎日チェックできる
  • クリックするだけでカラーコードをコピー可能
  • タグによる関連パターンの検索機能
  • カラーパターンを画像としてダウンロード可能

WebデザインのUI/UXが学べるサービス

この章では、最近のWebデザインで特に重要視されるようになったUI / UXについて学べるサービスをご紹介します。サイトの動きを研究できるものからインタラクティブにデザインを勉強できるサイトを見ていきましょう。

UIMovement


UI MovementはPC・スマホ向けのサイトやモバイルアプリのUIアニメーションについて、動きの部分だけを切り抜いてコレクションしたサイトです。

プロのデザイナーがどのような動きをアクセントにしているのか、または世界のトレンドアニメーションがどのように有効活用されているのかを毎日チェックできるわけです。

また、ボタン・カルーセル・フォーム・ホバー・メニュー…など、細かいタグによるフィルタリングもできるため、自分の目的に合わせたUIアニメーションを効率よく検索することも可能です。これだけ膨大な量の【動き】だけをコレクションしているサイトは貴重ではないでしょうか。

【Design Tools】タブに切り替えると、Adobe After EffectsやInvision Studioなど…どのようなツールを使ってアニメーションが作成されているのかまでチェック可能です。

以下に、UI Movementのポイントをまとめておきます!

  • サイトやアプリのUIアニメーションを大量にコレクション
  • 動きの部分だけを切り抜いて一覧表示してくれる
  • 用途に合わせたタグによるフィルタリング検索が可能
  • 作成ツールをチェックできる

Can'tUnsee


Can't Unseeはゲーム感覚でセンスの良いWebデザインのUI / UXを学習できるユニークなサービスです。

基本的な使い方として、悪いWebデザインと良いWebデザインが画面に表示されるので、どちらか最適だと思う方をクリックしていきます。すぐに正解かどうかの判定が表示されて、比較ポイントがどこだったのかなど詳細も確認できます。

簡単モードや難しいモードなどがあり、次々とデザインを比較していくことで確実にWebデザインの見る目を養うことができるのがポイントでしょう。

例えば、次のデザインはどちらが最適か分かりますか?

デザインの問題画面

正解は左側です!

理由として、右側はアイコンセットを同じものに統一するというルールが守られていないからです。つまり、白く塗りつぶされているアイコンとそうでないものが混在しているので、パッと見て違和感があるわけですね。

以下に、Can't Unseeのポイントをまとめておきます!

  • デザインセンスをゲーム感覚で学習できる
  • 大量のデザインを比較することで目を養う
  • クリックするだけの簡単操作
  • デザインのポイントを解説してくれる
  • 多彩なデザインパターンが用意されている

ツール・コーディングの学習

この章では、Webデザインによく使うツールやコーディングスキルについて学習できるサイトをご紹介します。主に、Adobe系ソフトの使い方やHTML/CSSのコーディングについて学べるサイトを見ていきましょう。

Adobeヘルプセンター


Webデザインでよく使われるPhotoshopやIllustratorなどを提供しているAdobeソフトは、デザインツールとしては最も利用者が多く仕事には欠かせないツールとして知られています。

しかし、できることが多くて機能が豊富なので、初心者にはなかなか使いこなすのが難しいツールであることでも知られています。そのため、Adobeの公式サイトにあるヘルプセンターでは非常に分かりやすいチュートリアルがまとめられているのです。

これを意外と知らないユーザーも多いのではないでしょうか?

例えば、Photoshopのチュートリアルページを見てみましょう!

Photoshopのチュートリアルページ

色・レベル補正、レイヤーテクニック、コンテンツの作成方法、画像の編集・合成、エフェクトの効果的な使い方…など、実際の現場で役立つチュートリアルが無料で公開されているのが分かります。

他にも、Illustrator / InDesign / After Effects / Lightroomなど、人気のAdobeソフトを活用するためのテクニックが満載なのでぜひ有効活用してみましょう。

以下に、Adobeヘルプセンターのポイントをまとめておきます!

  • Adobe系ソフトの詳細なチュートリアルを無償公開
  • 基本的な使い方を網羅
  • 活用テクニックやプロの技を伝授
  • デザインの入門記事も多数あり

Progate


ProgateはHTML / CSSをはじめ、Webプログラミングをインタラクティブに学習できるサービスです。

ブラウザさえあればすぐにでも学習を始められて、学習用の教材とプログラムを入力するエディタ・結果を出力するプレビューが1つの画面に収められているので非常に使いやすいのが特徴です。

Progateのメインエディタ画面

一番挫折しやすい開発環境の構築作業が一切不要なので、WebデザイナーでもすぐにHTML / CSS / JavaScriptなどの学習を始めることができるわけです。また、出題される問題を解くことで段階的にスキルレベルを高めていけるのもポイントです。

解説も非常に丁寧で分かりやすいスライド資料が搭載されており、途中で分からなくなってもいつでも資料を閲覧できます。また、スマホアプリもリリースされているので、いつでも問題を解いたり教材をチェックできるのも魅力です。

しっかりと基礎からコーディングを学習するにはおすすめのサービスと言えるでしょう。

以下に、Progateのポイントをまとめておきます!

  • 教材と開発エディタが1画面で構成されている
  • HTML / CSSの基礎から応用まで学習できる
  • JavaScriptやjQueryなど多彩な言語を勉強できる
  • 分かりやすいスライド資料が搭載

まとめ

今回は、Webデザインを学ぶための無料サービスやサイトをまとめてご紹介しました。

最後に、もう一度ポイントをおさらいしておきましょう!

  • デザインスキルやトレンドについて毎日サイトをチェックしておこう
  • UI / UXを学ぶには実際の動きやデザインを勉強する
  • Adobe系のツールやコーディングスキルの知識も必要

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説