IT系女子ログ

Webデザイナー目線のあれこれ話。デザインもコーディングも勉強中。

実務経験3年すぎた現役Webデザイナーのリアル【勉強方法編】

f:id:tosssaurus:20170718003328j:plain

(7月25日、コーディング編更新しました。)

私がWebのスキルアップのために行っている勉強方法をすべてご紹介します。
たくさんありますが、「今日は模写をしてみよう」とか、「今日は案出ししてみよう」とか、楽しんで勉強するのが一番だと思います。

今まで自分に合っているものを優先して取り入れてきましたが、「もっと効率いい方法があるよ!」というアイデアがあれば、ぜひ教えていただきたいです!

 

 

デザイン編

忙しくてもできること

毎日5分でもデザインを観察する

毎日少しの時間があればできます。

とにかくデザインのことを知ることが上達には不可欠です。

知らないことの良し悪しなんて判断できるわけがなく、知らないまま良し悪しを判断しようとするとひとりよがりな意見になってしまいがちです。

観察するデザインは、Webでも紙でもプロダクトでもなんでも構いませんが、まずは関わっている分野を徹底的に知るのがいいと思います。

見ていて気持ちがいいのはクオリティの高いデザインですが、クオリティの低いデザインを見て「なぜクオリティが低く感じるのか」を考えたり、比べてみたり、どう改善すればどう変わるのかなど、考えたり手を動かしてみるのも勉強になります。

 

ニュースを見る、読む

デザインに関わらずいろんな知識があると、思いもよらずデザインするときのヒントになったりします。

デザイン以外の興味のある話題を知っていくことで、個人の文脈ができ、"個性"という自分らしさが作られていくと思います。この個性は無意識に制作へ影響を与えます。自分らしさは、一朝一夕に身につけられるものではなく、盗まれるものでもなく、文脈を作ってきた本人が得られる財産だと感じています。

より詳しく知ることで、自分の文脈が強化される感覚があるので、面白いと思ったニュースは深掘りするようにしています。

 

いいと感じたデザインを自分なりに消化してから制作に取り入れる

私は、自分の文脈の範囲内では視野の狭いデザインになってしまうので、意識して外部の文脈を取り入れるようにしています。

そのとき、ただ取り入れるだけではパクリになるし、進歩がないなと思うので、必ず自分の中で考えます。自分なりにでいいので、分解して納得したものだけ制作に取り入れます。

自分で納得できないことを制作に取り入れると、自分でコントロールできないもやがかかったようなデザインになるし、愛着も薄れてしまうので、できるだけ避けたいですね。

 

部分的でもいいので2案以上作る

いつも制作するときは2案以上作るように心がけています。
クライアントに1案しか出せなくても、複数案作ります。単純に、1案作るときと2案作るときとでは経験値が2倍違ってくるからです。

もちろん、複数案作るのは自分の都合なので、それを理由に他の仕事の手を抜いたり、納期が守れないのは本末転倒です。迷惑をかけてしまうなら業務外でしましょう。
時間内に人より多く作るのは2倍以上パワーが必要ですが、経験値だけでなくスピードも上がってきます。 

私はまる2年で先輩達のデザイン技術を追い越せました。難しいことではなく、単純に複数案作ることを積み増さねて、経験値が追い越したからだと思っています。

 

周りの人に自分から意見をいただきにいく

先輩、後輩関係なく、煮詰まったら意見をいただくようにしています。自分からは見えなかった新鮮な見方が多く、客観的な目ってだいじだなぁと思います。
チームでWebデザインをしているメリットですよね。

デザインを見ていただくということは、作業の手を止めて考える時間をいただくということ。どんなに厳しい意見でも、方向性のズレた意見でも、意見をいただいたことへの感謝は必ず伝えています。当たり前のことですけどね。

 

意見をいただいたら要点を控えておく

デザインを考え始めると細部にのめりこんでしまい、すべての意見を覚えておくのが難しくなると思います。
せっかくいただいた意見を忘れずにすべて検証したいので、必ず書いておきます。

書いておくと嬉しい効果が他にもあります。

それは一歩引いて、客観的に向き合えるようになること。
特に、厳しい意見には効果があると思います。

 

1年目の頃、日報がわりに注意されたことや気をつけること、教えてもらったことを書き溜めていました。
そうすると、何度も同じようなことで注意されてたりするんです。なので、定期的に振り返って、何度も出てくるキーワードは優先的に改善するように意識していました。 

