コーダーを支配するデザイン制作のカタチ
デザイン通りのサイトを作ってもらいたい
Web デザイナーという仕事は、なかなか人に理解されにくい難儀なお仕事です。
最初に出した案が受け入れられず二案三案作った挙げ句に最初の案に戻ったりとか、細かいバランスで作った要素をお客さんのペン入れで強引に変更され「う〜ん、なんか違う」と言われたりとか。
ルックはともかくフィールはなかなか言語的に説明のつけづらいところもあり、人知れない苦労を積み上げてデザインデータを作っていくわけです。
が、そんな苦労もつゆ知らず今日では、「ピクセルパーフェクトなんてありえない」といった言動が飛び交い、せっかく仕上げたデザインもコーディングの都合で乱雑に実装されてしまう、みたいな場面も多々あります。
実装の都合はもちろんあるものの、実装担当者のモチベーションに引きずられてしまえばデザイナとしての死はもうすぐそこまで近づいています。実装担当がなんといおうと「いいデザイン」で「いいユーザ体験」を届けるのがデザイナの使命であり、やりがいであるはずです。
とはいえもう「ピクセルパーフェクト」なんて推し進めてもパワハラ扱いされかねないこの世の中、少なくともコーダーと円滑な関係を保ちながら無理なくデザインの完璧な実装を進めていくために、どのようなデザイン制作ができるか考えてみましょう。
カンプの役割
カンプの役割を「Webデザインの完成版」と考えるのはもう諦めてしまいましょう。
カンプは作っても、ピクセル整合的なサイト制作を行ってもらえる保証はありませんし、コーダーに過度な負担を欠けてしまいます。
それよりも重要なのは、「デザインルール」の策定です。ルール化されたデザイン要素の組み合わせでWebサイトを作る、カンプはそのプレビュー版程度の位置づけにすれば気も少し楽になります。
カンプで制作品質を縛るという発想を、デザインルールで縛るという形にシフトして、明示的な制作品質のルールを定めていく、というのが大事な考え方になります。
デザインルールの作成は、コーディングの円滑な進行にも直結します。ここでルールは別に CSS の知識を必要とするようなものではなく、あくまでデザインのルールの話です。
デザインのルール・要素の扱い方を予め明示しておくことで、コーダーが楽になるだけでなく、デザイン実装を完全に強制する「支配力のあるデザイン」を作ることが可能になります。
デザインルールの作成
デザインルールはシンプルに「デザイナの脳内の言語化」です。特別なことを考えたり、整理する作業が必要なわけではなく、いつもの制作中に考えていることをそのまま書くだけで足る作業がほとんどです。
実際にルールを作成していくにあたって、どのような作業が必要なのか、一つづつ確認していきましょう。
フォントサイズのルール化
サイト内で利用する全てのフォントサイズは、全て洗い出して一覧化しておきましょう。可能であればそれぞれのフォントサイズに名前をつけてあげるのがいいでしょう。
コーディング上、ルールで決められたフォントサイズを以外の値をフォントに適用してはいけないことを伝えてください。これでフォントサイズのバランスは 100% 再現されるはずです。
カンプ上、パット見で判断しづらいフォントサイズの違いは、カンプの左右にト書きで注意書きを入れるといいでしょう。フォントサイズに名前をつけておくと、このト書きをつける作業が楽になります。
色のルール化
色も一覧化してルール化します。名前をつけたりト書きをつけるのもフォントサイズ同様です。
非アクティブなどの際に用いられる pale 系の色を色コード指定で実現するのかopacity で表現するのか、などのルールについても明記しておくと、デザイナのイメージ通りの色表現を適切に反映してもらえるでしょう。
スペーシング・サイズに関するルールの明記
サイト全体で利用する共通のマージン・サイズのルールを明記して、コーディングに適切に反映してもらいましょう。
見出し要素は上下に xx px のマージンを持っているとか、カードのUIは横幅が 150px で内部に 5px のスペースを持っている、とか。
特にレスポンシブのサイト制作では、150px なのか 50% なのかを明記しておくことが重要です。
固定サイズか画面比率に応じたサイズ化を明記しておかないと、画面サイズが拡大しても画像サイズが変わらずに簡素な写真訴求になってしまったり、スペーシングで用意した数px程度のスペーシングが画面サイズに比例してどんどん間延びたり、といった制作が上がってくることになります。
アラインメントに関するルールの明記
要素のアラインメントに関するルールも明記しておくと良いでしょう。この場合、わざわざテキストでト書きを用意しなくても、カンプ上にガイド線を突っ込めば十分です。
サイト要素を整列させるためのコンテナを想定している場合にもコンテナのガイド線を添えて、サイト全体のコンテンツをどのようなカタチで整列させるべきかの指標を明示しておけば、要素がずれずれのコーディングを完成として持ってこられることはなくなるでしょう。
デザインルールで制作の何が変わるか
デザインルールを設けることでコーダーの負担は増えるでしょうか？いえ、むしろ制作に関する負担は格段に楽になります。面倒なカラーピックやピクセルピックは不要になり、デザイナーから受け取ったルールの殆どは SCSS などを使って統制することができます。
デザイナーに必要な作業は、頭の中でデザイン制作前に行っているデザインルールを資料に起こす事だけです。あくまで制作チーム向けの内部資料なので細かい部分に拘って作る必要はありません。伝わればOKです。
極論、カンプの制作も細かい部分の精度にこだわって制作したり、ミスがないかのチェックをしたりする必要もないでしょう。カンプはあくまでルールのプレビューとしてクライアントとのイメージ合わせさえ取れれば役割は十分果たすものになります。
ルールがしっかり定められていれば、異なるフォントサイズやスペーシングのミスも、「ルールと違う」というところでコーダーから事前に確認をとってもらえることが期待できますし、デザイナーが不在でも「とりあえずルール通り制作を進めて後で確認」ができるようになります。
デザインルールをカンプに添える習慣が身につけば、カンプよりもルールやト書き・ガイドの方が情報量がお送りなります。Xd などを使っている場合には、アートボードを並べてプレビュー版の無地のカンプ(顧客確認用)とト書き・ガイドで埋もれたコーディング指示用のカンプとの２つをセットで管理するようにすると良いでしょう。
なにはともあれレビューは必要
ルールを作成することで、デザイナーの意図は伝わりやすくなり、コーダーの負担は激減します。
しかし、それでもやっぱりデザイナーの意図通り 100% のサイト制作には及ばないかもしれません。そういった問題はコーディングレビューを通じて適宜改善していきましょう。
コーディングレビューで重要なのは漸次的に改善していくという視点です。仮に自分のデザイン意図が全く適用されていないコーディングに遭遇したとしても、一度にたくさんの指摘を返すのは間違いです。なぜなら指摘事項を一覧化して管理しリストに沿って修正を行っていく作業は、それ自体が非常に負担になるからです。
レビューは別に１度で済ませなければならないわけでもなく、仮に急いでいたとしても一度に大小様々な指摘を押し付けるのは管理上の問題で却って進行の妨げになります。
レビューチェックでは、サイトの出来具合に応じて優先度の高い修正から伝え、 1-2 日程度でまとめられる作業量に収まる形で進めると制作上の課題管理がスムーズになります。
デザインルールは、デザイナーとコーダー間のコミュニケーションツールとして非常に協力な「仕組み」になります。チームで協力しながら、お互いに負担のない形でコーディング制作が進められるようなワークフローを模索してみてください。
Discussion