Web デザイナーは、現代の市場で最も需要の高い専門家の XNUMX つです。 すべてのビジネスには、オンラインでの強力な存在感と魅力的な Web サイトが必要です。 Web デザイナーは、アートとデザインの原則に関する知識と Web 開発スキルを活用して、その実現を支援する専門家です。

Web デザインには、さまざまなテクノロジー、プログラミング言語、タスクが組み込まれています。 Web デザインは、ユーザー インターフェイスを作成するプロセスのみを記述することもあれば、HTML、CSS、JavaScript などの言語を使用した実際の実装を含むように拡張することもできます。 この文脈では、Web デザイナーは実質的にフロントエンド Web 開発者であり、モックアップのデザインと実際のサイトの構築の両方を担当します。

グラフィック デザインやコンピューター サイエンスなどの分野のバックグラウンドなしでこの分野に飛び込もうとするのは、気が遠くなるかもしれません。 実際、これほど簡単なことはありません。 最も人気のある Web デザイン ツール、テクノロジー、戦略について学ぶためのオンライン コースが無数にあります。 TUN では、経験レベルに関係なく、Web デザインの仕事に必要なスキルを学ぶのに役立つ、無料および手頃な価格のオンライン コースの包括的なリストを作成しました。

Webデザインのオンラインコース

1. Webデザイン：戦略と情報アーキテクチャ

Webデザイナーがプロジェクトを開始するとき、まずクライアントとサイトのユーザーのニーズに基づいた戦略を開発する必要があります。 このフェーズでは、調査、戦略の策定、タイムテーブルの設定、コンテンツの構造化、および一般的な計画が必要です。 「Webデザイン：戦略と情報アーキテクチャ」は、ウェブデザインプロセスのこの段階で効果的なワークフローを生徒に教えることを目的としています。 Course経由でCalArtsが提供するコースは、ユーザーインターフェース（UI）およびユーザーエクスペリエンス（UX）設計に関するマルチコース専門分野の一部です。 UI / UXには、Web開発とアプリケーション開発の両方が含まれる場合があります。 ただし、このコースは主にレスポンシブWebサイトの設計に焦点を当てています。 Webデザインの一般的なワークフロー、ベストプラクティス、および方法論について学び、Webサイトの包括的な計画を作成するプロジェクトで知識をテストに活用します。

• 大学の単位： NO - コース証明書のみ
• 価格： 監査は無料ですが、コース証明書を取得して購入するには料金がかかります
• 財政援助または奨学金： はい
• モバイル学習： はい
• 自己学習 はい
• 柔軟な締め切り： はい
• 完了までに必要な時間 約27 時間 (週 2 ～ 5 時間、4 週間を推奨)
• 言語： 英語字幕付きの英語
• ベンダー： Coursera

注： この記事に記載されているすべてのコースの価格は、発行日現在のものですが、変更されることがあります。

2. ウェブデザイン：ワイヤーフレームからプロトタイプ

このコース の続編です Webデザイン：戦略と情報アーキテクチャ CalArts によって Coursera を通じて提供されます。 証明書の取得に興味がある場合は、このコースの前に受講する必要があります。 最初のコースでは、複雑な Web サイトを構築するための戦略段階と計画段階について説明します。 ここでは、ワイヤーフレームの作成、モックアップの構築、クリック可能なプロトタイプの作成という次のフェーズに進みます。 このコースでは、レスポンシブ Web デザインやモバイル Web の課題、モバイルファーストのアプローチによるデザイン、Web タイポグラフィ、プログラミング Web デザインのトピックや HTML、CSS、JavaScript、サーバーサイド コーディングなどのテクノロジなど、さまざまな実践的な Web デザインのトピックを取り上げます。そしてデータベース。

• 大学の単位： NO - コース証明書のみ
• 価格： 監査は無料ですが、コース証明書を取得して購入するには料金がかかります
• 財政援助または奨学金： はい
• モバイル学習： はい
• 自己学習 はい
• 柔軟な締め切り： はい
• 完了までに必要な時間 約34 時間 (週あたり 4 ～ 10 時間、4 週間を推奨)
• 言語： 英語字幕付きの英語
• ベンダー： Coursera

3. レスポンシブ Web デザインの作成

現代では、人々はさまざまな画面やデバイスを介してインターネットにアクセスしています。 その結果、Web デザイナーは、さまざまなプラットフォームで簡単にアクセスでき、魅力的に見える「応答性の高い」Web サイトを構築する必要があります。 このコース 適応性のあるウェブサイトを構築する方法を教えます。 プログラミングが初めての場合は、HTML と CSS による基本的なフロントエンド Web 開発スキルを学びます。 Web サイトをゼロから構築しながら、ナビゲーション メニューの構築、グラフィックの書式設定と配置、CSS アニメーションの作成、Google からの Web フォントのインポートについて学びます。 コースを進めていくと、さまざまな画面サイズやレイアウトに合わせてデザインを調整する方法を学び、Web サイトにどのデバイスからでも簡単にアクセスできるようになります。

