2017.06.12

デザインとコーディングとWordPressの構築を同時に行うメリットとデメリット

Web制作

Maromaro の hoshida です。Web制作において、企画から WordPress の構築まですべてに関わっていると、ふとある思いがよぎります。

「これ、全行程同時にできるのでは？？」

なんだか無謀な感じもしますが、できる可能性があるならやってみたくなるのがクリエイターの性ということで、個人的にその1人全行程同時進行を行ったときに分かったことをまとめました。

おかしいよな…こんなにピンチなのに、オラ、なんだかワクワクしてきたぞ！！

工程

通常の工程は以下のようなものです。

企画
ワイヤー作成
デザイン作成
HTMLコーディング
WPインストール・構築
コーディングデータをもとにテンプレ作成
完成！

これを以下のようにします。

企画
WPインストール・構築
テンプレ作成
完成！

わー！文字数的には半分くらいになってるー！

実際の作業内容

消えた工程は頭の中で行う

上記の工程は見た目上のものです。実際は、「テンプレ作成」の部分に作業が濃縮しています。それを解体すると以下の様になります。

企画
（頭の中でワイヤー作成）
WPインストール・構築
（頭の中でデザイン作成）
テンプレート作成（テンプレートにHTMLコーディングで直接デザインを具現化）
完成！

ワイヤーを作成せずに構築を開始したり、デザインデータを作成せずにコーディングを開始するということは、事前に、頭の中だけで、それらを行うということになります。分業の場合ワイヤーフレームやデザインデータは次の工程の作業者に渡すために作成するわけですが、1人で全行程を行う場合その必要がなくなるということです。

ただしそれらのデータ作成は、チームの人間やクライアントに見せるために必要なだけでなく、実は自分自身がそれを整理するのにも大変役に立っているのですよね。後に触れますがそこがこの作業方法の大きな障害となります。

即座に更新が反映される環境が必要

構築によってデザインを作成していく場合、作業内容が即確認できる必要があります。WordPress のシステムはサーバ上でしか動かず、逐一FTPでアップするなんてやっていられないので、XAMPP などでローカル環境にサーバを構築しその中のテンプレートファイルを直接編集するか、Dreamweaver の機能でファイルの保存と同時に本番サーバへファイルをアップするなどの環境が必要になります。

クライアントへの確認は、一発目が完成品

また、普通の案件ではワイヤーフレームやデザインデータを作成した段階でクライアントに確認をするわけですが、この工程の場合はすべて出来上がった段階で見せることになります。

オラ、冷や汗がとまらねえぞ…！！

さて、以下より実際に行ってみてわかったことをまとめていきます。

メリット

デザインやソースに無駄がなくなる

よく「コーディングを意識したデザインをせよ」とか「CMSでの動作を意識したコーディングをせよ」といったことが言われます。この作業方法の場合、デザインの時にコーディングを意識するどころか、コーディングによってデザインを確かめていくことになるので、コーディングに即したデザイン以外なりえません。

余白一つとっても、コーディングしていて気持ちのいい数値で設定していくので、全体の余白のルール統一などがすんなりと実現できます。よって、無駄なブレの無いデザインが出来上がりやすいです。

同じようなことが「CMSでの動作を意識したコーディング」にも言えます。コーディングと同時に WordPress のタグを入力していくことになるので、ループで再現しにくいコーディングはどはそもそも行いません。

構築が速い

一旦完成するまでの速度は速いです。デザイン・コーディングにおけるオペレーションの時間が次の工程と重なっているわけなので当然と言えば当然です。

また、コーダーあるあるとしてデザインがコーディングで再現できなくて悩むということがありますが、それが一切なくなります。悩んだり詰まったりする時間が無くなるのです。再現が難しい場合は自分の判断でデザインを覆すことが容易なのでスムーズです。

そもそも、同時作業でなくとも自分でデザインしたものはコーディングが楽だったり、自分がコーディングした HTML をテンプレートにするのは楽だったりしますので、そのようなポイントは分業するよりもスムーズです。

画像データを極力使わなくなるので、現代的な構築になる

