Webデザイナーを目指すあなたに押さえて欲しい基本中の基本スキル３選
CodeCamp井上です。
Webデザイナーを目指すものの、何を勉強したらよいのか迷う方も多いのではないでしょうか。
前回の記事では初学者に向けた３つのポイントを紹介しましたが、今回はWeb制作現場のトレンドを踏まえ、基本中の基本スキルについて述べたいと思います。
以下は現場で活躍する、かつての同僚や後輩の意見と私の見解を総合したものです。精度は保証できます。ぜひ参考にしてみてください。
【その１】デザインツール：PhotoshopとIllustrator
まずはPhotoshopとIllustratorです。Webデザインの仕事において、これらを使用しない現場はありません。まさに基本中の基本ですね。それぞれの特長を見ていきましょう。
Photoshop
Photoshopの特長は圧倒的な画像編集機能です。Webデザインに限らず、欲しいビジュアルは全て手に入ります。写真の補正や加工にこれ以外のツールを使っていたら、何か特別な理由でもあるのかと勘繰られるほどです。
Photoshopは極めたので他を模索しているのか、あるいはその存在を知らないかのどちらかでしょう。
また、Webデザインに必要な作業をこの一本で賄えることで業界黎明期から支持されています。
私もWebデザイン実績の８割程度をPhotoshopで手がけました。
・デザインカンプ（完成見本）作成
・パーツ作成（高度な写真加工、各種デザインコンポーネント）
・コーディング用画像出力
・バナーデザイン
ただし、デザインカンプ作成ではキーボードショートカットを覚えないと全くはかどらないため、操作は慣れが必要です。
Photoshopの習得はショートカットを習得することとも言えます。
とはいえ、この一本ですべて事足りるのは魅力的です。
慣れてしまえば手間は感じられません。需要の高さも踏まえ、ツールの学習は何よりもまずPhotoshopから始めてみてください。
Adobe Illustrator
その名のごとく本来はイラストレーション制作ツールです。Photoshopとは姉妹製品という位置付けです。使い勝手に癖のあるPhotoshopとは違い、お絵描き感覚で直感的に使えるのが特長です。その利便性から、メインのツールに据えているWebデザイナーは少なくありません。
・デザインカンプ（完成見本）作成
・パーツ作成（簡易的な写真加工、各種デザインコンポーネント）
・コーディング用画像出力
・バナーデザイン
・デザイン提案資料（デザインシステムetc）作成
描画に特化したツールにつき、写真加工機能は限定的です。写真はPhotoshopで編集するものと割り切りましょう。
Webデザイン制作の周辺作業として、カタログなどの印刷用データをサイトに転用する場合や、サイトのロゴデザインなどで活躍します。
私はIllustratorではデザインカンプを作りませんが、デザインコンポーネント作成はIllustrator一択です。使っていて楽しいツールなので長時間使用してもストレスになりません。どなたでもとっつきやすい、優れたUX設計がなされたツールです。
【その２】プロトタイピングツール：Figma
Figma（フィグマ）は、ブラウザ上で利用できる「プロトタイピングツール」です。プロトタイピングとは、プロトタイプ（試作品）でテストや修正を行う手法を指します。
デザインカンプの段階で、さも完成したサイトに触れるようにチェックできるのが特長です。
プロトタイピングツール登場前のWebデザインは、承認に時間がかかる問題を抱えていました。
依頼主から修正依頼があると持ち帰って対応、再提出に日時を要しましたが、FigmaはWebブラウザ上でデザインの編集・共有が可能なので「ボタンの色を変更したい」といったリクエストにその場で応えることができます。
プロジェクトの進行が劇的に早まることから近年一気にシェアを伸ばし、デザインカンプ作成のスタンダードになりつつあります。
私がFigmaを使った結果「Webデザインツールにおけるひとつの解」だと感じています。
PhotoshopやIllustratorとは違い「あったらいいな」という機能が揃っています。現状これといった死角は見当たりません。
無料のプランが用意されているので、かんたんに導入できるのも大きなメリットです。
今後のWeb制作現場を席巻するツールになると言っても過言ではないでしょう。
【その３】コーディング：HTML/CSS/Javascript
昨今の制作現場は分業が一般的になり、Webデザイナーがコーディングを担う機会は減りましたが、私はコーディングの知識が無いと不利だと考えます。
かつて「カンプデザイナー」という蔑称が存在しました。コーディング知識を持たず、実装コストを踏まえないWebデザイナーを揶揄したものです。昔の現場で同僚がそのようなデザインカンプを提出した際、コーダーに「これ、どうやって実装するつもり？」と追求されていたのが記憶に焼き付いています。
Webサイトはコーディングなどの実装を経て公開された時が完成です。
デザインカンプ作成は工程の一部に過ぎません。
WebデザインはHTML、CSS、Javascriptなどの言語がブラウザで実現できることを視覚化する仕事のため、学習の順番はデザイン系ツールよりもコーディングが先であるべきです。
サイトが完成するまでの工程を知り、他のメンバーの立場を理解するためにもこの上なく重要です。
今後もWebデザイナーがコーディングを担うケースは減少していく気がしますが、コーディングスキルは百利あって一害なし、です。ちなみに私はコーディングが好きです。ソースコードを正しく入力すればすぐに答えが返ってくるため、積み上げる喜びがあります。初学者の方はまずコーディングから始めてください。将来デザイン提案の幅が大きく広がるに違いありません。
まとめ
いかがでしたか？求められるスキルは現場ごとに違いますが、初学者に必要とされるトレンドは押さえていると思います。Webデザイナーを目指すあなたの参考になれば幸いです。
ただしこれらは基本中の基本です。現場ではデザインツールの習得自体はさほど評価されません。
事実、私もツールやスキルについて関係者と話した記憶がほぼありません。
これだけで給与や報酬が上がることもまずありません。
これらは義務であり、業務効率・品質・顧客満足度など、いかに提案の価値を高められるかの方が仕事では重要です。
ツールやスキルは現場に望む上に準備しておくことが求められます。
とはいえ、基本なくしては何も始まりません。必要なスキルを絞り、1日でも早く現場に立てるよう、効率のよい学習方法を見つけてみてください。
CodeCamp「Webデザイン副業コース」のご紹介
私が監修したCodeCampのWebデザイン副業コースは、ここまでに取り上げたスキル群で構成されています。
「Web制作現場で活きる学習のみを提供する」をポリシーとする、無駄なく最短距離で目標に辿り着くための講座です。
CodeCamp【Webデザイン副業コース】
https://codecamp.jp/design/fukugyo
Webデザイナーへのイメージが湧いた方は、まずは弊社の無料カウンセリングをご利用いただき、不安や不明点を払拭ください。
【Webデザイン副業コース カリキュラム内容】
・HTML/CSS
・Adobe Photoshop
・Adobe Illustrator
・バナーデザイン
・LP設計/UIデザイン
・ポートフォリオデザイン
・副業リテラシー
・Webマーケティング基礎
・Webディレクション基礎
・副業実践
＜付録カリキュラム＞
・Figma
・Bootstrap
・JavaScript基礎
・ポートフォリオサイト作成（コーディング）
＜その他の受講生支援＞
・キャリア面談
・オープンバッジ付与
・作品発表会
・作品講評シート