営業職から独学でWEBデザイナーになった私のデザイン勉強法

営業職から独学でWEBデザイナーアイキャッチ画像 WEBデザイン

営業で働いている時に、WEBデザイナーになりたい!と思い立ってからデザインの勉強をはじめました。

そんな時に

まゆやん
まゆやん

どんな勉強をしていいのかわからない!

というのが、私の大きな壁でした。

しかし独学で勉強を続け、デザイン学校も行っていない0からスタートした私でもWEB製作会社に就職することができました。

今回は未経験の方でも、これを見れば一通りWEBデザインの勉強法がわかるように解説していきますね。

目標をもつ

まず勉強を始めるにあたって、一番大切なことは目標を設定することです。

例えば、

なるべくお金はかけずに独学で勉強してWEBデザインに関わる仕事がしたい!

でもいいですが、この目標にしてしまうと絶対にWEBデザインの仕事がしたい!という目標ではないのでできればもっと具体的な目標をもつことです。

人間は誰しも

まだ働いてるし、勉強する時間もないし、できればデザインの仕事したいけど技術力がついてからでいいや。

必ず自分に言い訳をしてしまいます。

それは意志が弱いからではなく自分を守ろうと現状維持をしようとする安全装置みたいなものです。

人間は本能的に変化を嫌いますからね。

なのでもっと具体的に

行きたい就職先は大体は決まっているけどポートフォリオ(今までの作品集)の提出があるからポートフォリオを作りたい!

など具体的に目標を設定すると勉強をしなければならない状況になるので目標は必ず具体的にしましょう。

特に本気でWEBデザイナーになりたい方は面接時に必ずポートフォリオの提出が求められるのでポートフォリオを作る目標はおすすめです。

PhotoshopやIllustratorの使い方を覚える

WEBデザインをする上で一番重要なソフトはAdobeが提供するPhotoshopとIllustratorです。

このソフトがないとWEBデザインはできない!くらい重要なデザインソフトです。このソフトの使い方を一通り覚えておけば問題はないでしょう。

いきたい会社にもよりますが、まずはPhotoshopを使えるようになれば最低限雇ってもらえます。

まゆやん
まゆやん

私の場合、Illustratorは得意ではありません。ただphotoshopの使い方はほぼマスターしています。

今までAdobeのphotoshopを使ったことがない方でも、わかりやすく解説していきますね。

 

Photoshopをダウンロードする

photoshopはかなり月額料金が安いです。単体プランでPhotoshopが月額980円(税抜)に対し、Illustratorは月額2,480円(税抜)です。

まゆやん
まゆやん

もし本気でWEBデザインの勉強するならPhotoshopの月額980円(税抜)はかなり安いと言えます。この値段だけでWEBデザイナーになれるのなら安上がりです。

 

まずは7日間の無料体験期間があるのでadobeサイトからダウンロードしてください。もしデザイン向いてない!と思えば無料体験期間のうちに解約してくださいね。

photoshop無料体験版ダウンロードページ

このページに入ったら、

スクリーンショット

この画面が出てくるのでフォトプランの無料体験を始めるボタンを押します。

 

スクリーンショット2

メールアドレスを入力し、「続行」ボタンを押す。

この次にパスワードの設定やクレジットカードの設定をし、「無料体験版を始める」ボタンを押しダウンロードページにいきます。

ダウンロードをしたら、photoshopを立ち上げます。

 

Photoshopの初期設定をする

Photoshopが立ち上がったら初めは何もツールも設定されていない状態になります。

まずは設定をするため、のちにバナーを作成するための設定をしていきます。

スクリーンショット3

Photoshopを立ち上げるとこんな画面が出てきます。

  • STEP1
    左側にある新規作成ボタンを押す。
    新規ドキュメントのウィンドウが開きます。(この画像ではすでに開かれています)
  • STEP2
    名称未設定となっているところの名前を変更する。
    今回はバナーを作成するのでバナー練習用と名前をつけました。これがPhotoshopを保存するときの名前になります。(後から変更も可能)
  • STEP3
    幅と高さを設定する。
    今回は幅1400ピクセル、横700ピクセルにしました。
    ※単位は必ずピクセルにしてください。

    カラーモードはRGBカラー/8bit(WEBデザインでは基本となるカラーモードです)

    カンバスカラーは白

  • STEP4
    右下の作成ボタンを押す

ワークスペースのアレンジをする

作成ボタンを押したら、右側に出ているワークスペースをアレンジするために上のツールバーにあるウィンドウを開きます。

スクリーンショット4

赤い線で囲ったところが私のおすすめワークスペースです。実務では大体この8つのタブで大丈夫。

上の大きなタブ
・パス
・ヒストリー
・レイヤー

