インプット方法から大公開。使えるデザインテンプレートの作り方

CRETOR TALK03

こんにちわ、DSスタッフです。

ホームページ作成サービスBiNDupといえば、おしゃれさはもちろんサイトテンプレートが実用的であることが評価の一つです。

先日のアップデートの際にも新たな機能を搭載したテンプレートを追加し、旬なものを随時リリースすることを心がけています。

そのテンプレートデザインの企画から構築までを担っているデザインチームのオモトに、制作の裏側をインタビュー。トレンドを掴むための情報収集やテンプレートを作る時に心掛けていることをご紹介します。

日常的に「旬なデザイン」をキャッチアップして分析

オモト:テンプレートを作り始める時に、まずはテーマを決めるためしっかり下調べをするところからスタートします。「81-web.com」「S5-Style」「SANKOU!」「Behance」のようなギャラリーサイトから、今どういうデザインが流行っているのかを調査・分析しています。

最近は、制作会社ごとにデザインを見られる「URAGAWA」が特にお気に入り。Awwwards受賞歴のある制作会社のサイトへ行って、どうしてそのサイトの構成になったのか深く読み解いたりして、デザインに活かしてます。

他にも国内、海外問わず色んなジャンルのクリエイターさんのポートフォリオサイトからインスピレーションを受けることもありますね。

Oli Lisher氏のポートフォリオサイト

よくチェックしているイギリスのイラストレーター兼デザイナーOli Lisher氏のポートフォリオサイト

オモト:こういうアイディアソースのストックは日常的にGoogleで検索して調べ物をしていたり、「Pinterest」を眺めていてたまたま出会う、といったものが多くて、その中からイメージを固めていく感じですね。

PhotoshopVIP」のようなデザイン系のニュースメディアで、今年はこのデザインに注目!系の記事も見てますが、そういったデザインの傾向を見て、なぜそれが流行っているのかという本質までを自分で調べて考えることも大事にしています。

PhotoshopVIPのサイト

PhotoShopの操作方法の他にも、フリー素材やWebデザインのトレンド情報が掲載されているPhotoshopVIP

オモト:日頃からトレンドを意識して情報収集することが習慣になっていると、テンプレートだけでなくバナーデザインなど色んなシーンで活用できます。

「リアルなテンプレート」の追求に必要なリサーチとテーマ設定

オモト:見た目だけがよいデザインテンプレートではなく、実践的で使いやすく、サイトの効果が見込めるテンプレートを目指しています。

想定する業種は、汎用的なものはもちろん、の時に話題になっているビジネスや他のCMSでは見かけないニッチなビジネスなど、今まさにWebサイトを必要としている職業というのが決め手になっています。

あとは、BiNDupのテンプレートはすでに400種類近くありますが、幅広い分野を提案したいのでまだ扱っていないものを意識します。

実はリサーチやテーマの設定に一番時間をかけていて、ゴールが見えてからデザイン作業に着手します。実際のサイト作りでも言えますが、それが効率よくつくる秘訣だと思います。

テンプレートデザインの企画書

イメージキーワードやペルソナを細かく想定してデザインに落とし込んでいく

オモト:例えばフォントを選ぶ時も好みで決めないように気をつけていて、想定している職業やそのビジネスの客層の好みに合っているか、などを判断基準にしています。

想定する職業が単純に「歯医者さん」だとイメージする範囲が広すぎるので、もっと細かく想定して、「審美歯科」なら客層はある程度リッチな大人だから高級感のあるフォントを選ぶ、といった感じでリアリティのあるサイトに作り込んでいます。

ちなみに、日頃のインプットの段階で、気になったサイトで使われているフォントはWhat FontというChromeの拡張機能を使ってチェックするようにしています。

chrome.google.com

 

XDで動きをイメージしながらレイアウトを構築

オモト:実際にデザインしていく段階ではAdobe XDを使うことが多いです。キャッチやコンバージョンなどの構成要素を入れたワイヤーフレームを組んで、そこからデザインを作り込んで、BiNDupで構築・検証という流れです。紙は使わずに全てデジタルで完結してます。

以前はPhotoShopを使うことが多かったのですがXDなら動きも入れられるので、サイトになった時のイメージが湧きやすくていいですね。

デザイン完成時の資料

ビジネスの特徴に合わせて1つのテーマに対して3つのレイアウトを展開

オモト:BiNDupにはさまざまな機能がありますが、私はサイトで成果をあげることを重視しているので、コンバージョンとなるフォームはどのテンプレートにも必ず入れるようにしています。

機能の構成に関してある程度ルールは決まっているのですが、できるだけそれぞれのビジネスの成果につながりやすい構成になるように機能を選んで作っています。

 


テンプレート作りに対するこだわりをたっぷり語ってもらいました。

日頃からトレンドのデザインを意識して分析していくことで、他にはないおしゃれなテンプレートを作るためのベースになっているようです。

BiNDupのテンプレートを見る

次回は新しく追加されたテンプレートについてデザインのポイントを詳しくご紹介しますので、どうぞお楽しみに!

DSスタッフ カテゴリーの記事一覧 -