LIGのWebデザイナーに密着!業務範囲は?忙しさは?使うツールは?現場のリアルを聞いてみた

LIGのWebデザイナーに密着!業務範囲は?忙しさは?使うツールは?現場のリアルを聞いてみた

ぱんちゃん

ぱんちゃん

こんにちは! インハウスデザイナーのぱんちゃんです。

突然ですが、

「LIGのWebデザイナーってふだんなにをしているの?」
「どんな働き方をしているの?」

……そんなリアルなデザインの現場、知りたくないですか?

私自身は社内制作チームで自社ブログのアイキャッチ制作をメインに行っているため、クライアントから依頼を受けてWeb制作をしているデザイナーの先輩方とは別の部署なんです。日頃から先輩方の仕事の様子を覗いてみたくて、ずっとうずうずしていました。

そこで! みなさんの声を代表して、新人デザイナーの私ぱんちゃんがLIGの先輩デザイナーに密着して、クライアント案件への関わり方や1日の仕事の流れを調査してまいりました!

Webデザイナーを目指している方やWebデザインを学習中の方に、Webデザイナーの仕事のリアルをお届けできればと思いますので、ぜひともご覧ください!


 
今回密着したのは、LIGで活躍中のお二人のデザイナーです。

ico 人物紹介:Miya安定感のあるシニアデザイナー。アートディレクターの経験も豊富で、他デザイナー/ディレクター/エンジニアからの信頼も厚い。
ico 人物紹介:まいまいLIGに新卒入社し、現在3年目のデザイナー。細部まで作り込んだビジュアル作りに定評がある。

LIGのデザイナーってふだん何を作っているの?

――お二人は日々どんな制作物を作られているんですか?

Miya:コーポレートサイト、LP(ランディングページ)、リクルートサイトなど一通り担当しています。最近だとコーポレートサイトやサービスサイト(特定の商品やサービスに関する情報を載せたサイト)を作ることが多いですね。

まいまい:私が作ったことがあるのはコーポレートサイト、リクルートサイト、サービスサイト、オウンドメディア、ECサイトです。どれかのサイトに特化するわけではなくて基本的になんでもやる、という感じです。

――そうなんですね! ちなみにWebサイト以外のクリエイティブを作ることもあるんですか?

まいまい:ありますよ! サービスのロゴを作ったり、デザインの上流のコンセプトを作ったりすることもあります。

――コンセプト……。わかるようでわからないような……。

まいまい:これからの方向性を言語化するイメージです。はじめてお付き合いするお客さまだと会社としてどう見られたいかの方向性が決まっていない場合も多いので、市場の調査をして今は何がトレンドか、どういったデザインだとターゲットに響きやすいのかを調べていきます。お客さまに合ったデザインの方向性を提案する、といった感じですね!

――なるほど! 会社としてどういった方向性にするか、デザイン周りのコンセプトを決める仕事もデザイナーの役割の一つなんですね。

デザイナーの業務範囲ってどこからどこまで?

――お二人に聞いた、Web制作の流れを図にまとめてみました!

制作フロー
  1. 問い合わせ〜受注
    • お問い合わせをもらってから、予算感、どういう課題があるか、何を作りたいか、いつまでに必要なのかなど、大まかな部分をヒアリングし、社内で持ち帰って企画を練る。
    • ヒアリングをもとに提案書を作り、クライアントに提案、通れば受注となる。
  2. ヒアリング~制作
    • 受注後に、改めて詳しくヒアリングを行う。
    • 目的、何を解決するかのプロジェクト設計、要件定義をしていく。
    • 大枠の方向性が決まってから情報設計(ワイヤーフレーム作り)を行う。
    • デザインを提案して、OKが出たらコーディング、開発を進めていく。
  3. 検証〜納品・請求
    • 仮のサーバー環境でサイトがしっかり動いているかを確認して、OKであればサーバーにアップして公開作業を行っていく。
    • 公開作業をして実際にアクセスができる状況になってから先方に確認いただき、納品して請求業務を行っていく。

――LIGのデザイナーが担当しているのはどこからどこまでなんですか?

Miya:プロジェクトにもよりますが、この赤枠の受注後のヒアリングから企画提案、情報設計、デザインまでを担当します。その後のデバック・検証にも携わります。

