独学でも売れっ子Webデザイナーになれる勉強法

  • 2018.1.25
  • 2018.4.23
  • 7,477 Views

「Webデザイナーになりたい!」
「Webデザイナーとして、引っ張りだこになりたい!」
「でも、今から専門学校に行って勉強するには、時間もお金も足りない・・・」

大丈夫です。今はWebデザイナーになるために独学で出来ることも多いんです。
ここでは、独学で売れっ子Webデザイナーになるためには何をすればいいのか?役立つ情報や参考になる本などを中心にまとめました。

Webデザイナーって何する人?

効果的なWebサイトを作成するのに「デザイン」は重要な役割を果たしています。
デザインの効果で商品を興味深く見せたりすることもできますし、よく考えられたデザインはサイト自体を見やすく、使いやすく導いたりもします。

webのデザインをする人を一般的にWebデザイナーと呼びますが、具体的にWebデザイナーってどんなことをしている人なのでしょうか?

リスプラのWebデザイナーは主にPhotoshop(たまーーーーにIllustrator)を使ってデザイン作業を中心に行い、他にもHTMLやCSSといったマークアップ言語を用いて、制作したデザインをブラウザで見えるようにしています(この作業をコーディングといいます)。

リスプラではPhotoshopの使用がメインですが、画像の劣化が少ないなどの理由でIllustratorをメインに使用してらっしゃるWebデザイナーさんもたくさんいます。

十数年昔はテーブルレイアウトといって、透明な表を作成し、そこにテキストや画像などのパーツを配置してデザインを構成していた時期もありましたが、現在はCSS(スタイルシート)という装飾専門の言語を用いてWebサイトを飾り付けるのが主な流れです。

そして、ほかにもJavascriptやJQueryというプログラム言語を用いてサイトに動きをつけたり、Wordpressに代表されるCMS(Contents Management System:ブログなどでもよく見かける、HTMLを編集するスキルが無くてもホームページを更新することができるシステムのこと)を駆使してWebサイトを編集したりすることもあります(リスマガもCMSで出来ています)。

Webデザインに必要な力

デザインをする上で、必要な知識・スキルをリストアップすると…

  1. 1. デザインスキル
  2. 2. PhotoshopやIllustratorなどのデザイン系ソフトを操る力
  3. 3. HTLM、CSSの知識
  4. 4. JavaScriptの知識(あると望ましい)
  5. 5. WordPress(PHP)の知識(あると望ましい)

以上があれば、立派なWebデザイナーと呼べるでしょう。
特に4. 5. のスキルがある人はどこに行っても引っ張りだこ間違いなし。

ただし、出来なくても他のできる人にお願いするという手がありますので、とりあえず1. 2.の知識があればWebデザイン自体は可能です。
他の人に依頼にするにも3の知識もあった方がいいので、1. 2. 3. は自分で勉強しておきましょう。

Webデザインを勉強する

では、「独学で」勉強する方法にはどうしたら良いのでしょうか。

デザインツールの勉強のやり方はGoogle先生にお尋ねすれば山のように出てくるので、ちょっと調べれば可能かと思います。

また、HTMLやCSSははっきりとしたルールがあるので、丸暗記すればできるようになります(ただし記述のルールが特殊なので、慣れるまで時間がかかる人もいます)。

問題は「デザイン」です。一般的にはあまり知られていないようですが、デザインには人類の長い歴史の中で培われた「守ったら美しく見える」ルールがあります。まずはそちらを押さえましょう。

デザインの基本ルールを押さえるのにおススメのサイト・書籍

勉強といわれたときに思いつくのが、教科書を読むということではないでしょうか。

デザインについてまとめたWebサイトや、特に書籍だとデザインの説明が体系的に記述してあるので納得しやすく、また例としてビジュアルも掲載してあるので理解しやすいです。

「お金をかけたくない…」という人はひたすらWebサイトを漁るだけでも勉強になるかとは思いますが、やはり書籍は出版社がお金をもらって情報提供している分信頼できますし、書籍を何冊か読み込む方がトータルでは時間もかからずお勧めです。

ノンデザイナーズ・デザインブック [第4版]

