えぴぽろのおうち
Webデザイン部屋

【Webデザイン】初心者のWebデザインの始め方。学ぶ順序とスクールの選び方

Webデザイン 始め方 独学 初心者

Webデザインの始め方の手順をまとめました。

合う・合わないがあるので、まずは無料で学んでからオンラインスクールに入会するのがおすすめです。

①無料でWebデザインを学ぶ

Progate は無料でHTML、CSSを学ぶことができます。

わたしはHTML&CSS初級編だけしました。

②有料でWebデザインを学ぶ

オンラインスクールを5つ紹介します。

通学は高いし時間がかかるので、場所を選ばず安いオンラインスクールをおすすめします。

シーライクス

シーライクスは女性限定のオンラインスクールです。

スクール名 シーライクス
おすすめコース Webデザインコース
金額 入会金148,000円    月14,800円(受け放題)or9,8000円(月5回)

Webデザインコースで

学べる内容

Photoshop、HTML、CSS、Javascript

デメリット

入会金がかかる。買い切りではなく月額課金制

メリット

女性限定のスクール。

料金内でWebデザインコース以外も全コース受講可能。

slackで質問できます。

Webデザインコース以外にも料金内で下記のコース全て受講可能です。

シーライクス  Webデザイン

 

RaiseTech

スクール名 RaiseTech
おすすめコース WordPress副業コース

WordPress副業コースで

学べる内容

  • Linuxサーバーの基礎、コマンド
  • Webサーバー (Apache)
  • MAMP
  • XAMPP
  • PHP基礎(簡単なプログラムを動かすまで)
  • バージョン管理システム(Git)
  • HTML5
  • CSS3
  • Webデザイン
  • タブレットファースト
  • PCやスマートフォンによる表示違い
  • JavaScript(jQuery)
  • index.php
  • style.css
  • functions.php
  • screenshot.png
金額 26,1800円→209,400円(5/6まで)

デメリット

特になし

メリット

2週間のトライアル受講が可能

Webデザイン+WordPress化

現役エンジニアによるサポート

転職・就職支援あり

WordPressでWebサイトを作れる

Webデザインだけを学ぶだけでは静的サイトと言ってオフライン上でしかWebページを見ることができません。

特にWordPressは少し癖があるのでWebデザインの知識だけでサーバーにアップしてオンライン上で閲覧できるレベルまで持っていくのはむずかしいです。(経験者)

RaiseTechのWordPress副業コースはWebデザイン+WordPress化まで学べます。

転職・就職支援

転職・就職支援があるのは最大のメリットです。

他のスクールでもお仕事紹介はありますが簡単なバナーを作るのみで生活できるレベルの仕事に繋がらないものもあります。

2週間のトライアル受講

