【初心者向け】グラフィック(DTP)デザイナーがWEBデザイナーとして仕事をするためには

スマホの普及により、WEBサービスが増加し、今の広告手段はwebが割合を占めています。
仕事が減り続ける紙媒体からWEB媒体へ転職を考えている方も多いのではないでしょうか。

WEBデザイナーでは、グラフィックデザインで培った技術も役立ちますが、何から始めていいかわからないことが多く、勉強を始めることを先延ばしにしがちです。

そこで今回は、グラフィックデザイナーがWEBデザインを始める時に必要なツールや勉強方法をまとめます。

DTPは主にIllustratorを使ってのデザインがメインになると思いますが、WEBデザインではPhotoshopを使うデザイナーが多いです。
IllustratorではなくPhotoshopを使うメリットは大きく3つあります。

• 画像アセットを適応すると簡単に画像パーツの書き出しができる
• 長方形ツールで簡単にピクセル数を図ることができるので、デザインのパーツのサイズを測りやすい
• ピットマップ画像の画質が落ちない

WEB制作に役立つPhotoshopの使い方をまとめた記事もあるので、チェックしてみてください。

WEB制作に役立つ！Photoshop効率化ノウハウ

フォトショップのレイヤー管理術で作業を効率化しよう！

グラフィックデザイナーからWEBデザイナーに転職を決めた時に、つい後回しにしたり、先に進めないのはこのHTMLとCSSの部分ではないでしょうか。デザインはできるけど、コードはさっぱりわからない！そんな方が多いかと思います。次は、HTMLとCSSを始める時に準備するものやオススメの勉強方法をみていきましょう。

ブラウザの検証ツールを使う

Macで常備しているブラウザはSafariですが、WEB制作にはGoogle Chromeをお勧めします。
どのブラウザにも検証ツールというものが備わっていますが、Google Chromeの検証機能（デベロッパーツール） が使いやすいのでおすすめです。
チェックしたいページを開き、右クリックで表示されるメニューの中に「検証」があるので、クリックしてください。
Macのショートカットですと、⌘＋option＋cで立ち上がります。
これを使うと、デザインを変更する時などにテストができたり、他のウェブサイトのコードをチェックする事もできます。
また色々な画面サイズでの表示のチェックも行えるので、レスポンシブでの制作の時にも欠かせません。

エディターをインストール

HTMLやCSSを書くにはエディターが必要となります。
実はテキストが打てるソフトであれば何でもOKですが、コードを記述する時に色々と補完してくれる便利なエディターはたくさんあります！
今回は初めての方でも使いやすい、無料のエディターを3つ紹介します。

Brackets

記述したコードの内容が即座にブラウザで確認できる機能があります。また人気の拡張機能は本体に組み込まれていきます。日本語対応

Atom

シンプルで使いやすく、拡張機能も豊富です。後述のおすすめの書籍で使用されています。日本語対応

Visual Studio Code

豊富な拡張機能が特徴です。自分好みに使いやすくカスタマイズできます。

オススメの書籍

Web制作の本はたくさん出版されているため、最初にどの本を読めばいいかのか悩んでしまいます。 私が読んだ中で、特にわかりやすかったおすすめの書籍を2冊紹介します。

1冊ですべて身につくHTML＆CSSとWebデザイン入門講座

2019年3月に発売した今のサイトの作り方が一気に学べる一冊です。知識ゼロからでもわかりやすい説明になっています。

WEBデザイン良質見本帳

こちらはWEBデザインのアイデア集です。WEBデザインのレイアウト、配色、フォント、プログラムごとに分けて解説しています。

オススメのオンライン講座

オンライン上でも無料で講座を受けられたり、動画で学習できるサービスが充実しています。 その中でも、私はProgateがとてもわかりやすく勉強になったのでオススメします。

Progate

初心者が無料で始められる、プログラムのオンライン講座です。ゲーム感覚で学習が進みます。

グラフィックデザイナーでWEBデザインが苦手な方におすすめの勉強方法を紹介します。 それは「とにかく良いサイトをトレースし続ける事」です。 WEBデザインにはグラフィックデザインにはないものがたくさんあります。 例えば、

• 1.動的なデザイン
• 2.サイズに規定がない
• 3.フォントの制限がある
• 4.デザインがZの法則ではなく、Fの法則が多い

これらを学ぶには、普段見てるWEBサイトの中でも「使いやすいな」「見やすいな」と感じるものを”なぜそう感じるのか”研究する事が1番だと思います。

サイトトレースをする事で、

• WEBデザインの構造を理解できる
• WEBデザインto言うフィールドでの引き出しが増える
• コードの勉強ができる。

など、他にもたくさんの効果を実感できるようになるでしょう。

世の中のWEBサイト全てが勉強材料です。

良いWEBデザインをまとめているサイトもたくさんありますので、チェックしてみてください。

I/O 3000 WEBデザインに関わる人のためのギャラリーサイト

右上のメニューから検索がカテゴリー、タグ、色からサイトデザインを検索できるギャラリーサイト。
国内外の様々なサイトがまとめて閲覧できます。シャッフル検索で、ランダムに表示することも可能です。デザインの制作に参考に使いやすいサイトが掲載されています。

RESPONSIVE WEB DESIGN JP

その名の通り日本のレスポンシブサイトを集めたサイト。
カテゴリで色や絞り込み検索ができます。サイズ展開が並べて確認できるので、レスポンシブサイトを作る際のデザインのイメージ作りに参考にできるサイトです。

Pinterest

気に入ったデザインのアイデアを集めて自分のアカウントのボードに保存し管理できるサイト。

デザインセンスが良いものが多く、また他ユーザーのアイデアも見ることができます。またWEBデザイン以外のカテゴリでも、制作の参考にできるアイデアが多いサイトです。

いかかでしたか？
DTPデザイナーでWEBデザインもしたいけど、何をしていいのかわからないという方はとても多いと思います。
特にコーディングは今まで経験した作業とは全く違う作業になりますので、最初はとても苦労しますが、頑張っていけば必ず身に付きます！

WEBデザイン力もあげて、デザイナーとしてのキャリアプランを広げていきましょう。