ゆめいろデザイン

Webデザイナーの仕事内容を解説！まずは「デザイン」から

Category / Webデザイナーのお仕事

Webデザイナーの仕事を解説していきます。Webデザイナーの仕事は大きく2つあります。「デザイン」と「コーディング」です。将来フリーランスになりたい場合には、「デザイン」と「コーディング」以外にも営業・ディレクションなどを覚える必要がありますが、はじめは「Webデザイン」とツールについて知っておきましょう。

Webサイトのデザインの流れを知ろう

一般的なWebサイトをデザインする流れは次の通りです。案件によってはこの順番でやらないケースもあります。

  1. クライアントにWebサイトが実現したい目的などをヒアリング
  2. ワイヤーフレーム（サイトの設計図）を作ります。
  3. ワイヤーフレームを元に、Webサイトをデザイン
  4. デザインを基にコーディング

「Photoshop」「XD」「Sketch」「Figma」などは、この場合の「ワイヤーフレームを元に、Webサイトをデザイン」する時に使うツールです。

Webサイトのデザインとは？

一般的なWebサイトをデザインとは、ワイヤーフレームを元に、Webサイトの見た目を作っていくこと。つまり、実際のWebサイトを想定してサイトを作っていきます。
レスポンシブWebデザインの場合は、スマートフォンとパソコンのデザインを作っていきますが、案件によってはタブレットのデザインを作ったりします。

もちろん、単に画面を作るだけではNGです。「クライアントのビジネス目的」があるのでその目的を外れるのはNG。さらにコーディングする人が別にいる場合は、彼ら・彼女らのためにデザイン指示書を作ることまで仕事に入ります。

Webサイトのデザインツール

Webサイトのデザインには、主にAdobe社のソフトウェアを使っている人が多いです。
「Photoshop」か「XD」を使うことがほとんどです。稀に「Illustrator」を使ってデザインする時もあります。

最近はレスポンシブ Webデザインが周流になってきたのでXDが広く使われています。PhotoshopやXD以外にも「Sketch」「Figma」というツールを使っていることも増えてきました。ただ、デザインツールは違っても、「Webサイトのデザイン」と言う仕事自体は同じです。

PhotoShop

Photoshopは世界で最も有名な画像編集ソフトです。写真を加工・合成したり、美しいグラフィックを作ったりと本当に色々なことができます。
XD・Sketch・Figmaが登場する前はWebサイトのデザインに主に使われていました。現在でもバナー作成ではよく使われています。
PhotoShopはパフォーマンスが悪い（軽快に動作しない）ことが最大の欠点です。

Photoshop よくばり入門
インプレス

Adobe XD

XDはWebサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツールです。PhotoShopやIllustratorと比較すると簡単に操作が可能です。また、PhotoShopやIllustratorと違ってWebサイトのために作られたツールなので便利機能も多く揃えています。いちばんのメリットは軽快に動作することです。

豊富な作例で学ぶ Adobe XD Webデザイン入門
マイナビ出版

Illustrator

Illustratorは、イラスト制作は勿論のこと、ロゴタイプや図面、広告、パッケージなどをデザインする描画ツールソフトとして、印刷業界などあらゆる分野で使用されています。印刷物（チラシや小冊子）制作ソフトの標準ツールとなっています。Webサイトデザインでは、主にアイコンやロゴを扱うときに使われています。

Illustrator よくばり入門
インプレス

Sketch

SketchはWebアプリケーションやWebサイトなどのUIデザインを設計するためのツールです。UIデザインだけでなく、企画書やプレゼンテーションなどを作成するのにも使えたりします。世界を見渡してみると、Sketchの利用ユーザーは非常に多く、AppleやFacebookなどの有名企業のデザイナーたちにも使われています。

UIデザイナーのためのSketch入門&実践ガイド
ビー・エヌ・エヌ新社

Figma

Figmaはブラウザ上で共同編集できるデザインプラットフォームで、UIデザインやワイヤーフレームの作成に便利なデザインツールです。主にホームページのUI設計の際の、ワイヤーフレームやプロトタイプの制作に最適な機能がそろっています。
最近日本語化されたためこれからさらに人気が出るでしょう。

Figma for UIデザイン
翔泳社

ツールは1つだけではNG！最低限でいいので複数覚えておきましょう

さて、これだけツールがあって、初心者の方は何を覚えればいいの？と思うかもしれません。

結論から言うとWebサイトのデザインツールは1つだけ覚えればいいわけではありません。なぜならば、デザインとコーディングを一緒に担当する案件ばかりではないからです。

今までの私の実例でお話ししてみましょう。Webサイトだけ上げても次のような実例が過去ありました。

  • 案件Aでは「XD」でデザインしてデータ納品してほしい
  • 案件Bでは「Illustrator」でデザインしてデータ納品してほしい
  • 案件Cでは「Figma」のデザインデータをコーディングしてほしい
  • 案件Dでは「XD」のデザインデータをコーディングしてほしい

私はデザインもコーディングも両方できるので、様々な形で依頼が来ます。これ以外にも稀にチラシのデザインやSNSのデザインがくるのでIllustratorを使うことも多いです。

ツールを1つ覚えれば完璧！ではありません。ただ、基本の操作性を覚えてしまえば、他のツールを覚えるのはそれほど大変ではありません。

New

最新記事

  1. 超重要！頼りにされるWebデザイナーはここが違う

  2. フリーランスなら知っておくべき経理のポイント

  3. 絵心がなくてもデザイナーになれるの？

  4. 今さら聞けない？WordPressのメリットデメリット

  5. 「売れる」Webデザイナーへの考え方

  6. 「Webデザイナー」という職種。作るものやソフトなどは何を使うの？

Categoty

カテゴリー一覧