Webの最新トピックを配信中!

Webデザイナーに必要なもの

2020年現在、Webデザイナーになるには下記の7つのモノが必要です。

  • パソコン
  • Photoshop(デザインソフト)
  • Illustrator(デザインソフト)
  • XD(デザインソフト)
  • エディター
  • フォント
  • ドメインとサーバー

ひとつひとつ解説します。

パソコン

パソコンについては、気になる「スペック」「デスクトップかノートパソコンのどっちがいいの?」「WindowsかMacのどっちにすべき?」の3つのポイントで解説します。

パソコンのスペック(性能)について


パソコンはこのスペックがあれば大丈夫です。

CPU : インテル Core i5以上
メモリ : 16GB
ハードディスク : 500GB以上(SSDで256GBでも一応OK)
OS : Windows10 or Mac最新
グラフィックカード:無くても良し

すでに持っているPCが、このスペック以上ならそのまま使用してOKです!新たに買う必要はありません。

メモリは16GBは必要です。8GBでは足りません。デザインデータは重いためハードディスクは500GB以上は欲しいです。でもSSDで256GBでもなんとか足ります。足りなくなったら外付けのハードディスクなどを買いましょう。

パソコンの性能については下記の記事でさらに詳しく解説しています。
Webデザイナーに必要なパソコンの性能

デスクトップかノートパソコンのどっちがいいの?

上で紹介しているスペックを満たしているなら、デスクトップでもノートパソコンでもどちらでもOKです。

最近は、ノートパソコンでも安価で高性能のものが多く、持ち運びもラクなので、ノートパソコンにしておけばとりあえず無難です。ただ、ノートパソコンは画面が小さいのでデザインがしづらいです。外部モニターも同時に使用してデュアルモニター(ノートパソコンと外部モニターの2画面)で作業をするのが一般的です。モニターがなければ購入しましょう。

デスクトップとノートパソコンについては下記の記事で詳しく解説しています。
デスクトップかノートパソコンか?メリットとデメリット

WindowsかMacのどっちにすべき?

WindowsでもMacでもどちらでもOKですが、どちらかと言うとMacを使用することをおすすめします。Macには「ヒラギノ」や有名な欧文フォントなど高品質なフォントが最初からインストールされているためです。
ちなみにWebデザインやエンジニア関連のイベントに行くと気づきますが、参加者の9割がMacです。
僕も最初はWindows(Lenovo ThinkPad E430)を使用していましたが、現在はMacBook Pro(2017年モデル)です。

いま持っているパソコンがWindowsなら、そのまま使用してOKです。Webデザインの勉強の段階ではWindowsかMacか?は全然気にしなくていいです。それよりもきちんとデザインソフトの使い方やコーディングの基礎を覚えることに時間を使いましょう。

WindowsとMacのどちらを選ぶべきかについては下記の記事で詳しく解説しています。
WebデザイナーはMacかWindowsのどちらを選ぶべきか?

Photoshop(デザインソフト)


PhotoshopはAdobeのデザインソフトです。「フォトショ」と略して呼ばれています。

2018年頃までは、PhotoshopがWebサイトのデザインソフトでは主流でしたが、最近はXD(エックスディー)が現場で広く普及するようになりました。とはいえ、Photoshopもがっつり使用するため、しっかり使い方を覚える必要があります。

Photoshopを使用するには、Adobeのプランを契約します。職業訓練やスクールに入っていれば学割が効くため、ほぼすべてのAdobeのソフトが使えるコンプリートプランが激安の月額1980円(通常は5680円)になるので、コンプリートプランを契約しましょう。

独学の方で金銭的に余裕が無い場合は、月額980円のフォトプランがおすすめです。Photoshop単体プランだと月額2480円もするのですが、なぜかLightroomとPhotoshopの2つが使えるフォトプランなら980円で契約できます。
Photoshopの公式ページ

Illustrator(デザインソフト)


IllustratorもAdobeのデザインソフトです。イラストやアイコンを作成するのに適したソフトです。「イラレ」と略して呼ばれています。

Photoshopが写真のような画像をメインに扱うのに対して、Illustratorはイラスト的な要素を扱います。地図や間取り図、アイコンなどをイメージするとわかりやすいと思います。

現場にもよりますが、Photoshopに比べると使用頻度はかなり落ちます。パスというイラレ特有の機能があるため、基本的な操作だけは覚えておきたいです。

Adobeのコンプリートプランに含まれています。Illustrator単体プランは月額2480円です。7日間の無料体験が可能です。
Illustratorの公式ページ

XD(デザインソフト)


XD(エックスディー)もAdobeのデザインソフトです。WebサイトのデザインといえばPhotoshopでしたが、最近はXDのシェアが爆発的に伸びています。

