アシアルに転職したWEBデザイナーのスキルアップフロー実例

はじめに

ものすごく久しぶりにブログを書きます。アシアルで主にプロジェクトマネージャー 兼 営業 兼 WEBデザイナー 兼 HTML/CSSコーダーをしている鴨田です。

何を書いたらいいか迷ったのですが、自分がアシアルに来て今年で9年目、来年で10年になります。そのまとめとして一介のWEBデザイナーとしてアシアルに雇われた自分がどのようにしてプロジェクトマネージャーや営業を務めるに至ったのかを書いたら、今WEBデザイナーをしていて、これからどうやってスキルアップをしたらいいのかの参考になるのではないかと思い付きました。

また、アシアルブログが新調されたので、これを機に、アシアルがこれまでどんな仕事をしているのか、一部ではありますがその軌跡を紹介するという面も含まれます。

1年毎に、その年に携わった代表的な仕事について、書いていきたいと思います。若干長文なので、予めご了承ください。

転職前(2009年以前)

転職前の前職は現ヤフー傘下の無料動画サービス「GYAO!」で、主にWEBデザイナー 兼 HTML/CSSコーダーとして、4年くらい勤めていました。主な業務は、カテゴリを一つ任されるのでその毎日の運用と特集ページの制作です。運用は、当時各カテゴリのTOPページは手動運用部分があったので、そのあたりの運用だったり、バナー作成だったり、サムネイル作成を行っていました。特集ページというのは、新作の映画やアニメ、音楽アーティストの新譜などのプロモーションページをデザインして、コーディングしていました。勤め終盤の方では、広告タイアップ案件で外注があった際の指示出しなどでアシスタントディレクター的なこともやっていました。

「GYAO!」は元々有線放送で有名なUSENのサービスでしたがヤフーに買収され、そのタイミングで全面リニューアルを行いました。そのときにメインのHTML/CSSコーダーとして、全ページのテンプレートを作成するためのHTML/CSSフレームワークを作成したのが、最後の仕事となりました。今でこそ、HTML/CSSフレームワークは一般的ですが、当時はまだそういったものもなく、IE対応も含め、結構複雑なレイアウトを頑張って組んだ思い出があります。

当時の技術的な側面としては、働き始めはまだテーブルコーディングが主流で、その後フルCSSコーディングとなりました。といっても、CSS3はまだ先の話で、divタグでボックスを作って、floatで段組みをするレイアウトです。またIE6対応は必須で、CSSハックをしながら角丸とかPNG透過対応をおこなって、デザインも頑張ってました。
そして、デザインやHTML/CSSコーディングだけじゃサービスは作れないので、もっと技術を身に着けようと思って、アシアルの門戸を叩きました。

保持スキル

• プロジェクトマネジメント Lv.5
• WEBデザイン Lv.30
• HTML/CSSコーディング Lv.40
• ※Lvは20くらいで1人前的なイメージ(ドラクエで転職可能的な)

1年目(2010年)

入社して早々に、とあるコンテスト用Flashアプリの企画と設計を担当して、最優秀賞を獲得しました。今の所、唯一の受賞歴です(笑)。
www.asial.co.jp

業務として最初に担当した案件は、施設・イベント予約システムです。PM補佐と基本設計、HTML/CSSコーディングを行いました。全体としても3ヶ月の案件で、個人としても2.5人月稼働していたようです。はじめての案件でしたが、代表の田中がPMだったこと、エンジニア陣もかなりサポートしてくれたので、予定通りにリリースし、特に大きな問題も起こりませんでした。ちなみに、現在もエンハンス/メンテナンスを繰り返しながら、運用が行われている息の長いサービスとなっています。

保持スキル

• プロジェクトマネジメント Lv.10
• WEBデザイン Lv.30
• HTML/CSSコーディング Lv.40

2年目(2011年)

営業を担当していたメンバーが産休となるため、営業の仕事も行うようになりました。あまり営業向けの性格ではないと思っていましたが、なんとかなるもので今でも営業の仕事を兼務しています。当時は技術的なこともそこまで分かっておらず、何を喋ったらいいのかにも迷いながら、どうにかこうにかやっていた気がします。以降、継続的に営業としても1年の1/4～1/5くらいは稼働しています。

