Webデザインで必要なソフトウェアは?用途ごとに解説します

Webデザインで必要なソフトウェアは?用途ごとに解説します

まめ丸
まめ丸

スキルを身につけられるWebデザインに興味がある。

プロのWebデザイナーはどんなソフトを使っているの?

本記事の内容
  • デザインで必要なソフト
  • コーディングで必要なソフト
  • 企画段階で必要なツール

初めまして、リド(@Lido_blog)です。
私は4年制デザイン学校を卒業。前職ではメディア運営をしているIT会社で、デザイナーをしていました。現在はブロガー目指し活動をしています。

クリエイティブな仕事をしたくて、Webデザイナーを検討する方は多いのではないんでしょうか。初心者の独学でも転職が可能な職業です。

デザイナーを目指す方は、Adobeの操作を身につける必要があります。
初心者こそプロと同じソフトを使用して、技術を身につけましょう。

この記事を読めば、始める前に用意すべきツールがわかります。

Webデザインで必要なソフトとは?

Webデザインで必要なソフトとは?

デザインはAdobeのみです。
Adobeとは、画像処理やグラフィック処理、動画編集ができる有料ツールを提供している会社。

値段はコンプリートプランで年間:65,760円で高価ですが、プロは全員使用している必需品です。
Adobeを半額で購入できる方法をAdobeの維持費が高すぎる?正規品を一番安くで買う方法
で紹介しています。

 

ここでは、webデザインで必要なAdobeソフトを用途ごとに解説します。

Adobe Illustrator

主にロゴ、アイコン、装飾などのパーツを作成します。Webデザインでは、サブ的なポジション。

設定を変更すれば、Illustratorでもwebデザインが可能ですが、おすすめはしません。今から勉強する方は、次に紹介するphotoshopで制作しましょう。

Illustratorで必要なスキル

スキルは基本的な操作と知識があれば大丈夫です。

サイトやホームページ作成では、高度な技術は求められていません。

例、
図形でアイコンの制作
文字やアイコンを用いてロゴが作る

Adobe Photoshop

Webデザイン(デザインカンプ)では、メインで使用します。
*デザインカンプとは、コーディング前のデザイン見本のこと。

主にできることは、写真加工、写真の切り抜き、加工全般ができます。

多くの企業やフリーランスはPhotoshopでデザインカンプを制作しています。

Photoshopで必要なスキル

メインで使用するので、基本操作や加工技術が必要。

しかし、高度な写真加工やコラージュはしないので、問題はありません。

基本操作を覚えて、制作をしながら技術を身につけましょう。

LiDo
LiDo

私はIT系だったのでPhotoshopを使っていたよ

例、
Webデザインをする
画像の切り抜き技術
写真のゴミを取り除く

Adobe XD

XDは2017年にリリースされた、webサイトやアプリケーションに適したツール。

webデザインに特化したツール。
今まではphotoshopがメジャーでしたが、XDに移り変わりつつあります。

今から勉強する人は、先に覚えた方が良いですか?
答えは、NOです。
先にphotoshopやIllustratorを覚えましょう。理由はXDで制作する場合でもphotoshopやIllustratorのスキルが重要だからです。余裕があればXDも勉強しましょう。

LiDo
LiDo

Adobeのアカウントがあれば、無料で使えるよ!

構築作業で必要なソフト

構築作業で必要なソフト

web上に表示させる構築作業で使用します。
どれも無料で使用可能。

コーディングはBrakes

Adobeが無料で提供しているエディタ、Brakes。

コーディングとは、デザイン(デザインカンプ)をHTMLとCSSという言語に置き換える作業です。

エディタと呼ばれるツールでコーディングをします。

完全日本語対応で、画面をプレビューしながら制作することができます。

プラグインも充実しているので、使用している方も多いところがポイント。

LiDo
LiDo

私も一番最初に使用したエディタだよ

FTPソフトでサイトを公開

よく使われている無料ソフトはfileZilla(ファイルジラ)。
WindowsとMacに対応しているため、使用者が多いです。

FTPとは、コーディングしたファイルをサーバーに上げる作業で使用します。アップロードやダウンロードができればOKです。

他にも「cyberduck」やwindows専用の「FFFTP」があります。特に違いはないので、使いやすさで選びましょう。

LiDo
LiDo

私はcyberduckを使用していたよ

企画で必要なツール

企画で必要なツール

デザインをする前の準備作業が2つあります。

紹介するソフトは、基本的な操作ができれば問題ありません。決まりはないので、他のソフトで代用も可能。

準備作業が2つ
  • サイトマップ
  • ワイヤーフレーム

サイトマップとは

サイトマップとは、
サイト内で必要な要素を書き出してまとめたもの。

書き出してまとめて、お客様と認識の擦り合わせをしつつ、詰めていきます。

このサイトマップを使用しながら次に作業をします。
文字でまとめるので、特殊なツールは入りません。

主に使われているのは以下の通り。

Googleドキュメント:無料
Googleスライド:無料

LiDo
LiDo
お客様と共有できるソフトが良いね

ワイヤーフレームとは

ワイヤーフレームとは、
サイトマップから「どこに何を置くのか」を記した設計図(ラフ画)。

設計図を見ながら、認識の擦り合わせをします。
私は紙に描いていましたが、データとして送る場合はソフトやサービスを使います。

ワイヤーフレーム専用のCacooというサービスもあります。

使いやすいツールで制作しましょう。

AdobeXD:無料
Cacoo:一部無料
手書きでもOK

LiDo
LiDo
私ならXDで作るかな

webデザインは手軽に始められる

webデザインは手軽に始められる

Webデザインは独学・初心者でも転職が可能な職業。
PCとAdobeがあればすぐに始められます。

 

必要なもの

企画段階
Googleドキュメント:無料
Adobe XD:無料

 

デザインカンプ
Adobe Illustrator:有料
Adobe photoshop:有料

 

構築段階
Brakes:無料
fileZilla:無料

 

Adobeはコンプリートプランで年間:65,760円。
2つ以上使用する場合は、書体が付いているコンプリートプランがお得です。

Adobeを半額で購入できる方法をAdobeの維持費が高すぎる?正規品を一番安くで買う方法
で紹介しています。

 

デザインに向いているPCの選び方は、下記のリンクで解説していますよ。
>>デザイナーに勧めるPCの選び方

LiDo
LiDo

AdobeとPCを持っていない方は見てみよう

 

Web制作の流れ
  1. サイトマップとワイヤーフレームを作成
  2. 資料を元にデザインカンプを作る
  3. コーディング作業
  4. FTPでサーバーに上げる

 

詳しい制作の流れは技術を勉強しながら覚えられます。

では、「Webデザインで必要なソフトは?用途ごとに解説します」ついて解説しました。

 

コメント

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