デザイナーとコーダーとの交わらない思考感

ホームページやWEBサービスを受託する際に、クライアントはデザインを異常なまでに気にする傾向がある。 以前開発受託した会社の社長は若手で自分の思考を形にしたいが、プログラミングができないので、依頼されたのだが、機能がロンチしても、フォントサイズや、プルダウンアニメーション、モーダルのふらっと現れる感じが再現できないと、恥ずかしくて販売が出来ないと言って、ロンチしてから、販売開始まで半年以上かかったというこだわり者がいたのを覚えている。 もちろん、自分の会社のホームページは、今では名刺と並んで、会社と自分の顔になる部分であるから、見た目も含めて誰が見てもカッコよくて、イケてて、分かりやすくあってほしいと考えるのは当然だ。 なのでご依頼されるみなさんは、「ホームページのデザインまで一括でやってもらえるんですか？」という質問を投げかけてきますが、デザインは専門業者に任せたほうがいいと考えるのは、非常に危険が伴うことをお伝えしています。 もちろん、デザイン専門でやっている人はカッコいいポートフォリオを作っていて、人をみてもイケてる人が多い（主観が入ってる？）のですが、いざそうしたデザイン専門業者の方とタッグを組んでホームページ制作に取り掛かると非常にやりにくいったらありゃしない事情がたくさんあったので、今回はその備忘録も兼ねて共有します。

デザイナーにはこだわりがあるモノ

多くの会社で、デザイン担当者とプログラム担当者が分かれて仕事をしているケースが多いようです。 もちろん、専門作業のために部門を分けたりチームを分割したりして、それぞれの専門分野の知識を深め合ったり、情報共有をするという事を考えると当たり前の構造なのですが、こうした組織の多くは、デザイナーとプログラマーの思考が水と油のごとく反発し合う状態になりがちなんですね。 デザイナーは、UIという言葉をたてに攻撃体制になっているし、プログラマーも「仕様との納期」という言葉の呪縛に翻弄されて、横線します。 ここで考えたいのは、「デザイナーの奇抜な見た目のアイデアは出来る限り採用する」という思考にならないと、デザイン専門部署の存在意義がないでしょう。 デザイナーは「カッコよさ」だったり「クール」という言葉に弱く、自分もいかにイケてるWEBページを作るかに命を掛けています。 一方プログラマーは、前例の無い、その奇抜なデザインを１から構築するのは、非常に骨が折れるし、完成後の効果がいまいち理解できないのもよく分かるが、これまで経験したことが無いから出来ないと言っているプログラマーも意外と少なくない。 まずは、デザイナーの存在意義と、彼らの主張を認めてみて初めてプロジェクトが進むという事を理解しましょう。

デザイナーのコミットラインとコーダーのコミットラインの違いを把握せよ

次に考えたいのは、実際の仕様にあたるところで、コーディング知識の乏しいデザイナーは、見た目はいいが、実際にホームページになった時は見た目以上に機能を考えていないと痛い目を見るという知識不足のデザイナーがチーム内にいると、プログラマーがデザイナーの尻拭いをしなくてはいけなくなります。 多くのデザイナーがphotoshopやillustratorのみで自分のデザインを形にして、それをそのままプロジェクト責任者の了承を得て、プログラマーに送ってきます。 実はこの時点でHTMLやCSSの知識が無いと、単なる静止画が送られてきて、実際にホームページになった後で「こんなはずでは無かった・・・」となってしまうケースも少なくありません。 具体的に言うと、デザイナーは「フォント」にこだわります。 お気に入りのフォントや、最近見つけたイケてるフォントをとにかくたくさんブックマークしていて、ページ内のあらゆるところで、その個性を発揮しようとします。 一方プログラマーは、ページの読み込み速度が遅くなる事を懸念して、1ページ内に複数の種類のフォントを実装しようとは思いません。 以前、会社で経験したケースでは、デザイナーが指定のフォントをそのままホームページに掲載したところ、フォントのダウンロード容量が40MBもあり、スマートフォンでの表示が極めて遅くなってしまう事態になったこともありました。 部分的にしか使わないのであれば、画像対応するなり、svgでクオリティを上げるなりするスキルは必要ですね。 また、デザイナーの圧倒的に抜けている部分として、WEBブラウザのイベントに関するデザインができる人が圧倒的に少ないということです。 PCで操作する場合に、ページ内にリンクやボタンを設置した際に、hover（カーソルが上に来た時９やactive（クリックされた時）に画像がピクリとも動かないのは、全くもって操作感が失われています。 また、こまかなモーダルダイアログやら、条件により切り替わる画像や、見た目も、プログラマーは足りていない仕様はその場で構築しながら作業することがほとんどです。 実際に、全ての仕様をデザイナーが構築するのは難しいとは思いますが、こうした仕様作成はやはり現場経験がモノを言うに違いありません。 新人デザイナーは、先輩デザイナーうやベテランプログラマーの言っていること、行っていること、思考回路などを、背中を見ながら学び取る以外に全てはありません。 あとは自分で痛い思いをしながら学習するのがいいでしょう。

WEBページはブラウザで表示してなんぼ

WEBページにおけるデザイン要素でイベントは触り心地という絵に書いたデザインでは表せない思考が生み出されますが、実際のWEBページは、インターネットブラウザで表示されるときに、その環境によっても様々な違いが生まれます。 具体的には、小さなノートパソコンで閲覧する場合と、大きなモニタに接続されたPCで画面いっぱいで表示する場合で、同じ１つのソースコードでなくてはいけません。 もちろん、システム側でリダイレクト処理などをするケースなどもありますが、最近ではスマートフォンや携帯電話なども考慮しなくてはならず、ブラウザと一言で言っても、大きさも違えば、アプリケーションが全く違うために機能も違うためにコーディングを特別にしなければいけないものもあります（主にIE） こうした違いを理解して実装して初めてホームページは人に見てもらえるのです。 そもそも、インターフェイスが崩れているホームページは、誰も見る気がせず、開いた直後に離脱する事になるでしょう。 そういえば、ウェブブラウザといえば、最近では、PS4やwiiU、3DSなどのゲーム機などでもブラウザが搭載されているので、そういう機器で見たら・・・と考えると、プログラマーとしては恐ろしくなってきますね。

出来るデザイナーの条件

僕の知り合いで「できるデザイナー」というのが過去に1人だけ存在しました。 そのデザイナーは、元プログラマーという事もあり、デザインモックアップをHTMLソースコードで納品していました、 実際に困難な仕様の場合は、海外のライブラリなどを自分でコーディングして納品していたので、プログラマーはそうした連携やフレームワーク側に専念できるという非常にチームのスピードが早く、クオリティが高い仕上がりになったのは言うまでもないでしょう。 こうしたデザイナーばかりでないことはよく分かるのですが、「デザインだけやっていればいいものができる」と考えているデザイナーよりは、プログラムの勉強を怠らないレベルの開発者レベルに成長することを目標にできると、よりよい未来が待っているでしょうね。 逆にプログラマーも「絵がかけない」とか言っている場合ではなく、デザイン理論ぐらいは理解すべきでしょう。 プログラムとサーバーがさわれて「フルスタック」などと言っているようではまだまだヒヨッコです。 デザインもマーケティングもできて初めてフルスタックなのです。 そこまでできたら、起業したほうがよりいいですけどねwww