営業以外の案件としては、前任者から引き継ぐ形でスマホアプリのPMをいきなり担当することになったのでした。本当に不慣れなところから始まり、インフラ周りのトラブルに振り回されつつ、顧客の担当者様にも厳しい言葉を頂くこともありました。ただ間違いなくこの案件を転機として、バックエンドの技術や、インフラ周りの技術に触れ、かなりPMとしてやっていく自信がついたのもの、このプロジェクトです。こちらもエンハンス/メンテナンスを繰り返しながら、アプリとしては今も現役です。
www.asial.co.jp

また、現在「Monaca」として自社サービスを展開していますが、プロジェクト自体はこの年から始まっていて、当時のニトビ・ソフトウエアのPhoneGapを使ってHTML5アプリを作成する手法を紹介するWebサイトを作成したり、書籍などを執筆していました。当時はそもそもアプリを開発するための開発環境を整えるのにも一苦労していたので、そこから「Monaca」が生まれたのでした。

保持スキル

• 営業 Lv.5
• プロジェクトマネジメント Lv.20
• WEBデザイン Lv.30
• HTML/CSSコーディング Lv.40

3年目(2012年)

前年のニュースアプリをさらに進化させ、CMSなども独自開発を行った案件のPM・基本設計・デザイン・HTML/CSSコーディングを担当しました。作業フローで行くと、要件定義、基本設計、詳細設計、開発(フロントエンドアプリ構築、バックエンド管理画面・WebAPI構築)、テスト、運用、インフラ設計、インフラ構築という、フルコースの案件でした。前年のアプリもそうですが、キャリア公式のニュースアプリということで、それなりのアクセスや課金決済などもあり、かなり気の抜けないプロジェクトでありながら、結構な短納期のプロジェクトだったので、エンジニア陣と二人三脚でかなり頑張りました。
www.asial.co.jp

保持スキル

• 営業 Lv.10
• プロジェクトマネジメント Lv.30
• WEBデザイン Lv.30
• HTML/CSSコーディング Lv.45

4年目(2013年)

今でこそ、テレビとネットの融合はかなり当たり前ですが、この年からセカンドスクリーンと呼ばれるテレビとアプリの連動が本格的に幕開けしました。年末の特別番組で専用Webアプリで、テレビ画面の写真を取ることでゲームを進めるというプロジェクトに携わりました。担当範囲はデザインとアニメーションでしたが、FlashをJacaScript化してアニメーションさせるという形式で、魚やタコなどを動かすという細かなことをしていました。
mdpr.jp

その他にも、既存のPCサイトのスマホ版のUX/UI設計・デザインを行うという、昨今のUXブームのハシリのような案件にも取り組んでいました。
www.asial.co.jp

保持スキル

• 営業 Lv.10
• プロジェクトマネジメント Lv.35
• WEBデザイン Lv.35
• HTML/CSSコーディング Lv.50

5年目(2014年)

小学校もどんどんICT教材を使用している流れの中で、デジタル社会科資料集の案件に取り組みました。タスクランナーやSASSを活用し、HTML/CSSコーディングに加え、動的部分のJavaScript(jQuery)コーディングをエンジニアにお願いするのではなく、自分で行った案件になります。基本的にはPCでのマウス操作ですが、将来的なタブレットでの操作を想定して、タップ操作にも対応させています。
www.asial.co.jp

保持スキル

• 営業 Lv.10
• プロジェクトマネジメント Lv.35
• WEBデザイン Lv.35
• HTML/CSSコーディング Lv.50
• JavaScriptコーディング Lv.5

6年目(2015年)