それをもとに記事にしたのが、1年目シリーズです。

 

提出する時には自分の言葉での説明も添える

仕上がったデザインをディレクターさんへ提出するときに、必ず自分の言葉で説明をしています。当たり前のことですが、“説明する”というのがとても苦手でした。

また、チーフから修正指示がはいった箇所に手を加えてみたものの、「なんでなおさないといけないんだろう」と、心の中では納得できていない部分があると、ウソをついているようで自信を持ってうまく説明できません。

3年続けて、今では苦手意識なくデザインを説明できるようになったな、と思っています。
私なりに考えを言葉にできるようになったのは、普段の業務で説明するようにしているだけでなく、ブログを書いていることが大きいかもしれません。
最近始めた、論理的思考関連の本を読んでいることもかなり役に立っています。

今では、「なんとなく」デザインすることはゼロになったと言えます。

 

広告を見て、伝えたい内容や狙いを考察する

ふと目に入ったバナーだったり、車内吊りだったりを見て、誰向けでどんな効果を狙って作られているのか、どんな工夫をしているかを考えます。
「一番目立つ場所はどこで、一番目立たせようとしている場所とズレていないか」とか、文字の扱い方や色の使い方、写真の処理の仕方などの狙いを推理していくようで楽しいです。

 

時間あるときにしたいこと

思い浮かんだ案をできるだけ作ってみる

時間のないときは2、3案しかつくれないので、思いつく案をすべて書き出します。最低5案くらい実際に作ってみて、その中から2案くらいに絞ってみます。2案のバリエーション案をすべて考えてみます。いいなと思った案はまた作ってみます。

これをすると、今までしなかった手法や、新たな視点などはもちろん身に付くのですが、実際に手を動かしているので「前にやってみたあのデザイン使えそう」と思ったら業務で即使えます。リハーサルのようなものでしょうか。

まったくやったことのない手法だと、できるかどうか検証する段階から始めるので、何テンポも遅くなりますよね。しかも急ぎの案件だと、できなかったときのリスクを考えて選択肢から外れるかもしれません。

手を動かしたことがある、ないでは結果が変わってきますし、その積み重ねは埋められない大きな差になってきます。

 

素敵だと思ったデザインを模写する

まるまる1サイト完璧にトレースします。グラデーションや書体の感覚、シャドウのかけぐあいなどはもちろん、ロゴなど作れるものは作ります。作れないものはできるだけ似ている素材を使います。そのときの素材は実際に使用可能な素材を探します。無料有料はどちらでも良いですが、金額はチェックします。

完璧に作ろうと思うと、骨が折れるし、結構時間がかかります。

始めは1サイト完成させるのに、まる3日くらいかかっていました。

 

完璧にトレースできるようにすると、よく見てどこが違うか判断できるようになり、どこまで自分で作れて、どこから素材があった方が効率的で、どんな素材がどんな金額で、こんな素材はオリジナルで用意しないと難しい、というデザインに関わる一連の感覚がわかってきます。

もちろん、プロと同じ制作物を作ることになるので、制作技術も向上します。自分にはないデザインの引き出しも増えます。

Webサイトだけでなく、アプリやポスター、雑誌の好きなページなど、気になったデザインだったらなんでも勉強になります。

 

過去にいただいた意見をふりかえる

必ず振り返るタイミングは、新しいノートに換えるときです。

今までいただいた意見のメモを見て、何度も出てくる言葉や、大切にしたい言葉、忘れがちな言葉を新しいノートにまとめます。

ノートを換えるたびに振り返るようにしていると、あんなにできなかったことが、ふとした瞬間できるようになっていたりしました。不思議ですね。

1年目のころはできるようになりたいことがたくさんあり過ぎて途方もない感じでしたが、2年目3年目になるとほとんどなくすことができました。その分違う視点の指摘も増えてきたので、日々勉強ですが…。

できなかったことができるようになることは、とても充実感のあることです。 

 

チュートリアル、動画をみて何かを作る

チュートリアルや動画を見ながら手を動かすことで一番勉強になるのは、他人の制作手順を知ることができることでしょうか。

よく「先輩から技を盗め!」と言われますが、私の先輩はチーフだけで、チーフの席はかなり離れているので、画面を見ることができません。
そんな私の代替え案は、チュートリアルや動画で他人の技に触れることです。

普段自分が慣れているアプローチとは全然違うことはザラにあるので、とても新鮮です。

 