• 大学の単位： NO - 証明書のみ
• 価格： 個人プランの場合は、10日無料トライアルの後、月額$ 35または年額$ 299が請求されます。 プレミアムプランの年間請求額は$ 449
• 財政援助または奨学金： NO
• モバイル学習： はい
• 自己学習 はい
• 柔軟な締め切り： はい
• 完了までに必要な時間 3時間、48分
• 言語： 英語
• ベンダー： Pluralsight

4. レスポンシブWebデザイン

このコース フロントエンドWeb開発と純粋な設計コンセプトの両方をカバーしています。 それは、ウェブデザイン理論のいくつかの概念をカバーすることから始まります。 ユーザーエクスペリエンスの原則と、操作可能な機能的なWebサイトを構築するための戦略を学びます。 次に進むと、理論を実践し、コードとブートストラップを使用して設計を構築する方法を学習します。 JavaScriptにインタラクティブ機能を組み込む方法と、Webサイトにコンテンツを追加する方法を学習します。 このコースでは、フォトギャラリー（またはスライダー）や検索機能などの基本的なWebアプリケーションの構築についても説明します。

• 大学の単位： NO - コース証明書のみ
• 価格： 監査は無料ですが、コース証明書を取得して購入するには料金がかかります
• 財政援助または奨学金： はい
• モバイル学習： はい
• 自己学習 はい
• 柔軟な締め切り： はい
• 完了までに必要な時間 約 17時間（週あたり5時間を推奨）
• 言語： 英語字幕付きの英語
• ベンダー： Coursera

5. 初心者のための Web デザイン: HTML と CSS の現実世界のコーディング

このコース フロントエンド Web 開発の基礎言語である HTML と CSS に主に焦点を当て、基本的なフロントエンド Web 開発テクノロジと概念を教えます。 XNUMX 時間相当のレッスンでは、これらのテクノロジーを深く掘り下げ、HTML と CSS による基本的なスタイルから、CSS 特殊効果やレスポンシブ デザインなどのより高度な概念まで徐々に構築していきます。 このコースを受講すると、HTML と CSS の基礎をしっかり身につけ、JavaScript を使用してインタラクティブな Web ページを構築する準備が整います。

• 大学の単位： NO - 修了証明書のみ
• 価格： $ 12.34発売中（$ 129.99通常価格）
• 財政援助または奨学金： NO
• モバイル学習： はい
• 自己学習 はい
• 柔軟な締め切り： はい
• 完了までに必要な時間 9時間
• 言語： 英語、インドネシア語、イタリア語、ポーランド語、ルーマニア語、タイ語の字幕付きの英語
• ベンダー： Udemy

6. レスポンシブWebデザインの要点– HTML5 CSS3とブートストラップ

初心者向けに設計された、 このコース HTML5、CSS3、およびBootstrap 4をゼロから教えます-コーディングの経験は必要ありません。 このコースは、シンプルなレストラン、自転車修理Webサイト、応答性の高いポートフォリオサイト、Bootstrapを使用するヨーグルト企業のサイトの4つのWebサイト構築プロジェクトに基づいています。 これらのプロジェクトは、新しい機能を追加し、さまざまなツールとテクノロジーを統合するにつれて、複雑さと難易度が徐々に高まります。 このコースでは、ウェブサイトドメインの設定など、基本的なタスクもカバーしています。

• 大学の単位： NO - 修了証明書のみ
• 価格： $ 12.34発売中（$ 199.99通常価格）
• 財政援助または奨学金： NO
• モバイル学習： はい
• 自己学習 はい
• 柔軟な締め切り： はい
• 完了までに必要な時間 16時間、30分
• 言語： 英語字幕付きの英語
• ベンダー： Udemy

7. ハンズオンレスポンシブWebデザイン

In このコース、HTML5を使用してゼロから責任あるWebサイトを構築する方法を学びます。 このコースは、レスポンシブ画像、スプライトアイコン、フォントアイコン、HTMLパーシャルなど、さまざまな機能をWebページに統合する方法を学習するいくつかのWebサイト構築プロジェクトに基づいています。 また、SASSやLESSなどのCSSプリプロセッサーを使用して効果的にインポートする方法も学習します。 コースの終わりには、いくつかの異なるWebテンプレートが用意され、レスポンシブなWebサイトレイアウトを自信を持って構築できるようになります。

• 大学の単位： NO - 証明書のみ
• 価格： 個人プランの場合は、10日無料トライアルの後、月額$ 35または年額$ 299が請求されます。 プレミアムプランの年間請求額は$ 449
• 財政援助または奨学金： NO
• モバイル学習： はい
• 自己学習 はい
• 柔軟な締め切り： はい
• 完了までに必要な時間 4時間、22分
• 言語： 英語
• ベンダー： Pluralsight

8. プログラマーのためのデザイン

これは、「設計に課題を抱えた」開発者を対象とした、ユニークではありますが、非常に必要とされている設計原則に関するコースです。 これに該当する場合は、もう探す必要はありません。 色彩理論、レイアウトデザイン、タイポグラフィーなど、Web デザインや UI/UX デザインに直接適用できるデザイン理論の概念について学びます。 このコースは短く、合計で約 30 時間しかかかりませんが、XNUMX 以上のビデオ講義と、デザイン スキルをすぐに適用するための複数の演習が含まれています。 つまり、デザイン スキルを迅速に習得するのに役立つ優れた短期集中コースです。

