【デザイン学生必見!】ポートフォリオをゼロから作ろう!

Webデザイナーになる為に必要なスキルを徹底解説

この記事を読むのに必要な時間は約 21 分です。

Webデザイナーになるために必要な知識やスキルなどを現役デザイナーが詳しく解説します。
これからWebデザイナーを目指される方は是非ご覧ください。

興味のある分野から得意になろう

Webデザイナーと一言でまとめられがちですが、実は業務内容が細かく分かれています。
下記で各分野について詳しく解説していますが、全てのスキルを一気に身に付けるのは至難の業。

まずは自身が最も興味のある分野に的を絞り、学習を進めていきましょう。
デザイン制作を主体と考えられている方は、基本的に紹介している順に学習するのが正攻法です。

デザインの基本知識

デザインに関する基本知識を必ず押さえておきましょう。
何かしらのデザイン制作を行う際の「基礎」となる知識ばかり!

デザインの4原則

近接・整列・反復・コントラストで構成されたデザインの4原則を理解しておきましょう。良質なデザインを生み出すための基本知識です。

検索すると色々出てきますが、ノンデザイナーズ・デザインブックはデザイナーなら必ず持っておきたい1冊ですよ。

レイアウトの知識

Webデザインやバナーだけでなく、アプリやゲームUI、フライヤーなどのDTPデザインなど。レイアウトには様々なパターンが存在します。

レイアウトのパターンを頭に入れるだけでなく、スクリーンショットを撮って自身のライブラリを作って制作の効率化をしてみると良いでしょう。

フォントの知識

フォント一つでデザインの印象を大きく変えます。
ゴシック体・明朝体・セリフ体・サンセリフ体・スクリプト体など、フォントの特徴や適したフォントの選定などを理解しておきましょう。

フォントは膨大なので一気に覚えるのは至難の業、徐々に覚えていけば大丈夫です。
フォントを追加しよう
PCに最初から入っているフォントだけを使うのはナンセンス。
最強フォントサイトのAdobeFontsをはじめとした素敵なフリーフォントや有料フォントを活用してデザインの品質を高めましょう!

色の知識

色の知識はデザインをはじめとした様々な業界で使える知識です。色の与える印象は非常に大きいので必ず勉強しましょう!

具体的にはまず、色彩検定3級程度の知識を目指しましょう。公式テキストなら一般的なデザイナーの通常業務がこなせる色彩の知識が網羅的に学習できます。

また、色彩検定は文部省が認定している資格、就職に有利です。デザイナー志望でなくても取っておいて損はしません。

デザインツールの知識

デザインを作る為に必要なツールの知識が必要ですね。
超有名なPhotoshopなどを使ってWebデザインのカンプ作成を行います。

なお、次に紹介する「ツールを使ったデザイン制作」と並行して進めると良いでしょう。

PhotoshopとIllustrator

Photoshop(フォトショップ)とIllustrator(イラストレーター)、デザイナーにとって必須ツールです。様々なクリエイティブを作るための基本ツールとなります。
未導入の方はAdobe公式サイトから入手しておきましょう。

覚える事は膨大ですが、ある程度使いこなせるようになると「つぶしが効く一生モノのスキル」となるでしょう。
イラレとフォトショの使い方
IllustratorとPhotoshopの使い方をゼロから解説しています。
初心者からプロを目指されたい方にオススメのコンテンツですよ。

他のAdobe製ツール

他にもAdobeXDやDreamWeaverなどもWeb制作ではよく使います。しかし一気に覚えるのは難しいですからね、デザイン制作メインで考えられているならおいおい学んでいけばOK。

デザイナー志望であれば、まず主となるPhotoshopとIllustratorに強くなりましょう。両ソフトが使える方ならXDの操作はメチャ簡単です。(DreamWeaverはコーディング用、興味があれば使ってみて下さい。)

ツールを使ったデザイン制作

先に紹介したPhotoshopやIllustrator等を活用したデザイン制作のスキルが必要です。
知識だけあっても実際に具体的な制作物を作れなければ意味がありません。

デザインパターンの引き出し

見出しやフキダシ、背景パターンの装飾など。デザインをかっこよくしたり可愛くしたり、高級感を出したりポップにしたり。

