2019年8月2日シェアツイートシェアブックマーク「Webデザインを身に着けたいけど、どうしたらいいのかわからない...」と考えているかたのための記事です。Webデザインってそもそもなんだろう何を勉強するとWebデザインが習得できるの?効率のよいWebデザイン勉強法って?このような疑問を持っている初心者は少なくないです。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。目次Webデザインとは?Webデザイン5つの学習ステップ1.HTMLとCSSのスキルを学ぶ2.Webデザインスキルを習得する3.JavaScriptを勉強する4.WordPressを学習する5.SEO・アクセス解析を学ぶまとめWebデザインとは?まず、そもそもWebデザインとは何かについて紹介していきます。パソコン・スマートフォンといったデバイスから、インターネットを見たときに表示されるもののデザイン、レイアウト。これがWebデザインです。ホームページ(例:CodeCamp)Webサービス(例:Progate)このように、普段私たちが見ているWeb上のコンテンツ、その全てのデザインをWebデザインと呼んでいます。検索エンジンに対する知識Webに関するツールの知識など、Webについての勉強もしなければなりません。デザインスキルに加えて、インターネットやWebに関する知識を備えていることが、Webデザイナーには必要なのです。Webデザインについて大まかに理解したところで、次は実際にどのように学習していくかを知っていきましょう!Webデザイン5つの学習ステップWebデザインの効率よい学習には、5つのステップがあります。HTMLとCSSのスキルを学ぶWebデザインスキルを習得するJavaScriptを勉強するWordPressを学習するSEO・アクセス解析を学ぶそれぞれを詳しく見ていきましょう。1.HTMLとCSSのスキルを学ぶHTMLとは、Webページに表示する文字・画像といったコンテンツを書くための言語です。HTMLを使ってコードを書くことで、コンピュータに文書・画像を表示させることができます。HTMLで表示された文章・画像の装飾をするのがCSSです。HTMLとCSS、両方のスキルを学んで自力でサイトを作れるようにしましょう。HTML/CSSのオススメ学習サイトHTMLとCSSを学ぶときに、一度は試しておきたい学習サイトはこちらの3つです。改善と実践をスピーディに繰り返したいなら:Progate90秒の動画でサクサク学びたいなら:ドットインストールWeb制作の流れも同時に理解したいなら:シラバスどれも魅力的なサイトですので、1回試してみて自分が合っているサイトを使っていくのがよいでしょう。2.Webデザインスキルを習得する確かにHTML/CSSはWebデザインの基本となるスキルですが、デザインが優れていないことには良いサイトとは言えません。HTMLとCSSの基礎を学んだら、Webデザインのスキルを勉強していきましょう。デザインの原理原則を押さえてから、オリジナルのデザインを作っていきます。大切なのは「自分の得意ジャンル」をつくることです。「このジャンルのデザインならだれにも負けない!」というところまで、デザインを極めていきましょう。良いデザインを完璧に真似ることからデザインの原理原則は、すでにある良いデザインを真似るところから習得できます。完成されていて、ある程度世の中で認められたデザインというのは、デザインの基本を押さえているものです。クオリティの高いデザインで使われている配置・構図・デザインを真似ることで、プロのエッセンスを吸収することができます。このサイトはどうしてこのデザインなのかここの部分はどういう意図でデザインされているのかを考えながら、既存のデザインをトレースしていきましょう。洗練されたデザインは、Pinterestで探すのがおすすめです。クオリティの高いデザインを、手軽に見つけることができますよ。3.JavaScriptを勉強する動きのあるWebサイトを作るならば、JavaScriptは必須のスキルです。HTMLやCSSと比べると学習コストは高めですが、その分サイトに加えられる機能の幅が広くなります。動きのあるサイトを作りたいHTMLとCSSだけでは実現できない機能が出てきたデザインだけでなく、コーディングもしっかり身につけたいこのように考えているかたは、JavaScriptを勉強していきましょう。目標:ひとまずJQueryが使えるようになるJavaScriptを全て学ぼうとすると、それなりの時間がかかります。ゆえに、とりあえずのゴールとして「JQueryが難なく使えること」を目標にするとよいでしょう。JQueryとは、JavaScriptのライブラリ(使いやすくまとまったパッケージのようなもの)です。JavaScriptと比べてJQueryは記述が簡潔で、そのため初心者でもすぐに扱えるようになります。4.WordPressを学習するHTML/CSSを使えるWebデザインスキルがあるJavaScriptが使えると、ここまできてしまえばだいたいのサイトは作れるようになっているはずです。情報を頻繁に更新するサイトの場合、上記の3つのスキルで作ったサイトだと、更新のたびにサイトを直さないといけません。そこで使いたいのがWordPressですね。これはCMS(コンテンツ管理システム)の一つで、更新性の高いサイトを構築するのに便利なツールです。WordPressを習得して、Webデザインスキルにさらなる磨きをかけましょう。目標:自分でオリジナルテーマが作れるようになるWordPressの学習目標は、1から自分で独自のテーマが作れるようになることです。テーマとは、WordPressの着せかえのようなもので、サイトデザイン・機能を容易にカスタマイズすることができます。完璧にデザインされたテーマである必要はありません。シンプルなものでも大丈夫なので、1からWordPressテーマを作成できるようになりましょう。5.SEO・アクセス解析を学ぶサイトを作る目的は、たくさんの人に見てもらうこと、そして、より多くの人に行動を起こしてもらうことです。商品の購入・サービスへの登録など、その行動はさまざま。どんな行動を起こすにしろ、SEO・アクセス解析の知識が必要不可欠です。自分で作ったサイトが多くの人に見られることは、単純にうれしいはず。SEOとアクセス解析を身に着けて、さらにアクセスを集めましょう!実践から学ぶのが一番SEO・アクセス解析に関しては、実践でトライアンドエラーを繰り返すことで、最も効果的に学習できます。これまでで作ったサイトを使って、SEO対策・アクセス解析の試行錯誤をくり返しましょう。SEOに関しては、トレンドの移り変わりがあります。そのため、基礎的な知識をつけるのはもちろん、最新情報をキャッチする姿勢も大切です。CodeCamp提供のデザインマスターコース当メディアを運営しているCodeCampではデザインマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。このコースの特徴はデザインからコーディングまでWebデザイナーに必要なスキルを獲得できるWebデザイナーとして転職・フリーランスも可能になる実際にWebサイトを作るのでポートフォリオとしても使用できる無料レッスン受講後の申し込みで10,000円クーポンをプレゼントしています!ぜひお試しください。\一流デザイナーのスキルが身に付く/CodeCampの無料体験はこちら▶︎無料体験レッスンの申し込みはスマフォで1分で完了!まとめ初心者がWebデザインの知識を身につけるステップについてまとめました。おさらいすると、HTMLとCSSのスキルを学ぶWebデザインスキルを習得するJavaScriptを勉強するWordPressを学習するSEO・アクセス解析を学ぶという5つのステップが、ウェブデザインを身につけるうえで大切でしたよね。独学の勉強を効率よく行うためには、知識を身に着けながら実践も欠かさないことが重要です。この記事がこれからウェブデザインを学びたいかたの参考になれば幸いです。家事も仕事もプログラミングも。2020年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで受講生インタビュープログラミング未経験で介護師からエンジニアへ。家事も仕事もプログラミングも。受講生インタビュープログラミング習得後、フリーランスに転身。受講生インタビューフリーランス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。学習ガイドtwitterLINE。