ブログ
【WEB制作の基本】ホームページ作成ツール
ホームページを作成するときには、ツールやソフトが欠かせません。
ホームページ制作を始めたいと考えている方の中には「どんなツールやソフトが必要なの？」「具体的に何から揃えればばいいの？」という疑問をお持ちの方も多いと思います。
今回の記事では、私が普段からコーディング・WEBデザイン作業をする際に利用しているおすすめのツールやソフトを紹介していきます！
コーディング編
Visual Studio Code [テキストエディター]
HTML&CSSやJavaScriptのコーディング作業で無くてはならないのがテキストエディタですが、テキストエディタにはMicrosft社のVisual Studio Code(ビジュアル・スタジオ・コード)がおすすめです。
テキストエディタには、上記のVisual Studio Code以外にもAtom、Bracketsなど様々な種類のものがあります。
実際にWeb制作スキルが学習できる多くの書籍やオンラインスクールでも、Visual Studio Codeを前提にした教材が用意されています。以上の理由からVisual Studio Codeは、これからWeb制作を学習する方には真っ先に導入して欲しいツールとなります。
▼公式サイトはこちら
https://code.visualstudio.com/
GitHub [バージョン管理]
自分が書いたHTML、CSS、JavaScriptなどのソースコードを管理するためにGitHub(ギットハブ)を利用しましょう。
GitHubを使えば、バージョン管理ソフトGit(ギット)を使ったリポジトリの作成や管理、共有を、ブラウザから簡単に行うことができます。
▼公式サイトはこちら
https://github.com/
WordPress編
WordPress [CMS]
WordPress(ワードプレス)はWebサイトやブログの構築に利用できる無料のソフトウェアです。
WordPressはもともとブログを構築するために開発されたソフトウェアですが、強力な編集機能やカスタマイズ性の広さから、Webサイト制作におけるCMS(コンテンツ・マネジメント・システム)としての用途で注目をあつめ、現在では多くのWebサイトにWordPressが採用されています。
※CMSとはWebサイト上のテキストや画像などのコンテンツを管理して、配信などの処理を行うことが出来るシステム全般のこと。
▼公式サイトはこちら
https://ja.wordpress.org/
▼WordPress構築に必要なスキル
①「HTML&CSS」や「JavaScript(jQuery)」のコーディング
②プログラミング言語「PHP」の基礎知識やコーディング
③WordPressの「テーマ」の作成方法やカスタマイズ
LOCAL [ローカル開発環境構築]
LOCAL(ローカル)はWordPressを使ったWEBサイトの制作で欠かせないのがローカル開発環境構築のためのツールです。
ローカル開発環境とは自分のPC上に用意したソフトウェアの実行環境、もしくは作業環境のことです。
自分のPC上でのみ利用できる環境は一般的に"ローカル"という言葉を使って表現されます。また実際にインターネット上に公開されたWEBサイトの事は、ローカルと対比して"本番環境"とも呼ばれます。
▼ローカル開発環境の目的
①オリジナルテーマの開発
②テーマやプラグインの動作確認や検証
③本番のWEBサイトの安全な運用管理
ローカル開発環境には、上記のLOCAL以外にもXAMPP、MAMPなど様々な種類のものがあります。
▼公式サイトはこちら
https://localwp.com/
サーバー・ドメイン編
さくら [サーバー・ドメイン]
Webサイトの公開に必要になるサーバーやドメインは、いずれもレンタルサーバーに契約することで用意できます。
レンタルサーバーの中でもさくらは、安定した人気のある老舗サーバであり、価格も安くコスパも良いので、これからWordPressを始めたい方におすすめです。
▼公式サイトはこちら
https://www.sakura.ad.jp/
FileZilla [FTPソフト]
FileZilla(ファイルジラ)はサーバーにファイルのアップロードするために使用するFTPソフトです。
FTPソフトとはFTP(File Transfer Protocol)という通信を利用してPCとサーバー間でのファイルの送受信(アップロード・ダウンロード)をするためのソフトのことです。
▼公式サイトはこちら
https://filezilla-project.org/
デザイン編
AdobeCC [デザインツール]
Adobe CCとは、「Adobe Creative Cloud」の略でAdobe社が提供するクリエイティブソフトのサブスクリプションサービスのことです。
クラウド化されたことでアップデートやデータ管理が容易になった点、パソコンやタブレット、スマホなどマルチデバイスに対応している点がAdobe CCの特徴です。
WEBデザインで必要なAdobeのツールは、Photoshop・Illustrator・XDの3つです。
▼公式サイトはこちら
https://www.adobe.com/jp/