――情報設計のときにワイヤーフレームを作ると思いますが、それもデザイナーが担当しますか?

Miya:僕の場合はそうですね。ディレクターと一緒に作ることもありますし、デザイナーが他の案件にかかっているときは、ディレクターがワイヤーフレームをひくという場合もあります。

まいまい:基本的にはディレクターの方が作ってくれるパターンが多いです。短いページだとデザイナーが担当することもありますが、大規模のサイトだとディレクターと一緒に引いたり。

――そうなんですね。基本的にお客さまとのやりとりをするのはディレクターだと思いますが、デザイナーからお客さんに直接提案することもあるのでしょうか?

Miya:一部担当しています。ビジュアルなどの見た目の質問をされたときはデザイナーが答えたり、デザイン提案のときは資料を作って直接プレゼンしたりしています。

――基本のやりとりはディレクターが担当して、デザイン面のところはデザイナーが担当する、というイメージなんですね! あらためてデザイナーの担当範囲を以下にまとめてみました。

制作フロー(デザイナーバージョン)
  1. 問い合わせ〜受注
    • (アカウントプランナーと呼ばれる営業がメインで担当)
  2. ヒアリング~制作
    • 要件定義〜デザインまでを担当。
    • 情報設計(ワイヤーフレーム)は案件によってデザイナーが担当することもある。
    • クライアントとのやりとりはディレクターがメインだが、デザイン面のヒアリングや提案はデザイナーが担当。
    • (コーディング・実装はフロントエンドエンジニアとバックエンドエンジニアが担当)
  3. 検証〜納品
    • デザイナーは実装後のチェック、修正対応を担当。

LIGのWebサイト制作体制って?

ディレクター クライアントとのやりとりや全体の指揮を担当
デザイナー Webサイトのデザインを担当
フロントエンドエンジニア ユーザーが見る側(表側)のコーディングを担当
バックエンドエンジニア 主にWordPressの構築やシステムの開発部分を担当(入らない案件もあり)

――LIGの制作体制はディレクター、デザイナー、フロントエンドエンジニア、バックエンドエンジニアで分業して進めていくんですね。1つの案件にそれぞれ何人ずつアサインされることが多いのですか?

Miya:半年くらいのプロジェクトだとそれぞれ1名ずつ、大規模案件になるとそれぞれ2名ずつ入ることが多いです。

――経験の浅いデザイナーはどんな形でプロジェクトに入ることが多いですか?

まいまい:経験の浅いジュニアのデザイナーだとAD(アートディレクター)の元に入ってデザイナー2人体制で担当したりします!

Miya:入りたてのデザイナーは先輩デザイナーが作ったページの下層を担当することが多いです。いきなりトップページ作ってくださいと言われても困ってしまうと思うので、先輩が作ったトップページの意図を理解したうえで、それを下層ページに落とし込んでいくところからスタート、という形ですね。

案件の期間ってどれくらい?

――1つのWebサイトを作る期間はどれくらいなんでしょうか?

まいまい:前に採用サイトを作った際は3ヶ月くらいでした。小・中規模の会社さんだと3~4ヶ月が多いです。

Miya:僕が担当しているのは半年から1年くらいのことが多いですね。長いものだと1年半かかったプロジェクトもありました。

――1年半……! そんなに長いプロジェクトもあるんですね……。

Miya:そのときは、コーポレートサイトだけではなく採用サイト、IRサイトまで全部担当したので、プロジェクト全体で1年半くらいかかりました。あとは裏側のシステム開発に時間がかかる案件だと期間も長くなります。

――各制作フェーズでだいたいどれくらいの期間がかかるんですか?

Miya:案件にもよりますが、半年のプロジェクトだと要件定義まで約1ヶ月、デザイン約1ヶ月、フロント側(ユーザーが見る部分)のコーディング2ヶ月、WordPressや裏側の処理の開発が2ヶ月といった形が多いと思います。

――なるほど、割合としてコーディングや開発に時間がかかるんですね。短い場合、たとえばLPだと制作期間はどんな感じですか?

まいまい:案件にもよりますが、LPの場合だとサイト全体の制作期間は1〜2ヶ月くらいですね。以前私が担当したイラストメインの案件では、デザイン制作のみで5営業日ほど、そこにプラスでお客さまの確認や修正が入ってくるので、最終的なデザインの決定には2週間くらいかかりました。

