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デザインコース以外にも料金内で下記のコース全て受講可能です。
RaiseTech
| スクール名 | RaiseTech |
|---|---|
| おすすめコース | WordPress副業コース |
|
WordPress副業コースで 学べる内容 |
|
| 金額 | |
|
デメリット |
特になし |
| メリット |
2週間のトライアル受講が可能 Webデザイン+WordPress化 現役エンジニアによるサポート 転職・就職支援あり |
[jin_icon_bulb color=”#e9546b” size=”21px”]WordPressでWebサイトを作れる
Webデザインだけを学ぶだけでは静的サイトと言ってオフライン上でしかWebページを見ることができません。
特にWordPressは少し癖があるのでWebデザインの知識だけでサーバーにアップしてオンライン上で閲覧できるレベルまで持っていくのはむずかしいです。（経験者）
RaiseTechのWordPress副業コースはWebデザイン+WordPress化まで学べます。
[jin_icon_bulb color=”#e9546b” size=”21px”]転職・就職支援
転職・就職支援があるのは最大のメリットです。
他のスクールでもお仕事紹介はありますが簡単なバナーを作るのみで生活できるレベルの仕事に繋がらないものもあります。
[jin_icon_bulb color=”#e9546b” size=”21px”]2週間のトライアル受講
合う・合わないがあるので2週間のトライアル受講があるのはありがたいです｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡
テックアカデミー
| スクール名 | テックアカデミー |
|---|---|
| おすすめコース | Webデザイン+WordPressセット |
| 金額 | 268,000円(8週間プラン) |
| Webデザイン+WordPressセットで学べる内容 |
|
| デメリット | 受講期間が長くなるほど高くなる |
| メリット | 転職支援、クラウドワークスと連携した在宅ワーク支援 |
質問無制限のスキルハックス
買い切り型69800円ぽっきりです。
期間が決まっているものが多いですが、質問無制限がポイントです。
ツイッターから生まれたデイトラ
デイトラは、業界最安値のオンラインスクールです。
買い切り型59800円です。
Web制作コースがおすすめです。
1年間質問できます。
独立サポートは別途オプションです。
ツイッターに口コミがたくさんあります。
③オンラインスクールの選び方
トライアル受講があるスクールを選ぶ
お金を出して教材を買うのが不安な方は無料体験があるスクールをおすすめします。
RaiseTechは2週間のトライアル受講ができます。
お仕事の斡旋があるスクールを選ぶ
お仕事したい方はお仕事の斡旋があるスクールをおすすめします。
ワードプレスコースがあるスクールを選ぶ
どのオンラインスクールでもHTMLとCSSが学べるのでWebサイトを作ることができます。
ワードプレスでサイトを作りたい方はワードプレスコースがあるスクールを選んだ方がいいです。
ワードプレスは結構癖があります。
静的サイトではJquery動かせるのにワードプレス では動かない…ってことがあるからです。（経験者）
④コーディングする
オンラインスクールを選んだらいよいよコーディング開始です。
①Sublime Textをダウンロードする
②ダウンロードしたSublime Textで「〇〇.html」と「〇〇.css」をコーディングする。
この段階では静的サイトと言ってオフライン上だけでしか見ることができません。
⑤Web上で見れるようにする
オンライン上でコーディングしたWebページを表示できるようにします。
②サーバー用意する→①サーバー用意する→③ドメインとサーバーを紐付けする作業が必要となってきます。
⑥サーバーを用意する
「エックスサーバー」でサーバーを用意します。
サーバーの申込みをする
「お申込みはこちら」をクリックします。
10日間お試し新規お申し込みをクリックします。
サーバーお申し込みをクリックします。
お客様情報を入力していきます。
プランはX10(スタンドード)で十分です。
24時間以内にIDとパスワードがメールに届きます。
サーバーの料金を支払う
無料お試し期間中は料金を支払わなくても10日間は使えますが、10日間を過ぎてしまうとサーバーが凍結されてしまいます。
忘れないうちに料金の支払いを済ませておきましょう。
契約手数料は3,000円、月々の支払いは1,000円です。
⑦ドメインを用意する
「お名前.com」 でドメインを取得します。
ドメインを申し込む
希望のドメイン名を入力し、検索をクリックしす。
「契約する年数」→「Whois情報代行にチェック」→「次へ」をクリックします。
「Whois情報代行」は必ずチェックを入れてください。
チェックを入れなければ個人情報がネット上に丸見えになってしまいます。
チェックを入れておけばお名前.comが情報を外へ公開せずに管理してくれます。
料金を支払う
「ご希望のお支払方法」→「申し込む」をクリックします。
これでドメイン取得できました。
⑧Xサーバー側でお名前.comで取得したドメインを紐づける
ドメインを設定する
お名前.comで取得したドメインをXサーバーと紐づけます。
サーバーパネルにログインします。
「ドメインの設定」をクリックします。
お名前.comで取得したドメインを入力します。
⑨お名前.com側でXサーバーで取得したネームサーバー情報を紐づけする
ネームサーバーの設定をする
Xサーバーで取得したネームサーバーをお名前.comと紐づけていきます。
お名前.comにログインします。
「ドメイン一覧」→「ネームサーバー」→「その他」をクリックします。
「ネームサーバー」→「その他」
ネームサーバー1〜5は、エックスサーバーのサーバーパネル内のサーバー情報から確認できます。
これで紐づけができました。
⑩FTPファイルでサーバーにアップロードする
自分でコーディングした「〇〇.html」と「〇〇.css」をサーバーにアップロードします。
①FilleZillaをダウンロードする
②FilleZillaとサーバーを繋げる
（わたしはエックスサーバーを使っています)
③パソコンからサーバーに自分で作った「〇〇.html」と「〇〇.css」をアップロードする
以上です。
お疲れ様でした！
[box06 title=”あわせて読みたい”]
【Webデザイン】ワードプレスでトップページだけコーディングする手順
[/box06]
[box04 title=”Webデザインの始め方まとめ”]
無料のProgateで学び、有料のオンラインスクールでWebデザインを学ぶ
[/box04]
[box02 title=”関連動画”][/box02]
[/box02]
エックスサーバーで設定すること
[chat face=”icon-yuzukkoyuzuporo.png” name=”ゆずっこ” align=”left” border=”gray” bg=”none” style=””]狭いからテイクアウトしよ〜[/chat]
[chat face=”icon-yuzuporo.png” name=”ゆずぽろ” align=”left” border=”gray” bg=”none” style=””]ネギの宝石箱ぽろ〜！！！[/chat]
[chat face=”icon-debuporo.png” name=”でぶぽろ” align=”left” border=”gray” bg=”none” style=””]たこ焼きが見えへん[/chat]
に