合う・合わないがあるので2週間のトライアル受講があるのはありがたいです。゚(゚´Д`゚)゚。

RaiseTechでWordPress副業コースを学ぶ

テックアカデミー

テックアカデミー 

スクール名 テックアカデミー 
おすすめコース Webデザイン+WordPressセット
金額 268,000円(8週間プラン)
Webデザイン+WordPressセットで学べる内容
  • Webデザインの原則
  • HTML
  • CSS
  • JavaScript
  • Photoshop
  • WordPress
  • PHP
デメリット 受講期間が長くなるほど高くなる
メリット 転職支援、クラウドワークスと連携した在宅ワーク支援

 

質問無制限のスキルハックス

Skill Hacks

買い切り型69800円ぽっきりです。

期間が決まっているものが多いですが、質問無制限がポイントです。

ツイッターから生まれたデイトラ

デイトラは、業界最安値のオンラインスクールです。

買い切り型59800円です。

Web制作コースがおすすめです。

1年間質問できます。

独立サポートは別途オプションです。

ツイッターに口コミがたくさんあります。  

③オンラインスクールの選び方

トライアル受講があるスクールを選ぶ

お金を出して教材を買うのが不安な方は無料体験があるスクールをおすすめします。

RaiseTechは2週間のトライアル受講ができます。  

お仕事の斡旋があるスクールを選ぶ

お仕事したい方はお仕事の斡旋があるスクールをおすすめします。

ワードプレスコースがあるスクールを選ぶ

どのオンラインスクールでもHTMLとCSSが学べるのでWebサイトを作ることができます。

ワードプレスでサイトを作りたい方はワードプレスコースがあるスクールを選んだ方がいいです。

WordPressコースがあるスクール

ワードプレスは結構癖があります。

静的サイトではJquery動かせるのにワードプレス では動かない…ってことがあるからです。(経験者)

④コーディングする

オンラインスクールを選んだらいよいよコーディング開始です。

Sublime Textをダウンロードする

②ダウンロードしたSublime Textで「〇〇.html」と「〇〇.css」をコーディングする。

この段階では静的サイトと言ってオフライン上だけでしか見ることができません。

⑤Web上で見れるようにする

オンライン上でコーディングしたWebページを表示できるようにします。

②サーバー用意する→①サーバー用意する→③ドメインとサーバーを紐付けする作業が必要となってきます。

⑥サーバーを用意する

「エックスサーバー」でサーバーを用意します。

エックスサーバーで申し込みする

サーバーの申込みをする

「お申込みはこちら」をクリックします。

エックスサーバー ワードプレス  ブログ始め方 手順

10日間お試し新規お申し込みをクリックします。

 

サーバーお申し込みをクリックします。

エックスサーバー ワードプレス  ブログ始め方

 

お客様情報を入力していきます。

プランはX10(スタンドード)で十分です。

エックスサーバー ブログ 始め方

 

24時間以内にIDとパスワードがメールに届きます。

 

サーバーの料金を支払う

無料お試し期間中は料金を支払わなくても10日間は使えますが、10日間を過ぎてしまうとサーバーが凍結されてしまいます。

忘れないうちに料金の支払いを済ませておきましょう。

契約手数料は3,000円、月々の支払いは1,000円です。

 

エックスサーバーで申し込みする

 

⑦ドメインを用意する

「お名前.com」 でドメインを取得します。

お名前.comでドメインを取得する

 

ドメインを申し込む

希望のドメイン名を入力し、検索をクリックしす。

ドメイン お名前.com ブログ始め方 解説 手順

 

 

「契約する年数」→「Whois情報代行にチェック」→「次へ」をクリックします。

「Whois情報代行」は必ずチェックを入れてください。

チェックを入れなければ個人情報がネット上に丸見えになってしまいます。

チェックを入れておけばお名前.comが情報を外へ公開せずに管理してくれます。

 

ブログの始め方 解説 手順 ドメイン

料金を支払う

「ご希望のお支払方法」→「申し込む」をクリックします。

これでドメイン取得できました。

お名前.comでドメインを取得する

 

⑧Xサーバー側でお名前.comで取得したドメインを紐づける

ドメインを設定する

お名前.comで取得したドメインをXサーバーと紐づけます。

サーバーパネルにログインします。

「ドメインの設定」をクリックします。

エックスサーバー ブログ 始め方 解説 手順

 

お名前.comで取得したドメインを入力します。

エックスサーバー ブログ始め方 解説 手順

 

⑨お名前.com側でXサーバーで取得したネームサーバー情報を紐づけする

ネームサーバーの設定をする

Xサーバーで取得したネームサーバーをお名前.comと紐づけていきます。

お名前.comにログインします。

「ドメイン一覧」→「ネームサーバー」→「その他」をクリックします。

ドメイン ブログ始め方 手順 解説

「ネームサーバー」→「その他」

ドメイン お名前.com ブログ始め方

 

ネームサーバー1〜5は、エックスサーバーのサーバーパネル内のサーバー情報から確認できます。

エックスサーバー ブログ始め方

 

 

これで紐づけができました。

 

⑩FTPファイルでサーバーにアップロードする

自分でコーディングした「〇〇.html」と「〇〇.css」をサーバーにアップロードします。

①FilleZillaをダウンロードする

②FilleZillaとサーバーを繋げる

(わたしはエックスサーバーを使っています)

③パソコンからサーバーに自分で作った「〇〇.html」と「〇〇.css」をアップロードする

FileZillaでサーバーにアップロード

 

以上です。

お疲れ様でした!

 

Webデザインの始め方まとめ

無料のProgateで学び、有料のオンラインスクールでWebデザインを学ぶ

 

関連動画

[/box02]