現役Webディレクター、Webデザイナー、Webエンジニアが勉強法を公開!『勉強法共有会』9/12(木)イベントレポート!

Webディレクター、Webデザイナー、Webエンジニアが普段している勉強方法を公開&共有するためのイベントを実施しました!未経験からWeb業界へ転職を決めた時にしていた「勉強方法」や「やっておくべきこと」、「最近スキルアップのためにしていること」など、LT※(ライトニングトーク)形式で発表しました。LT後は発表者ごとにエリアを分け、参加されたみなさんと座談会形式で共有会を行いました。


※ LTとは…ライトニングトーク(Lightning Talks)の略。発表者が5分程度でテーマについて話すプレゼンテーションです。

本記事では、9/12(木)勉強法共有会/Webディレクター、Webデザイナー、エンジニアがスキルアップのためにしていることを公開!のレポートをお届けします。
(※発表者の意図が伝わりやすいように、内容を一部編集しています)

LT発表者プロフィール

No1. 柿澤 佑輔 (カキザワ ユウスケ)/Webデザイナー
芸術系大学卒業後、インテリア家具メーカーに総合職として入社。2016年5月よりWebデザイナーとして業界未経験から、BtoCサービスを主軸とする事業会社にデザイナーとして従事。商材制作・Webサイト・アプリのUIなど、幅広い領域での経験を積み、現在は受託制作も担当。

No.2 高橋 悠太 (タカハシ ユウタ)/Webエンジニア
大学卒業後、クイズゲームコンテンツの運用やソーシャルゲームの開発を経て、2016年にPR会社に入社。現在はサーバ構築やWebサービスの開発、Webサイトの制作など幅広く担当。
Twitter:@yu_cfbif
note:https://note.mu/cfbif

No.3 田口 瀬梨菜 (タグチ セリナ)/Webディレクター兼Webデザイナー
大学卒業後、IT企業の総務・営業事務として3年従事。その後、6ヶ月間Webスクールに通い、KROWLインターンシップを経てWeb制作会社に入社。現在は、Webディレクター兼Webデザイナーとして国内大手企業のECサービスサイトやコーポレートサイトなどを担当。

No.1 未経験時代と今の勉強法 Webデザイナー/柿澤祐輔

LT最初の発表者は、Webデザイナーの柿澤さんです。

  1. スキルアップのために未経験時代に「していたこと/していれば良かったこと」
  2. 今、スキルアップのためにしていること

未経験時代と今という2つの視点で、スキルアップのためにすべきことを熱く語ってもらいました。

柿澤さんにとっての未経験時代のスキルアップの定義は、「採用されること」
そして、どうすれば「採用してもらえるのか」を考えることが大切だと話していました。

Q.どうすればWebデザイナーとして採用してもらえるのか?※中途採用の場合

・・・

A.

  • アウトプットで魅せる!
  • ポートフォリオを作る!
  • ひたすら作る!

実績のない業界未経験者が採用されるためには、自分の作った作品を見てもらうしかないと考え、とにかく数を作ったとのことでした。その際に、「採用してもらうこと」が目標であり、作品制作という手段が目的化しないよう意識することが大切であると柿澤さんは自身の経験を振り返り語っていました。

何を作ればいいか分からないときは「既存Webサイトの模写」

  1. 要素間の余白
  2. フォントサイズや行間
  3. コンテンツ幅(要素を入れる幅)

模写をする際、これら3つのポイントを意識すると、デザインのルールのようなものに気付けてくるそうです。「なぜこの余白なのか」「なぜこのフォントサイズなのか」などなどWebデザインには共通しているパターン(ルール)が存在しているようです。

「これらは今の業務でも毎日考えていることなので、就職前からこの意識で模写をしていると、入社後もスムーズに仕事ができるので、やっておいたほうがいいと思います。僕は入社後にとても苦労したから」と振り返っていました。

今、スキルアップするためにしていること

よく使っているツールを例に挙げ、スキルの幅を広げる大切さについて語ってくれました。

Adobe PhotoshopやAdobe IllustratorといったWebデザインツールとしてはスタンダードなものだけでなく

プロトタイプツール:Adobe XD, Sketch
動画制作:Adobe After Effects ,Adobe Premiere Pro
レタッチ:Adobe Photoshop, Adobe Lightroom