下の大きなタブ
・ブラシ
・ブラシ設定
・属性
・段落
・文字

 

ぽちぽち押して行くと、ウィンドウが開かれるのでタブの部分をクリックしながらドラッグするとウィンドウが動きます。

スクリーンショット5

ドラッグして他のまとまっているタブの近くに移動させるとまとめることができます。

これでワークスペースの設定の完了です。

バナーを作成する

これからバナーを作成をしていくのですが、

まゆやん
まゆやん

バナーってなに?いきなり作るなんて無理!

となりますよね。

バナーとはWEB広告の一つで画像や写真を使った広告のことです。

 

いきなり作るのは難しいのでまずはこのデザイン素敵!と思えるバナーを探します。

まゆやん
まゆやん

良いデザインを探すにはいろんなサイトがありますが、私はピンタレストがおすすめです。グーグルのアカウントがあればすぐに利用できます。(もちろん登録しなくても見える)

 

素敵だと思えるバナーを何個も探しましょう。そしてそのバナーを保存していくと自分が好きなデザインの傾向がわかります。

それが自分の強い分野のデザインになるので保存するのはおすすめです。(ピンタレストは自分のPCの容量を使わずにWEB上の仮装ボードに保存できるのでおすすめ)

 

素敵なバナーを分析する

参考にしたいようなバナーを見つけてきたら、特に真似してみたいなと思うバナーを一つ決めます。

まゆやん
まゆやん

素敵なデザインを分析することがデザイン力を高める一歩となります。

今回私が素敵だなと思ったバナーはこちらです。選んだ理由はデザインの基本は完璧でなおかつオシャレに仕上がっており、何が言いたいかすぐにわかるデザインだからです。

unicoキリンレモンバナー
unico×キリンレモンより引用

爽やかな見た目でオシャレですよね。そして文字も見やすいです。

このバナーを分析していきます。

①ぱっと見の印象を書き出していく。

・青と黄色がメインでほぼ2色でまとめられている。
・写真が綺麗、少し青が強調されている色合い
・文字がまとまっている

こんな感じで書き出していきます。できれば多い方が良いです。

 

②細かく分析してみる。

 

まずは文字部分から。
・文字幅が一番広い「キリンレモン」に合わせてある。
・上下左右の余白が均等で中央揃えにしてある
・色が青色で統一されている
次に写真部分。
・一眼レフで撮った綺麗な写真
・ペアグラスが中央にきており、主役がすぐにわかる
・後ろにキリンレモンのペットボトルがあることでキリンレモンだとわかる
・写真の加工は「青」「黄色」が強めに加工してある
こんな感じでできる限りでいいので細かく分析をしましょう。
この工程がデザイン力を高める一歩となります。手を抜かずに頑張って分析しましょう。

③このバナーの配置を書き出す

スクリーンショット7
バナーの配置を大まかでいいのでこのように書き出します。
これがこのバナーの基本配置となっています。この配置はバナーでよく使われる配置なので覚えておきましょう。

実際に真似して作ってみる

まずは要るものの準備から。
・真似したいバナーを用意する
・素敵な写真を探してくる。
・やる気
この3つが揃ったら取り掛かりましょう。
まゆやん
まゆやん
長くなりそうなので初心者向けバナー講座として他の記事にまとめました。そちらをご覧ください。
バナーを作成していくうちにPhotoshopの使い方がわかっていくばかりでなく、デザインのやり方もどんどん付いてきます!
この真似したバナーは文字など全てオリジナルなら良いのですが、もし企業名が入っていたり商用可能でない写真を使っていたら自分の作品としては載せられないので注意してくださいね。
バナーの作成は就職した後に必ず任される仕事の一つです。
バナーの良し悪しによりその人のデザイン力がどのくらいあるのかがわかってしまうんです。バナーデザインは奥が深くたくさん勉強をしたいところです。
WEBデザインはバナーを制したものがWEBデザインを制すと言ってもいいほどです。
ある程度バナーのデザインができるようになったら自分で実際にHPを作成してみます。
HPの作成の仕方もまた後日、記事にまとめますね。

まとめ

・まず勉強するためには目標を持つこと

・Photoshopの使い方をある程度わかっておくこと

・素敵なバナーを集め、分析し、真似して作ってみること
この3つがデザインを勉強をする上で非常に大切です。
まゆやん
まゆやん

世の中にはいろんな勉強法が出回っていますが、実際に0からスタートした私はこの方法が一番あっていました。

勉強の期間は短くてもぎゅっと集中して勉強すれば自ずと力は付いてきます。
以上が私が独学でWEBデザインを学んだ方法でした。皆さんの勉強法の参考になれば嬉しいです。
タイトルとURLをコピーしました