紙のグラフィックデザイナーでもWebデザインは全然できるよ、という話

この記事は、2019年4月19日に書かれたものです。

こんにちは、デザイナーの多田野です。

早いもので、入社から4ヶ月が経ちました。

最初は「グラフィック出身のわたしが、Web業界でやっていけるのだろうか…」と不安に思っていましたが、すっかりランディングページの情報設計やらデザインやら、UIコンポーネントのいろはなど板についてきました。

ひょっとすると、わたしと同じ紙出身のグラフィックデザイナーの方で、『Web業界に興味あるけどやっていけるかどうか不安だなー』と感じている方がいるかもしれません。足踏みしている方がいらっしゃったら、『まったくその心配はいらないですよ』と言ってあげたいですね。

グラフィックデザイナーというと広告の世界を生業としている方が多いですよね。そんなわたしも最初の会社は広告代理店でのグラフィックデザイナーでした。

そこで今回はグラフィックデザイナーの目線で、『グラフィック→Webへの転向、最初は不安だったけど、全然いけるぜ！』ということをお話したいと思います。

紙とWebの違い①「ツール編」

・グラフィックの場合

グラフィックデザイナーの相棒というとIllustratorとPhotoshopですよね。あってもカタログなどのページもののデザインでIndesign使うくらいなのではないかな、と思います。

新人時代、先輩にがりがり教えてもらってたのが懐かしいですね。ショートカットとかレイアウト、文字組みとか。

そんなグラフィックデザイナーの相棒達ですが、Web転向するとどうなるの？って気になりますよね。

・Webの場合

イメージでは、デザインドラフトのようなものをイラレみたいなツール(昔のやつだとDreamweaverのような)で作って、それをHTMLとCSSを書きながら仕上げていく。そんなイメージがありませんか？実際もその通りで、大体、そんな感じです。

ただHTMLやCSSを書いていく工程はフロントエンドエンジニアさんがやってくださる場合もあるので、デザイナーとしてやるべきことは絵作りのパートが軸になることが多いと思います。

ではでは、その絵作りではなんのツールを使っているのか、本題ですね。それは2019年4月時点では、

Sketch または Figma または Adobe XD

です。

え？三つもあるの？と思うかもしれません。

これらは競合関係にあるアプリケーションで、グラフィックデザインにとってのIllustratorのように、3つともUIデザインにおいては主流のツールです。企業によって使っているツールが変わるという認識です。しかし環境によっては、今でもIllustratorとPhotoshopを使ってる企業もあるようです。これらがスタンダードというよりかは、どちらかと言うとトレンドに近いニュアンスかもしれません。

結局、どのツールを覚えればいいんだ？となると思いますが、驚いたことに、これらの3アプリケーションはほとんど操作方法やデータ作りの概念が同じです。ショートカットもほぼほぼ同じ。なんならイラレのショートカットと似ている。

入社してからツールを知ったのですが、ほとんど違和感なく使うことができましたよ。Illustratorのベクターデータとも互換性があるので、アイコンなどの作り込みはIllustratorで、というのもできちゃいます。操作動画とかたくさんYouTubeとかにあるので、1分ものを流し見するだけでも、『あ、これならできるな』と思っていただけるのではないでしょうか。

紙とWebの違い②「プロセス編」

・グラフィックの場合

グラフィックデザイナーの仕事のプロセスだと、営業といっしょにクライアントからヒアリングして、その後に広告だったらコンセプトやら方向性を決めるミーティングという流れですよね。で、ミーティングで決まった内容でデザインをして、デザイン修正を繰り返してOKがでたら、印刷所に入稿して、色校みて、校了して終わり。

かなり省いてますが、山あり谷ありのジェットコースターのような印象だなと感じています。

・Webの場合

ではではWebの世界ではどうやっているのか。
少なくとも自分がいるクラウドワークスでは、まずはプロジェクトのキックオフにミーティング。どうやって進めていくのか、ロードマップをえがく。それに基づいて、UXリサーチなどで課題を見つけたり、それが合っているのかを検証する。課題を解決する試作(プロトタイプ)をデザイナーがたくさん作り、ユーザーに見てもらったりチームで検証して、デザインの輪郭を少しずつ形作っていく。それが決着したら実装フェーズに突入、という感じですね。

アウトプットは違うけど、

ヒアリング=検証フェーズ、チームミーティングフェーズ、スケジュール=ロードマップフェーズ、リサーチフェーズ、プランニングフェーズ。

そして、ひたすらデザイン＝プロトタイピングフェーズ、そのあと印刷＝実装フェーズ。

細かくはやっぱり違うんですが、基本となる進み方は似ています。

向こうをジェットコースターで例えたので、こっちはしいて言えば、「迷路」ですかね、出口が見えてくるまで探し続けるような印象です。

紙とWebの違い③「マインド編」

・グラフィックの場合

グラフィックデザイナーの心情は、もちろんそれぞれ違うとは思うのですが、

「細部に神が宿る」「絵で魅せる」ではないかなと思います。

もちろんクライアントのためだったり、売上のためにがんばっている営業さんのためにもデザインはすると思います。でもそこにはグラフィックデザイナーとしてのプライドとして、デザイン上ゆずれないものってありますよね。

そのプロフェッショナリズムは、あの業界にいたからこそ手に入った財産だなーと今では思っています。

・Webの場合

ではWEBの世界ではどうかというと、もうカッコいいとしか言えないモットーが業界全体から醸し出されています。

それは「ユーザーファースト」「ユーザーのために」。

数字で結果がダイレクトに返ってくる環境で、ユーザーインタビューを率先して取り入れている業界だからこそ、この心情の深みをより感じます。だれのためのデザインか？やはりそれは「ユーザー」ですよね。

広告だとクライアントがいて、アートディレクターがいて、クライアントの先にお客さまがいて、このデザインはどこにどのくらい刺さっているのか、誰のためのデザインなのか、ちょっと分からなくなる時がありますよね。Webの世界では、ユーザーに刺さった度合いが数字で分かるからこそ、ユーザーを中心にした設計ができるのだろうと感じています。

おわりに

こうして振り返ってみると、全く違うようでも、けっこう通じる部分も多々ありますよね。

文末は共通点がこんなに！で締め括ろうと思ったのですが、割とそれぞれの違いを書きたくなってしまいました。でもグラフィックデザイナーの方に『Webも面白いよ』と伝えたかったので、それが伝わってれば嬉しいです。媒体は違えど、デザインという意味では一緒ですよ。

なので、『Web業界に興味があるけど踏み出せないというグラフィックデザイナーのあなた！ぜひWebの世界に入ってみませんか？』

クラウドワークスではグラフィックからWebの世界に第一歩踏み出したい方、大歓迎です！

グラフィックデザイナー向けにここまで書いてきましたが、グラフィックデザイナーではない方でも、ここまで読んでくださった全員に感謝です。

ありがとうございました！