実務体感!Webデザイン制作編

「自分が働いているイメージがつかない」というのは、未経験からWeb業界に入る人の大きな悩みの一つではないでしょうか。
インターンシップやセミナーで業界と会社の雰囲気は掴めるものの、実際に自分がどのような仕事に携わるのか想像しにくいですよね。

今回は「ひとつの案件」を舞台に、どのように仕事を進めていくかをWebデザイナー視点で具体的に紹介しようと思います。

こちらでは同じ案件をWebディレクター視点で紹介しているので合わせてご覧ください

Webディレクター視点はこちら

Webエンジニア視点はこちら

架空の案件ではありますが、内容は出来る限り実際の仕事内容に近づけてあります。

  • これからWeb業界を目指す人
  • Web業界への就職を検討している人
  • 職種別の仕事を知りたい人
  • チームで仕事をすることに興味がある人

このような方は、ぜひ読んでみてください!

工数の確認

Webディレクター

A社から依頼が来ています。この作業内容だとどれくらいの作業工数がかかりますか?

Webディレクター視点はこちら

作業工数を算出するためには、「準備から完成までの具体的な段取り」をイメージする必要があります。
そこで、作業工数を考えるときにWebデザイナーが欲しいと思う情報は以下の2点です。

  1. 何をどのくらい作ればいいのか
  2. どれを使えばいいのか

それぞれについて解決していきましょう。

1.何をどのくらい作ればいいのか

みなさんも想像がつくとは思いますが、Webサイトのデザインを作成する場合とバナーを作成する場合ではかかる時間が大きく違います。新規で作成する場合と過去に作ったデザインを踏襲する場合でもかかる時間は変わります。
量の面で言えば、画像を100枚リサイズするという場合、画像の作成自体はそこまでの時間がかからなくても、出来上がった画像を確認する時間やデータを管理すること自体に時間がかかってしまうことがあります。

他にも、クライアントに何パターンかデザインを提案して判断してもらうこともあります。何をどのくらいのボリューム感で作成しなければならないのかということは、とても重要な情報となります。
下記の記事ではバナーのデザインを複数用意する際のポイントなどを紹介しているので参考にしてみてください。

Webデザイナー

今回は、バナーを1枚新規で納品するということですね。何パターンかデザインを作って提案しますか?

Webディレクター

今回は画像素材が指定されているので、色味とレイアウトを変えて3パターンの作成をお願いします!

2.どれを使えばいいのか

デザインをするためには「構成」と「素材」が必要になります。

構成

構成書が完全に整った状態で共有されることは意外に少ないものです。そのような時は、クライアントからの要望を聞いた上でどのようなデザインにするのが良いのかを検討していくことになります。完成状態をイメージして、デザインする上で不都合があればWebディレクターに伝えます。
言葉だけではイメージがつきにくい場合は、イメージの伝わりそうな見本を用意したりもします。例えば、バナーであればPinterest(ピンタレスト)やGoogle画像検索、Webサイトであればギャラリーサイトを探したりします。時間に余裕があるときは、雑誌のデザインを見ることもあります。

素材

デザインをする上で必要となる素材は「画像」と「テキスト」です。画像は、クライアントから支給される場合と、レンポジ(注釈いれる)等から探す場合ではかかる時間が変わります。

また、場合によってはWebデザイナーが立ち合い、画像として使用する写真を撮影する場合もあります。
デザインを提案する場合はクライアントに確認してもらう期間も発生しますので、もしデザインの再作成などが発生した場合はさらに多くの時間がかかることもあります。
デザインに入れ込むテキストにも確認が必要です。原稿が支給されている場合、デザインの中に可読性を担保した状態で入れ込むことができない、ということはかなり頻繁に起こります。

Webデザイナー

いただいた原稿をデザインに入れてみたところ、文字数が多くて可読性が失われてしまいます。

Webディレクター

承知しました!クライアントに確認して文言の調整を行います。

