WEBサイトを作ってみたいけど、なにが必要かわからない。
WEBデザイナーになるための勉強をしたいけど、なにが必要かわからない。
そんな方向けに、「WEBサイトを作るために必要なもの」について書いていきたいと思います。
WEBサイトをインターネットに公開するまでの流れ
まずWEBサイト公開までのざっくりとした流れは、
➀ グラフィックソフトを使ってデザインをおこして
② エディターソフトでhtml/cssを書いて
③ FTPソフトを使ってサーバーにアップロードする
という流れになります。
WEBサイトをつくるために必要なもの
パソコン
何はともあれ、まずパソコンがないと何も始まりません。
すでにパソコン持っているならば、ノートパソコンでもデスクトップパソコンでも構いません。WindowsでもMacでも構いません。スペックもそこそこあれば大丈夫だと思います。（PhotoShopを使いたいのであれば、ある程度スペックは必要です。）
もし現状パソコンを持っていないのであれば、できればデスクトップパソコンで、どちらかと言えばMac（Windowsでもぜんぜん構いません。）がいいと思います。
将来的にWeb制作の仕事に就きたくて、フロントエンドエンジニア志望であればノートパソコンでもいいと思いますが、デザイナー志望であればノートパソコンだと画面が小さくてデザインしづらいので、デスクトップパソコンの方がいいでしょう。
ちなみに、現役のフロントエンドエンジニアの人もノートパソコン（主にMacBookPro）を使って仕事をしている人が多いです。
≫ WEBデザイナーに就職・転職するにはWindows?Mac?どっちが有利？
デザインを描くためのグラフィックソフト
デザインを描くためにはグラフィックソフトが必要です。プロの現場では、ほぼ100％Adobe社のPhotoshopを使ってデザインをおこしてます。今後、WEBデザイナーなどを目指すのであれば、Photoshopを使ったほうがいいでしょう。
Photoshopを含めてAdobe社のソフトはサブスクリプションでのみの販売になっています。Photoshopを含めた色々なソフト全て使用可の「コンプリートプラン」が月額4,540 円で、PhotoshopとLightRoomのみ使用可の「フォトプラン」プランが月額980円となっています。
なるべく無料でやりたいという人向けには、Photoshopのような有名な「Gimp」という無料のグラフィックソフトがあります。正直私は使ったことはないのですが、Mac、Win両OSに対応していても使用しているユーザーも多いので、ググると簡単に使い方など調べられると思います。書店にも解説本など結構置いてあるので気になる方は見てみるのもいいでしょう。
≫ AmazonでAdobe Creative Cloudを安く買う方法
html/cssを書くためのエディターソフト
html/cssを書くためのエディターソフトとして、SublimeText3、Atom、VScodeあたりが有名どころだと思います。どれもMac、Win両OSに対応していて無料で利用できます。基本的にどれでもいいのですが最近だとVSCodeを使っている人がプロの現場では多いようです。VScodeはMicrosoftが開発していてMacでも使える無料のエディターソフトです。プラグインが豊富なため自分好みにカスタマイズでき、動作も軽いので最近人気があります。特にこだわりがなければ、VSCodeを使うのが良いのではないでしょうか。
≫ Visual Studio Code(VScode)のインストール、日本語化とWeb制作向けオススメ拡張機能
作ったWEBサイトをアップロードするためのサーバー
WEBサイトをインターネット上に公開するためには、レンタルサーバーと契約しなければなりません。レンタルサーバー会社はたくさんあるので、初心者は迷うかもしれません。正直言って、個人でWEBサイトを公開する程度あれば、どこの会社もさほど変わらないと思います。自分も職業柄、色々なレンタルサーバーを使ったことがありますが、特に違いを強く感じたことはありません。個人的にはサーバーには安定性を重視しているので大手の方がいいかなと思っています。
初心者のかたはユーザー数が多いメジャーなところのレンタルサーバーを使えばいいのではないでしょうか。ユーザー数が多ければ、使い方など迷うことがあったとしてもググればいくらでも解決法などネットで探せると思います。ちなみにレンタルサーバーの国内シェア1位がエックスサーバー、2位がロリポップ、3位がさくらインターネットとなっています。
各々のサーバーの特徴を簡単にまとめてみました。
エックスサーバー
・WordPressを使ったサイトの運用に最適化。
・月額900円(税抜)から、大容量200GBからの高コストパフォーマンス。
ロリポップ！
・10日間無料お試し期間あり。
・月額100円/20GBという驚異の格安プランあり。その他のプランもリーズナブル。
さくらインターネット 
・２週間無料お試し期間あり。1996年創業の老舗のサーバー会社。
・スタンダードプラン 月額524円/100GB。
・当ブログも「さくらインターネット」で運用しています。
※ 最新の情報につきましては各レンタルサーバーのホームページからご確認ください。
≫ 2022の日本でのウェブホスティングのマーケットシェア
作ったWEBサイトをサーバーにアップロードするためのFTPソフト
作ったWEBサイトをサーバーにアップロードするには、FTPソフトを使ってアップロードします。有名なのがFileZilaというソフトで、無料で使えてMac、Win両OSに対応しています。見た目はちょっと古くさい感じがするかもしれませんが、分かりやすく使いやすいソフトだと思います。
WEBサイトのつくり方の勉強方法
初心者がはじめに手に取るならこの1冊
WEBサイトのつくり方が書かれた本の中で、「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」が初心者には一番良さそうだと思いす。今後WEB制作を仕事にしていきたい人向けにも、どうやってWEBサイトを作っていけばいいかが丁寧に書かれているので、プロがどういう流れでWEBサイトを作っていくががイメージできるかと思います。
オンライン学習サイトを利用してみる
上で紹介した本以外にも、例えば「ドットインストール」や「Paiza」「Progate」などオンライン学習サイトを利用してみるのもいいでしょう。またコースごとの購入方式の「Udemy
」など使って勉強してみてもいいかもしれません。「html」とかで検索すると該当するコースが表示されます。1コース1万とか2万円以上するものも多くありますが、頻繁にセールを行っているので、セール時に購入すれば普段なら2万円以上のコースが2,000円弱で購入できたりします。私も何か新しい技術を勉強する時はよく「Udemy
」を利用しますが、基本的にセール時に気になるものを幾つかまとめて購入しています。セール以外では買ったことはないです。有料のコースだけでなく、無料のコースも多数あるので一度チェックしてみることをオススメします。
本格的にWeb制作を学びたいけど独学は不安だという人、将来的にWeb制作の仕事に就きたい、短期集中で学びたいと思っている人は「CodeCamp」などのオンライン・プログラミングスクールなどを利用してみてもいいでしょう。例えば、「CodeCamp」ではPhotoshopの使い方からHTMLコーディングまで学べるデザインマスターコースがあり、無料体験もできるようです。気になる方はチェックしてみてはいかがでしょうか。
-
-
初心者からWEBデザイナーを目指す！プログミングスクール7校比較
TechAcademy 対象コース ・フロントエンドコース ・Webデザインコース ・Webディレクションコース etc 受講期間 8週間～16週間 受講スタイル オンライン 転職支援 ・専属のキャリ ...
続きを見る
まとめ
自分でWebサイトを作れるようになると、自らサイトを通じて色々発信できるようになりますし、なんだったら仕事にも役立つようになるかもしれません。Webサイトを作れるようになって損はないです。決して大げさな話ではなく人生の選択肢がふえる技術だと思います。趣味でWebサイトを作りはじめてそれが本職になった人なんてたくさんいます。Facebookのザッカーバーグだって、もともと仲間内でつくって楽しんでたサイトが後にFacebookになった訳ですし。
以上、WEBサイトを作るために必要なものをまとめて、ちょっとだけ勉強の仕方についても書いてみました。すこしでもこの記事がお役に立ったなら幸いです。
≫ 【超初心者向け】ゼロからのHTML/CSS勉強法【独学】
≫ 30代未経験でWEBデザイナーになれるのか？
