Paranaviトップ お仕事 資格/勉強 センスいいねって褒められる! 今日から使えるデザイン術 #SPECIAL 年末年始でデザイナースキルを身に着けよう!

センスいいねって褒められる! 今日から使えるデザイン術 #SPECIAL 年末年始でデザイナースキルを身に着けよう!

SHARE

Twitterでシェア Facebookでシェア LINEでシェア

これまでは、現在のお仕事の中で生かせるデザインのポイントをご紹介してきましたが、今回は年末年始特別編!
ご自身のスキルアップのためや転職や副業としてWebデザイナーに挑戦してみたい方へ、何からどのように勉強すればいいのかをご紹介します!

そもそもWebデザイナーとは?

Webデザイナーとは、企業や個人のWebサイトを目的に沿ってデザイン制作する人です。
サイトを装飾し、配色を決め見た目を整えていくイメージが強いと思います。
もちろんそれもデザイナーの仕事の一部ですが、サイト制作の目的やターゲットを整理し、ユーザーにどのように伝えるか、また運用が必要なサイトであれば運用がしやすいように「情報整理」を行うことが中心になります。

見た目がどれだけ素敵でも、ユーザーに情報が伝わらないサイトだと意味がないですよね。

よく「私は美大を出ていないし、センスもないし、イラストも描けないからデザイナーになれない」と、思う方もいらっしゃいます。
もちろん、そういった専門的な勉強をされていたり、イラストが描けることは強みにはなりますが、そうではないからデザイナーに向かない、デザイナーになれないということではありません。

センスは知識を増やしていくこと」だと、私が尊敬するクリエイティブディレクターの水野学さんがおっしゃってましたので、ぜひ気になる方は著書を読んでみてください。

Webデザイナーになるために必要なスキルって?

まず、Webデザイナーになるためには、デザイン作業に使用するアプリケーションの操作マークアップ言語等の習得が必須です。

代表的な習得しておきたい、アプリケーションと言語はこちら!

  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe XD
  • HTML/CSS
  • JavaScript
  • jQuery
  • PHP
  • WordPress

このほかにもWebサイト制作に必要なアプリケーションや知識は様々ありますが、Webデザイナーとして転職を考えた時に、必須なものは「Adobe Photoshop」「Adobe Illustrator」「HTML/CSS」は基礎なので覚えましょう。

基礎を覚えた後はご自身で目指したい方向でスキルを習得していきましょう!
デザインメインでやっていきたい場合はデザインスキルを。
コーディングなどフロントエンドエンジニアとしてやっていきたい場合は「JavaScript」や「WordPress」など……といったイメージです。

PhotoshopとIllustrator

こちらに関しては、過去にセンスいいねって褒められる! 今日から使えるデザイン術 #07 Illustrator・Photoshopの基本で詳しく書いていますので、参考にしてみてください。

HTMLとCSS

HTMLCSSは、普段皆さんが見ているWebサイトのほとんどで使用されている言語です。
HTMLがサイト内の情報の文書構造を示し、CSSが見た目を整える役割を持っています。

Wordなどで「イベントのお知らせ」のような文書を作成するときには、「イベント名は大きく太字でピンクに」「ここは本文なので読みやすい文字サイズで」「最後に日時や場所を箇条書きで太文字に」
という風に作成すると思いますが、Webブラウザの場合にはそれをすべて文字で指示してあげる必要があります。

■作成したいお知らせ

イベントのお知らせ

■HTMLとCSSの例

■HTMLの例 ■CSSの例

例えば、「h1=この文書の中で一番重要な見出し」であることを表します。
HTMLでは 開始タグと終了タグで囲むことで、この範囲は見出しになってください!という指定をします。

CSSは見た目を整える役割なので、例えば、h1は文字は太字「font-weight:bold;」、色はピンク「color:#ef8b8b;」になってください。という指定をCSS例のように記述します。

基礎は何から勉強するといいの?

