🦁

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

2020/09/19に公開

web制作

webデザイン

クラウドソーシング

idea

DESCRIPTION

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

本文

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

Webデザインの納品物って何でしょうか。もちろん「現場によって、契約によって違う」というのが模範解答ではあるのですが、クラウドソーシングにおいて面白い違いをみつけました。最大手２者の「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がアニメーションをまるまるつくってゲームを出力する機能があるというのは一旦置いておきます。