WEBサイト制作

Webサイト制作に必要なツール!始める前に確認!

2019年11月11日

こんにちは。うりのすけです。

Web制作を始めようと思い立ったわけですが、まずは何が必要かというところを確認しましょう。

まずは何はなくともコーディングスキル!

ぶっちゃけて言えば、特にツールはなくともコーディングの知識があればサイトは作れます。メモ帳にHTMLを打ち込めばOKです。

とはいってもやはりツールがあれば便利でコーディングが楽になります。なので便利なツールをそろえた上でコーディングの勉強をしていきましょう。

まずはHTMLとCSSです。これが出来ればとりあえずそこそこのサイトは作れます。うりのすけは「Webクリエイターボックス」Mana さんのHTML&CSSとWebデザイン入門講座という書籍で絶賛勉中です。

https://fukulog.work/?p=25

あとは、javascript・PHPなどデザイン等も含めるとillustratorやPhotoshopも勉強しておきたいところです。

テキストエディタのおすすめ3選!

勉強するにあたってまず欲しくなるのがテキストエディタです。先ほどメモ帳でもできると言いましたが、テキストツールと比べると天と地の差があります。

というで、何種類か試した中で使いやすかったものをご紹介します。

・SublimeText3

一番の魅力は軽い!とにかく軽くて動きが軽快です。
無料で使えて、プラグインが非常に豊富なため必要な機能は 後でどんどん追加していけます。 自動保存にも対応しているため安心してコーディングできます。 ユーザー数も多いので使用方法についてもネットですぐに調べられます。

https://www.sublimetext.com/3

・Visual Studio Code

こちらも無料ソフトです。Microsoft製ということもありWindowsと使い方が似ているのでWindowsユーザーには親しみやすいインターフェースです。こちらもプラグインが豊富で拡張機能は充実しています。ソフトは軽量な部類なので動きは良いほうかと思います。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

・Atom

SublimeText3 とならんで人気のテキストエディタですね。 Github社が開発しているため将来性には期待ができます。ただ少し使ってみた感じだと動作が重いです。 SublimeText3 と比べると雲泥の差です。よく使うツールなだけにこれはストレスになります。将来性は抜群なだけに動作性の部分が改善されれば素晴らしいエディタになりそうなんですが。。。

https://atom.io/

その他、AdobeのDreamweaverは有料ですがすごく高機能で使いやすいようです。Webサイト制作で収入が得られるようになってきたら使ってみたいですね。

うりのすけは動作性が一番大事なので SublimeText3 を使用していきます。

UIデザインツールとグラフィックツール

実際にサイトを作るとなるとサイトのデザインを考えなければいけません。その際に必要になってくるのがUIデザインツールです。WebサイトのUI(ユーザーインターフェース=サイトの見た目や使い易さ)のデザイン作成に特化したツールとなります。Mac専用になりますがSketchが非常に人気ですね。

あとはロゴ画像や画像編集に特化したデザインツール(グラフィックツール)もあります。有名なのはAdobeのPhotoshopやillustratorですね。

まずは無料ソフトで運用したいので無料で探してみました。ある程度コーディングの勉強が進んできたら、試してみたいと思います。

UIデザインツール

・Adobe XD

Adobeのソフトですが無料で使えます。ソフトが軽量でサクサク動くと評判です。シンプルな画面で操作方法もわかりやすく初心者におすすめとのこと。

https://www.adobe.com/jp/products/xd.html

Figma

ブラウザ上で動作するデザインツールです。デスクトップ版もあるようですが、ブラウザソフトがあれば使えます。外出先等で編集が必要になった利する場合には便利ですね。

https://www.figma.com/

グラフィックデザインツール

GIMP

レイヤー機能、画像加工等の様々な機能が使える多機能画像過酷ソフトです。プラグイン等の機能拡張が豊富でPhotoshopの代わりとしても充分な機能があるようです。

https://www.gimp.org/

Inkscape

illustratorの機能に似たソフトで、レイヤー機能から図形の操作編集までできる高機能ソフトです。画像・ロゴの作成に向いているようです。

https://inkscape.org/ja/

もう少しコーディングの勉強が進んだらポートフォリオの作成も考えていきたいので、デザインツールも勉強していきたいです。

  • この記事を書いた人
  • 最新記事

うりのすけ

新卒⇒派遣社員として就職⇒正社員に転職⇒2度目の転職で大手自動車メーカーに転職 機械系エンジニアをやっていて、Webライター×ブログで月10万円稼ぐことを目標に絶賛活動中。 ブログ運営×副業×転職をメインに気ままにブログ更新中

-WEBサイト制作
-, ,

© 2020 副LoG:FukuLoG