Help us understand the problem. What is going on with this article?

私流、Web系デザインの勉強法

More than 1 year has passed since last update.

はじめに

まだ経験としては3社で、社会人になってまだ3年目の私。つまり、まだまだ若手のデザイナーです。
そんな私のWeb系デザインの勉強法をご紹介したいと思います。(たった一人でもいいから参考になればという想いで書きます。)

  • 学生の方
  • デザイナーを目指している方
  • 私と同様に若手デザイナーの方
  • 若手デザイナーを部下またはチームで持っている方

に読んでいただくと、参考になる部分があるかもしれません。
もちろん、それ以外の方も大歓迎です!

まず、私のバックグラウンドをご紹介

私がデザイナーになるまでの話

簡単にお話をすると、小学生の頃からアフィリエイトをする目的でブログやホームページの作成などをしていたことがきっかけでWebに興味を持ちはじめました。
高校で進路を考える際に将来の仕事は何をしたいか色々考えて、それがWebデザイナーだったという感じです。

そこからは4年制の専門学校でIT・Web関係全般を学び、
デザイナーとしてWebマーケティングのベンチャーに新卒入社しました。(転職して、転職して、今はAidemyにいます。)

詳しくはnoteの記事中で書いています。
デザイナーになりたいと思った人へ | YUKI ASAMOTO
image.png

スキルセットの話

学生時代に勉強していたのはシステム・ネットワーク関係だったこともあり、
知識的にはエンジニア的なことも少しは持ち合わせている感じのデザイナーです。
だからこそ、デザイナーに憧れているけれど、デザインの勉強はあまりしていないし…といった方、今はエンジニアだけどデザインに興味があって…みたいな方も、1つの例として参考にしていただければと思います。

持っている資格

  • ITパスポート
  • 基本情報技術者試験
  • J検 情報活用試験 1級
  • J検 情報システム試験 システムエンジニア認定
  • CG-ARTS協会 Webデザイナー検定 エキスパート
  • カラーコーディネーター検定試験 3級

受賞歴

  • HAL大阪 Web開発学科 学内コンテスト(システム開発) 金賞
  • HAL大阪 Web開発学科 学内コンテスト(システム開発) 銀賞
  • HAL東京・名古屋・大阪 Web開発学科 学内コンテスト(Webデザイン) 銀賞 image.png

使ったことのある言語(全て実務に耐えうるとは言っていない)

  • HTML(4.01/5)
  • CSS(2/3)
  • JavaScript
  • jQuery
  • C
  • Java(JSP/Servlet/Android)
  • PHP(5.6/7.0)
  • Ruby
  • Sass(SCSS)
  • React

使ったことのあるデータベース(実務に耐えうるとは言っていない)

  • MySQL

使っているデザインツール

  • Photoshop CC
  • XD CC
  • Illustrator CC

簡単にお話するとこのような感じです。

デザイナーになるまでの勉強法は?

1. 専門学校に入学するまで

いくつか参考にしたい国内外のWebページを見つけて、要素ひとつずつを参考にしました。
最近よくある模写的なものも効果的だとは思いますが、真似しているだけだと飽きてしまう性格なので、
私の場合は部分部分を参考にさせていただき、オリジナルのWebページを作っていました。
幼少期には新聞チラシでオシャレだと思ったものはMicrosoft OfficeのWordで真似して作ってみたり、
中高生の際には自転車で近隣の市へ行き、建造物や看板、広告のデザインを見るのが好きでした。
好奇心をもち、様々なものを自分の目に入れ脳に入れ、吸収する。意外と勉強になっていたのではないかと思います。
image.png
↑当時作っていたWebサイトです

2. 専門学校時代

バックグラウンドでも少し触れましたが、私はHAL大阪 IT学部 Web開発学科 昼間部4年制コースに進学しました。
基本的には基本情報技術者試験(FE)や応用情報技術者試験(AP)などの国家試験の取得やシステム設計、プログラミング、ネットワークなどの勉強がメインです。
Webデザインの勉強も少しはあるのですが、その講義は少ないので、それだけでは到底勉強は不足しているといます。
この時も参考サイトを探して、自らが作成する課題に参考サイトのデザインを取り入れてみるというのが一番身についた勉強だったかもしれません。
とにかくHALではプログラミング系の課題が多いのですが、評価に関係しないデザインという部分にも常にこだわりました。
実務的な課題が多いので、デザインの練習教材として適切だと思っていたのと、デザイナー志望としての無駄なプライドがそうさせていたと思います。
そういうこともあり、デザインの学習時間は本来ならば少ない学部に所属していたものの、しっかりとデザインの勉強になっていたのではないかと考えています。
ここから考えられることは参考になるサイトをとにかく探し、自分自身のアイデアとコラボレーションさせて何かを作る。これがかなり勉強になるのではないかということです。
この勉強法を実現するにあたってはギャラリーサイト、雑誌のWebDesigningが非常に参考になりました。