良質なサイトやデザインを観察したり模倣しながら様々なデザインパターンを身に付けましょう。
デザイン初心者の方はマネから始めよう
デザイン初心者の方にありがちな制作の進め方の一つとして「資料無しで作る」が挙げられます。何年もプロとしてデザインをされている方ならともかく、初心者が想像だけで作るにはあまりにも引き出しが少なすぎますからね。
初心者の方は良質なデザインを真似しながら制作をする事をオススメします。

写真加工・画像加工

Photoshopを使った写真加工や画像作成のテクニックは必須です。例えば人物をキレイに切り抜いて背景と合成し、文字やあしらいを添えてバナーやヘッダー画像を作成したり。

Photoshopの使い方はコチラでゼロから諸々詳しく解説しています。

ロゴや簡単なイラスト作成

個人・企業を問わず、ロゴやイラストの制作も併せて依頼される事が多いWeb制作業。よってロゴの制作スキルやある程度の絵心がある方が良いです。

ロゴもイラストも素材で対応できる事が多いですが、より柔軟性の高いWebデザインを行う場合は自作できるに越したことはありませんよ。(お絵描き特化ならクリスタがおすすめ)
ノンデザイナーでも作れるロゴデザインテクニック
ロゴデザインはIllustratorで行うのがオススメ!
ノンデザイナーの方でもイラレを使って簡単にロゴデザインができるテクニックを解説しています。

DTPも対応できると尚良し

Web制作会社はWebデザインばかり作っている訳ではありません。紙面媒体の制作物も並行しながら請け負う会社が大半。

よってDTP(デスクトップパブリッシングの略)の知識や制作スキルがある方が望ましいです。
Illustratorは勿論、InDesignが使えるとデザイン業務の幅が更に広がりますよ。

デザインを学習する方法

デザインを学習する方法は色々存在します。
大別すると独学とスクールの活用の2種類ですね。

独学はサクッと始める事ができ、書籍代とツール代程度で済みますが、挫折率が非常に高いのも事実です。
スクールはある程度初期費用が掛かりますが、上達率・プロになれる確率が格段に高くなります。

こちらの記事で私が推薦するWebデザインスクールを徹底解説していますので併せてチェックして下さい。
(UI/UXデザイン特化志望の方はコチラの記事を参考)
これで一旦Webデザイナーとして働ける
ここまで対応できると「会社でWebデザイナーとしての業務」が行える状態です。
もちろんWebデザイナーに限らず「UI/UXデザイナー」として活躍可能!
ディレクターから指示される「このワイヤーを元にカンプを作ってね」や「この内容でA4フライヤー頼むわー」といった日々のデザイン制作業務に対応できるでしょう。
デザインだけ行いたい方は上記で紹介した内容の腕を徹底的に磨きましょう!

コーディングとプログラミング

デザイナー業の方にとって鬼門であるコーディングとプログラミング。
興味が無い方にとって、これらの内容は全く頭に入ってこないかもしれません。

ちなみに私は完全なるデザイナー出身の人で、Web制作会社に入社するまでほぼ知識ゼロでした。
案件を回す上でHTML、CSS、JavaScript、PHPなどの知識が必要だったので業務の一環として学習。
幸運にも周りはプロばかり、気軽に聞いて学習できる環境だったのが救いです。

結果として今現在これらの知識は仕事の幅を広げる為の大きな武器となっています。

HTML / CSS / JavaScript

HTML / CSS / JavaScriptを使ってゼロからフルスクラッチでサイトを作れる知識と技術があると仕事の幅が一気に広がります。デザインカンプ作成のみ担当の並デザイナーがこれらを習得すると、報酬額は間違いなく増えますよ。

今はノーコードでサイトが作れるサービスが数多く存在しますが、顧客の要望に対して柔軟に対応するにはノーコードでは正直物足りません。

PHP

PHPに関してはかなりエンジニア寄りの知識です。よってWebデザイナーにとって「あればいいよねー、別に無くてもいいけど」くらいの認識で問題ありません。

PHPの知識が無くても通常のWebデザイナーとしての業務であれば行えます。WordPressでガッツリ自作テーマを作りたい場合やフリーランスのWebデザイナーとして生きていくには程度のPHPの知識が必要です。

プログラミングの独学は難しい

独学でWeb制作に必要な言語を学ぶのは難しいです。
JavaScript等の入門書を買って実践、確かに初期費用は安上がりで手軽なのですが、挫折率が半端なく高いのも事実。。。