何から勉強していくのかは目指す方向によって変わってきますが、今回はParanavi読者に合わせて、Webデザイナーとしてパラキャリする!を前提にご紹介します。
副業で自分一人でWebデザイナーとしてお仕事をしていくのであれば、
まずは必須科目!「Adobe Photoshop」「Adobe Illustrator」「HTML/CSS」から覚えましょう!

もし、学生時代に学んでいたものがあればそちらから覚えるで大丈夫ですし、コーディングメインでやりたい! ということであれば「HTML/CSS」から勉強を始めていただいて大丈夫です。

PhotoshopとIllustratorどっちから??

PhotoshopとIllustratorそれぞれ扱うデータの形式・用途・得意なことが違うことを確認し、まず作ってみたいものを考えてみましょう!

例えば…
年賀状や名刺を! であれば、紙媒体の制作が得意なIllustrator。
自分のSNSの画像(Twitterのヘッダーなど)を! であれば、画像の編集が得意なPhotoshop。

こだわりがなければ、その流れで手を付けた方から覚えるで良いと思います。

WebデザイナーであればPhotoshopから!という記事もありますし、たしかに画像データを作っていく作業なので、画像加工が得意なPhotoshopから覚えるのも間違いではないです。
また、Illustratorのペジェ曲線を描くことなど独特の操作から入る方が後々楽だという意見もSNSではみられるので、迷うと思います。
個人的には、Illustratorに慣れるとPhotoshopでの表現や制作の幅が広がると思っているので、プロを目指すのであればIllustratorから入るのもオススメします。

ですが、せっかく勉強するのであればその時に作りたいものがある方を勉強した方が楽しいですよね!
楽しくないと続かないので、自分が楽しいと思う方から試してみましょう!
お仕事としてWebデザインやその一部分のバナー制作などを受けていくのであれば「Photoshop」も「Illustrator」も避けては通れません。
どちらも覚えるのであれば、まずは冬休みに楽しくできそうな方から始めてみてください!

冬休みおすすめの学習アイテム

冬休みに学習する場合のおすすめのオンラインサービスと書籍を紹介します!
Kindleもあるものを選んでみたので、すぐ購入できると思います!

Photoshop・Illustrator

書籍

Photoshopしっかり入門

Illustratorしっかり入門

HTML/CSS

オンラインレッスン

Progate
https://prog-8.com/
※基礎レベルの16レッスンは無料で受講出来ます。(応用も見たい場合はプラスプラン¥1,078/月(税込))

書籍

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

デザインに関して

デザインに関しては上記のアプリケーションやHTML/CSSを学んだだけでは残念ながら身に付きません。
デザイナーとしてお仕事をしていきたい!という場合にはデザインについて学ぶ必要があります。

書籍

ノンデザイナーズ・デザインブック

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

オンライン

Cocoda トレーニングコンテンツ
https://cocoda.design/
※無料 ※2022/1/6からURLが変更になりますので要注意

配色が苦手……という方は

COLOR DESIGN カラー別配色デザインブック
※こちらはWebデザインに限らずパワポの資料作成等にも使えます!

パラナビの過去の記事も参考にしてください!

センスいいねって褒められる!今日から使えるデザイン術

まとめ

冬休みに、または来年度が始まる4月に向けてなど、スキルアップを検討する時期でもあると思います。
ぜひこれを機に、興味がある方は挑戦してみてください!

自分で勉強することが難しいと感じたら……

社会人スクールを検討するのもおすすめです!
費用がかかるものなので、よく考える必要はありますが、本気でWebデザインを学びたい気持ちが強ければ、検討してみてください。

また、求職中の方はお住いの地域で職業訓練としてWebデザイナーの講座がある場合も!
お近くのハローワークに確認してみてくださいね!

SHARE

Twitterでシェア Facebookでシェア LINEでシェア

Keyword

菅家 郁美
Writer 菅家 郁美

VIEW MORE

パラナビオンラインサロン
Page Top