WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

現役デザイナーが使用するWEBデザインに必要なソフト

WEBデザイナーが使用するソフトウェア

WEBデザインを行う上でデザイナーは様々なアプリケーションを使用します。必須といえるアプリケーションに加え、デザイナーが各々でデザインを行う上で便利なアプリケーションを個別にインストールして使用するのが、WEBデザインの現場です。

未経験者の方でもわかりやすいように、必ず必要なソフトウェアから私が今まで経験してきたWEBデザインの制作現場で使用されているソフトをご紹介します。

必須のWEBデザイン用ソフト

WEBデザイン業界未経験の人は必ず習得するべきソフトウェアです。ネットの情報では代わりのフリーのソフトで十分という意見もありますが、それは趣味のレベルで業務の話ではありません。WEBデザイナーとして経験を積んでから他のソフトウェアに変える人もいますが、WEBデザインの業界にいる人すべてが習得しているソフトウェアです。

Photoshop

photoshop
Photoshop

WEBデザイナーがウェブサイトのデザインを行ったりバナーをデザインするときに使用するソフトウェアです。写真の編集から印刷物のデザインまでこなせるデザインにおけるオールマイティなソフトウェアで、これを持っていないWEBデザイナーは存在しないといっても過言ではありません。まずはPhotoshopを手に入れることからWEBデザイナーの勉強が始まります。

デザインした画像をJPEGやGIF・PNGなどに書き出すことでウェブサイトのに入れるパーツを量産して、それをHTMLに組み込みことでウェブサイトが作られていきます。

Dreamweaver

dreamweaver
Dreamweaver

HTML・CSS・javascriptといっウェブサイトを作り上げるプログラム言語を入力していくコーディングと呼ばれる作業をするためのソフトウェアです。テキストエディタと呼ぶ現場もあります。

特徴は豊富な補助機能があることで、サーバーのログイン情報を設定することで、ワンクリックでファイルをアップロードすることが出来たり、様々なボタンをクリックすることでコードが自動で挿入される、ファイルをドラッグアンドドロップするだけでCSSや画像へのリンクが自動でコードとして表示されるなどといった機能が満載です。

WEBデザイン業界の基準とされているソフトウェアであり、初心者がまず最初に使うべきコーディング用のソフトウェアです。

その機能の豊富さ故に若干動作が重たいこともあり、補助機能が必要ない玄人なWEBデザイナーやHTMLコーダーは別のCoda2やSublimeTextといったソフトを使います。

Illustrator

illustrator
Illustrator

WEBデザインでは基本的には使いませんが、ワイヤーフレームと呼ばれるウェブサイトの骨子となりるレイアウトを組むときに使われることがあります。

例外として使われるのが、ベクターデータと呼ばれる拡大縮小しても画質が劣化しないをPhotoshopで使いたい時に、ファイルをIllustratorで作成してコピーし、PhotoshopにペーストすることはWEBデザインの現場ではよく使うテクニックです。

実際にはフリーでダウンロードできるAI・EPSデータをWEBデザインで使用したいために一度Illustratorで開きPhotoshopに移してデザインするという使い方をします。

WEBデザイナーがよく使うソフト

基本的なソフトウェアに加えて、現場では様々なソフトウェアを駆使して効率よくウェブサイトを作れるようにWEBデザイナーがそれぞれ独自の環境を作っています。その中でも多くのデザイナーに使われているソフトをご紹介します。

Lightroom

lightroom
Lightroom

WEBデザインの素材となる一眼レフで撮影されたRAW画像を編集することに特化したソフト。Photoshopよりも複雑で精密な処理ができるため、写真加工をLightroomで行い、Photoshopでデザインするという使い方をします。

Coda2

coda2
Coda2

Dreamweaverの代替として使われるコーディング用のソフトウェアです。Macのみの販売ですが、9800円(2016年現在)で購入できることから月額2160円のDreamweaverよりも1年も使えば安くなります。

WEBサイトののデザインをしないHTMLコーダーと呼ばれるコーディングのエキスパートの方がよく使います。

SublimeText 3

sublimetext3
SublimeText 3

Dreamweaverに次ぐ使用率だと思われるコーディング用のテキストエディタです。MacとWindowsの両方に対応しています。

インストール段階では必要最低限の機能しか入っておらず、プラグインをどんどん追加していくことで機能拡張をしていけるソフトウェアです。個人で使う分には無料で使用でき、ビジネス用途では70ドルです。

非常に軽快なソフトウェアで、私のメインのエディタはSublime Text 3です。大手の企業の支援やプロジェクトに入る場合はDreamweaverと使い分けています。

Koala

koala
koala

SCSSやSASSといったCSSメタ言語をコンパイルするソフト。近年になりCSSを楽に管理運用するためのSCSSなどのメタ言語といったものが開発されました。記述は少し複雑にありますが、CSSを2重に書いてしまうなどのエラーがおこないため、WEB開発現場では多用されています。

HTMLは直接SCSS / SASSを読み込めないため、ファイルをCSSに変換する必要があります。それを行うのがKoalaです。

CSSメタ言語はDreamweaverでもコーディングすることができ、Koalaを同時に起動しておくとリアルタイムでSASS / SCSSをコンパイル(CSSに変換)してくれます。

XAMPP / MAMP

mampとxampp

XAMPP
MAMP

ローカルサーバーという環境を作るためのソフトウェアです。WindowsならXAMPP、MacならMAMPというアプリケーションがスタンダードです。両方共無料です。

WEBデザイナーとしてはPHPというサーバー言語(サーバー上で動くプログラム)を扱う場合はHTMLやCSSのようにブラウザで表示すれば動くというものではないので、PHPが動くローカルサーバーが必要になります。

最近だとブログや企業サイトにも多く使われるWordPressというCMS(コンテンツマネジメントシステム)を利用したウェブサイト開発をするときに使用します。

Premiere

premiere

Premiere

動画を編集するソフトウェアです。HTML5が業界基準になりHTML内に動画を組み込み事が可能になったことからウェブサイトに動画を使う需要が増えてきています。

写真やデザインに比べて動画はごまかしが効きにくく、商品やサービスの生々しさが伝わるという点で需要が高まっています。この流れに乗りWEBデザイナーも動画ファイルを扱う機会が増えています。

多くのソフトを扱えることがデザイナーの価値を高める

WEBデザイナーという職業は人によって捉え方が違います。Photoshopでウェブサイトのデザインをするだけという人も入れば、デザイン・コーディング・SEO・動画・写真をオールマイティにこなす人もいます。

仕事をお願いする企業の立場からすると、多くのスキルを持っており1人で完結できるのであれば動画編集や写真撮影を外注する必要もないため高額の給料を支払ってもそのWEBデザイナーを雇う価値があります。

自分の目指すWEBデザイナーには何が必要なのかを考えてスキルを磨くことがWEBデザイナーとして成功する手段の1つです。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST