Webデザイナのキャンバスはどこにあるかを考える

3 min read読了の目安(約2300字

DESCRIPTION

  • インブラウザデザインを見直そう
  • Webデザインの成果物って何だろう

本文

クラウドソーシングにおける「Webデザイン」の納品物の違い

Webデザインの納品物って何でしょうか。もちろん「現場によって、契約によって違う」というのが模範解答ではあるのですが、クラウドソーシングにおいて面白い違いをみつけました。最大手2者の「CrowdWorks」と「Lancers」のカテゴリ「ホームページ制作・Webデザイン」の依頼の納品物の違いです。

CrowdWorksは納品物を複数選択することができます。以下の通りです。

イラストレーター形式とフォトショップ形式はどちらかを選ぶのが現実的ですが(そのままインポートしても仕方ないですし...)、その他はそこから出力できますので実質同一ファイルです。

しかし、Lancersは!納品形式(方法)は以下の通りです!

「Webデザインの納品物は基本的にはHTML/CSSのファイル群なんだからファイルの受け渡しだったらZIPにまとめないといけないでしょ」「サーバへの受け渡しもあるよね」という発想であり、CrowdWorksとLancersでWebデザインの成果物の考え方の違いをみることができます。

CrowdWorks Lancers
画像形式 HTMLファイル

ちなみにLancersも依頼内容をバナーなどにすると、CloudWorks同様に画像保存形式を質問する形に代わります。どちらが正しいというわけではないのですが、私個人としては圧倒的にLancersを支持します。

インブラウザデザインという手法

Webデザインのツールといったら何を思い浮かべますか?

少し前でいえば、Adobe Illustoratorだったでしょうか。今では、様々な「UIデザインツール」といわれるものがふえ、Adobe XDやSketchなど新興の人気UIデザインツールが覇権を争っています。容易なプレビュー機能やモック機能、共有機能などがついており、PhotoShopやIllustoratorといったデザインツールと比べダントツにデザイン作業がしやすいとか。

しかし、私は声を大きくしていいたい。

それ、ブラウザでできますよ?

Webサイト全体1枚の画像で表示するような、レスポンシブ無視、アクセシビリティ無視、検索bot無視の構成だとデザインツールの表示とブラウザの表示は一緒ですが、コーディングに落とし込むならデザインツールとブラウザのレンダリングは異なります。UIデザインツールで(機能上)表現できないことがブラウザでできるかもしれませんが、その逆はありえません。UIデザインツールでどれだけすばらしいデザインをしても、コーディングに落とし込めなければ意味がないのです。

古くから「インブラウザデザイン」という手法があります。

UIデザインツールが目指してるのは、言ったらこの代替機能でしかありません。画面遷移?ブラウザで実装したらもちろんあります。共有機能?自動デプロイを設定してURLを共有しておいたら進捗自体を確認してもらえます。

Adobe XDがアニメーションをまるまるつくってゲームを出力する機能があるというのは一旦置いておきます。

Webデザイナのキャンバスはどこにある

デザインツールを使えばGUIのみでデザインを起こせるかもしれません。しかし本質的にそれは手元で書いたラフスケッチと同様です。Webデザインではなく、Webでデザインをするための指示書であり、メモ書きに過ぎないわけです。とLancersは言ってるわけです。(保身)

けれど考えたら結構当たり前の話で、石膏像をつくるデザイナーが「石膏像のデザインです」と詳細な石膏像スケッチを納品するわけがなく、当然石膏像を納品します。デザイナーが「こういう仏像をつくればいいです」と仏像のデッサンだけ納品するなら、それはデザインを納品してるのではなく、アイデアを納品してるわけです。

冒頭で「どちらが正しいというわけではない」と書いていますが、現在のWebデザイン(特にそういうスクール)では、デザインツールに極振りしってる感があって、インブラウザデザインまでとはいわないですが、その中間点というか妥協点をもっと探すことが大事かなと思っています。

それではまた。