デザイナーになってからの勉強法

1. 新卒1社目のとき

会社で用意された研修プログラムがあれば、それに取り組むのはもちろん大切です。
私の場合は上司のデザイナーの方に、様々なデザインに挑戦をする機会をいただけたので、それが一番の勉強だったと思います。
目的やストーリーといった部分をしっかりと考えた上で構想を錬り、競合調査を行い、デザインを行うこと。
これをやっているとデザインしたものに対して、どういう理由で作成したのか明確に説明が出来るので、デザイナーとしては意識したいポイントです。
実は新卒で1社目という場合にはこのように実践型の教育をかなりしてくださるケースもあるので、あまり勉強法を意識することは出来ないかもしれません。
与えられたチャンスに挑み、読むように言われた本を読み、休めるときに好きなことをやって心や脳を休める。←重要
それだけで精一杯というケースも少なくないはずです。私は割とそんな感じでした。

ですが、そんな状態でもやっておきたいというものはあります。
それはconnpassなどで募集しているような勉強会に参加するということです。
こういったイベントは日々開催されていて、
自分だと気付かなかったことをアイデアとして仕入れたり、他の人のデザインをインプットするという機会にすることができます。
特別学びがない勉強会もあるかもしれないですが、1つでも何か手に入れられたら良しと思うことが大切です。

2. 2年目以降、中途で入社したとき

社内で学べる機会は新卒の頃と比べると減るかと思います。
だからといって勉強しないで良いというわけではなく、自らキャッチアップすることが大切です。
TwitterなどのSNSを活用して業界をリードしているようなデザイナーさん、気になるデザイナーさんをフォローして情報をキャッチアップしたり、
色々なWebページのデザインを見たり、各種広告をあえて見るようにしてみたり…日々多数の学べるポイントがあります。

また副業も1つの勉強法だと思っています。
私の場合はUdemyでWebデザインとコーディングの講座を公開したり、ブログで記事を書いたり、アフィリエイトしたり…と色々なことをやっています。
お金が欲しいからやっているのではないといえば嘘になりますが、
何か技術的発信をする際は、準備や作成・検証に時間をかけるケースは多く、勉強になることが多いです。
また、会社では他の人がやっているような部分も自分がやらなければいけないので、デザイン以外の部分の勉強にもなり、デザイナーとして会社でのコミュニケーションが円滑になるケースもあります。

image.png

共通して言える勉強法

1. まずは興味を持つ。

2. 日頃から広告や参考サイトなど色々見てキャッチアップする。

3. 参考になるものを探す習慣。真似て取り入れる。

4. 自分自身のアイデアと参考デザインをコラボレーションさせ、応用する。丸パクリはダメ!

5. 何か作ってアウトプットする。

6. やらされるのではなく、やりたくてやる。

7. 程よく自分に自信を持つ。

※ 今回の投稿ではコーディング(HTMLやCSSを使ってWebページを作ること)には触れていませんが、アウトプットする上でコーディングができると便利であることが多いです。また、Web系のデザイナーであれば仕事上でも役立つスキルになります。そちらについてはQiitaの別記事で触れていますので、よければチェックしてみてください!
【爆速】HTML + Sass(SCSS)で簡単にレスポンシブ対応のLPを作ろう!

最後に

これはあくまでも私の勉強法であり、全ての方に適切な方法ではないと思っています。
もしかしたら自分自身に対しても適切ではないかもしれません。
しかし、インプットとアウトプットの大切さは間違っていないと思っています。
たとえ完璧じゃないなと思うモノであったとしても、早く公開して、フィードバックなどあれば、それを聞くのが一番大切です。
でも決して自分はダメだ。と思ってはいけません。
そういった状態になると負の連鎖となります。
程よく自信を持ち、積極的にインプットとアウトプットをしていれば、自然とデザイン力も身につくと思っています。

この記事を書きながら、私のデザインもまだまだと思っているので、
同じように程よく自信を持ち、インプットとアウトプットを心がけ、デザイン力の向上目指し、がんばります!

皆さんもぜひ悪い循環ではなく、良い循環を目指して、がんばりましょう!

Y_ASAMOTO
Aidemyのデザイナー、副業でUdemyの講師もやっています。 https://www.udemy.com/web-expert/?couponCode=QIITA2019
https://asamone.com
aidemy
「AIを始めとする先端技術と産業領域の融合に取り組む人と組織を支援する」をミッションに活動するスタートアップです。
https://aidemy.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away