デザイン入門編。デザインの「4つの基本原則」がわかります。

エンジニアのための理論でわかるデザイン入門

エンジニア向けの本ですが、デザインの「なぜ良いのか」を論理的に解説されているので、デザインを苦手に思っている人にも分かりやすいです。

なるほどデザイン

ビジュアルを駆使して説明してあるので、見ているだけで楽しく、視覚的・感覚的にも分かりやすい一冊。

伝わるデザイン

研究者・学生などの発表者は、自身の成果やアイデアを「効果的に」聞き手に伝えるようにプレゼンテーションをしなくてはいけない、というコンセプトの元、デザインの基本ルールやテクニックを紹介しているサイトです。

「伝わりやすさ」を重視しているので、広告やランディングページ制作の際にもとても参考になります。

タイポグラフィの基本ルール ―プロに学ぶ、一生枯れない永久不滅テクニック―

デザインをしていく上でタイポグラフィはとても重要な役割を果たします。
使用する文字だけでその制作物の雰囲気がガラッと変わりますし、フォントによっても伝わりやすさが違います。

タイポグラフィを勉強しておくと、デザインも一層洗練されますよ。こちらの書籍はフォントの成り立ちから体系的に説明されているので教科書として根本から理解しやすく、教科書として最適です。

日常生活上でもお手本はたくさん転がっている!

デザインの基本ルールを押さえたら、いよいよWebサイトデザインを勉強しましょう。

デザインルールの基本は揺るぎないものですが、それでも流行り廃りはあります。

「あれ、この人がつくるデザインは何だか古臭いな」とか、
依頼主から「何度説明してもこちらの希望をくみ取ってもらえない…」
などと思われないように、常にデザインに対してアンテナを張る必要があります。

ただし、恐れる必要がありません。
何故ならこの世の中にはデザインの見本がたくさん転がっているからです!

TVCM

数秒~数十秒という短い時間の中で、視聴者の記憶に残るものが作られている訳です。
広告として大変参考になります。

また、たくさんの対象者に向けて作成されているので、どういう層に向けたどういう商材に、どんなフォントが使われているか、どんな雰囲気で作成されているかなど研究すると見えてくるものがあります。

雑誌

タイポグラフィやレイアウトなどの勉強になります。

紙媒体はWebサイトと違って情報を掲載するための領域が限られています。
その限られた範囲の中でいかに魅せるかというところでデザイナーさんのテクニックが発揮されていますし、Webよりも紙媒体の方が歴史が長いので勉強になる部分がたくさんあります。

電車内広告や、街中のポスター、看板など

こちらも街中で至る所に見かけますが、その多くは立ち止まってじっくり見られるものではなく、通りすがりの数秒でいかにインパクトを残すかという勝負になっているので魅せ方は大変勉強になります。

Webサイト

こちらは言わずもがなですね。
自分で素敵だと思うサイトをたくさん見つけましょう。

そして、そのサイトをなぜ素敵だと感じたか、そのあたりも自分の中でまとめておくと素敵だと思うデザインの根拠が見えてきます。

また、いちばんの勉強法は「トレース」することです。
素敵だと思うサイトのキャプチャを撮って、キャプチャした画像をPhotoshopやIllustratorなどのデザイン系ソフトに取り込み、上からなぞっていきます。

この時1ピクセルのずれも許さない!!くらいの熱量でやると、製作者の意図がより見えてきます。やはり、目で見るだけでの勉強と実際に自分で手を動かす勉強では、後者の方が理解の度合いや気づき・発見が全然違います。

「このデザインを作った人は、どういう意図でこのフォントを選んだのかな」とか「この配置の意図は」など、考えながら手を動かすとよりたくさんの気づきが得られ、勉強になります。

このほか、Webスクールに通えばわからないことを講師に質問できますし、スクールに通う仲間ができるので情報交換ができたりとメリットはたくさんあります。

Web上でのオンラインスクールなども増えていますので、ご自分に合ったスクールで学ぶのもWebデザイナーになるための近道です。

売れっ子Webデザイナーってどんな人?

Webサイトを作ったら、やはり多くの人に見てもらいたいですよね。

