WEBデザインの仕事では、主にWEBサイト・バナー・ランディングページ・サムネイルなどをデザイン・制作します。
WEBデザインに興味を持つ人は、「色や配置といったデザインを考え、それをデザインソフトで形作る仕事」を思い描いている場合が多いのではないでしょうか。
インターネットで「WEBデザイン」を検索すると、次のような、「デザイン」以外のスキルに関する情報が多く出てきます。
- 制作したデザインをWEBサイトに表示するための「コーディング」
- WEBサイトやアプリを開発するための「プログラミング」
未経験からWEBデザインを始めたい人の場合、「まずコーディングやプログラミングのスキルを身につける必要があるのかな?」と思うかもしれません。
しかし実は、「WEBデザイン」を始める場合、コーディングやプログラミングは、必須のスキルではありません。
本記事は、「WEBデザイン」を始めたいあなたに向け、事前準備から仕事を受注する方法まで、ムダなく・モレなく、わかりやすく解説します。
あなたの夢を、最短距離で叶えるための一助になれば幸いです。
目次
WEBデザインの始め方_その1|4つの事前準備
WEBデザインを始めるには、次の4つの事前準備が必要です。
- どのようなWEBデザイナーを目指すかイメージする
- パソコン・インターネット環境を用意する
- デザインツールを入手する
- 連絡ツールを準備する
順番に、詳細を解説していきます。
準備1_どのようなWEBデザイナーを目指すかイメージする
WEBデザインを学び始める前に、どういったWEBデザイナーになりたいのかを明確にしておくことは、とても大切です。
WEBデザインは、一般的に次のような工程で制作されます。
WEBデザインを始めたい人の多くは、3の「グラフィックデザイン作成」に興味があるのではないでしょうか。
【WEBデザインの制作工程】
工程 | 内容 | |
1 | ヒアリング | クライアントから必要情報を聞き取る(何をどのような雰囲気で作るか・納期・価格等) |
2 | ワイヤーフレームの作成 | デザインの設計図を作り、クライアントに確認する |
3 | グラフィックデザインの作成 | デザインソフトで、設計図に沿ったデザインを作成する |
4 | コーディング | 作成したグラフィックデザイン・テキスト・素材等をWEB上に表示させるため、HTML・CSS等を使って実装する |
また、WEBデザイナーには、主に次のような働き方があります。
- 規模の大きいデザイン制作会社で働く
- 規模の小さいデザイン制作会社で働く
- 一般企業のWEBデザイン制作部門で働く
- フリーランスのWEBデザイナーとして働く
規模の大きい企業の場合、ヒアリングはディレクター、ワイヤーフレームとグラフィックデザイン作成はデザイナー、コーディングはコーダー、といった分業制にしていることもあります。
規模の小さい企業や個人事業主の場合は、全ての工程を一人で担ったり、部分的に外注したりすることもあります。
一口にWEBデザインの仕事といっても、働き方や仕事内容はさまざま。
はじめに目標を明確にしておかないと、遠回りしたり、望んでいない方向に進んだりしてしまいがちです。
自分のやりたいWEBデザインとはどのようなものなのか、WEBデザイナーとしてどのように働いていきたいのかなど、しっかりとイメージしておきましょう。
準備2_パソコン・インターネット環境を用意する
WEBデザインを始めるのに最低限必要なのは、パソコンと、インターネットを使える環境です。
パソコンのスペックは、ある程度高くないと、動作が遅くなる・固まってしまう等の支障がでてしまいます。
WEBデザインを仕事とする場合は、下表のパソコンスペックを目安にして購入しましょう。
パソコンスペック | 最低限 | 推奨 |
CPU | Corei5以上 | Corei7以上 |
メモリ | 8GB以上 | 16GB以上 |
ストレージ | 256GB以上 | 512GB以上 |
色域カバー率 | 60%以上 | 90%以上 |
デザインツールにPhotoshopを使う場合、サポート対象のOSは、WindowsかMacintoshです。
(参考:Photoshop の必要システム構成)
はじめは、自分の使い慣れた、あるいは使いやすそうと感じるほうのOSで構いません。
どちらか決めかねる場合は、MacBookがおすすめです。
マウスなしでもパソコン操作できるため、デザイン制作の効率を上げられます。
パソコンは、高スペックになるほど高価格です。
初心者のうちは、手頃な価格帯のパソコンから始め、買い替え時の状況に応じ、スペックを上げるかどうか検討するという方法もあります。
上記の最低限以上のスペックなら、WEBデザイン学習は十分可能です。
インターネット回線は、光回線・CATV回線・モバイル回線等の選択肢があります。
同居家族のインターネット使用状況や、自分は主にどこで作業するかといったことを考慮した上で選択しましょう。
準備3_デザインツールを入手する
WEBデザインを学び始めるのに最もおすすめなデザインツールは、Photoshopです。
Photoshopは、アドビ株式会社が提供するプロフェッショナル仕様の画像編集ツール。
学びはじめのツールとしてPhotoshopをおすすめする理由は、次のとおりです。
- グラフィックデザイン制作機能・写真編集機能が充実しており、高クオリティのWEBデザインを制作できる
- デザイン業界で広く使われており、デザイン会社への就職や、クライアントとのファイルのやり取り等がスムーズになる
同じアドビ社製のIllustratorも、デザインツールの一つです。
Illustratorは、ロゴやキャラクターなど境界線のはっきりしたイラスト作成や、デザイン素材をパーツごとに分解するのが得意なツール。
Photoshopと併用すると便利ですが、Photoshopだけでも十分に高クオリティのWEBデザインを制作できます。
また、IllustratorもPhotoshop同様に多機能なため、操作を覚えるためには時間を要します。
初心者のうちは、学習効率を上げるためにも、Photoshopを集中的に使うほうがおすすめです。
Photoshopは有料(サブスクリプション/7日間の無料体験あり)です。
2025年8月現在、Photoshopを使えるプランは3種類あります。
はじめのうちは、最も低額の「フォトプラン(2,380 円/月 (税込)※)で十分です。
いつでも必要に応じ、解約したり、グレードアップしたりすることもできます。
※年間プラン(月々払い)の金額
準備4_連絡ツールを準備する
連絡ツールは、WEBデザインの仕事関係者やクライアントとのやり取りに必須です。
学習期間中に利用登録して慣れておけば、いざ仕事を始めるとき慌てることなくスムーズに使えます。
種類はさまざまありますが、まずは汎用性の高いGmailとChatworkを準備しておくことをおすすめします。
Gmailは、Google が提供する無料のWEBメールサービス。
簡単に無料でメールアドレスを作成できます。
WEBサイトのログイン登録が必要な場合、アカウントとして利用できたり、Googleカレンダーと連携してスケジュール管理に活用できたりするため便利です。
Chatworkは、株式会社kubellが提供するビジネスチャットツールです。
組織の内外を問わず、Chatworkに登録している人同士で、スムーズにコミュニケーションが可能です。
まずはフリープランに登録しておけば、機能制限はあるものの十分に活用できます。
連絡を取る相手によっては、GmailやChatwork以外のツールを使っている場合もあります。
その場合は、相手方に確認の上、必要に応じて登録を追加しましょう。
WEBデザインの始め方_その2|身につけるべき5つの知識・スキル
WEBデザインの仕事を始めるには、少なくとも、次の5つの知識やスキルを身につける必要があります。
- デザインの基礎知識
- デザイン力
- デザインツールの操作スキル
- コーディングの初歩的な知識
- コミュニケーションスキル
一つひとつ解説していきます。
知識・スキル1_デザインの基礎知識
仕事としてWEBデザインを作るためには、デザインの基礎知識を身につける必要があります。
商業的なWEBデザインには、WEBユーザーの目を引き、心を動かすようなデザインが求められます。
その大前提として必須なのは、「ユーザーにとって見やすく、使いやすいデザイン」であること。
そういったクライアントにもユーザーにも喜ばれるデザインを作るためには、デザインの基礎知識やルールに従うことが最も大切になります。
基礎をしっかり押さえ、ユーザー目線で制作すれば、高クオリティのWEBデザインを作ることも可能です。
下表は、身につけておきたいデザインの基礎知識の例です。
レイアウト | デザインのレイアウトの原則 |
|
WEBサイトの基本レイアウト |
| |
余白(マージン) | 文字間・行間・境界線と要素・要素同士の余白 | |
配色 |
| |
フォント |
| |
知識・スキル2_デザイン力
「デザイン力」とは、デザインの基礎を踏まえつつ、クライアントの要望・状況・条件等を考慮して、適切なデザインを生み出す力。
プロレベルのデザインを制作するには、デザインの知識を学習したり、デザインツールの使い方を覚えたりするだけでなく、デザイン力を身につけることが必須です。
デザイン力を身につけるのに、生まれ持ったセンス・美術的知識や経験は不要です。
デザイン力は、デザインのコツを学び実践を重ねることで身につけられます。
デザイン力を身につけるためのコツと実践とは、大きく分けると次の2つです。
- プロが制作したデザインから「良質なデザインとはどのようなものか」を学ぶ
- 基礎知識と良質なデザイン感覚をもとに、デザイン制作の実践を重ねる
コツと実践の詳細については、「WEBデザイン学習で注目すべき2つのポイント」の章で解説していきます。
知識・スキル3_デザインツールの操作スキル
WEBデザインを制作するには、デザインツールの操作スキルを身につけることも大切です。
以下は、多くのWEBデザイナーに使用されるPhotoshopについて記載します。
Photoshopは、多機能かつ高機能のプロフェッショナル仕様のツールです。
複雑な機能もあり、全体を把握するには、かなりの時間を要します。
ただし、WEBデザイン制作に使う機能は、Photoshop全体から見れば、ほんの一部のみ。
WEBデザイン学習で身につけるのは、必要最小限の機能で構いません。
例えば、バナー制作に使うのは、主に次のような機能です。
(使う機能は、ケースバイケースで増減あり)
機能 | 概要 |
テキストツール | テキストを入力・編集する |
移動ツール | オブジェクトを移動する |
選択ツール | オブジェクトを選択する(長方形・楕円形・なげなわ・自動選択等) |
自由変形ツール | オブジェクトを変形する(拡大・縮小・回転・歪み等) |
レイヤースタイル | オブジェクトを装飾する(単色・グラデーション・パターン・境界線・影・光彩等) |
レイヤーマスク | マスクを重ね、元画像の一部を隠す |
カラーバランス | 主に写真の色味を調整する |
トーンカーブ | 主に写真の明るさを調整する |
WEBデザイン学習を、デザインツールの使い方から学び始める人は多いかもしれません。
しかし、実は、ツール操作に特化して学ぶのは非効率です。
ツール操作に特化して学ぶと、デザイン制作にあまり使わない機能まで学習してしまいがちです。
そうすると、実践として身につきにくく、学習時間が無駄になってしまう場合があります。
また、本来の目的であるデザインスキルの学習になかなかたどり着けず、モチベーションが保ちにくくなります。
最もおすすめなのは、デザイン制作の実践中に、デザインツールを操作しながら徐々に覚えていく方法。
理由は次のとおりです。
- 実践に則して操作するため、理解・納得しやすい
- 必要に迫られ繰り返し使うため、早く身につく
- ツール学習のみの時間を省略できる
- WEBデザインに不要な機能の学習時間を省略できる
Photoshopの使い方は、アドビのWEBサイトをはじめ、多くの記事・動画・書籍でわかりやすく解説されています。
デザインスキルがある程度身について余裕ができたら、必要に応じて使える機能を増やしていけばOKです。
知識・スキル4_コーディングの初歩的な知識
コーディングの初歩的な知識があると、主に次のような場面で役立ちます。
- コーディングしやすいデザインを制作でき、業務を効率化できる
- 分業や外注する場合、コーダーとスムーズなやりとりができる
コーディングとは、完成したデザインをWEBサイト上で表示・動作させるために、プログラミング言語を記述する作業です。
WEBデザインに使用するプログラミング言語は、主にHTML・CSS・JavaScriptの3種類。
3言語それぞれの主な役割は、次のとおりです。
HTML
WEBページの内容や構造を定義する
- WEBページの構造定義:ページのセクションや要素(ヘッダー・本文・フッター等)を定義し、コンテンツの構造を整える
- コンテンツのフォーマット整形:コンテンツ(テキスト・画像・リンク等)を整理・整形し、適切な形式で表示する
- インタラクションの設定:クリック・スクロール・フォーム・リンク等、ユーザーアクションへの対応を設定する
CSS
WEBページの見た目やレイアウトを指定する
- WEBページのレイアウト調整:要素の配置やサイズを指定し、ページの全体的なレイアウトを調整する
- テキストスタイルの変更:フォント・サイズ・色・行間などを設定し、ページ内の文字の見た目を整える
- WEBページに装飾を追加:背景・画像・ボーダー(枠線)・影などを使い、ページにアクセントをつける
- レスポンシブデザインの作成:パソコン・スマートフォン・タブレットといったデバイスの画面サイズに合わせ、WEBページの表示を最適化する
JavaScript
WEBページに動きやインタラクションを追加する
- ページの挙動を制御:ボタンをクリックしたときの動作・ページ読み込み後のアニメーション実行等、動的な反応を設定する
- ユーザーの入力を処理:フォームへの入力内容検証・ユーザー入力データのリアルタイム表示等、ユーザーとのインタラクションを強化する
- データの操作と表示:サーバーと通信してデータを取得したり、ページ内容を動的に変更したりする
3言語の役割・基本的なコードの意味・記述ルールについて、初歩的な知識を頭に入れておきましょう。
WEBデザイナーを目指す場合、実際にコーディングするスキルは、特に身につけなくても問題ありません。役割分担・外注・ノーコードツールの活用といった選択肢があり、自らコーディングしなくてもWEBサイト制作は可能なためです。
知識・スキル5_コミュニケーションスキル
WEBデザインを制作するには、コミュニケーションスキルも大切です。
最もコミュニケーションスキルが必要なのは、クライアントとやりとりする場面。
WEBデザインを制作するためには、クライアントが「どのようなデザインを望んでいるのか」を、ヒアリングで正確に把握する必要があります。
例えば、「おしゃれに」「かわいらしく」「優しい感じで」といった表現をするとき、思い描いているイメージは、人によって異なります。
意識してコミュニケーションを取り、クライアントの真意を理解しようとしなければ、クレームを受けたり、全てやり直しになったりする可能性もあるのです。
スムーズにクライアントとコミュニケーションを取り、認識のずれを防ぐには、次の6つのポイントを押さえることが大切です。
ポイント1_事前準備
- 質問項目を整理しメモする
- クライアントのWEBサイト・SNSを見て、特徴を把握する
- クライアントについて調べる
- クライアントの目的・課題を想定する
- クライアントの業界・競合企業について調べる
ポイント2_安心感を与えるリアクション
- 目線を合わせ、適度にうなずく
- 相手の話を最後まで聞く(途中で遮らない・沈黙した場合も相手の発言を待つ)
ポイント3_会話を深掘り
- 「なぜ・例えば・どこが・どのような」といった質問を返す
- 質問することで、クライアントの背景や本来の目的を確認する
ポイント4_非言語情報の読み取り
- 表情・声のトーン・話す勢い・言い淀みなどから、真意を深掘りし、確認する
- 真意を深掘りすることで、本来の目的を理解する
ポイント5_実例でイメージ確認
イメージに近いWEBサイトを示してもらったり、デザイナー側から例示したりし、相互の認識をすり合わせる
ポイント6_聞き取り内容を整理し、確認
- 短いスパンで要約・反復する
- 曖昧な部分は、遠慮せず確認する
- 最後に全体像を確認する
コミュニケーションスキルを高めると、クライアントに安心感を持ってもらえ、信頼関係を結びやすくなります。
また、デザイン制作がスムーズになり、リピート受注の可能性をUPすることもできます。
この他、組織で働く場合は、上司やチーム内でのコミュニケーションも欠かせません。
フリーランスなら、工程の一部を外注する場合、外注先とのコミュニケーションが必要になります。
WEBデザイン学習_その1|スキルを身につける4つの方法
WEBデザインに必要な知識やスキルを身につける方法は、主に次の4つです。
- 書籍
- YouTube
- 動画教材
- スクール
それぞれ、詳細を解説していきます。
学習方法1_書籍でWEBデザインを学ぶ
書籍でWEBデザインを学ぶメリット・デメリットは次のとおりです。
【メリット】
- 体系的に、またはポイントを絞ってWEBデザインを学べる
- 学習費用を抑えられる
- マイペースに、かつスキマ時間にWEBデザインを学べる
【デメリット】
- 添削がないため、一定レベル以上のスキルを身につけにくい
- 実践的なコツを学習するのは困難
- 知識の習得に終始してしまい、実践がおろそかになりがち
WEBデザインに関する書籍は、基礎から応用編まで数多くあります。
下表の13冊は、初心者にもおすすめです。
書籍 | 著者/出版社 | 備考 |
ingectar-e/ソシム |
| |
配色デザインインスピレーションブック | Power Design Inc./ソシム |
|
カトウ ヒカル/インプレスブックス |
| |
ingectar-e/インプレスブックス |
| |
筒井 美希/エムディエヌコーポレーション |
| |
平本 久美子/翔泳社 |
| |
坂本 伸二/SBクリエイティブ |
| |
株式会社日本デザイン(監修:大坪拓摩)/SBクリエイティブ |
| |
Mana/SBクリエイティブ |
|
学習方法2_YouTubeでWEBデザインを学ぶ
YouTubeでWEBデザインを学ぶメリット・デメリットは次のとおりです。
【メリット】
- WEBデザイン制作の実践風景を繰り返し見られる
- 無料でWEBデザインを学べる
- マイペースに、かつスキマ時間にWEBデザインを学べる
【デメリット】
- 自分に必要な情報を選ぶのが難しい
- 実践への応用が難しく、モチベーションを保ちにくい
- 添削がないため、一定レベル以上のスキルを身につけにくい
WEBデザインに関するYouTube動画は、多種多様なものが投稿されています。
初心者にもおすすめの動画を、下表に5つ紹介します。
YouTube動画 | 発信者 | 備考 |
ゼロイチWEBデザイン |
| |
アキユキ氏 |
| |
ヒロ氏 |
| |
アドビ |
| |
えりな氏・たじ氏 |
|
学習方法3_動画教材でWEBデザインを学ぶ
動画教材でWEBデザインを学ぶメリット・デメリットは次のとおりです。
【メリット】
- WEBデザイン制作の実践風景を繰り返し見られる
- 比較的低額で、必要な情報がまとめられている
- マイペースに、かつスキマ時間にWEBデザインを学べる
【デメリット】
- 有益な教材かどうか見極めるのが難しい
- 実践的なコツを学習するのは困難
- 添削がないため、一定レベル以上のスキルを身につけにくい
WEBデザインに関する動画教材は、提供元により、さまざまな内容・コースが用意されています。
下表は、初心者が基礎を学ぶのにおすすめの動画教材です。
動画教材 | 備考 |
自分のペースで学習を進められるプラットフォーム | |
オンライン学習コミュニティで、生放送授業や録画授業を見られる | |
双方向参加型のオンライン授業は、コメント・挙手で参加可能 |
学習方法4_スクールでWEBデザインを学ぶ
スクールでWEBデザインを学ぶメリット・デメリットは次のとおりです。
【メリット】
- 必要な情報がまとめられ効率的に学べる
- 添削してもらえ、スキルアップしやすい
- 講師や仲間と学ぶためモチベーションを維持しやすい
【デメリット】
- 有益なスクールかどうか見極めるのが難しい
- 実務に不要なカリキュラムもセットになっていることが多い
- 学習費用が他の学習方法と比べ高額
WEBデザインに関するスクールは、内容もレベルもさまざまです。
「WEBデザイン講座」という名称でも、デザインツールの使い方・コーディング・資格取得(※)がメインの場合も多くあります。
(※WEBデザイナーは資格不要)
スクールに入学しても、自分のやりたいWEBデザインが学べなければ、お金と時間の無駄になってしまいます。
よく調べて、心から納得できるスクールを選ぶようにしましょう。
次のような場合は、詐欺の可能性があるため、避けたほうが無難です。
- 個別チャット等に誘導して、言葉巧みに高額商品を買わせようとする
- 「あなたのスキルには問題がある」などと不安を煽って入会させようとする
- 検討する時間を与えず、何かと理由をつけて入会を急がせる
広告や営業がいくら魅力的でも、内容が伴わない場合があるため、表面的な雰囲気だけで選ばないよう注意が必要です。
WEBデザインスクールを選ぶときは、次の6つのポイントをチェックしてみることをおすすめします。
1_カリキュラムが自分の学びたい内容かチェック
- 「デザイン力を身につける」こと(デザインの基礎・デザインツールを使った実践)をメインにしているか
- 講座名に「WEBデザイン」と入っていても、学べる内容が、コーディング・デザインソフトの使い方・資格取得の勉強だけではないか
2_講師が現役WEBデザイナーかチェック
- プロの生きたテクニックを学べるか
- 現場で求められるデザインレベルを示してもらえるか
3_代表者が誰かわかるか、またデザイナーかチェック
- 代表者が公に出ていないところは信頼度が低い可能性がある
- 代表者がデザイナーでないと、全体的なレベルが高くない可能性がある
4_受講形式が自分の生活や性格に合っているかチェック
- 学習場所を選べるか
- 受講期間が長すぎないか
- 受講以外に必要な学習時間はどの程度か
- 講師からの有益なフィードバックはあるか
- 講義を欠席した場合のフォローはあるか
- 講師や一緒に学ぶ仲間との距離が近いか(コミュニケーションが活発なほどモチベーションを維持しやすい)
5_卒業後のフォローがあるかチェック
- フォロー内容とフォロー期間はどうか
- 就職サポートや案件紹介サービスがある場合、成功実績はどの程度あるか
6_卒業生の作品レベルをチェック
- デザインソフトを使いデザインしているか(コーディングで、写真や文字を配置しているだけになっていないか)(※)
- デザインの基礎を踏まえた上で、さらに見やすく、ユーザーの心をつかむデザインをしているか(写真がメインになっていないか・文字が読みやすいか・誰に向けたどのようなメッセージが込められているかが伝わるか等)
- 卒業生の作品を公開していないスクールは、信頼度が低い可能性がある
右側のようなデザインは、整然としていて一見美しく見えます。
しかし実は、ユーザーの心をつかむ「売れるデザイン」は、左側のようなデザインです。
【おすすめのスクール】
未経験から短期間で「デザイン力」を身につけるなら、「日本デザインスクール」がおすすめです。
日本デザインスクールには、次のような特徴があります。
- 新入社員をWEBデザイナーに育てるプログラムを基盤としたオリジナルカリキュラム
- 45日で即戦力級のデザインスキルが身につく、無駄のない効果的なレッスン
- 現役で活躍中のWEBデザイナーが、実践に即した添削指導
- チーム制で仲間と支え合い、モチベーションを保ちやすい
- オンライン受講で、学習の時間・場所の縛りがない
- 仕事獲得に役立つポートフォリオの作成支援あり
- 卒業後も働き方・仕事獲得・スキルアップなどをサポート
書籍や動画学習だけでは難しい「プロレベルのデザインを生み出すスキル」を身につけられるスクールです。
WEBデザイン学習_その2|注目すべき2つのポイント
WEBデザインを仕事にするためには、次の2つのポイントを押さえて学習することが大切です。
- 「デザイン力」を身につけること
- 「デザイン力」を身につけるため、良質なデザインを見抜く目を養い、実践を重ねること
次に詳しく解説していきます。
注目ポイント1_身につけるべきは「デザイン力」
先に「WEBデザインの始め方」で解説した5つのスキルのうち、「デザイン力」は、特にしっかりと身につけておくべきスキルです。
「デザイン力」を身につければ、他の学習は最低限でも、高クオリティなデザイン制作が可能になります。
反対に、基礎知識を完全にマスターしたり、デザインツールのスキルを極めたりできても、それだけでは、プロレベルのデザインを生み出すのは困難です。
書籍や動画等で独学する場合は、基礎知識やツールスキルの習得に集中してしまいがちです。
「たくさん学べばデザインできるようになる」と頑張って勉強しても、プロのようなデザインを作るコツがわからず、悩んだり諦めたりしてしまう可能性もあります。
スクールで学ぶ場合、「デザイン力を身につける内容」のカリキュラムが組まれていないスクールを、知らずに選んでしまうことがあります。
この場合、授業や添削があったとしても、学習できる内容は、書籍や動画等とそれほど変わりません。
自己投資してスクールを卒業しても、なぜかデザインが作れないという残念な結果になってしまいがちです。
WEBデザインで仕事をするためには、確実に身につけておきたい「デザイン力」。
どのように学習すればよいのか、知りたい人も多いのではないでしょうか。
次の章で「デザイン力を身につける方法」を解説していきます。
注目ポイント2_デザイン力を身につけるには「良質なデザインを見抜く目を養い、実践を重ねる」
「デザイン力」を身につけるには、次の2つの実践が有効です。
- 良質なデザインを見抜く目を養う
- 良質なデザインを参考にし、デザインの実践をおこなう
順番に具体的な方法を解説していきます。
良質なデザインを見抜く目を養う
デザイン力を身につけるためには、目の前のデザインの良しあしを見抜けるようになる必要があります。
「良質なデザイン」とは、どのようなデザインなのか理解できると、自分でも高クオリティのデザインを制作できるためです。
目を養うために有効なのは、プロが制作したWEBデザインから直接学ぶことです。
最も手軽な実践は、WEBデザインのアーカイブサイト・SNSやWEBサイト広告のバナーやランディングページを、できるだけ多く見ること。
ただし、ただ眺めていたり、「これは好き」「いい感じ」といった感覚を漠然と味わったりするだけでは効果がありません。
その作品は、デザインの基礎がどのように落とし込まれ、何の目的で作られているのか、といった視点で分析する必要があります。
具体的には、次の4つのポイントを押さえながら、プロが制作したデザインを観察し、自分なりに言語化してみましょう。
この作業は、デザインのトレンドを知ることにも役立ちますよ。
- ポイント1. デザインの基礎・ルールがどう活かされ、それが見る人にどのような影響を与えているか
- ポイント2. どのような人をターゲットとして意識し、どう工夫しているか
- ポイント3. デザイン(レイアウト・色・フォント等)の目的(集客・ブランディング・販売等)は何か
- ポイント4. レイアウトのパターンを観察し、定番のデザインを理解する
下表に初心者におすすめのバナーのアーカイブサイトを紹介します。
プロの作品を見るときに、利用してみてくださいね。
サイト名 | 特徴 |
| |
| |
| |
| |
|
良質なデザインを参考にし、デザイン制作を実践する
デザイン力を磨くためには、プロが作った「良質なデザイン」を参考にして、実際にデザイン制作することが重要です。
初心者は、バナーのトレースから始めることをおすすめします。
バナーは比較的構成要素が少なく、初心者でも取り組みやすいためです。
バナーをトレースする手順は、次のとおりです。
手順1_トレース元のデザインを選ぶ
- 変わったデザインや自分好みのデザインではなく、定番デザイン(デザインの基礎を踏まえたデザイン)を選ぶ
- 慣れるまではシンプルなデザインを選ぶ
手順2_デザインのサイズを確認する
- 適当なサイズで作り始めないこと
- サイズが違うと、他要素の配置もずれてしまう
手順3_デザインの要素を確認する
- デザインがどのようなもので構成されているか(フォント・素材・図形など)確認する
- フォント・素材は、必要に応じてダウンロードする
- 素材(写真・イラスト・背景等)は、できる限り既存のものをダウンロードし、頑張って手作りしない
手順4_文字を配置する
- デザインは文字が主役
- 文字から配置すると全体のバランスを取りやすい
- 背景から作ると効率が悪くなる
- 仮置きでOK
手順5_素材を配置する
写真・イラスト・背景等を配置する
手順6_フォント・色を調整する
4で配置した文字のフォント・色・サイズ・文字間隔等を調整する
トレースするときは、次の7つのポイントを意識しましょう。
デザイン力の向上がグンと早くなりますよ。
ポイント1_焦らず落ち着いて取り組む
- 手順を守ることが大切
- 焦ってしまうと、見落としや間違いが多くなり効果が出にくい
ポイント2_効率的にテンポよく取り組む
時間をかけすぎると、モチベーションが下がる
ポイント3_素材にこだわりすぎない
- 雰囲気が同じ素材であれば、100%一致させなくてもOK
- まったく同じ素材を探し出すのは難しい
- 同じ素材にこだわると、検索だけで疲れてしまう
ポイント4_その作品が、誰に何を伝えたいのか意識する
例)
「幅広い層に向けてブランディングしたい」
「中高年層に買ってもらいたい」
「女性に問い合わせしてほしい」
ポイント5_作品から感じる雰囲気(高級感・やさしさ・ポップ等)は、どの素材が醸し出しているのか確認しながら作成する
例)
やさしさ :水彩画風の素材・パステル調の色使い等
女性らしさ:手書き風のフォントやイラスト・ピンク系統の色等
ポイント6_「なぜこのようなデザインに?」と問いかけながら作成する
- 質問を投げかけ、作品とコミュニケーションをとっていく
- 続けるうちに、作者の思いやテクニックを理解できるようになる
例)
「なぜこのフォントを選択?」
「なぜ文字に強弱を?」
「なぜこの色に?」
「なぜこの写真を選択?」
「なぜこの素材をここに配置?」
「なぜこの素材を斜めに配置?」
ポイント7_余白のバランスに注目しながら作成する
- 余白は、多過ぎても少な過ぎても、素人っぽい作品になってしまう
- バランスのよい余白の取り方を、プロの作品から視覚的に学ぶ
トレースで、デザインツールの使い方に慣れてきたら、次にオリジナルのデザインを制作します。
本番環境に近い練習をするには、架空の題材より、クラウドソーシングサイトなどの実案件を制作するほうがおすすめです。
この場合も、必ずプロの良質な作品を参考にして、「レイアウト」や「テイスト(目的や雰囲気に合ったフォント・色・素材など)」を決めていくことが大切です。
自分流で自由に作ると、楽しい反面、デザイン力を磨く練習にはなりません。
デザインの基礎知識とプロから学んだテクニックを活かしつつ、デザイン制作の実践を積み重ねましょう。
WEBデザインの仕事受注|仕事獲得に必要な4つの行動
WEBデザインの仕事を始め、順調に案件を獲得していくためには、「どのように行動するか」がカギになります。
具体的には、次の4つの行動をとることが大切です。
- 行動1_ポートフォリオを作る
- 行動2_クラウドソーシングに登録する
- 行動3_コンペ案件に応募する
- 行動4_交流会に参加する
順番に解説していきます。
行動1_ポートフォリオを作る
WEBデザインの仕事を獲得するために重要なのは、「質のよいポートフォリオを作ること」です。
ポートフォリオとは、自分の実績やスキルを証明するための作品集。
質のよいポートフォリオを作れば、未経験の場合でも、就職や案件獲得の成功率が高まります。
ポートフォリオの作成には、次の4ステップが必要です。
- 掲載作品を制作
- 作品へのこだわりを記載
- 作品をまとめる
- 自己紹介欄等を作る
ステップごとに、仕事獲得の成功率をUPさせる「アピールポイント」と「コツ」を解説していきます。
【ステップ1】掲載作品を制作する
〈アピールポイント〉
掲載作品を制作する上でのアピールポイントは、「デザインスキル」です。
〈コツ〉
デザインスキルをアピールし、好感度をUPさせるには、次の2つのコツが必要です。
コツ1. 実案件の作品を優先して制作する
- 優先順位は次のとおり。
実案件(採用)>実案件(不採用)>オリジナル課題 - オリジナル課題だと、どうしても現実感のない作品になりがち
- まだ実績がない場合は、クラウドソーシング案件に挑戦して、実案件作品を増やすのがおすすめ
コツ2. 幅広い種類・ジャンルの作品を制作する
- 種類例)
バナー・ランディングページ・サムネイル等 - ジャンル例)
美容系・食品系・健康系・金融系・住宅系・スポーツ系等 - 意識しないと、同じ種類や馴染みのあるジャンルに偏りがち
- スキルのアピールになるとともに、経験値のUPにもなるため、積極的に挑戦する
【ステップ2】作品へのこだわりを記載する
〈アピールポイント〉
作品へのこだわりを記載する上でのアピールポイントは、「仕事に取り組む姿勢や人柄」です。
〈コツ〉
人間的な好感度をUPし「この人と一緒に仕事したい」と感じさせるコツは、次の2つです。
コツ1. どのような思いを込めて制作したかを丁寧に記載する
コツ2. 制作期間・作業時間・プロジェクト名なども添える
【ステップ3】掲載作品をまとめる
〈アピールポイント〉
作品をまとめる上でのアピールポイントは、「デザインスキル」と「貢献できるイメージ」の2点です。
〈コツ〉
「この人なら自社の力になってもらえそう」と感じさせるには、次の3つのコツを意識することが大切です。
コツ1. 作品掲載は、量より質を重視する
コツ2. 「頑張った作品」よりも、「自己ベスト作品」を掲載する
コツ3. 新しい作品・高クオリティの作品に更新し続ける
また、採用担当者やクライアントに、「この人なら自社にマッチする作品を作ってくれそう」と思わせるためには、次の2つのコツを押さえましょう。
コツ4. 相手方のジャンルやターゲットを意識した実案件作品を多めに掲載する
コツ5. 実案件の成果※(反応率・成約率・改善率等)を添える
※当該クライアントから教えてもらう必要があります。
掲載作品をまとめる媒体は、WEBサイト・紙・Instagram・ピンタレスト等、さまざまあります。
初めて作るなら、オーソドックスなWEBサイト形式がおすすめ。
ノーコードツールを使えば、コーディングなしで簡単にポートフォリオサイトを作れますよ。
【ステップ4】自己紹介欄等を作る
〈アピールポイント〉
自己紹介欄等を作成する上でのアピールポイントは、「安心感」と「熱意」の2点です。
〈コツ〉
安心感をアピールするためには、相手方を不安にさせないよう配慮する必要があります。
それには、次の2つのコツを押さえることが大切です。
コツ1. 自己紹介や経歴を簡略化せず、自分の人柄やイメージが伝わるよう意識して書く
コツ2. 稼働可能な時間帯(即レス可能な時間・修正対応可能な時間等)を明記する
また、採用担当者やクライアントに、仕事への熱意を伝え、「この人と一緒に働いてみたい」と思わせるために、次の3つのコツを押さえましょう。
コツ3. 自己紹介や経歴をさらに充実させる
- やる気のある前向きな姿勢・性格等がわかるようなエピソードを追加
- 趣味や家族構成等のプライベートを交え、より身近に感じてもらう
コツ4. 画像は、プロが撮影した写真を使用する(安心感や本気度を伝えられる)
コツ5. プロフィール写真にデザイナー的要素(パソコンを持つ・パソコンに向かっている等)を入れる
行動2_クラウドソーシングに登録する
クラウドソーシングサイトは、WEBデザインの仕事を獲得する有効な手段の一つです。
クラウドソーシングサイトとは、「仕事を依頼したい人」と「仕事を受注したい人」とのマッチングを提供するWEBサイト。
外に出て営業活動しなくても、在宅で仕事を得られる便利なシステムです。
クラウドソーシングサイトは複数ありますが、初心者におすすめなのは次の3つ。
サイト名 | 特徴 |
クラウドワークス |
|
ランサーズ |
|
ココナラ |
|
クラウドワークスとランサーズは、クライアントが案件を提示し、クリエイターが応募するシステム。
ココナラは、クリエイターが出品し、クライアントが購入するシステムです。
クラウドワークスやランサーズでの案件獲得の形式は、WEBデザインの場合、主に次の2種類になります。
【1_コンペ形式】
〈流れ〉
クライアントが案件内容を提示→複数のワーカーがデザイン制作し提出→クライアントが1つ選ぶ→報酬
〈特徴〉
- 単発が多い(継続発注につながる場合もある)
- 低単価案件の割合が多い
- 初心者も挑戦しやすい
【2_プロジェクト形式】
〈流れ〉
クライアントがプロジェクト内容を提示→複数のワーカーが見積もりを提出→クライアントが1つ選ぶ→交渉→契約締結→デザイン制作・提出→報酬
〈特徴〉
- 中長期案件が多い
- 継続発注・高単価案件に結びつきやすい
- 実績が少ない場合、高クオリティのポートフォリオが必須
クラウドソーシングは、WEBで手軽に利用できる一方、取引相手の顔が見えないため、不安を感じやすい面があります。
そのため、大切なのは、クライアントに安心感を与え、「この人なら仕事を依頼できる」と思ってもらうこと。
そのためには、ポートフォリオ作成と同様に、自己紹介・経歴等のフォーマットを、しっかりと充実させる必要があります。
ポートフォリオ作成の章で記載した「自己紹介欄等のコツ」を、以下に一部再掲します。
- コツ1. 自己紹介や経歴を簡略化せず、自分の人柄やイメージが伝わるよう意識して書く
- コツ2. 稼働可能な時間帯(即レス可能な時間・修正対応可能な時間等)を明記する
- コツ3. プロフィール画像は、プロが撮影した写真を使用する(安心感や本気度を伝えられる)
- コツ4. プロフィール写真にデザイナー的要素(パソコンを持つ・パソコンに向かっている等)を入れる
そして、案件獲得の最重要ポイントは、デザイン力。
日々デザイン力を磨き、同時にポートフォリオのクオリティをUPしていきましょう。
行動3_コンペ案件に応募する
初心者が経験や実績を積みたい場合、クラウドソーシングのコンペ形式案件に挑戦するのがおすすめです。
はじめのうちは、選ばれない確率のほうが高いかもしれません。
しかし、次のようなメリットがあるため、一喜一憂することなく、淡々と挑戦し続けることが大切です。
- 「クライアント指定の作品を制作し、期日までに納品する」という実践経験を重ね、スキルと自信を高められる
- 実案件として制作したポートフォリオ作品を増やせる
- 当選者の作品・ポートフォリオ・プロフィール等から、選ばれるためのコツを学べる
当選を目指して行動することも、もちろん重要です。
コンペ案件に挑戦するときは、次の4つの行動でポイントを押さえると、当選確率やリピート率を上げられます。
- 案件検索
- 案件応募
- 応募文作成
- 当選した場合の対応
それぞれ詳しく解説していきます。
【1_案件検索のポイント】
- クライアントは、個人よりも企業がおすすめ
〈理由〉
予算が確保されている・高単価案件が多い・長期や継続案件につながりやすい
〈調べ方〉
企業情報を見る(企業名に株式会社とある・会社のロゴがある・案件紹介文を見る(弊社や自社と記載がある)・会社名をインターネット検索する等)
- さまざまなジャンルに挑戦してみる
- やりやすそう(簡単そう・納期が長い・ライバルが少なそう等)といった理由で選ばない
【2_案件応募のポイント】
- 毎日定期的に複数応募する(1日のうち30分は応募し続けるなど)
:当選確率を上げるために、できる限り多く応募する
:毎日案件を確認することで、良縁につながる確率が上がる
:ゲーム感覚でルーティン化し、応募への抵抗感を減らす
- 「受からない=スキル不足」とは限らない(元々の競争率が高い)ため、落選ばかりでも、気にせず応募を続ける
- 同時に複数当選した場合は、丁重に辞退すればOK
【3_応募文作成のポイント】
- 安心して長く付き合っていけそうと感じてもらえるよう意識する
「初心者です」と書かない
稼働可能な時間帯を明記(即レス可能な時間・修正対応可能な時間等)
- 案件に対する熱意や思いをアピール(元々興味があって、〇〇に魅力を感じた・共感したため等)
- 応募理由として、「なんとなくやってみたかった」「スキルアップのため」はNG
【4_選ばれた場合の対応ポイント】
- 遅くとも、納入期限3日前に納品する
安心感・信頼感を持ってもらえる
次の案件を打診される確率が高まる
- クオリティの高い作品(その時点の自己ベスト)を納品する
- 活動時間内の連絡には、できる限り早く返信する
クライアントを不安にさせず、好感度もUPできる
継続して仕事を頼みたいと思われやすくなる
- 特に依頼はなくても、少し違う感じの作品を複数提示する
思わぬサービス提供で、クライアントに喜ばれる
- 納品後、次の仕事に向け積極的な姿勢を見せる
例)「他にもお手伝いできることがありましたら、ぜひ協力させてください」
社交辞令的な「また何かありましたらよろしくお願いします」ではなく、やる気・熱意を伝える。
何件か受注して慣れてきたら、応募案件のレベルを少しずつ上げていくことが大切です。
また、バナーやサムネイル案件を続けていたらなら、ランディングページのヘッダーや、ランディングページなど、単価の高い案件にも挑戦していきましょう。
経験値を上げることで自信がつけば、スキルや収入のアップにもつながりますよ。
コンペ案件を続け、ポートフォリオが充実してきたら(※)、プロジェクト案件にも挑戦していけます。
(※)コンペで採用された作品をポートフォリオに掲載する場合は、あらかじめクライアント(採用者)の許可を得ましょう。
行動4_交流会に参加する
オフラインで直接相手方と話したいという人は、ビジネス交流会に参加するのがおすすめです。
クラウドソーシングのようなオンラインと比較し、次のようなメリットがあります。
- 相手の人柄や意気込みなどに直接触れ、デザインでその人の役に立てたらうれしいと感じられる
- 単にデザインするというだけでなく、一緒に事業を盛り上げていくという感動を味わえる
- 気の合う人同士でチームを組み、事業を始めることも可能
- 知り合った人から別の人を紹介されることもあり、仕事獲得の機会が増える
交流会に参加するときは、次の6つのポイントを意識すると、仕事につながりやすくなります。
- 仕事を獲得するためというより、「どのような参加者がいるのかを知る」「人とのつながりを作る」という感覚で参加する
- 全員と仲良くなる必要はなく、すてきだなと思う人・気が合いそうと感じた人と交流していく
- 無理に売り込まず、まずは興味をもって相手の話を聞く
- 自然に自分の話すターンがきたら、背伸びせず自分の話(仕事で大切にしていることや、悩みなど)をする
- 交流した人と仕事でつながらなくても気にしない(知り合いを紹介してもらえる可能性もあり、無駄にはならない)
- 仕事の料金を伝える場合、標準か少し高めに設定してOK
低めの料金設定は、かえって相手に不安感を抱かせる
高めに設定したほうが、数多く契約する必要がなくなり、自分に余裕が生まれる
コミュニティはさまざまあり、それぞれ雰囲気が異なります。
参加した結果、なんとなく合わないと感じたら、割り切って別の会に出かけてみましょう。
気負わず、「仕事につながるよいご縁があったらラッキー」という気持ちで、参加者との交流を楽しむのがおすすめです。
まとめ
WEBデザイン学習を始める前にすべきことは、「どのようなWEBデザイナーを目指すか」をイメージすること。
目標を明確にしたほうが、最短で夢に近づけるためです。
また、最低限でも、パソコン・インターネット環境・デザインツール・連絡ツールを準備する必要があります。
WEBデザインを仕事として始めるには、デザインの基礎知識を学ぶとともに、適切なデザインを生み出す「デザイン力」を身につける必要があります。
デザインツールの使い方は、デザインを実践するなかで、必要最低限覚えれば十分です。
コーディングの初歩的な知識やコミュニケーションスキルも、仕事をスムーズにするためには必要です。
WEBデザインの主な学習方法は、書籍・YouTube・動画教材・スクールの4種類。
それぞれに、メリット・デメリットがあります。
どの方法でも基礎を学べますが、最短でプロレベルのスキルを身につけるなら、「デザイン」を学べるスクールがおすすめです。
WEBデザイン学習で注目すべきポイントは、次の2つ。
- 「デザイン力」を身につけること
- デザイン力を身につけるために「良質なデザインを見抜く目を養い、実践を重ねる」こと
WEBデザインの仕事を獲得するためには、次の4つの行動が大事です。
- 質のよいポートフォリオを作り、スキルや経歴を証明する
- クラウドソーシングに登録し、仕事獲得のチャンスをつかむ
- クラウドソーシングのコンペ案件に応募し、実績を積む
- 交流会に参加して、人脈を広げる
あなたが、自分のやりたい「WEBデザイン」に向かって進んでいかれますよう応援しています。
