Web制作は無料で勉強！Atomをインストールして開発環境構築

Webデザインを始めたいけど、どんなソフトやツールを使えばいいの？何から始めればいいの？という方も多いと思います。

PCがあれば無料でWeb開発環境を作ることができます。まずはWeb開発環境をつくってみましょう。

この記事では、Web制作に必要な開発環境を作る方法（Windows向け）をご説明します。

Google Chromeをインストールしよう

Web制作をする上で一番使い勝手のいいブラウザはGoogle Chromeです。

Google ChromeのデベロッパーツールはWebデザイナーなら毎日使うことになるでしょう。Web開発に便利な拡張機能もあるので、まだインストールしていない人は最初にインストールしておきましょう。

多くの制作会社では効率を考えてAdobeのDreamweaverを導入しているところがほとんどだと思いますが有料なので、個人で勉強するには無料のAtomをインストールして開発環境を作りましょう。

Web制作はhtmlとCSSで開発するのですが、そのためのツールが必要です。AtomがあればDreamweaverがなくても無料で制作が可能です。

インストールが完了したら、下の画面が表示されます。右上に表示されるポップアップウィンドウでは「Yes, Always」をクリック、左下の「Show Welcome Guide when opening Atom」の左側のチェックは外しておきます。これでAtomのインストールは完了です。

このあと、開発用MyricaフォントをAtomに設定しますが、一旦Atomは終了しておきましょう。立ち上げたままだと新しくインストールするフォントを認識できません。

一般的なフォントだと1やl(エル）、o（小文字オー）とＯ（大文字オー）、０（ゼロ）など紛らわしくタイプミスや不具合の検証時にわかりづらいので、開発用にはこれらの間違いやすい数字やアルファベットが判別しやすいフォントを使用します。

おすすめの開発用フォントは「Myrica（ミリカ）」です。プログラマーに人気なフォントには「Ricty Diminished」がありますがWindows環境だとフォントが見づらいこともあります。Rictyフォントを継承してさらに見やすく開発されたフォントがMyricaです。

Myricaのページを開きスクロールすると中央あたりにダウンロード用リンクがあります。Myrica.ttcでもMyricaM.ttcでもどちらでもいいですが、ASCII文字以外の日本語部分に若干違いが見られます。

AtomでMyricaフォントを使うためには設定があります。簡単なのでもう少し頑張りましょう！

Atomを立ち上げます。[Yes, I want to help improve Atom]というのは、Atomの改良にあたり協力してね、という意味です。協力といってもこちら側でやることは何もないので、Yesの方を選択してあげましょう。

フォントの設定はこれだけです。

Web開発には、高額なソフトがなくても無料のAtomをインストールすることで可能になります。開発用のプログラミング用フォントはデフォルトのものだとＯや０など、判別が紛らわしいので「Myrica」というフォントをインストールし、Atomのデフォルトフォントとして適用させます。

これでWeb制作の環境が整いました。

難しい！　と感じた人はスクールに通おう！

スクールで学ぶと、すでに環境構築が整っている環境で学ぶことができます。Atomはコーディングのため、インストールは簡単なものですが、エンジニア向けの開発環境を自分のPCで構築するのは初心者には難しいです。

環境構築の段階でワケのわからない英語のエラーが画面いっぱいに表示されてホラー…(´∀`;)　みたいなことになり、勉強をはじめる以前に挫折する人も少なくありません。

スクールでは効率的に勉強できるので、難しいと感じた人はスクールに通いましょう！