こんにちは！ディレラボメンバーの田中です。
今回はこのディレクションラボWEBサイトのデザイン・コーディングに関わった島村さんとディレクションを務めたトモさんにインタビューを行いました。

制作初心者でどういう勉強をしたらいいんだろうと迷っている方や、実際の制作を知りたい方、さらに新人デザイナーのディレクションに困っている方など、ビギナーデザイナーの方にもベテランディレクターの方にも見ていただきたいインタビューです。なんと島村さんは制作は完全に未経験の状態から、制作プロジェクトに立候補。
Adobeの契約から制作をスタートし、色々な試行錯誤をしながら進めていただきました。

参加者の紹介

しまむら

しまむら かずき（@SandTcreate2018）
イベントの運営と動画制作、さらに海外輸出など多岐にわたり活動。
イベント運営ではディレクター業を務め、イベントによる販売促進などを担当。

Tomo

Tomo（@Tomo__db）
フリーランス＆会社員としてWEBデベロッパー・デザイナーを務める。案件に依っては、ディレクター兼務で全て対応する事もある。

完全未経験からのWEB制作プロジェクトに応募!?

しまむら

僕は中学の時にPC部で、簡単な自己紹介サイトを作ったことがあって。それで大学生の時にはコーディングを使った仕事をしたかったんですけど、実績もない中で難しくて。
元々そういう思いがあった上に、ディレラボに入った理由も実務でないと本来学べないディレクションに関われるのがいいと思って入ったんです。そういうところからプロジェクトに参加したいなと思って手を上げました。
今回のプロジェクトは未経験OKだったので尚更でしたね。

Tomo

そもそも今回の募集は僕が行っていて、未経験の方でもOKという内容で募集していました。僕も未経験からWEB制作に入っているし、あとはWEB制作はデザインだけじゃなくて実装やコーディングもある分とっつきにくそうなイメージがあるんじゃないかと思っていて。そういう思いから初心者でもいいですよって声かけました。

Adobeの契約からスタート！初めてだらけのWEB制作と進め方の工夫

Tomo

元々はディレラボのサイトがなかなかできないっていう話だったんですよね（笑）
それでお声がけしたら島村さんに応募いただいたと。初めはざっくりしたサイトマップや構成しかなかったのでワイヤーフレームを作ってもらいました。TOPだけ既にできていたので、それ以外を作ってもらいました。

しまむら

そうですね、実際の制作ではベースとなるデザインはあってのうえですが、プロジェクト一覧のデザインを担当しました。

Tomo

ワイヤー書くのも初めてだったんですよね。

しまむら

はい。「XDって何ですか？」から始まりました。その時に初めてAdobeの契約をしましたね（笑）
で、トモさんにフィードバックもらって直して、を繰り返しながら作りました。

Tomo

完全に初めてのWEB制作でしたよね。やってみて苦労したことはありましたか？

しまむら

XDは割と飲み込みやすかったなと思いました。勉強方法としては公式のチュートリアルで全部作ってみたあと実際にイラレ（イラストレーター）とコーディングに入りました。イラレについてはどうしよう・・・てところから入って、まぁなんとか１ページ作って出したって感じですね。

Tomo

コーディングはどうでした？

しまむら

Progateは使ってました。どうしても分からない箇所はYouTubeが多かったですね。ご飯食べながらYouTube見たり、隙間時間を活用することは意識しました。
YouTubeの場合、色々みてるとレコメンドとして、自分にあった動画が自動で出てくるのがいいですね。特に「ふるさん」の動画はよく見てました。でも実際にやってみると、やっぱりコーディング大変だなって思いました。実際に手を動かすと分かんないなぁとか、コーディング数が長くなるにつれて分からなくなっていったり、ドツボにハマっていってる感じがありましたね。ドツボにハマったらワンブレイク入れながら、また制作を続けるという感じでした。

Tomo

とにかくあとは手を動かすって感じですよね。初心者の方全体に言えることで、勉強のために本だけをひたすら読む人って多くて。でもやっぱり島村さんみたいに手を動かしてもらうのが一番だと思います。
さらに誰かに見てもらえるといいなって思いますね。なかなか恥ずかしくてやりにくいですけど。でもできる人ってあまりそういうの気にしないと思うし、積極的に質問してフィードバックもらうのがいいと思います。

調べるときも質問するときも「考える力」は大切

Tomo

島村さんと一緒にやっていて感じたのは、島村さんは知識欲がすごい人だなって思いました。XDのチュートリアルや参考を見るとか、調べるって意外になかなかできないじゃないですか。
素直に分からないって言えるのもよかったなと思います。「考える」ことがきちんとできている感じがしますね

しまむら

なんでそうなるのか、は意識して考えますね。イベントの仕事でも「なんでイベントをするのか」っていう視点は必ず持たないといけない部分なので。

Tomo

僕に質問する際に気をつけたことあります？

しまむら

何を聞きたいのか、っていうのは押さえるようにしてたと思います。疑問を言語化するっていうのかな。はい・いいえで欲しいのか、５W１Hで欲しいのか。は明確にするようにしました。
どうしても言語化できないと自分なりの仮説を立てて伝えたり、「この辺なんですけど・・・」みたいに相手にヒントを与えることを心がけました。

Tomo

確かに。わかりやすい質問が多かったですね。

しまむら

反対にトモさんがやりとりの中で気をつけたことってありますか？

Tomo

僕は相手のモチベーションを折らないように気をつけてるんですよ。修正するとこがあったら、いいところも合わせて伝えるようにして。
この辺りは常に気を遣ってる部分ではありますね。あとは普段のコミュニケーションのなかに雑談を混ぜたりして、あまり仕事の話題ばかりになりすぎないようにしたり。

しまむら

トモさんからいただくフィードバックとてもよかったです！あとは疑問点が分からない場合のキャッチアップがとても早いなって感じました。

Tomo

ありがとうございます。僕も改めて勉強になりました。人それぞれ気になる箇所、引っかかる箇所って全然違うなって。で同じこと伝えても受け取り方も違いますし。だからこそコミュニケーションをとることは大事だなって思いました。
ディレラボのWEB制作チームの中でも、島村さんと同じように割とアグレッシブな方は今WEBチームに多いので、もっと自分も頑張らないとって思いました。

いかがでしたか？
私は一応制作業界2年目になりますが、島村さんに負けないようもっと勉強していかないと、と身が引き締まる思いがしました。

今回の個人的ポイントは３つ。

・（しまむらさん）未経験でも物怖じしないチャレンジ精神
・（しまむらさん）とにかく手を動かして試行錯誤する姿勢
・（Tomoさん）相手のモチべーションも考慮したコミュニケーション方法

特にコミュニケーションに関しては、私もちょうど新しい方に指導をする機会も増えてきて、なかなかうまく伝えられなかったりと悩むことが多かったのですが、相手のモチベーションを折らないことや雑談を織り交ぜるなど、早速使わせていただこうと思います。

この記事を読んでいただいた皆さんのにも明日から使える発見があれば嬉しいです。
それではお読みいただきありがとうございました！

編集：ディレラボ広報チーム　

　岡本 悟 @molt0123
　QAZ @calamarhythm
　木村ゆきえ @fulllunland
　じゅん @mintmint824
　セキリョウスケ @achrored

校正：MIKA ＠MIKA75328734

バナー制作：YUNI @nishirai2020