「JSのわかるデザイナーへ」個別トレーニング紹介 Vol.3 岡田さんの場合

「JSのわかるデザイナーへ」個別トレーニング紹介 Vol.3 岡田さんの場合

はじめに

岡田さんは弊社のインターネットのWEBからの応募者の一人です。もっとも早い時期に応募をいただいた方です。

面接

ちょうど会社を出てフリーランスになられたところ、という段階だったそうです。時間ができたところでシッカリと学びたいという意識で弊社にお声掛けいただけました。

雑誌の業界にいらしたところからWEBのデザイン寄りの開発を行っていた経験をお話し下さいました。Flashなどを経験され、スクール的な所で学んだこともあるそうです。

Flashは今後利用できる幅が狭まるという所なのでHTML5/CSS3や、それを使いこなすためのJavaScriptの知識を欲しているということでした。少しだけjQueryなどを使ったことはあるが、ロジックを考えるようなところになると動くものを作り切れないという話です。久しぶりのJavaScript中心の内容に私も少しワクワクしたのを覚えています。

それまで作成されたWEBサイトを見せていただいたりしましたが、デザインについては一定のセンスをお持ちで、HTML/CSSの基礎的なところは把握されている、という印象でした。

Flashの代わりにHTML5/CSS3を利用する目的なので、特にアニメーションをするような部分についての理解を深めたいと注文をいただきました。

JavaScriptについても、

  • クロージャー
  • オブジェクト
  • ajax

などの言葉はご自身でも調べられており、一定のイメージはある様子でした。ただ、実際にどういった場合に有効に利用できるのか掴むところで難儀をしているということを相談いただきました。

ゴールとしては、フロントエンドエンジニアにあたる部分をもっとこなせるようになりたいということと、JavaScriptという一つの言語についてある程度の知識を獲得したいという話です。

過去の話を聞くにつけ、器用に物事をこなされる一方「柱となる何か」の不在に悩んでおられる様子でした。今後仕事を続けて行く上で何か拠り所となる技術や知識を望まれているという理解をしました。

ポートフォリオになるようなものを持ちたいと考えている事を伺ったので、これまでの仕事の成果をまとめたポートフォリオサイトを作成しつつ、技術を学んでゆくということを目標にすることにしました。

トレーニング開始

まずHTML5/CSS3についての理解を深めていただくために、CSS3のtransitionの勉強を始めました。transitionは手軽にアニメーションを作成するための良い方法で、モバイルでも効率よく動作させやすい仕組みなので、まずこちらをやってみると最低限必要なことがやりやすくなると踏んだのです。

アニメーションを紹介しているようなサイトを一緒に見ながら、どんなものをやってみるかを決め、最初の課題としました。Chromeの開発者ツールを使ってWEB上のコードを確認できることや、その場で修正まで行えることを一緒に確認しました。
一旦自身で手を動かしてみる事として、一歩目を踏み出しました。

実際にすぐに成果を見せてくださったのですが、すでにあるコードから理解して組み立てるところについて一定のセンスのある方だと思ったのを覚えています。

学習の態度はとても真面目で、こちらからのアクションを待つことなく、どんどんコードを書いてくれる優秀な受講生でした。基本的に「今、こういうことを期待して、こう書いたけれど、こうなっている。どうしたらいいですか?」というやった上での結果を相談してくださる形なので非常にやりやすかったです。

こういった「指導を待たずにとにかく手を動かしてみよう」という方とはトレーニングの相性はとても良いです。手を動かすけれども無駄玉が多くなってしまうことの多いところで、こちらからの誘導をうまく入れていくのがポイントになると捉えています。
結果的に無駄が減り、効果的な学習をサポートできるということになります。

簡単なアニメーションを会得した後は、それをどのようにJavaScriptからトリガーして動作させるのかを学びました。この辺りは全く問題なく進めていただけました。「表現したいアニメーションをcssのclassとして作り、classを設定する事で動作させる」
という基本の考え方についてはすぐに理解されたと思います。

若干苦しんでいたのはJavaScriptのコールバックについての動きでしょうか。いつ呼ばれて、どのように値が変わっていくのか、ということには頭を悩ませているシーンがありました。先述のような質問くださる時の内容はこういった、一定の複雑さをはらんだ内容が多かったです。私が一緒にデバッグしたりするケースですね。その過程で、ブラウザの開発者ツールのデバッグにおける効果的な利用の方法や、一定のコツをお伝えすることができたと思います。

ポートフォリオ

そうしてポートフォリオサイトはだんだん完成します。ある時見せていただいた時に、一気にデザインが進んでいて(本人曰く「デザインが進んできた方がモチベーションが上がるので」ということでした)、驚かされました。

それまで学んだ内容を組み込んでおり、自分で調べたアレンジも加わっていて、技術の部分でも一定の評価を得られるものができたと思います。

その後

私から自社のサービスのデザインを依頼させていただいたり、知り合いの会社さんにご紹介するなどさせていただいて、少しずつ幅を広げていただいています。JavaScriptをガリガリ書いてゆくところは継続しないと鈍ってしまうので、続けていきながらレベルアップできる環境を作れるか、が今後の課題になる気がしています。

最近ではサーバー側のプログラミングにも興味が出てきたという事で、PHPを触ったり、Wordpressのカスタマイズをしようかという事で本当に勉強家の方だなと思います。

デザインができて技術がわかるなら活躍の幅がとても広いと思うので、活躍を期待しています。