ドットインストールでWebデザイナー

スクール プログラミング 転職

Webデザイナーになるためのドットインストール オススメ講座

更新日:

 

ドットインストールはプログラミング動画講座サービスです。

ドットインストールを3行で説明

  • ソフト開発の言語、フレームワーク、ツールの使い方が説明された動画が5000本以上
  • 1本3分程度。動画なので操作が明確で分かりやすい。挫折しにくい
  • 初心者向けに作成されているが、新しい技術を学びたい中級、上級エンジニアにも役に立つ

僕は未経験からドットインストールを起点に勉強を始め、今ではチャラチャラWeb制作会社でフロントエンドエンジニアとして活躍しています。

30代未経験からイケイケWeb系企業に転身できた理由
30代未経験Webエンジニア・デザイナーが高収入な企業に転職する方法まとめ

32歳でSIerを退職し、未経験からWebエンジニア兼Webデザイナーとして零細企業に転職。 転職から2年が経ち、札幌の …

今回はWebデザイナーになるために、まず最初に受けておくべきドットインストールの講座を紹介します。

 

HTML/CSSの基礎を学ぶ

Webデザイナーになるにあたり、HTML/CSSの習得は必須になります。

実際にブラウザにWebサイトを表示するための根本ですので、必ず習得してください。

 

HTML基礎文法入門

HTML基礎文法入門 はこちら

HTMLのあらゆる部品について分かりやすく解説した講座です。

環境構築方法も載っているので、本当に本当の初心者でも無理なくHTMLの知識が網羅できます。

 

CSS基礎文法入門

CSS基礎文法入門 はこちら

HTMLで設置した要素に対して、装飾を施すためのCSSを学びます。

例えば、HTMLだけでこう表示されているサイトがあるとして、

htmlにcssを適用する 適用前はこちら

出典元: Yhei Web Design

 

これにCSSを適用すると、こう変わります。

htmlにcssを適用する 適用後はこちら

出典元: Yhei Web Design

 

かなり変わりますね。

この例を見れば分かる通り、CSSはWeb制作には無くてはならない知識となります。

きちんと勉強しておきましょう。

 

CSSレイアウト入門

CSSレイアウト入門 はこちら

この講座ではCSSのレイアウトに特化した技術を学ぶことができます。

うちのサイトもそうですが、サイト全体がメインコンテンツ、サイドバーのように2カラム、3カラムになっているようなサイトがたくさんあります。

2カラムサイトの例

2カラムサイトの例

本講座は、カラムレイアウトのサイトを作るための基礎知識がつきます。

またヘッダによくあるこんなメニュー。

ヘッダメニューの例

ヘッダメニューの例

メニューをこんな風に横並びにする方法も解説があります。

よくあるサイトの構成を網羅できるので、オススメの講座です。

 

実践!ウェブサイトを作ろう

実践!ウェブサイトを作ろう はこちら

下記のような本格的な一枚ペラのサイトを作るレッスンです。

実践ウェブサイトを作ろう のイメージ

実践ウェブサイトを作ろう

出典元:実践!ウェブサイトを作ろう

簡単な商品紹介ページを作るというもの。セクションごとに区切りを入れ、CTAを設置し、などの実際にランディングページを作る際によく使う技法が散りばめられています。

こちらを苦もなく作ることができれば、素人のレベルからは脱却したと言っていいでしょう。

今まで学んだ知識を使って、全力で取り組むと良いです。

 

実践!スマートフォンサイトを作ろう (有料)

実践!スマートフォンサイトを作ろう はこちら

こちらは有料なのですが、是非受けておくことをオススメします。

いわゆるレスポンシブデザインというやつで、効率的にスマホ対応のサイトを作るためのノウハウ講座となります。

具体的には下記のように、画面サイズによってレイアウトを変えていく仕組みです。CSSのメディアクエリという技術を使って実現しています。

レスポンシブデザインの事例

レスポンシブデザインの事例

画面が小さくなっていくと、メニューバーがボタン(ハンバーガーメニューって言います)に変わったり、サイドバーが消えてワンカラムになったり、記事一覧がワンカラムになったりしています。

スマホのような小さい画面で見るときはスマホで見やすいように。

逆にPCで見るときは大きく、PCで見やすいように配慮した作りです。

 

この辺りは、Webデザイナーならできて当たり前的な雰囲気があるので、絶対に受講をオススメします。

 

 

WordPressの基礎を学ぶ

WordPressはCMS(Contents Management System)の1種です。

