デザインテンプレートの作り方

Webデザイナーの悩み

　本連載ではPhotoshop、DreamWeaverのアプリケーションを使用してWebデザイン、コーディングの解説をさせていただきます。第1回ではPhotoShopを使用したデザインテンプレートの作り方を紹介します。

　弊社ではデザインアプリケーションとしてAdobe PhotoShopを使用しています。Photoshopの優れている点はいろいろありますが、画像加工機能だけでなく、デザインに必要な機能をほぼすべて備えた最強のアプリケーションであることではないでしょうか。また、世界的に有名なため、有効なプラグイン等も数多く開発されている点も魅力です。

　ところで皆さんにも、「デザインができあがったけど、見出しやボタンなどパーツのテイストが微妙に違っていて、なんかチグハグなデザインになってしまった」「なぜかボタンの制作に思わぬ時間がかかってしまった」「頼んでいたデザインがあがってきたけど、どこから手をつけていいか分からないぐらいのひどい状態のデザインがでてきてしまった」という経験はないでしょうか。

　人間ですから頭がさえずに煮詰まってしまう時もありますし、単純にいままでやったこともないジャンルのデザインを要求されれば時間がかかることもあるでしょう。要因はいろいろとあると思いますが、根本的な原因はWebデザイナーの個人能力に行き着くのではないでしょうか。

能力不足を補うデザインテンプレート

　ではWebデザイナーの個人能力ってなんでしょうか。よくセンスが良い・悪いと言いますが、具体的に能力が高いとはどういうことなんでしょうか。能力が高いWebデザイナーの条件はいろいろありますが、「デザインのセオリーを知っている」という条件が最も不可欠ではないかと筆者は考えています。

　つまり経験によってWebデザインのセオリーを多く知っているWebデザイナーは優れていると言えます。しかし、これではキャリアを積まなくては解決するのは難しいです。

　ただし、あらかじめテンプレートデータを用意しておき、どのシーンでどのパーツを使うべきかの取捨選択ができるようになれば、経験不足はある程度補えます。弊社のWebデザインチームでは、デザインテンプレートデータのデザインを常時行っており、デザインセオリーの共有をしています。それによりWebデザイナーの能力にばらつきはありながらも、クオリティーの均一化、作業スピードの大幅な向上に成功しました。

　次のページでは、デザインテンプレートデータの制作について紹介します。