スマホの普及により、WEBサービスが増加し、今の広告手段はwebが割合を占めています。
仕事が減り続ける紙媒体からWEB媒体へ転職を考えている方も多いのではないでしょうか。
WEBデザイナーでは、グラフィックデザインで培った技術も役立ちますが、何から始めていいかわからないことが多く、勉強を始めることを先延ばしにしがちです。
そこで今回は、グラフィックデザイナーがWEBデザインを始める時に必要なツールや勉強方法をまとめます。
DTPは主にIllustratorを使ってのデザインがメインになると思いますが、WEBデザインではPhotoshopを使うデザイナーが多いです。
IllustratorではなくPhotoshopを使うメリットは大きく3つあります。
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デザインにはグラフィックデザインにはないものがたくさんあります。
例えば、
これらを学ぶには、普段見てるWEBサイトの中でも「使いやすいな」「見やすいな」と感じるものを”なぜそう感じるのか”研究する事が1番だと思います。
サイトトレースをする事で、
など、他にもたくさんの効果を実感できるようになるでしょう。
世の中のWEBサイト全てが勉強材料です。
良いWEBデザインをまとめているサイトもたくさんありますので、チェックしてみてください。
I/O 3000
WEBデザインに関わる人のためのギャラリーサイト
右上のメニューから検索がカテゴリー、タグ、色からサイトデザインを検索できるギャラリーサイト。
国内外の様々なサイトがまとめて閲覧できます。シャッフル検索で、ランダムに表示することも可能です。デザインの制作に参考に使いやすいサイトが掲載されています。
RESPONSIVE WEB DESIGN JP
その名の通り日本のレスポンシブサイトを集めたサイト。
カテゴリで色や絞り込み検索ができます。サイズ展開が並べて確認できるので、レスポンシブサイトを作る際のデザインのイメージ作りに参考にできるサイトです。
Pinterest
気に入ったデザインのアイデアを集めて自分のアカウントのボードに保存し管理できるサイト。
デザインセンスが良いものが多く、また他ユーザーのアイデアも見ることができます。またWEBデザイン以外のカテゴリでも、制作の参考にできるアイデアが多いサイトです。
いかかでしたか？
DTPデザイナーでWEBデザインもしたいけど、何をしていいのかわからないという方はとても多いと思います。
特にコーディングは今まで経験した作業とは全く違う作業になりますので、最初はとても苦労しますが、頑張っていけば必ず身に付きます！
コーディングについては下記の記事で詳しく解説しておりますので、是非ご覧ください。
WEBデザイン力もあげて、デザイナーとしてのキャリアプランを広げていきましょう。
受付時間：平日10:00~19:00(土・日・祝日を除く)