HTML/CSSだけでもWebサイトを作って更新することはできますが、より簡単にサイトを更新できるシステムです。

このブログもWordPressを使って作られています。

WordPress投稿画面

WordPress投稿画面

WordPressは様々な企業、個人サイトで利用されており、2019年のマーケットシェアは32%と、最も人気のあるCMSの一つです。

WordPressのマーケットシェア

WordPressのマーケットシェア

出典元: Usage Statistics and Market Share of WordPress for Websites, January 2019

 

マーケットシェアが高いということは、これを押さえておけば仕事が増えるということです。

Webデザイナーとして覚えておくと便利なシステムなので、是非勉強してみましょう。

 

WordPress入門

WordPress入門 はこちら

WordPressのインストールの仕方から、記事の投稿方法、テーマの作成方法までを学ぶことができます。

特にテーマの作成方法の解説が素晴らしく、ややこしい(でも実は簡単な)WordPressのテンプレート構造について理解することができます。

 

講座内では、ゼロからテーマを作成し、簡単なWebサイトを完成させるまでを行います。

ドットインストールWordPress入門

ドットインストールWordPress入門

出典元:WordPress入門 (全23回) – プログラミングならドットインストール

 

(補足) PHP入門

PHP入門はこちら

PHPとはHTMLに埋め込むことができる、Webアプリケーションプログラミング言語です。

HTMLと違って、動的にWebサイトを構築することができます。

例えば、下記のような本日の日付を表示するhtmlのサイトがあったとします。

ブラウザで見た際の結果は、

日付をhtmlで表示する

日付をhtmlで表示する

こんな感じ。でもこれ、明日になったら2019/01/30に更新しなきゃならないですよね?

HTMLは静的な情報しか表示できないため、こうなります。

 

PHPは動的に情報を表示できます。PHPが動いているサーバー上で、下記のように書くと、

<?php echo date(“Y/m/d”); ?>の部分で動的に本日の日付を表示できます。

今日アクセスすれば今日の日付が、明日アクセスすれば明日の日付が表示されます。

 

この例では日付を表示するだけでしたが、例えばデータベースと接続してデータベース内に保存された本文を表示するなどするとしたら、便利そうですよね?

前述のWordPressもPHPで作られており、データベース内に記事情報を保存し、表示するというようなことをやっています。

WordPress入門を受けた際にPHPでつまづいた時のみ本講座を受けてみると良いです。

 

Webデザイナーになるためのオススメドットインストール講座 まとめ

Webデザイナーになる第一歩として、下記のドットインストールの講座がオススメです。

 

本日は以上!!!!

 

あわせて読みたい

30代未経験からイケイケWeb系企業に転身できた理由
30代未経験Webエンジニア・デザイナーが高収入な企業に転職する方法まとめ

32歳でSIerを退職し、未経験からWebエンジニア兼Webデザイナーとして零細企業に転職。 転職から2年が経ち、札幌の …

 

  • この記事の筆者

Y平

札幌のWebデザイナー。オモコロライターも。Webデザイン、Web集客、コーダーできます。2016年に7年勤めた富士通を退職→零細Web制作会社→札幌大手Web制作会社に転職。幼い娘とウサギ、嫁を養う。WordPressが大好きかつ得意なのですが、全然WordPress案件ありません。WordPressで困っている方、まじで気軽に声かけて。WordPressがやりたくて仕方ないの。

 

 

おすすめWeb系転職記事

30代未経験からイケイケWeb系企業に転身できた理由 1

32歳でSIerを退職し、未経験からWebエンジニア兼Webデザイナーとして零細企業に転職。 転職から2年が経ち、札幌の …

中途未経験からWeb系企業に入る 2

僕は大手SIer勤務を経て、Web業界未経験から、転職2社目にして札幌のとあるイケイケWeb系企業への転職を成功させまし …

中途未経験から高収入Web系企業に入る 3

僕は大手SIer勤務を経て、Web業界未経験から転職2社目にして札幌のとあるイケイケWeb系企業への転職を成功させました …

未経験からTechAcademyでエンジニアになる 4

TechAcademyは様々なプログラミング言語が学べる、オンラインプログラミングスクールです。   僕は未経 …

ドットインストールでWebデザイナー 5

  ドットインストールはプログラミング動画講座サービスです。 ドットインストールを3行で説明 ソフト開発の言語 …

-スクール, プログラミング, 転職

Copyright© バイラシー , 2019 All Rights Reserved Powered by AFFINGER5.