DTPからWEBデザイナーに 僕の勉強方法と考え方

「DTPからWEBに転向したい」または「これからWEBデザインを学びたい」という方に、僕が行ってきた勉強方法やデザインの捉え方を紹介します。

何から始めたらよいかわからないという方に、少しでもヒントとなれば嬉しいです!

DTPではこんなことをしていました

プロフィールにも書いてますが、僕のデザイナーとしてのキャリアのスタートはDTPデザインです。

その当時、使っていたソフトと言えばIllustrator、Photoshopがメインで、それ以外はあまり使っていませんでした。
というより、使う必要がなかった。

今は少し風向きが変わってきましたが、当時はAdobeがデザインにおけるデファクトスタンダードでした。(まぁ今もそうか…)

DTPデザイナーの勉強方法

たった2つのソフトなので、習熟度の差はあれどデザイナーであれば皆使えていました。
言い換えれば「良いデザイナー」になるためには、それ以外の自分の強みを得ることが必要でした。

僕自身もまた、大量のインプットに励みました。
書籍を読み漁り、ADC(Art Directors Club)のセミナーを受け、デザイン力を上げるためにできることは色々やりました。

結果的には、関わった広告で日本新聞協会優秀賞をいただくなど、形として表れました。

ここでのインプットは今でもデザインの基本として、役に立っています。
良いデザインを見るって本当に大切です。
ただ見るんじゃなくて、何が良いのか、なぜそうなのか、デザインの本質を探りながら。

WEBデザイナー、覚えること多すぎ

勉強の始め方

まずはじめに、「WEBデザイナーはコーディング出来たほうが良いのか」。

当然するべきだと思っています。
実装方法を知らずして、WEBデザインは出来ません。

DTPに例えるなら、「コーディングしないWEBデザイナー」は手書きラフスケッチで終わるデザイナーようなものです。

WEBデザインと言っても、デザインの本質は変わりません。
道具が変わっただけです。
とは言っても、覚えることは沢山ありました(笑)

DTP時代のデザイン貯金があったので、デザインインプットは一旦止め、まずはWEB関連の技術習得です。

HTML、CSS、JavaScriptまずはこの3つですね。
おすすめ書籍は「HTML/XHTML&スタイルシートレッスンブック」。僕はここからはじめました。
文字通り写経のようにコードを書いてはブラウザで確認、を繰り返していました。

ここで大切なのは、最初は小さいデザイン(短時間で完成する)を作りながら覚える、ということですね。

僕自身そうですが、デザイナーは頭の中に完成図があり、早くそれを作りたいという意識があります。
おぼつかないコーディングでは、大作を完成させる前にグダってしまいます(笑)

小さく回してきましょう。
あとでそれらは結びつきます。

エディタについて

エディタは何でも良いです。
自分の使いやすいものを選びましょう。

先にも書きましたが、ソフトはただの道具です。
ちなみに僕が試したのは…

  • Coda
  • Dreamweaver
  • Brackets
  • Sublime Text
  • Atom
  • Visual Studio Code

くらいでしょうか。(いろいろ試してますね…)
今はVisual Studio Codeに落ち着いています。

デザインソフトについて

Illustratorも使いますが、ほぼSketchです。
Adobe XDFigma なども試してみましたが、Sketchに戻ってしまいました。

IllustratorとSketchの使い分けは、込み入ったデザイン(ロゴのような細かいもの)はIllustrator。
それ以外はSketchといった感じです。

操作方法はIllustratorが使えれば、そんなに迷うことはないと思います。

その他に覚えること

ここからが本番です。

Git、タスクランナー、SCSS、WordPress、PHP、Google Analytics、Vue、UI/UX e.t.c
これらキャッチアップに終わりはあるんでしょうか(笑)

また、DTPデザイナー時代と同様、「WEBデザイン」ができるデザイナーは五万といます。
自分の強みを出すために「WEBデザイン×○○○」を見つけましょう。

「マーケティングがわかるWEBデザイナー」
「プログラミングもバッチリなWEBデザイナー」
「動画編集も任せろなWEBデザイナー」

スキルの掛け算で強いデザイナーになります。

まとめ

DTPもWEBも大事なことは「デザインの本質」を掴むことです。
ここを外さなければ、技術は後追いでも良いとさえ思っています。

そして、他にはない自分の強みを作りましょう!
(僕も頑張ります!)

最新記事