コードノート

コードノートはwebを中心にテクノロジー・クリエイティブを伝えるWebメディアです。コードリンク代表、片岡亮が執筆しています。

効率的に思考に形を与えるために。WordPressやテンプレートを使ったサイト制作の話

f:id:moba13:20170523205512j:plain

 

先日、弊社サイトの簡単なリニューアルをしました。

www.codelink.co.jp

このサイト、割と今っぽいデザインですが、実はこれ海外のデザインテンプレートを購入しそれを利用した制作になっています。

とはいえただテンプレートを文字を入れただけ~というわけでもなく、それをゴリゴリとカスタマイズしています。ベースとしてテンプレートを利用したというかんじですね。1から作るよりはかなり楽になっています。

多くの制作物はテンプレ化されている

今回はテンプレートを外部から調達しましたが、多くのweb制作って実際テンプレートを利用して制作されているようなものです。

外部のテンプレートでなくとも、以前の自分の制作物をレゴブロックのようにバラバラにして、新しい案件でも使えるブロックは組み込んでいくことで制作を効率化します。

例えばお問い合わせフォームなんてどのサイトでも設置します。それを毎度一から作る意味なんてありません。CMSとして有名なWordpressもサイト管理・更新部分をテンプレート化した外部リソースですしね。

制作スピードを上げるためにも、webデザインであれなんであれ、テンプレート化していくというのは重要なポイントです。

あーWordpressねって言われる問題

しかしテンプレートと手作業の主従関係として、テンプレートが主となってしまうと、「テンプレートっぽい」「なんかしょぼい」という残念な仕上がりのデザインが出来上がることになります。

それこそ最近は先ほど言ったWordpressの一般認知も進み、それを使ってちゃちゃっと簡単に作られたサイトも増え「あーWordpressね。あのブログっぽいサイトになるやつでしょ。」みたいな反応も多いです。

でも一見そうとはわからない構成のサイトの裏側でもWordpressは使われていることがあります。

irritantis.info

CMSでもなんでも、見え方は使い方次第です。でもCMSのデフォルトの形ををそのままに、適当に使われた成果物だけがその代表として一般に捉えられてしまうのを残念に思っています。

テンプレート特有の手抜き感

Wordpress同様、webサイトのデザインテンプレートというのも同様にアフィリエイト目的等のショボいサイトで使われるもの、みたいな印象があります。

しかし、多少なり探せば商業的なサイトでもほぼ実用に耐えるレベルのテンプレートも多数販売されています。

HTML Website Templates from ThemeForest

ですが使うとわかるのですが、そんな優れたテンプレートであってもそのまま使えばOKということにはなりえません。

テンプレートに文章を入れ込んだだけの状態の時はやはりテンプレ特有の手抜き感が感じられてしまいます。うちのサイトも最初そうでした。

それはなぜかを考えるのですが、手抜き感というのは個性が見えない時に感じるものなのかもしれません。テンプレートはどんなサイトでもとりあえず使えるようにするため、できる限り個性や色を殺しているからそのまま使うと手抜きに見えるのでは、ということです。

ビジネス用テンプレート、みたいなものがありますがあれもビジネスっぽさの中で一番個性を抑えたデザインをしています。ただ配色が青で統一されてるだけ、みたいな。

結局、良し悪しでなく、ベーシックな「型」を提供するのがテンプレートというものです。それだけでサイトが作れる!と思って使うこと自体がそもそも問題です。+αをして使うことが前提として設計されているものですから。

存在しないものに形を与えるために

では+αするものとはなんでしょうか。

よくある言葉になりますが、通常サイト制作をする時には必ず出てくる、コンセプトやテーマといったものがそのベースになります。

通常の制作であれば自然とまずその話になるので、あえてコンセプトということを意識することも少ないかもしれません。でもテンプレートを使うとなるとそこの話が吹っ飛んで「とりあえずそれっぽくしてくださいよ。」みたいな流れになってしまいます。

その辺りの話は以前書いたロゴ制作の時の「材料集め」のところに通ずるモノがあるかなと思います。

blog.code-link.jp

不思議なものなんですが、そのサービスの内容や方針、始めた理由、伝えたいメッセージなどが箇条書きレベルでも良いので言語化されていると、デザインの仕上がりが全然違うのですよね。

そんなの言わなくてもある程度わかるでしょと思われることも多いかもしれません。

でもいざそういう方に試しに言ってみてくださいと言うと「世の中を良くするサービスにしたい。」「○○の現状を変えたい。」などとありがち過ぎる言葉としか返ってこないことも多いのですよね。

そう思ってるのはその業界の人は大抵みんな同じなわけです。その言葉自体がテンプレート的すぎるので、結果として出来上がるデザインもテンプレ的になります。

そんな言葉は前提に過ぎなくて、なぜそう思うに至った経緯などの部分の深掘りがないとユニークの個性がデザインという形に起き上がってこないのです。

デザイナーの役割

少し視点を変えてここまでの話を振り返ってみましょう。商業的なwebサイトにおけるデザイナーの役割というのは「作者」というより「触媒」です。

言葉・思考という目に見えない材料を元に、それに化学変化を促し、デザインという目に見える形に変化させるのがデザイナーの仕事と言えます。

なのでまずは化学変化を起こすための元の材料が必要なのです。その材料がコンセプトやテーマといったものです。

そして材料が揃った後の、実際のテンプレートを装飾する作業としては先日Twitterでバズっていたこのような工程に近いかもしれません。 

ざっくり要約すると、下塗りの完成度をスピーディーに高く見せるコツとして、見せ場となる3箇所を描き込むと絵が引き立つという話がされています。

テンプレートそのまま・Wordpressそのままで作られたサイトというのもある種下塗りといえます。その下塗りの、どのポイントを書き込むと個性あるサイトになるのかを、クライアントの触媒として形にするのがデザイナーの役割です。

闇雲にパーツパーツの色を変えたり、今っぽく作り替えたところで完成度を上げたところでテンプート感は抜けません。なぜなら特出した要素がないのがテンプレートそのままのサイトなので、底上げしたところで個性は出ないからです。

なので、クオリティを上げることよりも、特出した要素を作り出すことの方が重要となります。そのためにヒアリング等を通して、クライアントの個を把握し、如何にそれを目に見える形に科学変化させていく触媒になれるかが、デザイナーの一番の仕事です。

作業それ自体はあくまで目に見えるだけの工程にすぎません。

効率化で生まれたゆとりをどう使うか

つまるところテンプート化をはじめとした効率化というのは、集中すべきことに集中するための手法です。決して短納期にすることだけが目的でなく、短納期の中でもここは外しちゃいけない、という事に注力するためのゆとりを生む装置です。

時間をたっぷりかけて一からすべてオリジナルで作った魂の宿ったサイトが一番とは思いますが、予算や納期の兼ね合いでそうもしていられないご時世なので、そんなゆとりは求められています。

なので効率化はガンガンしていくべきです。でも、効率化されただけのサイトはただの手抜きです。一方で効率化されているといって魂が入らないわけではありません。

手抜きのための効率化もあれば、愛を込めるための効率化もあるわけです。本来効率化は後者のためのものなのですが、意識しないとすぐ手抜きになってしまいます。

そんなサイトはこれから増えていくでしょう。でもそれに追従することなく、あるべき形の効率化が進んでくれればと思うしだいです。