一人なので「なぜできないのか」の原因と理由がわからないまま嫌になり、止めていく。非常に勿体ないですね。
プログラミング初心者の方は最初スクールで基礎を固めてから独学に移行するのが最も効率的で結果として経済的です。

こちらの記事で私が推薦するWebデザインスクールを徹底解説していますので併せてチェックして下さい。

WordPress等CMSの知識

ブログをはじめとしたCMS機能を付けた案件を回すには、最低限WordPress(ワードプレス)を使ったサイト構築の知識が必要です。

WordPressの導入方法やカスタマイズ、運用方法など。
ある程度使えるようになるとa-blogCMSやMovableTypeなど、他CMSにもすんなり入れるようになりますよ。
高品質なテーマを活用しよう
ワードプレスの設定で「テーマ」の選定は重要です。無料のテーマも多くありますが、機能や品質・テーマの更新頻度に難があります。
有料テーマはそれだけ手間がかけられており、機能追加や脆弱性の修正などが頻繁に行われます。
長い目で見ると最初から良質な有料テーマの利用が圧倒的にオススメ。後からテーマを変えると細かな修正に時間が掛かり、結果として損をします。

サーバーやドメイン等の知識

サーバーやドメイン管理など、サイトのインフラ周りに関する知識があれば一人で案件を回せます。

会社であれば担当エンジニアが管理している場合が多いでしょう。よって触る機会が少ない領域かもしれません。

会社に在籍した状態でサーバとドメインについて詳しくなるには「自身のサイト作成をゼロから行う」のが一番手っ取り早い方法です。
エックスサーバーは初心者にもオススメ
当サイトはエックスサーバーを利用しています。
仕事柄様々なレンタルサーバーを利用していますが、エックスサーバーは信頼性・速度共に最高レベル。サーバコントロールパネルも操作性が良く、初心者の方にも最適なレンタルサーバーですよ。

ディレクション・アクセス解析

サイトのディレクションやアクセス解析など、会社の場合はディレクターや最適化チームが担当する場合が多いでしょう。
Webデザイナーが手出しできない会社も多いです。

ただしWebデザイナーとしてより高みを目指したい方、独立を視野に入れている方にはディレクションとアクセス解析は必須項目です。

おわりに

以上、Webデザイナーになる為に必要なスキルについてでした。

PhotoshopやIllustratorを使ったデザイン制作を主としたWebデザイナー。
Webデザインを元にコーディングをして組み込むフロントエンドエンジニア。
プログラム開発やサーバ構築・保守などを担当するバックエンドエンジニア。
サイト制作の陣頭指揮を行うWebディレクター。
アクセス解析を元に改善を提案する最適化担当などなど…

Webデザイナーとして一括りにされがちですが、業務内容は様々。
まずはデザインツールを使ったWebデザインの制作スキルを付け、そのデザインをコーディングできる知識を付けるのがオススメ!

できる範囲が増えると仕事の幅が広がり、より周囲から求められる人材になれる可能性が高まりますよ。

ではまた!

Photoshopの操作方法

フォトショ基本操作

【導入編】ゼロから始めるPhotoshop
Adobe Creative Cloudの料金プランやオススメプランを徹底解説
フォトショの全ショートカットまとめ
フォトショ初心者が押さえておきたい基本操作14選
レイヤーの作成・レイヤーの操作
ブラシツールの基本的な使い方と応用操作を徹底解説
左右対称、マンダラを使った魔法陣・レース模様の作成方法
各種カラーモードについて
【遠近法の切り抜きツール】斜めから撮った写真を正面に補正する方法と応用
切り抜きツールの使い方と解像度・サイズの変更方法を徹底解説
文字ツールの基本的な使い方
文字パネルの機能と使い方を徹底解説
段落パネルの機能と使い方を徹底解説
グラデーションツールとグラデーションオーバーレイの違いと使い方
整列と分布を使ったレイアウト方法
レイヤースタイル、レイヤー効果の基本的な使い方
ドロップシャドウをさりげなく使ってキレイ目デザインを作る方法
作業効率化に繋がるPhotoshop特有の色々なコピペ方法
調整レイヤーを徹底解説
シェイプツールの使い方・編集方法を徹底解説
共通パーツをインクルードする方法

バナーやUIをデザイン