あらかじめ一枚絵のデザインデータを作らない場合、デザインソフトは極力開きたくありません。グラデーションやドロップシャドウ等の効果も、画像を作成して再現するよりもCSSで記述したほうが圧倒的に楽です。そのため結果的に、極力デザインをCSSで再現する今時の作りになります。

アイコンなども、デザインデータがある場合は画像で切り出すかアイコンフォントに置き換えるか悩むところですが、この作業方法の場合は初めからアイコンフォント一択です。 IcoMoon などで使いそうなアイコンをあらかじめ用意しフォントとして読み込んでおいてから作業を開始します。

デメリット

さて、デメリットです。多くの方の予想に反さずデメリットの方がでかいです。

細かいところが雑になる

ワイヤーとデザインのベースを頭の中で行うわけですが、頭の中では細かいところまではフォローできません。記憶力や想像力の限界があるからです。

具体的には、全体の雰囲気とか見出しのデザインとかは難なくできても、ボタンのホバーアクションなどまでは設計が及びません。そのため一旦出来上がったときにホバーアクションが無いなどの、雑な出来になりやすいです。

遊びのあるデザインになりにくい

構築をしながらのデザインは、数値が統一されスッキリとしたデザインとになるというメリットを述べましたが、裏を返せば挑戦的なデザインは難しいということです。普段あまり作らないタイプのデザインや設計が求められる場合にはやめておいた方が良いでしょう。

短期決戦向き

人間の記憶力は当てになりません。頭の中だけで行う工程がある以上（メモなどをとったとしても）時間がたつと一度決めたことを忘れていくので、その前に一気に片を付ける必要があります。もし一旦忘却すると、ワイヤーやデザインのデータが無いために構想の作業をもう一度行うことになります。時間をかかったりボリュームが大きい案件では逆に工数が増えてしまうでしょう。

頭が疲れる

デザイン、コーディング、テンプレート構築を同時に行うわけなので、脳みそのメモリーをものすごく消費します。完成デザインを思い描きながら、HTMLの構文やCSSのプロパティンを思い出し、かつ WordPress のタグを思いだすわけです。

同じ時間作業しても疲労感が大きいです。暗算が苦手な人は絶対に向いていません。

同時にやるので集中しにくい

特にデザインに悩みだすと大変です。「確証はないが試しに一旦作ってみる」という作業でいちいちコーディングが発生するので、工数が膨らんでいきます。デザインに悩みそうだったらやめておきましょう。

またプログラム部分では別の問題が生じます。時に PHP と JavaScript を交互に書くような事態になるわけですが、これは凡ミスを連発することになります。

写真データは調整がすごく手間

デザイン上に、メインイメージでも記事のサムネイルでも写真を用いる場合、その内容やサイズを後から調整するのがなかなか大変です。

なぜなら、記事のサムネイルなどは WordPress に登録することでサーバにアップするので、もしサイズを変えるとなった場合は WordPress の設定でサムネイルで使用するサイズを変更し、再生成しなおすなど手間がかなりかかるからです。

思い描いているデザインのイメージが数値と直結していない場合はかなり工数がかかってしまうでしょう。

まとめ

この方法が可能な条件はかなり難しい

必要な条件やリスクはまとめると以下のような感じです。

強力で自身に満ちたデザインの設計思想がある
出し戻しが発生しないクライアント、もしくはクライアントが自分自身
他に同時進行すべき仕事がない
全技術におけるある程度の熟練度を持っている

明確な、完成品のデザインのビジョンが必要です。悩みそうな気がしたらやめておきましょう。

デザインと同時にテンプレートが出来上がってしまうので、もしデザインを大幅に変更することになった場合、ロスがすさまじいことになります。出し戻しがない、あったとしてもごく細かい部分、という条件でなければできないでしょう。

脳内のメモリーを対象消費するので、作業がこれしかない、という場合にのみ可能でしょう。

作業スピードや悩みの少なさは、その技術の経験値が高いからなせる業です。まだまだ不安な技術があるのなら同時進行はやめておきましょう。ただ、苦手な作業のみ分化したり分業したりするのは良い手かもしれません。なお、実際やってみて特に同時進行に無理があるのはやはりデザインです。デザインだけはデータを作るとか、分化する方が無難でしょう。