Photoshopは本来は画像を加工するためのソフトなのに、サイトのデザインに長いこと用いられてきました。この矛盾を解決するために生まれたのがXDです。純粋にWebサイトのUI(ユーザーインターフェースの略)を作るためのソフトとしてXDが誕生しました。

今後はXDがさらに普及していくと予想されるため、Photoshopに加えて、XDの使い方も覚えておきましょう。XDの操作は難しくないので安心してください。PhotoshopやIllustratorの基本的な使い方を覚えたら、XDの操作は簡単に感じるはずです。

XDはAdobeのコンプリートプランに含まれています。今だけキャンペーンで単体でも無料で使用できるスタータープランがあります。通常版とほぼ変わりません。
XDの公式ページ

エディター

エディターはコーディングをするためのソフトです。


これは、僕も使用するMicrosoft製の「Visual Studio Code(略してVSCode)」というエディターの画面です。無料です。多くのWebデザイナーやエンジニアに愛されてるエディタです。

エディターは他にAtomやWebStorm、Adobe製のDreamweaverなど無数にあります。現場では自分が好きなエディターを使うことが多いです。特にこだわりが無ければ、無料で人気のVSCodeを使いましょう。

Visual Studio Codeの公式サイト

フォント

デザイン作業には、高品質なフォントが必要です。

Macの場合は、ヒラギノや筑紫、Futuraなど有名フォントが最初からインストールされていますが、Windowsはかなりしょぼいフォント状況です…。
でも最近は、Adobeのいづれかのプランを契約していれば無料で使えるAdobe Fontsや、完全無料のGoogleフォントがあるので、フォント難民になることはないです。Adobe FontsとGoogleフォントは必ず使うようにしましょう。

フォントのお得な入手方法
↑こちらの記事では定番のGoogleフォントを紹介しています。

Webデザインの現場で使う定番フォント
現場でよく使うフォントについてはこちらの記事で紹介しています。

Adobe Fontsの公式サイト
Googleフォントの公式サイト

ドメインとサーバー

ドメインとサーバーは、ポートフォリオサイト(自分の作品集)をアップロードするために必要です。

ドメインは、necopon.comといった自分のサイトのURLのことです。ドメインを契約することを「独自ドメインを取得する」とも言います。ドメインはムームードメインお名前.comなどのサイトで取得します。

レンタルサーバーは、サイトのデータを置く場所です。ロリポップエックスサーバーなどのサービスを利用します。

ムームードメインとロリポップは同じ会社なので、ドメインとサーバーの連携が比較的ラクです。

ドメインは年間500〜1500円程度です。レンタルサーバーはロリポップなら月額100円から契約できます。

無料のサーバーとドメインを使ってポートフォリオサイトを作るのはやめましょう。ポートフォリオサイトは自分の名刺のような大事な存在です。きちんと独自ドメインを取得して、ちゃんとしたサーバーで運用するようにしたいです。

さいごに

Webデザイナーになるために必要なのは、このたった7つの道具だけです!ぜひ揃えて勉強をがんばってみてください。

Webデザイナーに必要なスキルについては、下記の記事に書いてあります。
最初にチェック!Webデザイナーに転職する前に最低限持つべきスキル一覧

効率的にWebデザイナーになる方法は次の記事で解説しています。
業界未経験からWebデザイナーになるためのベストなステップ

コラム①:正社員のWebデザイナーを強くオススメする理由

このサイトでは、
本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社すること
を強くオススメしています。

Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。

未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強いワークポートです。Webに強いエージェントは他にもあるし、僕もいくつも登録していますが、ワークポートほど大量に求人案件を紹介してくれるエージェントを他に知りません笑。 なぜワークポートは未経験者に大量の求人を紹介できるのか?その評判の秘密に迫る! ↑ワークポートさんに会ってきました!ねほりはほりと質問をぶつけています。ぜひ読んでみてください。

転職エージェントは複数登録しますが、ワークポートはそのうちのメインエージェントして必ず登録しましょう。

『ワークポート』公式サイトへ
コラム②:Webデザイナーを強くオススメする理由

あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』に行きましょう。プログラマカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。
無料のプログラミング学校はもう一つ、『GEEK JOB』があります。就職率97.8%と驚異的な数字を出しています!よりエンジニア色の強いカリキュラムを受けたい場合はこちらを受講します。
2校ともオススメです。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。
この2つの学校のどちらかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。

30歳以上の方は、『テックキャンプ エンジニア転職』 がオススメです。転職できなければ授業料全額返金してくれます。教室は9時〜22時まで開放し、教室あるいはオンラインでマンツーマンで無制限に質問ができます!超集中なら10週間、ゆったりなら6ヶ月と期間も生活に合わせて選べます。スクールは無数にありますが、有料系ではここが一番爆速に成長できそうです。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

