★20代・第二新卒におすすめの転職サービス★ |
||
 |
|
|
|---|---|---|
 |
|
|
 |
|
|
Webデザイナーってどんな仕事？
Webデザイナーの仕事は、クライアントから依頼された内容をデザインに落とし込み、表現することです。
クライアントからの要望を直接自分で考えてデザインを作成することもあれば、クライアントとWebデザイナーの間に入っているディレクターがクライアントの要望について方向性を決め、その指示によってデザインを作成することもあります。
Webデザイナーの主な仕事
Webデザイナーのお仕事には主に以下のようなものがあります。
Webデザイナーのお仕事一例
- Webサイトの構成・レイアウト（ワイヤーフレーム）を決める
- 図やグラフ、バナーなどホームページパーツの制作
- Webサイトのデザイン
- イラストなど挿絵作成
では具体的にWebデザイナーの仕事内容について、見ていきましょう。
Webサイトの構成・レイアウト（ワイヤーフレーム）を決める
まずは制作するWebサイトのおおまかなレイアウトや配置を決めていきます。
レイアウトは「ワイヤーフレーム」とも呼ばれます。
図やグラフ、バナーなどパーツの制作
Webサイトに表示される図やグラフ、また他のサイトからリンクを張ったりする場合のバナーなど「パーツ作成」をします。
イメージするWebサイトデザインを想定しながら、合ったものを作ります。
Webサイトのデザイン
レイアウトをベースに、ページのデザインを考えます。
写真やイラストなどキーとなるビジュアルを決め、カラーリングや全体のイメージ、キービジュアルの使い方、ナビゲーションの置き方などを決めていきます。
デザインに写真を使用する場合は、イメージとなる画像を探したり、画像の手配をしたりします。
イラストなど挿絵作成
わかりやすく説明したりデザインの方向性に沿った必要なイラストなどは、専門のイラストレーターに発注することも多いのですが、時にはWebデザイナー自らが作成することもあります。
イラストレーターに依頼する場合は、描いて欲しいイラストの内容の指示やディレクション、スケジュール管理をします。
「デザインだけしている」と思われがちなWebデザイナーですが、このようにデザイン作成にまつわるさまざまな業務を行っています。
Webデザイナーの仕事の流れ
では、Webデザインはどのように作られていくのでしょうか。
Webデザイナーの仕事の流れ
大まかに説明すると以下のような流れになります。
- 社内外のディレクターから指示、依頼を受ける
- 制作スケジュールの作成
- デザイン制作
- チェック・修正
- 発注者へ納品
では順に説明していきます。
1.社内外のディレクターから指示、依頼を受ける
まずはWebディレクターがクライアントの意向や希望を受け、Webデザインを含めたWebサイト全体の方針を指示します。
※Webディレクターは所属する組織によっても業務範囲が多少異なりますが、基本的には「プロジェクトの管理・監督をし、Webサイトの質を担保する」人を指します。
Webディレクターから指示を受けた後は、デザインをWeb上で見られるようにプログラミング言語を使ってコーディングする「コーダー」とも連携をとりながら技術的な裏付けやアイデアなどを話し合い、ブレインストーミング（ブレスト）を行います。
2.制作スケジュールの作成
ブレスト後、制作の方向性が固まったら制作スケジュールを作成します。
公開予定日からクライアントのチェックに必要な日数やコーディングに必要な日数を逆算して、デザインにどれだけ時間を割けるのかを確認します。
短納期のWebサイトなど、時にはクライアントチェックやコーディングの期間短縮などを依頼せざるを得ないケースもあります。
3.デザイン制作
制作スケジュールにのっとり、具体的なデザイン制作に入ります。
同テーマのサイトや海外サイトなども参考にしながら、オリジナル性の高いデザインを考えて作成します。
クライアントやターゲット・プロジェクトによって「美しい」「元気な」「カッコいい」「親しみのある」などデザインの方向性も変わります。
Webサイトの目的やゴールに応じたデザインを考え、クライアントにもデザイン意図について共通認識を得る必要があります。
4.チェック・修正
デザインがOKとなればコーディング作業に入ります。
Webデザイナーがコーディングを兼任する場合は、Web上の表示がデザイン通りに再現できているかをチェックし、崩れていれば修正します。
通常コーディングはデザインがOKとなった段階でスタートしますが、コーディング後にデザインの修正指示が入る場合もあります。
5.発注者へ納品
クライアントに制作物のチェックをしてもらい、修正指示や仕様に問題がないか同意を得ます。
実際にWeb上にアップロードし納品完了となります。
簡単にWebデザイナーの仕事の流れを追っていきましたが、何となく把握できたでしょうか？
次はWebデザインの勉強法をお伝えします。
Webデザインを勉強するときに必要なもの
1. パソコンスペック
処理の重い動画編集や1秒を争うオンラインゲームをするわけではないので、そこまで高スペックのパソコンは不要です。
以下の要件を備えたパソコンはだいたい5～10万円くらいで見つけることができると思います。
| CPU | インテル Core i5 以上 もしくは AMD Ryzen 5 以上 |
| メモリ | 最低でも8GB（予算に余裕があれば16GB） |
| ストレージ | SSD 容量は予算に応じて。 いまはクラウドサービスや外付けHDDも安価です。 |
| OS | Windows10 もしくは Mac最新 |
| モニター | ・デスクトップ 20インチ以上 ・ノートパソコン 14インチ以上 |
パソコンのほかにプラスするなら？
予算やデスクの広さに余裕があるのであれば、モニターを二つ並べた「デュアルディスプレイ」にできる環境にしておくと便利です。
画面サイズを選ぶコツ
ノートパソコンの14インチは持ち運べて作業もできるギリギリのサイズ感ですが、ベゼル(画面周りの淵部分)の幅によって印象は変わってきます。
ですから、ぜひ実機を見て重さや画面のサイズ感を検討材料にすることをおすすめします。
予算を抑えるコツ
・Office ソフト
Office ソフトはGoogleのWebサービスでも代用可能ですが、もしOffice系がいいということであれば、以前買ったパソコンにまだライセンスが残っていればそれを使うことで価格を抑えることができます。
・CPU
CPUはインテルではなく、AMDも候補に入れると価格帯が変わってくることもありますのでチェックしてみましょう。
予算の優先順位
もし予算にゆとりがある場合は以下の優先順位で選ぶとより使いやすいパソコンを選べるかと思います。
メモリ＞ CPU(要件は必須) ＞ストレージ＝モニターサイズ(お好みで)＞その他
2. Photoshop(フォトショップ) Illustrator(イラストレーター)
どちらもAdobe社のソフトウエアで公式サイトなどから購入できます。
昔は高額ソフトという印象もありましたが、今は月額制のサブスクリプションタイプとなったのでだいぶ購入しやすくなりました。
Photoshopは月額で980円からプランがあり、illustratorは単体でも1カ月税別2,180～3,480円/月ほどです。
Photoshopとillustratorはもちろん書籍やパンフレットのデザインに最適なInDesignやPDFファイルの閲覧・編集などに特化したAcrobatなど20種類以上のソフト・アプリがセットになったコンプリートプランは1カ月税別5,480円〜8,980円/月で購入できます。
Photoshop(フォトショップ)
Webデザイナーの仕事で必須のソフトAdobe社の「Photoshop（フォトショップ）」は、「フォトショ」の愛称で親しまれる有名な画像編集ソフトです。
最近では便利な画像加工のアプリが増えて手軽に画像加工が可能になりましたが、Webの仕事における写真の加工にはPhotoshopが必要不可欠です。
まず最初に覚えるべきソフトと言っても良いでしょう。
写真の合成・加工や切り抜き、アートなグラフィックを作成するなどデザインに関わるさまざまな作業をすることが可能です。
Illustrator(イラストレーター)
こちらもWebデザイナーに必須のソフト、Adobe社の「Illustrator（イラストレーター）」はイラストやロゴを作るのに適したドーロイングソフトです。
Webデザインに限らず雑誌やポスターなど世界中のほどんどのデザインが「イラレ」という愛称で呼ばれるIllustratorで作成されています。
Illustratorで特異なことは「オブジェ（形）の作成・変形・整列」「テキストや写真などの自由なレイアウト」「イラストを描く」「カラーリング」などです。
3. テキストエディタ
テキストエディタとは、ワープロソフトの「Word」とは違い、文字情報を入力・編集することに特化されたソフトウエアのことです。
Webデザインをする際のコーディング作業にとても便利な機能がたくさん搭載されています。
もちろん liveweave のようにブラウザ上で動かせる便利なサービスもありますが、今回は初学者におすすめの3つのソフトをご紹介します。
どれもHTMLだけではなくJavaScript、PHPなど主要な言語にも対応しているため、他の言語も勉強してみたい方にうってつけです。
また使っているユーザーの数も多いので、困ったときは解説しているWebサイトを探しやすいのも魅力です。
Atom
Atomは、GitHub社が開発したテキストエディタで、シンプルな画面構成で使いやすいとユーザー数を伸ばしています。
ただ、ダウンロードしても最初は英語版が表示されるので、「パッケージ」と呼ばれる拡張機能をインストールする必要があります。
Atomを日本語版にする方法
このように簡単に機能を拡張できるので、慣れてきたらいろいろと好みのパッケージを探してみるのもおすすめです。
Brackets
Brackets は、Adobe社が開発した無料のテキストエディタです。
Webデザイナー向けの機能が豊富であり最初から日本語に対応されているので使い始めやすく人気があります。
またAtom同様、プラグインを入れることで好みに合わせて拡張機能を使うことができます。
Visual Studio Code (VSCode)
VSCodeは、Misrosoft社が開発した無料のテキストエディタで、ダウンロード時に日本語版を選択できるので、安心して使い始められます。
Webデザインの会社でもこちらのソフトを使うところも多く人気です。
どれを使うにせよ、操作に困ったときは解説しているWebサイトを探せば何とかなるほど、使っているユーザーがいる人気のテキストエディタソフトであることは間違いないです。
まずは気に入ったものを使ってソースコードに慣れていきましょう。
未経験から独学でWebデザイナーへ転職する方法
ではWebデザイナーとして勉強するにはどんな方法があるでしょうか？
専門学校に通うという手もありますが、ここでは独学での方法をご紹介します。
- デザイン・レイアウトの基礎を学ぶ
- HTML・CSSの勉強
- ポートフォリオを作成
- 転職エージェントで就活
Step1. デザイン・レイアウトの基礎を学ぶ
Webデザイナーを目指すのであれば、デザイナーの基本中の基本、デザイン・レイアウトの基礎を学びましょう。
デザイナーはデザインセンスが一番重要といっても過言ではありません。
センスとは先天的なものではなく、知識量がものをいいます。
デザインの知識があれば、多少ソフトの知識が欠けていたとしても必ず仕事の依頼があります。
まずはWebデザインがカテゴリやテーマ別にまとまったサイトがたくさんあるので、それらをよく見てカラーリングやレイアウトなどを学びましょう。
またデザインの基本について紹介しているサイトなどもあるので活用するとよいでしょう。
ノンデザイナーズ・デザインブック ［第4版］
Robin Williams, 吉川 典秀, 小原 司, 米谷 テツヤ（日本語版解説）
日本語版が出版されてから20年以上経つロングセラーです。
コンセプトが伝わるデザインのロジック
OCHABI Institute ビー・エヌ・エヌ新社 (2020/6/16)
上の本が難しいときはこちらもおすすめです。
よいな、と思うデザインには規則性や法則性、レイアウトのパターンがあります。
デザインの根拠をおすすめした2冊の本から学んだら、よいと感じたサイトからもそれらの法則性をしっかり学び取っていきましょう。
Step2. HTML・CSSの勉強
Webサイトの制作には、デザインのほかにHTMLなどのプログラミング言語を使ってWeb上でページを見られるようにする「コーディング」という作業があります。
コーディングは専門の「コーダー」と呼ばれる職種の人が担当することも多いです。
ですが、WebデザインをするうえでWebデザイナーもコーディングの知識や技術を身につけておかないと「コーディングが困難なデザインでスケジュールが押す原因となった」など、トラブルの元になる場合があります。
また自分自身で簡単なコーディングができれば仕事の幅も広がるでしょう。
コーディングを学ぶ際に、覚えておきたいのが「HTML」「CSS」のWebプログラミングの知識です。
ほとんどのWebサイトはこの2つの言語によって閲覧できるようになっています。
プログラミングと聞くとハードルが高いように感じてしまいますが、これらもオンラインや書籍で十分学ぶことができます。
いちばんよくわかるWebデザインの基本きちんと入門
レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)
1冊でWebデザイナーに必要な基礎知識を網羅できるバランスの良い本です。
ドットインストールでは無料でHTML/CSSやJavaScriptのレッスン動画を配信しています。
機能の完全版(動画レッスンの文字起こし、ソースコードの閲覧など)はプレミアム会員(月額1080円)になると閲覧できるようになります。
Progateは、自分で実際に打ちながらコーディングを学べるオンライン学習サイトです。
無料会員では基礎編全18コースを学ぶことができます。
基礎が分ってくれば、上記のほかにもUdemyなど有料のオンライン教材を自分で選んで学びを深められます。
Step3. ポートフォリオを作ってみる
ポートフォリオとは
「ポートフォリオ」とは、Webデザイナーをはじめクリエイターの転職活動に大切な自分の作品をまとめた作品集のことです。
企業側はポートフォリオを見ることで、「デザインスキル」「引き出しの多さ」「課題解決方法」「仕事への姿勢」などを読み取ることができますので、Webデザイナーとして転職や就職を考えているのであれば、必ず作成するようにしましょう。
ポートフォリオに載せる作品を作ってみよう
実際にサンプルサイトを作ってみて、分ってきたらオリジナルのサイトを作ってみましょう。
スラスラわかるHTML&CSSのきほん 第2版
狩野 祐東 SBクリエイティブ; 第2版 (2018/4/14)
架空のカフェ「KUJIRA Cafe」のサイト制作をもとにHTMLとCSSの基本を学べる本です。
トレース&模写で学ぶ デザインのドリル
Power Design Inc. ソシム (2020/6/22)
ドリル型になっていて製作に必要な素材データもそろっているので取り掛かりやすい本です。
またアイデアのお手本に、こういった見本集を参考にするのも一つの手段です。
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
久保田 涼子 SBクリエイティブ; 初版 (2017/6/16)
解説はない分、見本帳として検索性の高い紙面構成で手元に置いておきたい1冊です。
ポートフォリオを作るときの注意点
ポートフォリオには、デザインを羅列するだけでなく、「クライアント名」「作品の意図」「ターゲット」などを追記するとより効果的です。
最近は「 Portfoliobox 」のような月額0.9ドルのポートフォリオ作成サービスや、「 resume 」のように作品の背景も書き込めるポートフォリオをクラウド共有できる無料サービスもあるので、ぜひ活用してみてください。
Step4. 転職エージェントで就活
未経験から異業界異職種に行くなら、転職エージェントに必ず登録しましょう。
転職エージェントでは求人企業の内部情報はもちろん、履歴書などの添削や面接へのアドバイスもくれるので、未経験でもマッチングの高い企業へ応募することができます。
転職エージェントはたくさんありますが、Webデザイナーであれば IT業界に強いtypeや案件数の多いdodaなどがおすすめです。
★おすすめの転職サイト・エージェント★ |
||
 |
|
|
|---|---|---|
 |
|
|
