SiGNの新テンプレート公開！美しいグラデと書体が織りなすトレンド感

こんにちは、BiNDupのテンプレートディレクターのオモトです。
新しいSiGNでは、UIだけでなくデザインテンプレートも、まるっと一新。なんと5年以上ぶりの刷新です。

見出しやボタンパーツなどは画像で作らなくなっている今、画像パーツをどうWebで活かすべきか。
今回のテンプレート素材では、昨今のWeb活用を意識して目的に合わせて情報がきちんと整理できるよう設計しました。なおかつ、手軽にカスタマイズできるように心掛けてデザインしています。

今回はその中でも、利用頻度の高いビルボード用とバナー用に設計されたテンプレートの一部をご紹介します。

新SiGNテンプレートで心掛けたこと

何より新しいSiGNで感動したのは、デザインするのがすごく楽しくなっていること！
動作もサクサクで、ディテールのデザインまでやりやすくなっているのがその理由だと思います。

デザイナーとしてとくに嬉しい機能アップは、

• • Webフォントで提供しているのと同じフォントが使える

※これまでBiNDクラウド・プロコースでしか使えなかったWebフォントがすべて使える大盤振る舞い！数も1000書体近くから選べます。

• 新搭載のグラデーション機能

です。
これらによって、ここ数年のデザイントレンドをうまく取り入れたテンプレートが実現しました。

ツートングラデーション、バックグラウンドオーバーレイ、大胆なタイポグラフィ、斜めに配置されたオブジェクト、レトロモダン・・
そしてBiND10のコンセプトでもある「重ねる・ずらす」表現など定番化しつつある旬なデザイントレンドたちを、よりインタラクティブなサイト作成に活用してみてはいかがでしょうか。

多用は間違いなし、ビルボード用のテンプレート

1.ツートングラデーション + 斜めに配置されたオブジェクト

まずは、最新機能であるグラデーション機能をふんだんに活用したデザインより。
相性の良い2つの異なるトーンカラーをフェードして表示する、最も一般的なグラデーションです。
斜めの図と併用したり、斜めにグラデーションをかけるとセンスアップ。

2.バックグラウンドオーバーレイ

同じくグラデーションを使った効果ですが、こちらはアレンジ版。
写真全体に薄いグラデーションのレイヤーを乗せることで何とも言えないニュアンスが生まれます。汎用性が高いので多めに作りました。一部をご紹介。

イメージに合うグラデーションを上手にかけることができれば、よい意味で写真の生っぽさがとれたり、ちょっとクオリティの低い写真でも印象的な雰囲気を与えることができます。

3.まるでインスタのような？！レトロモダンなテイスト

洋服でもインテリアでもレトロモダンなデザインが注目されています。レトロモダンとは新しい中にどこか懐かしさがあるデザインのこと。ここでは、彩度の低いピンクやネイビーと蛍光色に近いイエローを上手に使うことで、色あせた中にも古すぎないデザインに仕上げています。

4.大胆なタイポグラフィ

装飾的に文字を扱い大胆に配置することで、文字を写真の中にうまく溶け込ませて存在感のあるグラフィックを作り出しています。

こうしたタイポグラフィを楽しめるのも、たくさんの美しいフォントが増えたからこそ。ぜひ好きな書体でアレンジを楽しんでください。

5.リズムが生まれる、重ねる・ずらす表現

要素を重ねたりずらすと、Web独特の秩序が崩れてサイトにリズム感が生まれます。

レイヤーを駆使すれば作り方は意外に難しくありません。ぜひ参考にしてオリジナルにもチャレンジしてみてください。

相変わらずニーズ高し！バナー用のテンプレート

各種バナーは、キャンペーン等への重要な導線はもちろん、WebだけでなくSNSでの投稿までを意識して、どんなプロジェクトでも使いやすい汎用性の高いものを中心に作成しています。

1.単色デザイン

逆にグラデーションを使わず、単色で表現することで、シンプルさ、ミニマムさを出した表現です。

　　　　
スクエア型のバナーなら、Webだけでなくインスタに投稿する画像としても活用できます。

2.4トーングラデーション

４色使いのグラデーション。やり方はカンタンでアートボードにイエロー、レッド、マゼンタ、パープルのグラデーションを設定するだけ。グラデーションは自分のすきな位置で色の分岐点を調整することができます。ほかにも、Twitter、Facebookのバナーもアリ。

3.バックグラウンドオーバーレイ

先程もご紹介した、バックグラウンドオーバーレイです。どんなところで使用しても映えますね。

今回テンプレートで使用している写真素材はすべてマテリアルズの素材を使用。
同じ素材を使いたい人は、コピーライトの数字をmaterialsのサービスサイト内で検索しダウンロードしてみてくださいね。

利用には、マテリアルズ専用ポイント「マテポ」が必要となり、デジタルステージの製品登録時に付与されるほか、購入することも可能です。

次回は、SiGNのもうひとつの活用法、ロゴ制作に役立つテンプレートを特集予定です！おたのしみに！！

様々な業種に対応！SiGNの新テンプレートでおしゃれな日本語ロゴが作れる！

無料でBiNDupのSiGNを使ってみるBiNDの制作事例を見る