そして、せっかく仕事をするなら「あなたにお願いしたいんです!!」と言われるようなWebデザイナーになりたいものです。

私が思う売れっ子デザイナーの方がやっているお仕事の傾向は下記でした。

  1. ■今どきのデザインが分かっている
  2. ■効果的なデザインを把握している
  3. ■相手の仕事への理解を深め、デザインの提案ができる
  4. ■コピーライティングが分かっていると強い

アートデザインであれば別ですが、広告としてのWebサイト・ランディングページであれば、クライアントの商材をいかに引き立てるか、いかにユーザーにサービスのすばらしさをアピールできる力を持っているかがWebサイト、ひいてはデザインに求められていると考えます。

クリエイターとしてサイトの美しさ、使いやすさへのこだわりを持つことももちろん大事ですが、一歩先に踏み込んでクライアントやユーザーのことまで考えられるともっと喜ばれる仕事ができるのではないでしょうか。

コピーライティングまで挙げると「こっちも勉強しないといけないの?!」という気持ちになりますが、要は商材のアピールするべき部分が分かるようになっていれば、より効果的という意味合いになります。

いかがでしたか。
「独学でWebデザイナーになる」のをまとめたサイトは数あれど、HTMLの記述のやり方やツールの使い方への比重が高く、デザインの勉強法自体をまとめたページが少ないと感じたので、今回はデザインに絞ってまとめました。

あなたの勉強のお役に立てれば幸いです。

デザインも重要ですが、コピーライティング技術もあれば完璧↓

マーケターの知恵と 最新情報・成功事例が集まるコミュニティ

デジタルアスリートCAMPは、各社のデジタルマーケティングに関わる人や経営者、幹部の方が集まり最新の知識や人的交流を促進するコミュニティです。最新のデジタルマーケティングの情報提供や対談、勉強会を通して知見や人脈を深め、実践力を高める事が出来ます。

  • 最新のデジタルマーケティングナレッジの公開
  • 専門家やサービスのレビューと紹介
  • リアル&オンラインの参加者同士の交流

コメント

カテゴリー別記事

無料資料ダウンロード

 

【デジアスCAMP】Web広告の最新情報と成功事例が手に入る無料オンラインコミュニティ!

デジタルアスリートCAMP(デジアスCAMP)は、デジタルマーケティング業界のプロフェッショナルと様々な業界で奮闘するマーケ担当者・WEB担当者・EC運用担当者が集うオンラインコミュニティです。

資料ダウンロード

 

1,800社以上の支援実績に裏づけされた
『LPO大全』(実行手順シートつき)

1,800社を支援する中で気づいた『LPO』の重要性と正しい手順・ノウハウを公開します。

資料ダウンロード

 

【リスマガ限定】出版したばかりの
代表長橋の書籍『第一章』を無料プレゼント!
DX時代のデジタルマーケティング攻略本

10年間の中小企業支援実績から導くノウハウ、最新の対応策をまとめました。

資料ダウンロード

 

YouTube動画マーケティングがわかる
企業チャンネル最新攻略法

YouTubeで企業チャンネルが成功するために実践した施策を公開します。

資料ダウンロード

MAIL MAGAZINE

               

最新のマーケティング情報をお届け。デジタルアスリートのメルマガでしか手に入らない情報を受け取りましょう。

橋本直子

デジタルアスリート株式会社
D2C戦略部 デザイン課 デザイナー
DTPデザイナーだったが、これからはWebデザインの時代と一念発起し株式会社リスティングプラス(現・デジタルアスリート株式会社)に入社。

デザインをするときは、いかにしてメッセージを伝えるか・相手に理解してもらえるかを念頭に、タイポグラフィやレイアウトで魅せる工夫をしています。
シンプルデザインは誤魔化しが効かないからこそ難しく、奥が深く、その分面白いと感じています。
ずーーーとCentury Gothic信者でしたが、最近はDIN系も良いなと思っています。

記事一覧を見る

X

2023年のデジタルマーケのトレンドを先読み!
YouTubeチャンネル
『デジアスTV』で公開!
広告のトレンドや、今一番成果が出ている方法がわかる! デジタルアスリートCAMP

デジアスTVを視聴する