【Webデザイン】Webサイト制作を始める前に<br>必要なツールを確認しよう | 副LoG:FukuLoG

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

WEBサイト制作

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

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

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

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

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

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

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

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

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

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

・SublimeText3

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

Download - Sublime Text

・Visual Studio Code

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

Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

・Atom

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

A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We c...

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

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

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

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

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

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

UIデザインツール

・Adobe XD

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

Adobe XD体験版ダウンロード | UI/UXデザインと共同作業ツール
Adobe XDスタータープランを無料でダウンロードできます。XDは、webサイトやモバイルアプリのデザインに適した、UI/UXデザインのソリューションです。webデザインからプロトタイプ、共有まで無料でおこなえます。

Figma

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

Figma: the collaborative interface design tool.
A better way to design. Design, prototype, and gather feedback all in one place with Figma.

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

GIMP

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

GIMP
GIMP - The GNU Image Manipulation Program: The Free and Open Source Image Editor

Inkscape

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

Draw Freely | Inkscape
Inkscape is professional quality vector graphics software which runs on Linux, Mac OS X and Windows desktop computers.

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

コメント

タイトルとURLをコピーしました