私はPhotoshop vipのチュートリアルが美しくて好きです。海外のサイトを紹介されているので、内容は英語ですが、操作画面の画像を頼りに進めていけば、なんとなくできたりします。英語の勉強にもなるのでおすすめです。

英語が読めるようになると、素材探しやWebの情報を日本語だけよりも何倍も多い情報源から探せるようになるので、いつか習得したいなぁと思っています。

日本語だと、AdobeCCのチュートリアルがおすすめです。

 

ブログを書く

ブログを書いてきたことは、確実にデザインに役立っています。

文章にすることで必ず考えを整理します。よく分かっていないことは、支離滅裂な文章になり、あとで読み返してみると訂正したくなります。分からない部分は調べて分かるようになったり、考えたり、分かる範囲で文章にしたりを繰り返していると、言葉を使うことに慣れてきました。

そうすると、自分の考えを言葉にできるようにもなってきました。

今までは「良いと思います」か「なんか違うかなと思います」くらいの2択でしたが、なぜ良いと思ったか、どういう風に良いと思ったのかを付け加えられるようになってきました。

デザインするときにも、なぜ良いと思ったのかと考えることがとても役に立っています。

 

 

コーディング

忙しくてもできること

コーディングの時間を図る

1年目の頃はあまりの手の遅さに悩んでいて、とにかく現状を知ろうと、毎日時間を計っていました。 ざっくりしたコンテンツごとに、10分単位で記録をはじめました。そうすると、理想と現実のギャップがとてもよく分かりました。 単純そうな構造でも意外と時間がかかっていたり、ミスが多くて想定していない修正の時間をとっていたり、いろんなことに気づけます。

 

できるだけプレビューしないでコーディングしてみる

同じページをコーディングするのに、プレビューでの確認を10回行う人と、100回行う人とでは、スピードが違うのは当然のことですよね。 頭の中で組み立てながら、プレビューで答え合わせするのを楽しみに、どこまで見ないでコーディングできるか毎日挑戦しています。

 

なるべくブラインドタッチしてみる

同じ文字列をタイピングするのに、キーボードの確認を10回行う人と、100回おこな…(以下略) ブラインドタッチできるプログラマーさんがいるのですが、コードを書くスピードが速すぎて圧倒されます。めちゃめちゃかっこいいです。 不純な動機ですが、私もかっこよくスマートにタイピングできるようになりたいです。

 

新しいショートカットやEmmetを使ってみる

支障なくコーディングできるようになってくると、慣れた作業を変えるのがおっくうになってきます。それがたとえ効率の悪い方法でも、効率の良いフローを習得できればより良くなるのに、慣れないフローの学習に力を注ぐほうが効率が悪いと考えてしまうんです。 コーダーに限らず、実際にそんな方々を目の当たりにしてきました。

私は冷静に考えて、スキルを習得し直すほうがプラスになるなら、臆することなく学べる人でありたいと思っています。 自分で言うのも残念なのですが、甘やかすとサボってしまう性格なので日ごろから少し新しいことを取り入れて、勉強する心構えを忘れないように気をつけています。  

 

ビビッときたサイトのソースを見る

「先輩の技を盗め!」対策コーディング版ですが、他人のソースコードを見て、どんな構造にしているのか、スタイルの当て方、classの付け方などなど、本当に様々で勉強になります。 自己流で固まりがちな頭がほぐれて視野が広がりますよ。

 

今日イチのコードをストックする

1日で1番輝いていたコードをストックします。順番がつけられなかったら、2つでも3つでもいいです。思い出すまでもないコードしか書けなかったらストックしません。ストックするのは、残しておきたいコードだけです。 そうすると、常にいい書き方を探せるようになります。ゲームみたいなもので、「今日はどんなコードをストックできるかな」と考えるの、結構楽しいですよ。

習慣になると、ストックできるコードを見つけられないと、悔しくて見つけるまで会社に残ってしまいたくなります。
コーディングの日報みたいなものでしょうか。

 

1案件で1つ以上、新しいコードに挑戦する

これはなかなか毎日は難しかったので、区切りを1案件にしています。

成長=できなかったことができるようになることだとして、書いたことのないコードが業務レベルで書けるようになることは、かなり大きな成長だと思います。
その分しっかり検証して理解して、業務で使いまわせるレベルの裏付けをとるようにしています。

 

時間があるときにしたいこと

コードストックを整理、拡張する