など、Webデザイン以外のスキルを強化するため、日々様々なツールを勉強し、使い分けているそうです。
また、デザインのトレンドも追いかける必要があるWebデザイナーは、
下記のようなまとめサイトを見たり、気になるデザインはPinterestに保存しているとのことでした。

コーポレートサイト、サービスサイトのデザインを参考にする場合
https://muuuuu.org/

LP(ランディングページ)のデザインを参考する場合
https://lp.webdesignclip.com/

Webデザイン(スマートフォン表示時)を参考にする場合
http://agtsmartphonedesign.com/

最後に柿澤さんからの熱いメッセージもあったので掲載しておきます。

かっこいいものが、良いデザインではない。
かわいいものが、良いデザインでもない。
結果が出たものが、良いデザインと呼べる。

Webデザインとは『結果の見える広告』である。

Webは紙と違って広告効果が追いやすい。
結果が明確に出るからこそ、残酷でもあり面白くもある。
これを意識し続けることが、スキルアップに繋がることだと思う。

未経験からWebデザイナーを目指される方、Webデザイナーとしてもっとスキルアップしたいと思っている方には、きっと柿澤さんの熱いメッセージが届いたと思います!

また、柿澤さんは以前にもKROWL MAGAZINEでインタビューをさせていただいています。Webデザイナー未経験からどのようにしてこの業界に入ったのか、どのようなことを意識してお仕事をされているかなど色々なことを話していただいたのでこちらも是非読んでみてください!

No.2 インプット!アウトプット!アウトプット Webエンジニア/高橋悠太

2番目はWebエンジニア(Webプログラマー)の高橋さん。

スキルアップのために始めたこと、それは

・・・

インプット!アウトプット!アウトプット!!
(インプット4割 アウトプット6割)

らしいです!やはりインプットだけでなく、アウトプットも非常に大事ですね。高橋さんの具体的なインプットとアウトプットは次のとおりでした。

1.Twitterのタイムラインを充実させる

Webに関する記事をツイートしているユーザーをフォローし、技術的なツイートや作品・参考サイトがタイムラインに常に流れるようにしているそうです。常に関連する情報を収集するにはとても効率的ですね!

高橋さんのおすすめ(一部抜粋)はこちら

▼Webクリエイター ボックス
https://twitter.com/webcreatorbox

▼Web Design Trends
https://twitter.com/TrendWebDesign

▼コリス
https://twitter.com/colisscom

▼GOOD WEB DESIGN
https://twitter.com/goodwebdesign01

▼WebDesignFacts
https://twitter.com/webdesignfacts

2.実際に動きのあるWebサイトを作る

週1で作りたいWebサイトの動きを1つ決め、制作していたそうです。
また、最初は、Webサイトでよく使われる動きから作り始めると良いとのことでした。

  • モーダルウィンドウ
  • スクロール
  • パララックス
  • フォームのバリデーション

など・・・

【参考サイトの記事やコードを読む場合】
コードの書き⽅よりも、どうして動くのかを考える⽅に時間を使うことが大事とのこと。
ソースコードを真似る時は、⼀⾏ごとにどのような処理をしているのかコメントとして書き出し、分からない箇所はひたすら検索して調べるを繰り返していたとのことです。

3.勉強したことをnote( https://note.mu/ )に書いて公開する

  • 作業の復習ができる
  • 承認欲求と⾔語化を同時に満たせる
  • 作業メモも含めて100記事公開

100記事も公開するなんてすごいですね!アウトプットすること、そして継続することがとても大切なことだと高橋さんのトークから伝わってきました。

インプット、アウトプット、アウトプットを繰り返し行っている高橋さんは、当初の自分と比べてスキルアップを感じられているとのことでした。

  • 新しい技術や参考サイトを知る機会が増え、調べる⼒が身についた
  • 1週間のスケジュール管理が上⼿くなった
  • Webサイトでよく⾒かける動きを作れるようになった
  • WebGLを使った3D的な動きも作れるようになった
  • 毎週何かを作り、アウトプットし続けないと不安になった・・・(笑)

Web業界はどんどん新しい技術が出てくるので、高橋さんのようにインプットとアウトプットを繰り返して、⾃分の引き出しを増やしていくのがスキルアップに効果的だと思えた内容でした。
Webエンジニアを目指している方はもちろん、そうでない方も参考にしていただきたいと思います。

そして最後にアウトプットし続けないと不安になってしまうと、素敵なオチまで残してくれた、高橋さんが自身でまとめている当日の資料と内容(アウトプット)はこちら。

No.3 勉強方法~アクションを公開 Webディレクター兼Webデザイナー/田口瀬梨菜

最後はWebディレクター兼Webデザイナーの田口さん。

現在はWeb制作会社で、Webディレクター兼Webデザイナーとして仕事をしている田口さん。田口さんも未経験からWeb業界にキャリアチェンジしてきた経験を、勉強だけでなくアクションも含め「成長方法」という大きな括りで語ってもらいました。

現在はWebディレクター兼Webデザイナーの田口さんですが、
Webスクール時代に目指していたのはこのどちらでもなくWebエンジニア(フロントエンドエンジニア)でした。

そんな業界未経験の田口さんが、Webディレクター兼Webデザイナーになるまでにやってきたことを紹介します。

学習系サービスを使用しサイトを制作する

▼動画で学べるサービス

▼手を動かしてプログラミングを学べるサービス

上記のようなWebの学習サービスをKROWLのエンジニアが実際に触ってみた記事も公開しているので、Webエンジニアを目指す方はぜひ、参考にしてください。

Twitterで情報収集をすること

名前やプロフィール欄に「フロントエンドエンジニア」や「Webデザイナー」と書いてある人をどんどんフォローし、つぶやきやシェアしている記事から情報を得るようにしていたそうです。
高橋さんと同じく、自分のタイムラインをWeb系のツイートで満たすことは、半強制的に学習の場にしてしまうという意味ではとても効果的といえそうです!

技術本を読む

勉強したいと思ったら休日にカフェでもくもくと技術本を読んで過ごしたりしているようです。最近はこのような本を読んでるとのことです。

Webディレクションを体系的に学べます!

UIの基礎の話が知れてオススメです!

ABテストの結果をパラパラ見られます!

技術ブログを書く

一般的に、1アウトプットするには、10インプットが必要と言われており、ブログを1記事書くために田口さんは沢山の情報収集をしていたようです。結果的に自分の成長に役立つことになったと話されていました。

また、ブログに書いたことをTwitterで発信するとWeb業界の人とのつながりが増えるのでおすすめとのことでしたので、みなさんも真似してみてください。

イベントに参加する

今回のKROWLイベントのような勉強会やイベント(セミナーやカンファレンスなど)、Web系のイベントに参加してみることもおすすめのようです。現場経験者から指導や意見をもらえる機会があったら積極的に参加してみてほしいと話されていました。

ちなみに、KROWLインターンシップに参加したのが田口さんがWebディレクターになる大きなきっかけと話してくれました。
「インターンシップに参加(https://krowl.jp/academy/internship)して、ディレクションについて教えてもらったことでWebディレクターって楽しいのかもしれないって思うようになりました。」と最後に運営としても嬉しいコメントをいただけました。(KROWLの宣伝ありがとうございます!笑)

KROWLのイベント情報はこちら
https://krowl.jp/academy/event

KROWLのインターンシップはこちら
https://krowl.jp/academy/internship

また、田口さんは以前にもKROWLのイベントで登壇していただいたり、未経験からWeb業界に入った経緯などをインタビューで話していただいたりと様々な場面でKROWLに関わっていただいています。KROWL MAGAZINEにて公開していますので是非チェックしてみてください!

共有会

LTの後は共有会!
飲み物片手に、発表者ごとにわかれて、座談会式で共有できる時間となりました。
質問も絶え間なく、参加者のみなさんから、もっともっと時間が欲しかったと言っていただけるほどの大盛況!

「入社後に最初にぶつかった壁は?」
「Webでいう良いデザインとは?」
「どういったツールが使えるといい?」
「作成するサイトのネタ集めは?」
「どんなイベントがおすすめ?」
「Webディレクターに興味があるが、何からはじめればいい?」
「Webスクールの探し方は?」
「ポートフォリオのポイントは?」

など、実践的な内容から転職活動の気になる疑問まで、発表者だけではなく、他の参加者とも共有できたことはいい刺激になったのではないでしょうか。

アンケートでも好評だったため、勉強法&共有会のイベントは、また近いうちに第2弾も計画したいと思います!
今回参加された方も、今回参加できなかったかたも次回をお楽しみに!

関連記事