コウSiGNを使って、バナーの作り方の基本を解説したいと思います。今回の題材は、メルマガに代わる集客ツールとして注目されている「LINE@」にしました。テキスト、写真、シェイプと云ったSiGNの主要レイヤーを全て使いますので、参考にしてみてください。完成イメージをご覧下さい。カフェのLINE@バナーとして作成しております。参考記事)レストランや小さなお店でLINE@がスマートフォン世代集客に人気の理由1.アートボードのサイズを決める最初にバナーのサイズを決めましょう。400pxで作成したいと思います。横幅1,280pxの理由については『BiNDでサイトを作成する時の画像サイズの目安』をご覧下さい。次に、背景色のカラーを設定します。背景を少しグラデーションにしたいので、画面上部のメニューから「背景色」>「グラデーション」の順で開きます。複数のカラーを設定出来るので、1段目に#8de624、2段目に#00b900を設定します。斜めに変わるグラデーションにしたいので、「方向」の右下矢印をクリックしましょう。これでベースカラーのグラデーション設定は完了です。3.メイン写真を取り込むここではカフェのイメージとして珈琲の写真を使いたいと思います。「画像レイヤー」を追加と行きたい処ですが、マスク(シェイプの形に写真を切り抜く事)を前提にしたいので「シェイプレイヤー」を用います。シェイプレイヤーを追加したら画面右の「基本設定」からサイズを調整しましょう。幅330px、高さ400pxで設定します。サイズを設定したら「画像ファイル」から写真を取り込みます。珈琲カップが中央に来る様に調整します。シェイプレイヤーを使う事でシェイプの形に添って写真を切り抜く事が出来ます。使うテクニックなので是非覚えて下さい。4.各テキストを配置3つあるテキスト要素をそれぞれ別の「テキストレイヤー」で設定します。1つのレイヤーで作成しても構いませんが、位置の微調整などを考えると分けた方が扱い易いと思います。ここでそれぞれのフォントや文字サイズも設定してレイアウトします。最後にQRコードを配置します。QRコードの作成は、QRコード無料作成サービスなどを用いてください。ここでもシェイプレイヤーを用います。240pxの正方形にしてください。今回は角丸のQRコードを作りたいので、シェイプの形を変更します。半径を20pxに設定しましょう。これで角丸の四角い枠が完成しました。最後に「画像ファイル」から画像を取り込めば、角丸にマスクされたQRコードの完成です。要素の立体感を出したいので最後にドロップシャドウを設定します。テキスト要素とQRコードに設定したいと思います。各要素をクリックしてから画面右の「エフェクト」を開きます。「エフェクト詳細設定」から「シャドウ」のチェックを入れます。ここでは、距離1/角度45/ぼかし1/透明度0.4に設定します。注意ポイントとして、シャドウはほんのり主張し過ぎない様に設定しましょう。主張し過ぎると古臭い印象のデザインになってしまいます。注意ポイントとして縦横のラインや余白が揃う様に意識しましょう。バナーに限らずサイトデザインに於いても非常に重要なポイントです。今回はこの記事で作成したバナーをSiGNデータとしてプレゼントします。実際に編集データを開いてみて設定などをチェックしてみてください。素材やテキストを入れ替えて使って頂いても構いません。以下より、ログインしてダウンロードしてください。CAMPで最も読まれた記事は?コンセプト。