LIGデザイナーの仕事の進め方やコツとは？質問にお答えします！

ぺちこ

2016.08.11

こんにちは。アートディレクターのぺちこです。

「あなたの質問にLIGのデザイナーがお答えします！」というテーマのもと、みなさまから募集した質問に答えています。今回は、仕事の進め方やコツについての質問にお答えしていきます！

仕事の進め方編

ターゲットやコンセプトなどが決まってから、トップページのワイヤーフレーム、デザインをするのに何時間ぐらいかけますか？

よーいドン、と時間を計りながら作ったことはないので、明確に◯時間！　と言い切ることは難しいのですが、LIGではTOPページデザインの期間をだいたい3～5営業日確保しています。

とはいえ、その日数の中で複数の案件をこなしたり、さまざまなミーティングに駆り出されたりするため、実際の平均は、1日4時間強くらいしかかけていないのでは？　という印象です。

……となると、トータルでは12～20時間ほど、というところでしょうか。

やはり実務をしていて感じるのは、案件のタイプ（コーポレート・採用・メディア・サービス）によってかかる時間はバラバラだということです。「TOPページ」といっても、案件によって要素のボリュームが異なりますので、一概には言いづらいところがあります。

仕事を進める上で大事なのは、「あなたはいつもTOPページのデザインにどれだけ時間をかけますか？」ということよりも、「案件に対して適切な作業時間を見積もって、スケジュールどおりに進めていますか？」ということだと思います。

チームで仕事を円滑に進めるには、スケジュール管理が大きなキモです。どこかが遅延すれば後の工程すべてに響いてしまいます。

基本的に全体のスケジュールをひくのはディレクターさんの場合が多いですが、スケジュールを事前に確認し、案件のボリュームと自分の作業スピードを鑑みてどう進めるか頭の中で整理をしたり、そもそも無理なスケジュールであればフィードバックをしたりする必要があります。

この作業を怠ると、いつまで経っても自身のスケジュール管理ができるようになれません。意識して作業をおこなってみてくださいね。

御社のウェブ案件に関する【デザイン～コーディング～バックエンドエンジニアへの引き渡し】などの具体的な流れと、利用ツールについてストーリー仕立てでお聞かせいただけると嬉しいです

ストーリー仕立て、というのが難しいですが……流れとしては以下のようになります。ちなみにWeb制作全体の大枠の流れについては、以前の連載記事でご紹介しているので、そちらもご覧くださいね！

Webデザイナーの仕事とは具体的に何をするの？現役デザイナーが解説

もりた

2016.04.21

ヒアリング～コンセプト設計

案件やそのときのリソース状況などによっても異なりますが、LIGではヒアリングからデザイナーが同行することもあります。大抵の場合は、初回の要件や予算等のヒアリングはディレクターのみ、受注が確定してから（あるいは提案が必要な場合など）デザイナーも同行する、という形です。

担当者へのヒアリングだけでなく、可能であればクライアント企業の社員さんや社長さんなどにインタビューをさせていただくこともあります。

ヒアリングやインタビュー、企業/業界研究などをおこなった上でコンセプトを設計します。この工程にはディレクターとデザイナーが関わっています。

LIGでの主な使用ツール: ▼録音
◯ ボイスレコーダー … 長時間なインタビューのときに。
◯ QuickTime … 通常のヒアリング時に。タイプ音が入るのがたまにキズ。▼メモ
◯ Evernote … 職種間での共有がしやすいため。▼資料作成
◯ Keynote … ディレクター・デザイナーともに編集が容易なため。
◯ Illustrator … 自分しか編集しない場合は、使い慣れているので使うことも。

ワイヤーフレーム

ワイヤーフレームはディレクターが作る！　と決まっているわけではなく、案件によってはデザイナーが作ることも往々にしてあります。最近のLIGの傾向としては、ディレクターが必須要素と優先順位を固めるところまで主導し、ワイヤーフレーム以降の工程はデザイナーが作る、という流れになりつつあります。

ワイヤーフレームでガチガチに固められてしまうのを嫌がるデザイナーも多いようです。（私も例外ではなく。）

また、ワイヤーフレームの精度は案件によって異なります。「デザインを見ないと分からない！」というクライアントさまの場合は、ワイヤーフレームに多くの時間を割いたとしても、デザイン段階で構成自体の戻りが発生することもあるので、案件ごとに力の入れ方を調節するようにしています。

LIGでの主な使用ツール: ◯ Prott … 職種問わず使いやすいツールです。SPサイトのワイヤーフレームにはとくに便利。
◯ Illustrator …自分しか編集しない場合は、使い慣れているので使うことも。
◯ Photoshop …自分しか編集しない場合は、使い慣れているので使うことも。

デザイン

続いてデザインフェーズです。LIGではひととおりのワイヤーフレームが確定してからデザイン期間に入るようにスケジュールがひかれていることがほとんどですが、ワイヤーフレームが決まったページから順々にデザインに入るケースも多いです。

