こんにちは！BiNDupのSiGNテンプレートでアートディレクション・デザインをしたオモトです。
まもなくリリースする新SiGNですが、先駆けて基本の使い方をご紹介しておきたいと思います。
新SiGNでは、「テンプレートから作る」ことを推奨しています！
その理由として
- （１）レイアウトをそのまま使える
レイアウトアレンジしたいときは、「回転」や「整列」を使うと便利 - （２）加工されたエフェクトがそのまま使える
いちいち設定が消えません。ちょっと雰囲気を変えたいときは、フィルターを選び直したりエフェクト数値を変えればOK - （３）書体がそのまま使える
収録書体がとても多いので、選ぶ手間がありません。アレンジしたいときは、フォント選択画面の「分類」から「おすすめ」から選べばOK
だからです。ゼロから作るよりも、テンプレートからアレンジするほうが簡単です。
しかし実際は、素材もテキストも「テンプレートをそのまま使う」ってこと、ほとんどないですよね。
英語のところを日本語に替えたかったり、色変えたり、文字や写真を増やしたり減らしたり・・
レイアウトがそのまま使えたとしても、テンプレートが意図した目的と違う部分は差がでてしまうもの。
今回は、ひと足先にテンプレートからのカスタマイズ方法をご紹介します。
テンプレートからのカスタマイズ方法を逆引き式でご紹介
手順を学ぶとき、逆引き辞典を参考に手を動かすと必要な操作を簡単に見返すことができるのがメリット。反面、覚えた操作がどのようなシーンで活用できるのかは、また別問題。ピンとこなかったりしますよね。
なので今回は、SiGNテンプレートをカスタマイズする際に悩みそうなことを網羅的にカバー！実際のサンプルを作りながら、こうしたいけど、どこをどうすればいいの？に応える内容をまとめました。
季節を取り入れたセール用のビルボード画像にアレンジ
お正月、卒入学シーズン、GW、夏休みなど、季節の節目にキャンペーンは付きもの。今回は、まもなくやって来る梅雨に向けた集客用のビルボード画像をテーマにカスタマイズしていこうと思います。
こちらは完成イメージ
テンプレートは、こちらを使用。
画像にどうしても入れたい、必要な要素をまとめる
手をつける前に、まず、どんな情報が必要なのか割り出しましょう。
今回は梅雨のセールの設定ですが、季節によって入れ替えてください。
-
- SALE!（セール名）
<li雨の日限定（サブコピー）
- 最大３０％OFF！期間限定のセール！（キャッチコピー）
- 5/12〜7/9（開催期間）
スライドショーに組み込む場合、１回で情報を見きれない量を入れると利用者の満足度が下がるので、盛り込み過ぎはNG！最低限の情報に抑え、伝えたいことがいっぱいあったら、クリック先に書きましょう。
全体を整える
不要なレイヤーを消す
レイヤー一覧の一番下から「画像」「シェイプ」を選択し、今回は使わない箇所をゴミ箱ボタンで削除します。
鍵が付いているレイヤーは、鍵を一回クリックして外すと削除できるようになります。
アートボードの色を変更
ウィンドウ上部の「背景色」を選択し、#e61d2fを入力します。
セール名をデザインする
文字を打ち替える・日本語を入力
クリックすると、文字を入力したり変更したりできるようになります。デフォルトで入っている文字を消し、上の列から、
雨の日限定、SALE！、最大３０％OFF！期間限定のセール！に替えます。
文字を大きくする
矢印でちょっとずつ大きくするのもいいですが、思い切った大きな数値を入れるのが時短のコツ。大きくしたい文字を選択肢、サイズを「152」に変更します。テキストボックス外をクリックし、選択を解除して確定します。
フォントを替える
文字を選択し、右側のフォント一覧からします。今回は、セザンヌ Pro Bを選択。フォント選びで悩んだら、分類から「おすすめ」を選ぶと良いですよ。
字詰めを変更する
文字の字間を変更します。右側のテキストウィンドウの文字間を10に変更します。文字と文字との間を少し間を空けると詰まった感じがとれてゆったりした印象にできます。
キャッチコピーをデザインする
文字のサイズ・フォントを変更
先程と同じ要領で、フォントサイズ・フォントを変更します。ここではサイズを25px、フォントを「スランプ Std DB」に変更しました。
サブコピーをデザインする
文字の色を替える
変更したい文字を選択し、右側のテキストウィンドウのカラーを#e61d2fに変更します。
文字・シェイプを回転させる・角度をつける
雨の日限定、とその下の帯を、Ctrlを押しながら両方選択した状態で、画像の左隅に寄せます。それぞれ、表示ウィンドウの「回転」を-30にします。
下の帯がアートボード内からはみ出ないよう、ウィンドウの右上のプレビューでチェックしながら、位置を調整します。
開催期間をデザインする
文字レイヤーを新規に作成
左の「T」マークを押し、新規に文字レイヤーを作成します。5.12と打ち替え、
先程と同じ要領で、文字色を白、サイズを70、フォントを「スランプ Std DB」に設定します。
レイヤーを複製
5.12のレイヤーを選択した状態で、複製ボタンをクリックし、複製します。同じ位置に重なるように複製されるので、誤って複製しすぎないように注意。
（Sat）に打ち替え、先程と同じ要領で、文字色を白、サイズを20、フォントを「スランプ Std DB」に設定します。
位置をイイカンジに揃えたら、さらに、5.12、（Sat）のレイヤーを複製します。Ctrlを押しながら、5.12、（Sat）を選択し、右側にマウスをスライドさせ位置をずらします。
レイアウトしてみると、（ ）がうっとおしい感じがしたので、省略してSat、Monに変更し、画面をすっきりさせました。
SatかMonのレイヤーを複製し、「-（ハイフン）」を入力します。
要素をアートボードの中心に揃える
Ctrlを押しながら、画面の「SALE」と「最大３０％OFF！期間限定のセール！」を同時に選択し、右上の「アートボード基準」にチェックを入れ、中央揃えをクリックします。
するとアートボードの中心に要素が揃います。このチェックを入れずに中央揃えを押すと、選ばれた要素の中心に揃えられます。
要素の位置を整える
SatとMonの縦位置を揃えます。まず、Monをクリックします。ウィンドウ右の表示の「位置」のXは横軸、Yは縦軸を表しています。Yを120に設定し、同じようにSatのYに120を設定し揃えます。
同じ要領で、日付の縦も揃えたり、「5、S、最」、「n、！、！」の位置をあわせると、整っていてきれいに見えます。
これで完成！いかがでしたでしょうか。
完成したバナーは実店舗の集客にも、オンラインショップにも活用可能です。
今回作ったサンプルを試したい方は、サイトデータを後日ご用意しますので、新SiGNリリース後にぜひ試してみてくださいね！
※新SiGNの開発は終盤です。ご提供までもう間もなくとなります。
SiGNのリニューアルに関する情報はこちらの記事にまとめてあります。
POINT
- テンプレートからアレンジするとレイアウトやエフェクトがそのまま使えて便利
- 位置の調整は、Ctrlを使って複数のレイヤーを同時に選択して行う
- フォント選びで悩んだら、分類から「おすすめ」を選ぶと良い