ジャパンネット銀行の普通預金口座をお持ちの方向けに、口座を利用して購入したくじ(BIG/toto/ロト/ナンバーズ)の当せん確認をすることができるアプリの開発を行いました。Monacaエンタープライズ版を仕様したHTML5アプリで、ネイティブライクなUXや操作感を実現しました。PMを担当しつつ、基本設計と一部詳細設計、デザイン、マイクロインタラクション、テスト設計も行いました。金融機関のお客様のPMを担当し、かなり細かい仕様書・設計書を作成する経験を得たことで、PMとしてもかなりレベルが上がったと感じた案件でした。
www.asial.co.jp

保持スキル

• 営業 Lv.15
• プロジェクトマネジメント Lv.40
• 上流設計 Lv.5
• WEBデザイン Lv.40
• HTML/CSSコーディング Lv.55
• JavaScriptコーディング Lv.10

7年目(2016年)

UX/UI案件として、既存システムのリニューアルを行う際に、将来的なエンハンス時のデザイン統一を図るため、デザインガイドラインの作成および汎用的なパーツを量産できるオリジナルHTML/CSSフレームワーク開発に携わりました。フレックスボックスによるレイアウトを全面的に採用しました。現在運用中で、エンハンス時にデザインを気になくて済むという評価を頂いています。

また、2015年のデジタル社会科資料集のエンハンスとして、WebGLを使用して、ブラウザ内でバーチャルな地球儀を表示するということを行いました。

その他、アシアルとしては珍しい案件ですが、Windows専用アプリケーションとして、アシックス社の走行姿勢計測サービス「ASICS FOOT ID」の開発を行いました。プロトタイプの開発段階からPM、デザイン補佐として関わり、構想段階から2年を掛けて、東京マラソンEXPOでの実施、店舗でのリリースまでを担当しました。
www.asial.co.jp

保持スキル

• 営業 Lv.15
• プロジェクトマネジメント Lv.45
• WEBデザイン(UX/UI) Lv.45
• HTML/CSSコーディング Lv.60
• JavaScriptコーディング Lv.10

8年目(2017年)

事例を公表することの出来ない社内システムのPMとして、1年間通して稼働していました。PMと兼任する形で、基本設計、デザイン周りも担当し、豊富なドキュメントの作成業務もこなしていました。後半は、特別な開発環境での構築ということもあり、チームとしてうまく機能するようなマネジメントに気をつけていました。1年を通して、マネジメント力がかなり強化されたと感じています。

保持スキル

• 営業 Lv.20
• プロジェクトマネジメント Lv.50
• 上流設計 Lv.10
• WEBデザイン(UX/UI) Lv.45
• HTML/CSSコーディング Lv.60
• JavaScriptコーディング Lv.10

9年目(2018年)

半年が経過しましたが、現在進行系でPMを担当しつつ、デザインのみ担当している案件、UXディレクションを行っている案件などがあります。完了した案件では、IoT案件やブロックチェーン案件などもあり、自分でも広範囲な知識が身についているのを感じています。

今後は、モックアップの作成方法をそのまま実装に組み込める形で、フロントエンド側の実装をある程度自分で完結させることができればいいなと目論んでいます。

保持スキル

• 営業 Lv.25
• プロジェクトマネジメント Lv.55
• WEBデザイン(UX/UI) Lv.50
• HTML/CSSコーディング Lv.60
• JavaScriptコーディング Lv.10

まとめ

アシアルに転職する前に思っていた技術を身につけることに関して、知識に関しては結構身についてきている実感がありますが、実装はまだまだかなというところです。ただ、自分は昔からスペシャリストではなく、ジェネラリストだと思っていて、実際そのようなスキルアップ、スキルセットになってきています。

WEBデザイナーとしての正当進化は、デザイン寄りであればアートディレクター、UX/UI寄りであればUXデザイナー方面、技術寄りであればフロントエンドエンジニア方面なのかなと思います。ただ、自分のように全てを少しずつ伸ばしていくようなこともできると思います。時代としても、デザイナーがグラフィック的なデザインだけを求められるのではなく、様々なスキルを求められるので、どの道に進むべきか悩む所です。

アシアルのデザイナーチームの中でも、受託開発のプロジェクトマネジメントを行っているのは自分くらいなので、アシアルの中でも異端っぽいですが、自分みたいな道もあると思うので、参考になればと嬉しいです。