Photoshopでバナー広告を作る方法を完全解説
【前編】スマホゲームのUIを作ってみよう(構成~下絵)
【中編】スマホゲームのUIを作ってみよう(質感付与)
【後編】スマホゲームのUIを作ってみよう(バナーやボタン)
GDNで有効的なサイズのバナー広告の作り方を完全解説
Photoshopで複数サイズのバナーを効率的に作成する方法

様々な質感を再現

Photoshopで黄金風の効果を付ける方法を詳しく解説
ベベルとエンボスで金属表現を作る方法
レイヤースタイルだけで水滴や汗を作る方法
リアルな木彫りのような質感を再現する方法
テキストをネオンサイン風にする方法
テキストにリアルな錆(サビ)た金属表現を追加する方法
レイヤースタイルでポップなロゴを作る方法
すりガラス(曇りガラス)の再現方法

写真の雰囲気を激変させる

Photoshopで写真をインスタグラム風に加工する方法
レンズフレアを追加して印象的な写真に仕上げる方法
ニュートラルフィルターで肌を一瞬でキレイにする方法
RGBずらし(色ずれ)を使った画像の作り方
写真をアメコミ風に加工する方法を徹底解説
写真をポップアート風に加工する方法を徹底解説
昼間の写真を夜に変更する方法を徹底解説
昼間の写真を夕暮れに加工する方法を徹底解説
【チルトシフト】風景写真をミニチュア風に加工する方法
カラーハーフトーンの作り方と応用例を徹底解説
写真を水彩画風に加工する方法を徹底解説
写真をワンランク上の油彩風に加工する方法
アートヒストリーブラシツールを使って写真を絵画風に大変身
写真をデュオトーン(ダブルトーン)に加工
レントゲン写真のような見た目に加工する方法
フォトショで線画スケッチ風のタッチを再現
秋を感じさせる色味にレタッチする方法
写真やイラストをドット柄に変えるテクニック
写真やイラストをドット絵風に加工する方法
緑で覆われた廃墟を1分で作る方法
1980’のレトロなカットアウト表現の作り方
光輝くオーラエフェクトの作り方を徹底解説
サイバーパンク風の加工をお手軽にする方法

便利な画像加工テクニック

Photoshopで人物の表情を簡単に変える方法
コンテンツに応じた塗りつぶしで不要な要素を消す方法
斜めから撮影した画面に画像や文字をはめ込む方法
「空を置き換え」で曇り空を1分で修整する方法
スマートポートレイトをイラストに適用する方法と検証
3分で髪の毛を簡単に切り抜く方法(境界線調整ブラシツール)
【間違い探し動画】初心者向けアハ体験動画の作り方
リアルな虹の作り方と合成方法を徹底解説
リアルな雨の作り方を徹底解説
リアルな雷をゼロから作る方法
雪の作り方と降らせ方を徹底解説
煙の作り方を徹底解説
深度ぼかしで被写体深度を簡単に再現する方法
画像に勢いや動きを付ける方法
スーパーズームで劇的に高画質化する方法
影の付け方を徹底解説forフォトショ初心者
白黒画像を簡単にカラー化する方法
合成画像を1分で自然に調和させる方法
アート風コラージュの作り方
ボロボロの古雑誌や本を簡単に作る方法

機能追加・その他の機能

Photoshopの無料レイヤースタイル全447種まとめ
無料&商用可能なカスタムシェイプ46選
レイヤースタイルの登録と書き出し
シェイプを登録する方法(カスタムシェイプを定義)
無料&商用可能で本当に使えるブラシ素材64選
【ブラシを定義】自作ブラシの作成と登録方法を解説
【ブラシを定義】自作ブラシの作成と登録方法を解説
WebP形式の画像を編集・保存できるプラグインの導入方法
パターンの定義方法とパターン背景の作り方を完全解説
汎用性抜群なストライプパターンの作り方を解説

フォトショップのお困りごと

「最近使用したもの」を非表示にする方法
ブラシのポインタが十字になった時の対処法
突然画面がグレーになってしまった時の対処法
「変形」の仕様をCC2018以前に戻す方法
ツールバーをカスタマイズする方法
別名で保存からJPGやPNG画像に保存できない問題
塗りつぶしの白い隙間を無くす方法3選

目次一覧を見る
SCROLL
目次一覧