無料のプログラミング学校『プログラマカレッジ』の詳細を読む 『テックキャンプ エンジニア転職』の詳細を読む

Webデザインのご質問やサイトの感想など、お気軽にどうぞ!

みなさまからのコメントを元に記事を作成することありますので、あらかじめご了承ください。
メールアドレスが公開されることはありません。
こちらで承認後にコメントは表示されます。
* が付いている欄は必須項目です。

  • 管理人(ねこポン)について

    週3日だけ会社で働く30代前半ウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。

    ★ 僕の20代まるごと黒歴史ストーリー

    最近ちょこっと『月曜から夜ふかし』に出演しました↓

    ★ 『月曜から夜ふかし』にちょこっと出演したら『BizSPA!』さんにインタビューしてもらいました!

  • なんでもWebの質問受け付け中 (^o^) /♪

  • おすすめのWebデザインスクール一覧

    授業料は無料?有料?通学式かオンラインなのか?など、金銭面や自分の生活スタイルに合わせてスクールを選びましょう!プログラミングを無料で学べるスクールも紹介!

    スクール名 料金 授業形式 ジャンル 就職支援

    求職者支援訓練
    ハロートレーニング
    無料
    (教材費のみ)
    通学
    (約6ヶ月/週4〜5日)
    Webデザイン ハローワークによるサポート
    プロによる総評

    一番おすすめのスクールは国の運営する求職者支援訓練(ハロートレーニング)です。授業料が無料!しかも約6ヶ月という期間がWebデザインの基礎スキルを習得するのに十分な長さです。僕自身も求職者支援訓練を経てWebデザイナーになりました。
    東京にはWebデザイナー系の訓練校は6校ほどあり、各地域にも1〜3校ほどは見つかるため、どんな人も通いやすいのもおすすめのポイントです。
    ふだん税金を払っているので、このようなスクールはしっかり活用させてもらいましょう笑。


    失業保険が受給できる方は職業訓練がおすすめです。期間が約3ヶ月と短くやや理解が浅くなる点は不安ですが、復習や独学で補えれば問題ありません。最近は数は2校ほどで少ないですが6ヶ月コースも登場しました!
    スクール名 料金 授業形式 ジャンル 就職支援

    LIG
    有料
    (¥450,000 〜)
    通学
    (6ヶ月)
    Webデザイン 転職セミナーあり/LIGへの採用実績もあり
    プロによる総評

    金銭的に余裕があればLIGを検討しましょう。超有名Web制作会社LIGによるWebデザインスクールです。現役のプロデザイナーが講師で、Mac&デュアルディスプレイという最新設備で学べます!LIG運営のコワーキングスペースも無料で使い放題。生徒のレベルによってはLIGへの就職も可能です。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    CodeCamp
    デザインマスターコース
    有料
    (¥148,000 〜)
    オンライン
    (2ヶ月〜)
    Webデザイン キャリア支援あり
    (就職エージェントの紹介)
    プロによる総評

    CodeCampはオンラインのWebデザインスクールです。低価格ながら講師から直接指導とフィードバックを受けられるのが最大の特長です!おすすめのコースは「デザインマスターコース」。コスパ重視で講師と対話しながら学びたい人に最適なスクールです。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    TechAcademy
    Webデザインコース
    有料
    (¥139,000 〜)
    オンライン
    (4週間〜)
    Webデザイン 転職サービスあり
    (スカウト制度)
    プロによる総評

    4週間から短期で受講可能なオンラインのスクールです。週2回メンターにビデオチャットで質問ができ、毎日15時〜23時の間に不明点をチャットで質問可能。「Webデザインコース」がおすすめ。ある程度自習ができて最低限のメンターによるサポートが欲しい人におすすめのスクールです。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    プログラマカレッジ
    無料 通学 プログラミング あり
    プロによる総評

    『プログラマカレッジ』は20代限定の通学式で完全無料のプログラミングスクールです。無料なのでエンジニアになりたい方はぜひ挑戦してみてください。スクール側は就業先の企業からお金をもらうことで無料で運営をしています。とはいえ授業の質は高いと評判です。『プログラマカレッジ』の卒業生による体験談記事はこちらです。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    GEEK JOB
    無料 通学 プログラミング あり
    プロによる総評

    上で紹介した『プログラマカレッジ』と同様の20代限定の通学式で完全無料のプログラミングスクールです。プログラマカレッジは決まった時間に通学しますが、GEEK JOBは個別指導なので自分のペースで通学できます。エンジニアになりたい方は、自分の生活スタイルに合わせてどちらのスクールに行くか検討してみましょう。就職率97.8%は驚異的です!

    詳しくはこちら

    Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