1日1つコードをストックするので、重複していたりします。以前同じようなコードストックをしていたら、その中で一番汎用性のある形を考えて、整えたりしています。 さらに詳しく調べてみたり、もっといい書き方がないか考えてみたり、コードストックを育てています。 

 

素敵なサイトのソースを模写をする

ここでいう素敵なサイトは、デザインもそうですが、見やすさ使いやすさ、インタラクションやアニメーションの目新しさなどなどなんでもありです。 とにかく自分が気に入ったものを、自分がコーディングするつもりで模写します。

大概はすべて完成できないですが、1コンテンツだけでも形にできると嬉しくなります。形にできると自信になります。自信が持てると初めての技術を使う必要がでてきた場面でも、「やってみよう」と前向きな気持ちになれる気がします。

 

チュートリアル、動画をみてコードを書く

とにもかくにも、手を動かして経験を積むこと。それが良質な経験だとなお良いのは当然ですよね。
はじめのうちは、自力でウンウンうなって絞り出した拙いコードをゆっくり書いていくより、先輩方のキレイなソースを写経しまくるほうが絶対効率いいです。 考えるのは後でできます。コードを書きまくって、手とか目とか肩が疲れてきて休憩するときに、今度は頭を使ってい考えればいいんです。  

 

code penで遊んでみる

code pen、ほんと楽しいです。おすすめの楽しみ方は、"glaph"とか"button"とかいろんなキーワードで検索してみること。 膨大な数のコードが出てきますが、人によって全然書き方が違って、比較もしやすいです。気になったら即いじれるし、大好きなツールです。

 

ブラインドタッチの練習をする

ブラインドタッチを上手にできればできるほど、確実にコーディングのスピードが上がります。最近練習しているのが、バックスペースとか約物とかも見ずにタイピングすること。今のところ100発10中くらいです…。

 

まとめ

長々と書き連ねた記事の最後を見ていただいてありがとうございます。
勉強方法をまとめた今、あらためて思ったことが7つあります。

  1. 練習も大事、本番も大事
  2. 数分でも勉強できる
  3. 時間をつくるのも勉強のうち
  4. うまく手を動かす時間をつくる
  5. 楽しんだもん勝ち
  6. 整理しておかないと本番で使えない
  7. 勉強方法を習得すれば、他分野でも役立ちそう

スキルアップしたいなら、とにかく関連のある仕事を選ぶべき

特に未経験でWebデザイナーに就職したい方は、なるべくスキルアップしたい分野に近い仕事を選んでほしいです。

週5日8時間働いているうちの10%だけでも勉強になれば、仕事中に月16時間勉強できます。仕事以外で勉強しようと思うとなかなか大変ですよね。

近い仕事を未経験のうちから探すのが難しくても、なるべくPCを扱う仕事で、なるべくデザインソフトやコーディングソフトを使える仕事につくことをおすすめします。

 

なぜ、セミナー参加をいれなかったのか

迷ったのですが、「セミナーに参加する」というのは私の勉強方法に入れませんでした。セミナーに参加するのは、社外の同業の方達にお会いできてとっても有意義なのは事実なのですが、気を抜くとただ参加したことに満足して終えてしまいがちです。

セミナーや勉強会に参加したあとに、どう行動するかが大事で、セミナーに参加すること自体はあえてリストから外しました。

動画学習や、学校の講義なんかもそれに近いかもしれません。
共通するのは、受け身のままでも“参加した”という行動はしているので、妙に充実感があることでしょうか。

実習やグループワークなどがあると全然違うと思います。実習があると、強制ではありますが自分自身の手や頭を動かしているからです。

 

ただ、セミナーや勉強会で発表することは伝えたい気持ちがないとうまく発表できないので、かなりハイレベルな自発的行動だと思います。

私はまだ経験がなく自信もないのですが、いつか堂々と意見を発表できて、思いを誰かに伝えることができるデザイナーになりたいです。

 

勉強なんてしんどいに決まってる

努力すら楽しめる人は最強です。勉強を勉強と気づかずスキルアップできる人は、そういう才能をお持ちだと思います。

大多数の人は、勉強はつまらなくて苦しく感じます。
でも、その先にあるスキルアップして希望の仕事で活躍してる自分や、楽しく生活できてる自分になるために必要なんだったら、ふんばりどころだと思います。

結局はやるかやらないか。
自分の進む道は自分で意思を持って選択したいですね。