デザインをクライアントに提出するタイミングは、TOPページを提出＆FIX後、数ページごとにフェーズを分け、ある程度まとまった状態で提出する場合と、デザインが完了したページから五月雨で提出する場合と、大きく2パターンで進めています。

これらはクライアント企業の決裁フローや、全体のスケジュールなどさまざまな理由によって使い分けられています。

TOPページのデザイン提出時には、デザイン説明資料を添えて、対面やSkypeなどで打ち合わせをおこなっています。

LIGでの主な使用ツール: ◯ Photoshop … Webデザインに関してはPhotoshopで統一。
◯ Illustrator … 主に素材づくりで使用。

デザイナーからフロントエンドへ

みなさんが一番頭を悩ませるのはここではないでしょうか。

LIGではフロントエンドに対し、よりスムーズにデータや意図を共有するために、「ガイドラインPSDの作成」を必須としています。これはコーディングするにあたって、文面だけでも伝達可能な情報を詰めこんだPSDで、詳細については以下の記事でご紹介しています。

【サンプルPSDデータ配布中！】デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみた

もりた

2016.01.29

上記の記事でも紹介されていますが、ガイドラインPSDを作る以外にも、レイヤーの命名規則などを社内のデザイナーである程度統一することによって、できる限り「人によってPSDの扱いやすさに差がありすぎる！」ということがないように配慮しています。

また、最近のWebサイトでは動きを取り入れたものが多く、アニメーションをどうやって伝えるのか？　という悩みも増えてきているように思います。LIGでは現状、個人によってやり方がバラバラなのですが、サンプルのGIFやムービーを実際に作って伝えたり、雰囲気をまず伝えてフロントエンドに考えてもらったり、コミュニケーションを多くとりながら共有をしています。

アニメーションを伝えるために使うツール: ◯ Photoshop
◯ AfterEffect
◯ EdgeAnimate

コーディング

LIGではコーディングはフロントエンドのお仕事で、Gulpの開発環境を構築して作業をおこなっています。Gulpについてはフロントエンドのみなさんが執筆した連載があるので、第1回を以下に貼っておきますね。

動画キャプチャで解説！gulp.jsのインストール方法と簡単な使い方

はっちゃん

2016.02.22

コーディングが済んだものは順次テストサーバー上げていただき、デザイナーは自身のデザインと齟齬がないかをチェックします。チェックの際にはBitbucketのissueを利用し、気になる点についてはバンバン課題を立てていきます。担当者や対応状況が一目で確認できるのと、課題を立てる際にいろんなファイルを添付することが可能なので、細かい指示も出しやすいです。

issueを利用したタスク管理についての記事も公開されているので、あわせてご覧ください。

Github／Bitbucketのissue機能を使って効率よくタスク管理をする〜バグ報告編〜

いなば

2016.01.07

ソースコードの管理もBitbucketのレポジトリを使用しています。

LIGでの主な使用ツール: ▼エディタ
◯ PHP Storm
◯ Atom▼便利ツール
◯ Mapture … 半透明キャプチャを撮れて、ブラウザに重ねて細かい調整が可能に。
◯ Monosnap　… 動画キャプチャで、テストで作ったアニメーションを共有したいときなどに使用。▼Chromeエクステンション
◯ The QR Code Extention … 見ているサイトのURLをQRコード表示できる。
◯ Page Ruler … ブラウザ内の要素を測るときに使用。

フロントエンドからバックエンドへ

バックエンドの組み込みの際には、可能な限りFIXしたデータをお渡ししたいものですが、実際に作業をしていると途中で文言の差し替えがあったり、バグ潰しと並行しながら作業せざるを得ないことが多くあります。そういった場合に先祖返りや作業バッティングを防ぐために、Bitbucketでブランチを切って、フロントエンドが作業中のデータと、バックエンドが組み込みしてもOKなデータを明確に切り分けています。

すでに引き渡しているページに修正や更新があった場合も、バージョン管理がされているので差分が分かりやすく、トラブルは最小限に抑えられる……はずです。

デザイン設計時に、手書きで考えますか？もしくはアプリをつかいますか？使う場合はどのアプリをつかいますか？特に動きのあるサイトデザインをつくる際にどのように考えるか教えて欲しいです。

手書きラフについて

私の場合は、一旦、手書きでノートに書き出してみます。が、あまり細かく手書きで設計することはありません。SPサイトのようにある程度サイズを再現しやすいものであれば良いのですが、PCサイトになると手書きではどうしてもサイズ感を把握しきれず、Webサイトになったときに有効なデザインなのか？　ということがなかなか判断しにくいからです。

ただ、要素自体がそこまで多くないLPなどの場合には細かいところまで手書きで考えることもあります。とくに撮影から入る場合は先に手書きで構図などを考えておくと、実際に撮影のイメージボードを作る際にとても役に立ちます。