一通りの課題点が解消されて、素材が揃えば制作がスタートできるようになります。
最後は自分の受け持っている他案件の状況を考慮して、Webディレクターに作業工数を伝えましょう。

Webデザイナー

今回の画像作成なら2営業日でできます!
ですが、今、他の案件で立てこんでいるので、少し余裕を見て頂けると大変助かります。

Webディレクター視点はこちら

デザイン制作を行う時に気をつけること

Webディレクター

先週オリエンした依頼が作業可能になりました。指示書の内容で問題なければデザインをお願いします!

Webデザイナー

スケジュールの調整もありがとうございました!これからデザインを始めます!

Webディレクター視点はこちら

1.制作に取り掛かる前に

制作に取り掛かる前に、素材の整理を行います。必須の作業ではありませんが、案件によっては膨大な量のデータを扱うこともあります。
データを見失ったり、作業途中のデータを失ったりすることを防ぐためにも、普段から”保存”や”管理”には気をつけておくといいでしょう。

また、複数人で作業を行う場合や、Webディレクターやエンジニアがデータを閲覧・使用することもあります。Webデザイナーだけでなく「誰が見ても分かる整理」を行うのが良いと思います。

Webデザイナー

先にGoogleドライブにフォルダを作って素材を整理しておきますね!

Webディレクター

ありがとうございます!助かります!

2.制作中に気をつけること

制作中に気をつけることとして、まず一番に挙がるのは「レイヤーを綺麗に保つ」ことでしょう。急な都合で案件を引き継ぐことになった時に、自分しかわからないレイヤー管理をしていると無駄な時間が生まれてしまいます。
また、デザインデータをクライアントに納品することもあります。誰が見ても理解できるように、レイヤーは整えておきましょう。

会社によっては、レイヤーの作り方を標準化して効率性を高めている場合もあります。
また、作業経過を残しておくことも大事なことの一つです。クライアントやWebディレクターとのやり取りの中で、何パターンもデザインを作ったり戻したりということも少なくありません。
作業経過の情報を非表示などにして残しておくと、進行がスムーズになる場合もあります。

この他にもデザインをする際に気をつけるべきポイントはいくつもあります。
下記の記事では実際に手を動かしながら確認できるのでそちらも是非ご覧ください。

▼バナー作成

▼Webサイト作成

Webディレクター

クライアントから、やっぱり昨日見せてもらった色味にしたいと言われたのですが、すぐに戻せますでしょうか?

Webデザイナー

わかりました!念の為残しておいたのですぐに書き出せます!

制作が終わったら

デザインが完成し、作業が終わったらデータを整理して保管しましょう。作業を始める前に、完成したデータをどのように管理するか決めてあるとよりスムーズになります。

よくあるパターンとしては、

  • 書き出した画像とデザインデータをセットで保管する
  • 依頼を受けた日付や、作成した日付をつけて管理する
  • 作成者の名前が分かるようにする

などがあります。

デザインが完成したあとは、残しておいた作業経過のレイヤーなどを消すことも忘れずにしておきましょう。

Webデザイナー

依頼されていた画像が完成しましたので、確認をお願いします!

Webディレクター

ありがとうございます。確認して問題なければ、クライアントに展開します!

Webディレクター視点はこちら

今回は「ひとつの案件」を舞台にWebデザイナーがどのようなことを考え、どのような業務を行っているかをお伝えしました。
Webディレクター編Webエンジニア編と合わせてみると、チームがどのように動いているのか具体的に想像ができるのではないでしょうか。
仕事の現場に入ってみると、クライアントやWebディレクターとコミュニケーションを密に取りながら、案件を進めていくことになるでしょう。
この記事がこれからWeb業界にチャレンジする人の後押しとなると幸いです!

Webデザインの学習をしている方に向けて無料のデザイン課題をKROWLサイトで公開中!
AdobeのIllustratorやPhotoshop、XDの操作を学びながら難易度別に用意してあるデザイン課題に取り組もう!

関連記事