【テンプレート制作秘話】BiNDでできなかったデザインにチャレンジ

こんにちは！
BiND10搭載のテンプレートのデザインディレクターを担当した、デザイナーの尾本です。
BiNDの顔ともいうべきテンプレートは、毎年楽しみにされている方もいらっしゃるのではないでしょうか。

新しいBiNDのテンプレートはどんなデザインなのかをちょこっとお見せするとともに、
こういう機会でもないとお伝えできない、BiND10のテンプレートのコンセプトについてお話ししたいと思います。

BiND10 テンプレート デザインコンセプト

※社内資料から抜粋

1.　最新トレンドを意識したデザイン

最近のトレンドかつ美しいサイトに共通するデザインとは何か、傾向を色々と調べた結果。
今年のひとつ目のコンセプトとなったのが「重ねる」「ずらす」表現です。
要素を重ねたりずらすと、Web独特の秩序が崩れてサイトにリズム感が生まれます。

BiNDはブロック単位で編集をするという仕様上、要素を均等に配置する必要があり、これまで2つの要素を重ねたりずらすといった表現ができませんでした。
これまでBiNDのサイトやテンプレートをデザインしてきた先輩方は、このような仕様上の制限の中、それを見せない工夫に頭を悩ませていたと聞いています。

ところが、5月のAiDジェネレーター搭載のために、その鍵となる「マイナスマージン」というCSSが解放。
マイナスマージンは注意が必要なCSSのため、これまで躊躇してきたところでしたが、
（下手にいじるとBiNDが編集できなくなったり壊しかねない設定が入ってるので、触っちゃダメと書いてあるところはいじらないでください！）
デザイナーにとっては「いかにもBiNDで作った感」をなくし、テンプレートのデザイン性をさらに向上させる大きなチャンスとなりました。

それに伴い、私が思うWebサイトはこうあるべきで、実際にそうでなかったところなどを、いい意味で全部壊して作り変えることにチャレンジ。だから今回のテンプレートは、今までとはコンセプトも方向性もまるで違う作りになってます。

開発中のデザインをチョイ見せ。

今回BiNDってこういうのできないよねって思われてることを全部壊してしまえという気持ちで作っています。
仕様上実装できなくて、泣く泣く諦めた所もありますが、今回のコンセプトに近づけてデザインしたサイトがこちら。

コーポレート「製造会社」

ビルボードのあたりがずれてる感じ、わかりますか？
※図版は開発中のため、変更となる可能性があります。

ライフスタイル「ヨガ教室LP」

こちらは文字の重なりを表現。白くて大きい文字は実は透明度を上げて、うっすらと写真が透けるようにしています。
※図版は開発中のため、変更となる可能性があります。

テンプレートディレクターとしてこだわったところ

汎用性が求められるテンプレートで、重要なことは使い手が簡単にカスタマイズできることだと思います。
簡単にカスタマイズできるとは、Dressをいじらなくても想定より多い・または少ない文章が入った場合も崩れないデザインであること。

先ほども説明した通りCSSのマイナスマージンは少しやっかいなので、ここだけはデザイン上ぜったい譲れないというポイントで実装しています。
中央揃えが効かないなど、多少の不便があることも。テンプレートはそのまま使う方がデザインも崩れず、オススメなので許してくださいね。

だいぶ盛りだくさんになってしまいましたので、残りの2項目「コンバージョンを意識した構成」「LPテンプレート初登場」についてはまた次回。

日々いいものをお届けできるよう頑張っていますので、楽しみにしていてくださいね。