――想像していたよりも早かった……。現場ではやはりスピードが求められるんですね!

同時並行で担当する案件数は?

Miya:基本的には複数担当しています! 今完全に被っているプロジェクトだと2つくらいですね。メインのトップページをデザインするタイミングはできるだけ被せないようにしています。

まいまい:今私が担当している案件は全部で4つです!

――4つも……! いろいろな案件のデザインを同時並行でやっていたら、混乱してしまいそう……。

まいまい:デザイナーは提案の段階から最後のブラウザチェックまで、なにかしらの形で関わっているので、どうしても複数同時に担当することにはなりますね。4つあるうちメインでデザインを作っているのが1つ、同じタイミングでブラウザチェックしているものが1つ……といった感じで案件が重なっているケースが多いです。

1日の仕事の流れ

――LIGのデザイナーはどんな感じで1日を過ごされているんですか?

Miya:LIGは10時始業で、その日の稼働を共有する「朝会」をしてから作業に入ります。僕の場合は7割作業、3割ミーティングくらいの割合ですね。ミーティングはクライアントとの定例が週1回、社内で進捗の確認をする定例が週2回ほどあります。

まいまい:打ち合わせが多いディレクターと違って、デザイナーは作業に集中できる環境を作ってもらえていますね。他の職種の人よりかはミーティングも少ないかなと思います。

――ぶっちゃけ残業はどれくらいしているのでしょうか?

Miya:案件の重なりや進み具合によって、どうしても残業は発生してしまう職業かなと思います。

まいまい:決算前の年末や年度末は繁忙期で、予算消化の関係でWebサイトの発注を多くいただける時期なので、どうしても残業時間が増えてしまいますね。

――1年を通じて忙しいタイミングに波があるんですね。

どんなツールを使っているの?

――Webサイトのデザインをする際はどんなツールを使っているんですか?

Miya:デザインはすべてAdobe XDで作っています。ワイヤーフレームもXDです。写真の補正やレタッチ、切り抜きでPhotoshop、アイコン作りやちょっとしたイラスト、テキストをSVG化したときの管理でIllustratorを使います。

――なるほど、XDが基本で、IllustratorとPhotoshopはWebサイトのパーツを作るために使う、という感じなんですね!

まいまい:私も前はPhotoshopがメインだったんですが、LIGのデザイナーは基本的にXDを使っているので今はXDをメインに切り替えました! あとはデザイン提案時にアニメーションを用いたりもするので、After Effectsも使います。

Miya:軽く動きをつけて提案するとクライアントにイメージを持ってもらいやすいですし、喜んでいただけることが多いです。

――ということは、After Effectsもデザイナーの必須のツールになってくるんですか……?

Miya:必須ではないと思います! 好きならやる、余力があればやる、くらいで大丈夫です。クライアントには紙芝居的な感じで説明するでもいいですし。

――それを聞いてちょっと安心しました……! ちなみにエンジニアにコーディングを依頼する際に、After Effectsが使えない人はどうやって動きを伝えているんですか?

Miya:参考サイトを見せて、コミュニケーションを取りながらイメージを伝えていきます。

――なるほど、そうやって進めているんですね。そうしたら、初学者はまずはXD、Photoshop、Illustratorの使い方を身につけるのがよさそうですね!

いかがでしたか?

Miyaさんとまいまいさんにリアルな部分までたっぷり回答いただきました。

Webデザイナーの仕事範囲は会社員/フリーランスなのか、どんな会社に勤めるかによっても変わってきます。LIGデザイナーの働き方を知ることで、Webデザイナーを目指す方にとってざっくりと実際の業務イメージを掴んでいただけたり、他の企業ではどうなのか情報を集めるためのきっかけとなれば幸いです!

以上、ぱんちゃんがお届けしました!

この記事のシェア数

9

ぱんちゃん
ぱんちゃん デザイナー / 山崎 真由子

インハウスデザイナーのぱんちゃんです。食品会社で広報として働きながらデジタルハリウッドSTUDIO by LIGに通い、未経験からWebデザイナーになりました。 Webデザイン初心者向けの記事を書いています。

WEBデザインをはじめよう | 61 articles