• 大学の単位： NO - 修了証明書のみ
• 価格： 月額 39.99 ドルの「Learn」サブスクリプションがセール中 (通常価格 44.99 ドル)
• 財政援助または奨学金： NO
• モバイル学習： はい
• 自己学習 はい
• 柔軟な締め切り： はい
• 完了までに必要な時間 2時間
• 言語： 英語
• ベンダー： クイックスタート

9. WordPress for Beginners：ステップごとにWebサイトを作成する

WordPressを使用したことがない場合は、 このコース すべての基本事項が表示されるため、Webサイトまたは動的なブログを構築できます。 このコースはコーディングを必要としないため、初心者のWebデザイナー、フリーランサー、起業家に最適です。 5時間強のこのコースは短いものですが、WordPressでのWeb開発への素晴らしい第一歩です。 概要ページ、フォトギャラリー、ブログ投稿、コメント、連絡先ページ、さまざまなウィジェットを備えたWebサイトをゼロから作成する方法を学習します。 終了すると、自信を持って基本的なWordPressサイトを構築できるようになり、独自のテーマを構築し、いくつかの基本的なコードを統合してウェブサイトに対話性を追加する方法を学習できます。

• 大学の単位： NO - 修了証明書のみ
• 価格： $ 12.34発売中（$ 84.99通常価格）
• 財政援助または奨学金： NO
• モバイル学習： はい
• 自己学習 はい
• 柔軟な締め切り： はい
• 完了までに必要な時間 5時間
• 言語： 英語字幕付きの英語
• ベンダー： Udemy

10. 高度なCSSとSass：フレックスボックス、グリッド、アニメーションなど！

CSSデザインを次のレベルに上げる準備はできましたか？ 基本的なHTMLとCSSに慣れたら、Sassなどの高度なCSSコマンド拡張言語を使用して、新しいデザイン機能のロックを解除できます。 に このコース、よりクリーンなHTMLおよびCSSを作成するための戦略を学びます。 また、CSSグリッドを使用したグリッドレイアウト、@ keyframesを使用したアニメーション、アニメーション、遷移機能など、高度なCSS機能を利用する方法も学習します。 レスポンシブ画像とビデオの統合など、高レベルのレスポンシブデザインの概念を学習します。 最後に、Sass拡張言語の使用方法を学習します。これにより、変数、ネスト、ミックスイン、継承など、現在CSSに存在しない機能を使用できます。

• 大学の単位： NO - 修了証明書のみ
• 価格： $ 12.99発売中（$ 199.99通常価格）
• 財政援助または奨学金： NO
• モバイル学習： はい
• 自己学習 はい
• 柔軟な締め切り： はい
• 完了までに必要な時間 28時間
• 言語： 英語、英語、インドネシア語、イタリア語、日本語、ポーランド語、ポルトガル語、ルーマニア語の字幕付き
• ベンダー： Udemy

Web デザインに関するオンライン プログラム

11. みんなのためのWebデザイン（Web開発とコーディングの基礎）

Web開発の経験がない場合は、 このCoursera Web Design Specialization フロントエンドのWeb開発および設計における主要な概念と技術についての最新情報を提供します。 このコースは、HTML、CSS、JavaScript、およびBootstrapを使用したレスポンシブデザインをこの順にカバーする5つのコースで構成されています。 コンピュータサイエンスのバックグラウンドを持たない人向けに設計されており、これらの言語を段階的に教えます。 学習から始めます の プログラミングは機能し、着実にHTMLからコーディングを開始します。 HTML、CSS、およびJavaScriptの基本をカバーしたら、レスポンシブWebデザインなど、高度なWebデザインの概念を使用して作業を開始します。これにより、さまざまなデバイスや画面でWebページを適切にレンダリングできます。 スペシャライゼーションは、少なくとも3つのプラットフォームで機能するプロフェッショナル品質のWebポートフォリオを設計および開発するcapstoneプロジェクトで終わります。

5コース：

コース1: HTML5の概要

コース2: CSS3の概要 

コース3: JavaScriptとの対話性 

コース4: レスポンシブデザインによる高度なスタイリング

コース5: みんなのキャップストーンのためのウェブデザイン

• 大学の単位： NO - 専門証明書のみ
• 価格： 監査は無料ですが、Specialization Certificateを取得して購入するには料金がかかります
• 財政援助または奨学金： はい
• モバイル学習： はい
• 自己学習 はい
• 柔軟な締め切り： はい
• 完了までに必要な時間 約3ヶ月（1週間あたり7時間が推奨）
• 言語： 英語とヒンディー語の字幕付き英語
• ベンダー： Coursera

その他のオンラインコースについては、TUNを確認してください キュレーションされたクラスのリスト、または オンラインクラス検索エンジン あらゆる科目で最高のオンラインコースを見つけるために。