IllustratorでWebデザインだ！そしてデザイナーとの協業について考える
勉強会に行ってきた
広告デザイン事務所で、グラフィックデザイナーがイラレで作ったカンプを見て、さてコレをどうやって画像化してコーディングしようか…と悩む日々です。
とはいえ、私もWebデザインの正しいワークフローなんて知っているわけではありません。Fireworks?なにそれおいしいの?
Photoshopで作ってよ！と思ったりもしたところ、最近はそうでもなく、イラレでWebデザインするという流れができ始めているようです。
ただこの本を買ったんですけど正直ピンとこなかったんですよ。 Web制作者のためのIllustrator＆ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術 Web制作者のための教科書シリーズ
俺たちのイラレで正しいWebデザインのワークフローをちゃんと勉強しようと、WordBench 奈良〜Illustratorデザインからテーマ作成 & おしえて!デザイン 奈良編〜に行ってきました。
その感想と今後どうして活かしていきたいかを書こうと思います。かなり個人的な意見や感想になります。
勉強会の先生は川井昌彦さんです。30分で熊本地震の支援サイトを立ち上げられた方だ！
HTMLの構造からイラレでデザインする
(イラレは)パーツ作成だけてなくHTML部分もデザインできる
よくいわれる「ピクセルを整数にしよう」とか「初期設定大事！」といった話も少しありましたが、それがメインではなくて、HTMLの設計をイラレの段階ではじめる。イラレデータの構造をHTMLの入れ子構造を意識すると後で自分がわかるようになるとのことです。ハイパーかしこっ！
かしこっ！と思ったポイントを箇条書きにしてみます。今回はTips記事ではないのでご勘弁を。
- レイヤーや段落スタイルに
bodyとかheaderといったネーミングにし、構造化する。 bodyというレイヤーには背景など変化しないものを配置- スタイル機能と外部CSSは考え方が近い(スウォッチ、段落スタイル、グラフィックスタイル)
bodyという段落スタイルをベースとして作成し、その他パーツのスタイルはコレを複製して作成- 共通部分は「シンボル」で作成→１個修正するとすべてのシンボルに反映される！
- 「スウォッチ」はグローバルにしないと威力半減→SASSで使うときにスウォッチを変数として使える！
- WordPressテーマ制作なら、テンプレート＝アートボード
イラレの機能を駆使し、ルールを「定義」していって、ページを設計していくというイメージです。知らなかった機能も満載でした。
あとCC2015から追加された「アセットの書き出し」は無計画に作られたイラレデータを画像化するときにめっちゃ便利です。弱点はあるけど。
Webデザインとグラフィックデザイン
かしこっ！ポイントをHTMLの知識のないデザイナーに実践してもらおうなどとは難しい話です。
聞いてきたWebデザインのワークフローで、重要視していることは何かなと考えると、グラフィックデザインとの違いが、少し見えてきました。
- Webデザイン
- ヘッダー、見出し、ボタン等のパーツなど、「点」を作っている
- コンテンツ、画面サイズは変化することを念頭に置いている
- 後で使いまわせることを考える
- 構造化されていて、法則性がある（スタイルガイドなど）
- グラフィックデザイン
- 空き感などページを「面」で見た感じの気持ちよさを考える
- 文字にこだわる
- ビジュアルにこだわる
- 伝えることによって表現を変える
どっちがどっち、と言うよりはこの２つはリンクしていて、「伝えたいこと」「提供したいこと」「その後の運用」によって作る時の優先順位が変わってきます。
例えば、LPだと、「面」で見た時は気持ちが良いし、コンテンツに対して最適解のデザインで作られているのですが、変化に弱いのです。
WordPressを使ったサイトは上記のWebデザインの要素と「面」で見せる魅力とのバランスが重要になります。
グラフィックなデザイナーとのWeb制作
勉強会のまとめで、イラレというツールは、テキストメインのデザインをする上では強力だが、Webに特化されたものではないので、他のWebデザインツールをチェックしておいたほうがいいとのことでした。MacならSketchがあるけれど、川井さんはWindowsで、正直消去法で利用しているとのことでした。
またこれからのWeb制作について、
テンプレート構造、HTML構造、CSSについてある程度の理解がないとデザインするのは難しい
コレに関しては私も賛成で、だからこそWebデザイナーという職能があるわけです。デザインは伝えたいことは言わずもがな、構造を理解するということが必要ですから。
とはいえ、グラフィックデザイナーもWebやるんならいろいろ勉強せぇと言いたいですが、そのことばは一旦飲み込みます。
たとえば、勉強会で学んできた構造的なカンプづくりを、まずはみずからコーディングに入る前に実践してみたいと思います。そうすると実装や画像処理に入ってしまう前にデザイナーにできないことをフィードバックできそうです。（これできる?で先に実装をしないといけないケースもありますが）
紙媒体とWeb媒体と一緒に作って!と求められつつ、Web制作についてはHTML構造、CSSについてある程度の理解なしにデザイナーの思い通りとか無理!な状況で、デザイナーが勉強してフルスタックになるか、コーダー（実装の人）とデザイナーとで分業じゃなくて協業しないと難しいとつくづく思います。
私の環境が比較的自由に意見がいえるからそんなこと言えるんじゃ、でして、立場や制作体制上難しいケースもあるかと思いますが、イチなんちゃってWebデザイナー（というかコーダーじゃ）としてはそういう姿勢で制作ができればいいな〜。
Webのしくみなどわかっちゃいないデザイナーはいるし、勉強してもらいたい気持ちはあるけれど、グラフィック的な魅力あるものを作れる。すべてを再現するのは難しくても、デザイナーの意図を理解して協業できるコーダーでありたい。むずいけど。
— さかがみ (@skgm26) 2016年11月19日
参考文献
(第2回「D2D WEBグラフィックツール デザインワークフローの転換」に参加してきました | Cherry Pie Web)https://www.cherrypieweb.com/weblog/technical/20160918164136.php
ツール選択について様々な立場の方が提案されていて面白いです。
