Photo by Matthew Pearce
今回のpaiza開発日誌は片山がお送りします。
皆さんはWebデザイナーがどんな仕事をする人か？という事を明確にイメージ出来るでしょうか？
最近、弊社でWeb/UIデザイナーを採用する事になったのですが、求人の要件を固めていくにあたって、そもそもWebデザイナーって、どんな経験を持った人を指すんだっけ？というのが曖昧だったので、Webデザイナーのキャリアパスと、15分野のスキル一覧を書き出してみました。
現在20代のWebデザイナーだという方が、今後のキャリアを考える際にもちょうど参考になりそうな物になったので、せっかくなので公開してみようと思います。Webデザイナーからどのような職種にキャリアアップ出来るのかと言う事と、そのために必要な経験を15分野にまとめてみました。
企業がWebデザイナーを採用する際の求人要件定義にも使えるかと思います。
■Webデザイナーってそもそも何をする人？
Web制作の世界は、同じ「Webデザイナー」という職種でも、企業によって職域がだいぶ違います。以前、自分が大阪のWeb系イベントで話したときも、一言でWebデザイナーといっても東京と求められるスキルセットがだいぶ違うものだなぁと感じたのを覚えています。
一般論ですが、具体的に東京と大阪では何が違うかというと、東京では分業化が進んでおり、大阪では一人で幅広い職域をこなすという事です。東京はそもそも「Webデザイナー」という職種自体が少な目で、Webディレクター、アートディレクター、デザイナー、マークアップエンジニア、HTMLコーダーというような感じで細分化されています。大阪は、そのあたりをWebデザイナーという職種一人で全部やっていたり、WebディレクターとWebデザイナーの二人で担当するという印象でした。
また地域だけでなく、受託か事業者かという所属企業のビジネスモデルや、企業規模/予算規模によってもだいぶ異なってきます。受託は専門化される方向で、自社サービスでは幅広さが求められる傾向にあるように思います。企業規模/予算規模は小さければ幅広さが求められ、大きければ専門化されます。
現在デザイナーやディレクターをやっているという方で、自分が将来的にこういう仕事をしたい、こういうポジションで働きたいというのが有るのであれば、そうなるために必要な経験をある程度計画的に積んでいったほうが、やりたい方向性に近づいていけると思います。
転職をするという場合は、現在いるところで経験の幅を広げられないか再考したほうが良いですし、それでも転職するのであれば、転職先で求めている事が出来るのか、思い描いているキャリアパスを進めるのかといったことを確かめた方が良いでしょう。
（この辺りについてもっと知りたいという方は、Twitter[@rk611]等でお声がけ下さい。）
■キャリアパスの方向性
Photo by Rodrigo Denúbila
では、具体的にWebデザイナーのキャリアパスとしてどんなものがあるのかというのをざっくりまとめてみますと、下記のようになるかと思います。
職種名は会社によっても職域が違うので、あまり厳密性はありませんが、雰囲気は伝わるかと思います……。これは肩書きが増えていく訳ではなく、クラスチェンジする(職種が変わる)感じです。企業によってはこのレベルまで分業化されているところもありますし、ある程度1職種が吸収してやっていると言うところもあります。ざくっと各職種について説明をすると、下記のようになります。
◆デザイナー
サイトのビジュアルデザインを専門的に行う職種。ロゴデザインや紙媒体などのグラフィックデザインを含む場合もあります。
◆アートディレクター
デザイナーの上位的な職種。デザイナーとクライアントとの橋渡しや、デザインガイドラインの作成や、プロジェクト初期のデザインコンセプト、ムードボード、カンプ作成など、デザインの方向性とその後のデザインマネジメントを行う職種。
◆HTMLコーダー
HTML/CSSのコーディングを専門に行う職種。ビジュアルデザインをHTMLコーディングをしたり、ページの量産をしたり、サイト運用時のコーディングを行う職種です。
◆マークアップエンジニア
HTMLコーダーの上位的な職種。大規模サイトを作る際のCSSの設計やガイドライン作成だったり、フロントエンドのJavaScript実装やCMS組込みなど、プログラミング的な領域もカバーする場合が多い職種。
◆フロントエンドエンジニア
JavascriptやHTML5/CSS3の設計や実装や、サーバサイドスクリプトとのつなぎ込みや、Ajax周りの設計や実装を行なう職種。上記の図には書いていませんが、UIと密接に関わるため、稀にUIデザイナーを兼務する場合もあります。
◆プロダクションマネージャー
制作に入ってからの進行管理やステークホルダーとの調整をおこなう職種。大規模なサイト制作の場合に、ディレクターから機能分割されて配置される事が多い職種です。
◆Webディレクター/プロジェクトマネージャー
全体のコンセプト立案やプランニングを行い、プロジェクトの予算、スケジュール、クオリティ、スコープ、リスクのバランスを取りながら進行管理を行う職種。
◆UIデザイナー
Webサービス/アプリやスマホアプリなど、機能性のあるアプリやサービスにおけるユーザーインターフェース、インタラクションをデザインする職種。ビジュアル面だけでなく画面遷移や導線設計なども行う職種。
◆UXデザイナー/サービスディレクター
UIデザイナーより広範な、サービス提供価値やユーザー体験全般のサービス設計を行う職種。マネタイズの設計については含まれない場合が多いように思います。
◆インフォメーションアーキテクト
Webサイトの情報設計（サイトの構成、導線設計、各画面の情報構成）を担当する職種。細かいところではワイヤーフレームやサイトストラクチャを担当。大規模サイト以外ではディレクターに包含される事が多いと思います。
◆プロデューサー/プランナー
課題や顧客、ニーズを見つけてプランニングし、予算取りを行い、チームを組成する職種。営業＆企画的なポジション。事業者サイドだとマネタイズやROI含めての企画(事業計画の立案)をするポジション。
■Webデザイナーのスキル、経験一覧
Photo by Guion Medio
ここからがやっと本題ですが、「Webデザイナー」と言ったときにカバーされる(可能性のある)スキルと経験のまとめです。
- デザインリサーチ
- サービス設計、UX設計
- デザインコンセプトワーク
- 導線設計、サイトストラクチャ(サイトマップ)作成
- ワイヤーフレーム設計、作成
- UI設計
- ゼロからのサイトのビジュアルデザイン
- デザインアシスタント
- HTML/CSSコーディング
- Javascript
- CMSやシステムへのデザイン組込み
- 文章作成
- 運用、改善業務
- Web制作ディレクション
- マネジメント
厳密な分類をした訳ではなく、採用要件として何を求めるかを考えるためにブレイクダウンしたものなので、1～2回やったことあるかどうかの知識的な経験もあれば、最適なビジュアルデザインをできるか？という非常に深い経験が必要なものもあります。ビジュアルデザインのような経験の深さが必要なものについては,
経験年数を見たりポートフォリオを見たほうがいいものもあります。
ここに書いてる事を経験したことがあるかどうかを聞けば、どういう事をやってきて、何が出来るデザイナーなのかが判断できるという軸で考えました。（採用側にもそれなりの知識が求められますが…。）
Webデザイナー領域のスキル・経験の解説
◆01.デザインリサーチ
- 競合サイト、サービス調査
- 競合ビジネス調査、IR資料調査
サイトやサービスの立上げ時のリサーチ業務経験です。ある程度は誰でもやっているとは思いますが、ドキュメンテーション有無や、一歩踏み込んだビジネス面での調査有無で経験の深さが分かります。プロデューサーやディレクター系で求めらる事があります。
◆02.サービス設計、UX設計
- UXフロー、UXジャーニーマップ作成
- ユーザーヒアリング経験
- ユーザーテストの経験
- ペルソナ、ユーザー像策定
- サービス概要設計
サイトやサービスの立上げ時のプランニング業務経験です。プロデューサーやディレクター、UXデザイナーに求められるスキルです。規模が小さいと経験できないものが多いので、計画的にキャリアを考えないと詰めないスキルでもあります。
◆03.デザインコンセプトワーク
- デザインコンセプト立案
- ムードボード/イメージボード作成
- カラースキーム設計、フォント設計
- コンペ案件のデザインカンプ作成
- デザインガイドライン作成
サイトやサービス立上げ時にアートディレクターが担当するタスクです。こちらも規模が小さいと経験できないものが多いで、計画的にキャリアを考えないと身につけられないスキルでもあります。
◆04.導線設計、サイトストラクチャ(サイトマップ)作成
- ナビゲーション設計
- 内部SEO構造設計
- サイトストラクチャ作成(ハイレベル/ローレベル)
- ディレクトリ、ファイル一覧作成
インフォメーションアーキテクトやディレクターに求められる経験です。規模が小さいときちんとドキュメンテーションしなくても出来てしまいますが、あえてドキュメンテーションするようにしておくと、キャリアの選択肢が広がる経験と言えます。
◆05.ワイヤーフレーム設計、作成
- テンプレート設計、エリア設計
- 詳細ワイヤー作成
インフォメーションアーキテクトやディレクターに求められる経験です。詳細ワイヤーはある程度誰でもやっていると思いますが、サイトに求められるページの種類を分類してテンプレートを設計したり、ページ内のエリア設計なども意識しているとインフォメーションアーキテクトやUIデザイナーへの転向しやすくなるでしょう。
◆06.UI設計
- アプリなどの機能設計、インタラクション設計
- インターフェース設計
- インターフェースのビジュアルデザイン
アプリケーションやサービスサイト作成時に必要な経験です。ディレクターやUIデザイナーに求められる経験です。コーポレートサイトやキャンペーンサイトなどでは積めない経験です。
◆07.ゼロからのサイトのビジュアルデザイン
- サイトデザイン
- コーポレートサイトのデザイン
- ECサイトのデザイン
- キャンペーンサイト、LPのデザイン
- ポータルサイトのデザイン
- Webアプリのデザイン
- ロゴデザイン
運用の経験しかない場合には積めない経験です。デザイナーやアートディレクターに求められる経験です。1回経験すればいいというタイプのものではないので、実際の制作物がものをいいます。
◆08.デザインアシスタント
- 下層ページのデザイン展開
- バナーデザイン
運用で必要とされる経験です。質とスピードが求められます。バナーデザインに関しては、CTR向上等の実績が詰めると有利でしょう。ただこればかりを求められるポジションも少な目なので、よりデザイナー方向をめざすなら0からのデザイン経験を積めるように考える必要があります。
◆09.HTML/CSSコーディング
- 既存サイト更新のHTML/CSSコーディング
- 0からのHTML/CSSコーディング
- 更新用テンプレート作成
- HTML/CSSコーディングガイドライン策定
- SCSS、SASS、LESS、HAML、Grunt、gulpなどの経験
- Bootstrapの改修
HTMLコーダーやマークアップエンジニアに求められる経験です。更新だけやっていたのと、0からマークアップをした事があるのとでは評価に大きな差があります。
◆10.Javascript
- ありものの修正、組み込み
- 新たな機能開発
- Backbone.JSやAngularなどJSフレームワーク利用経験
HTMLコーダーやマークアップエンジニアに求められる経験です。マークアップエンジニアには、簡単な機能開発程度のスキルは要求される事が多いです。
◆11.CMSやシステムへのデザイン組込み
HTMLコーダーやマークアップエンジニアに求められる経験です。システムに関連する部分を扱う事が多い企業ではHTMLコーダーにも求められる経験です。
◆12.文章作成
- コピーライティング
- 記事ライティング
- SEOライティング
- LPライティング
事業者サイドでは、幅広い職種に求められるスキルです。ただの経験というよりは、コンバージョン率の改善などの実績があると有利な経験です。ライティングスキルを持っているディレクターは重宝がられます。
◆13.運用、改善業務
- 機能追加時のデザイン作成
- アクセス解析、改修案の立案
- 効果測定、A/Bテスト
事業者サイドのディレクター、デザイナーで特に求められるスキルです。仮説立案からデザイン作成、検証、改善までできる人は非常に少ないので、事業会社では評価が高くなるスキルと言えます。
◆14.制作ディレクション
- 要件定義における折衝
- コンペ案件の参加経験
- 提案書作成
- CMS比較、選定
- WBS作成とスケジュール作成
- 見積もり
- RFPの作成
- 外注先発掘、選定
- 受発注の契約のとりまとめ
- デザインディレクション
- フォトディレクション
- イラストディレクション
- クライアントとデザイナー間のディレクション
- システムディレクション
- 主担当としての進行管理
- 予算管理
- 発注、外注管理
ディレクターに求められるスキルです。デザイナーでもやれる機会にどんどんチャレンジしていけば、ディレクションにステップアップしやすくなるでしょう。ディレクションという職能の定義はぼんやりしていることが多いので、上記のような経験を網羅的に積んでいけると強いと言えます。
◆15.マネジメント
- パフォーマンスマネジメント
- メンバーの人事考課
マネジメントの経験です。給与レンジを上げやすい経験です。上位のディレクターやプロデューサーには求められる経験です。
■まとめ
Webデザイナー領域のスキル・経験といっても、あらためて書き出してみるとかなり広範囲にわたっています。もちろんこれらすべてを身に付ける必要はなくて、自分がこういう方向に行きたいと思った時に、具体的にどういうスキルが必要なのか？またそれを自分は持っているのかを考える際に利用してもらえればと思います。
例えばWebディレクターという肩書になっても、積んでいる経験によってはあまり評価されず、キャリアパスが閉ざされてしまう事もあります。どうなりたいのかを思い描いて、そのために必要な経験を積むために周りに働きかけたり、場合によっては求めている経験を積める環境に行ってみる事も重要だと思います。
今回この一覧を考えたきっかけは、弊社でWeb/UIデザイナーの募集する事になったからです。ですが弊社はまだ20名弱のスタートアップ企業という事もあり、採用力が高いわけではありません。そこでこの一覧を眺めながら、採用された人がなるべくキャリアアップが出来るような採用にしたいと考えました。
WebデザイナーからディレクターやUIデザイナーになりたいという方は多いですが、一方で、現状の環境ではなかなかステップアップの為の経験が積めないという方もいらっしゃるのではないでしょうか。弊社で求めているのは、ビジュアルデザインに精通しつつも、ディレクターやUIデザイナーなど次のステップを見据えている方です。
自分自身は一覧に書いた経験は一通り積んでおり、Webデザイン受発注のセオリーという書籍も出版しているので、私自信の経験を直にシェアできる環境だと思います。デザインを追求するというよりも、サービスを成長させる経験を積みたい方は是非ご応募ください。とりあえず話を聞いてみたいという方も歓迎です！！
paiza運営元のギノでは、現在paizaを一緒に作ってくれる【WEBエンジニア】【コンテンツプランナー/プロデューサー】【Web・UIデザイナー/ディレクター】を募集しています。受託でWebサービスを制作していたけど、自社サービスの制作に興味があるという方、Webデザインを極めてよりよいサービスを作っていきたい方など大歓迎です！！
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