動きのあるデザインについて

私はまず、イメージに近い動きやスピード感のサイトをひたすら探し回るところから始めます。動きという点だけならば必ずしもサイトである必要はなく、例えば水の揺らぎをイメージしているならば単純にいろんな「水」の映像（波、滝、水面……）を見るというのも手です。（その場で作れるものであればホンモノを見たほうが良いでしょう。）

サイトで探すというのは、クライアントやフロントエンドに動きのイメージを伝えやすくするためです。もちろん、イメージぴったりのものを探し出すことは不可能に近いので、デザイン作成時には簡単なアニメーションGIFを作成してみたり、アニメーション化までしないにしても、コマ撮りのようにおおよその動きが分かるような形で書き出しをしています。

仕事のコツ編

デザイナー初心者が上手く仕事を進めるためのコツや、注意点などの経験談が聞きたいです

こちらについては、ぜひ他のデザイナーの意見も聞いてみたいところ。まきこさん、ずんこさん、藤田さんの3名からコメントをいただきました！

初心者の頃は、デザインがうまくできずスケジュールが遅延してしまうのに、ひとりで抱え込みがちでした。もっと先輩デザイナーやディレクターに早めに報告・連絡・相談をしたほうがよかったなあと思います。先輩やディレクターは、新人が困ってるときでもプロジェクトをうまく進行させるために存在しているはずだし、リカバリーしやすいうちに言わないと、さらにいろんな人に迷惑をかけることになってしまうので！

兎にも角にも、内容をしっかりと把握することだと思います。作成するものは何か？　締め切りはいつか？　と把握することは本当に大切です。

あとは、提出前に3回チェックすること！　誤字脱字、データが差し代わってないなどのケアレスミスを最小限にすることは重要です。

一番つまずくことって、きっとデザインが思い浮かばないことなのかなと思います。こういうときはとにかく悩んだら人に聞くことでしょう。

また、仕事が終わった後も次回の出勤時に自分が作るデザインをしっかりと把握し、家で参考になるようなデザインを集めるなどの予習が大事なのかなと思います。

私はというと……

まきこさんの回答にもありますが、何事も早めに関係者に伝えておくことは大切だと思います。遅れそうな時に相談するということだけでなく、「いつデザインが上がるのか」「いつ確認して欲しいのか」「いつまでにフィードバックが欲しいのか」なども含めて逐一事前に共有をしておくべきです。自ら細かく期限を切ることで自然とスケジュールに対する意識もついていきますし、自分の作業スピードや何に時間がかかるのかというのも明確に把握できるようになっていきます。

最初のうちは想定したスケジュールどおりに出来なかったとしても、繰り返すことで精度が増していきますし、周囲のメンバーも見通しが立てやすくなるので、結果として全体がスムーズになるのではないでしょうか。

依頼側がどういう準備をしてどういう依頼の仕方をするといいアウトプットが得られるかご意見を聞きたいです。

こちらのご質問、実はエピソード込みで興味深かったので、とりあえず全文掲載させていただきますね。

事業会社のWEB担当者（非デザイナー）をしています。
やり取りしているデザイナーにめちゃ怖い人がいて、
「なんかこういうの作って欲しいんスよね～（ﾍﾗﾍﾗ）」みたいな感じで依頼しにいったら「ぜんっっっっぜん何作ったらいいかわからない。伝わってこない。出直してこい」と返されて枕を濡らしたことがあります。
依頼側がどういう準備をしてどういう依頼の仕方をするといいアウトプットが得られるかご意見を聞きたいです。

結局私はその後そのデザイナーさんに依頼するときはお菓子を持って行って一緒にお菓子を食べながらおしゃべりしてるうちに要件を吹き込むことでなんとか円滑にやりましたが、このままでは双方ともお菓子の食べ過ぎで太ってしまうのでスマートな依頼者になりたいです。

コミュニケーションこそ最も大事なことだとは思いますが、確かにお菓子の食べ過ぎで太って病気にでもなってしまったら大変です。「かっこよく」とか「かわいい感じ」とか、そういう情報だけではデザインを作ることはできません。デザインをするうえで必要な情報とは？それについては良くまとまった記事が過去にありましたのでご紹介させていただきます！

Webサイトのデザインができるまでに必要な情報とは？

ママ

2016.03.01

この記事に記載されている情報を全て取り揃えて持ってこないとデザイン作りません！ということではありませんが、デザインをする上では把握しておかなければならない情報です。足りないものはヒアリングで聞き出したり、デザイナーさんと一緒になってペルソナを考えたり、いくつかはディレクターとデザイナーが組んで情報を組み立てていくのも良いですね。

デザイナーとしては、案件に携わり始めるタイミングが早ければ情報の飲み込みもしやすく、認識の齟齬も少なく、更にクライアントや製品と触れていれば気持ち的にも入り込みやすく、その分良いアウトプットへと繋がっていくのではないかと思います。