最近では、スマホユーザーを対象に、SNSを利用してキャンペーンを行う企業が少なくありません。そのためスマホ用の商品の宣伝と販促の訴求ページのオーダーも増えてます。
今回は架空の飲料の販促OCR連携 レシートキャンペーンページを作成するという設定で、フォトショップ、イラストレーターでのデザインページの制作をご説明致します。
レシートキャンペーンってどのような感じか検索してみましょう
レシート 応募 キャンペーンで検索
FLOW : イラストレーター・フォトショップ SNS用キャンペーンページの作成
- 架空の飲料設定
- パーツ準備
- イラストレーター：ロゴ制作
- イラストレーター：レシート作成
- フォトショップ：缶にロゴ貼り付け
- フォトショップ：モバイルバッテーリーにロゴ貼り付け
- フォトショップ：レシートシワ加工
- フォトショップ：デザインレイアウト
- HTML・CSSコーディング作業（ほぼ画像ボタン部分だけでOK!）
1 : 架空の飲料設定
まずは簡単な企画案を考えてみましょう
下記項目は例ですので、ご自身で考えみましょう！
OCR連携 レシートキャンペーン
対応エリア : 全国大学生協
飲料の種類：ご自分のお好みの飲料
ターゲット：大学生
ご自身で設定されてもOK!
主婦、中高生、中高年男性、30〜40代女性など
応募方法：対象商品を購入してレシートを撮影して送る
OCRとは
OCR（光学文字認識）処理とは、紙をスキャンして画像としていったん取り込み、書かれている文字をテキストデータに変換処理することです。
コンピュータは人のように書類を見るだけで内容を把握して、データ処理することはできません。いったん画像として取り込んで、テキストデータに変換処理するという手順をふみます。画像データはテキストデータに比べると容量が大きいうえ、データ利用の面でも大きく制限されるので、OCR処理を行うのは合理的だといえます。また、最新のOCRでは文字認識にAI技術を活用しているものもあり、認識精度は飛躍的に向上しています。
2 :パーツ準備
缶パーツ：フリーサイトからダウンロード
モバイルバッテリー：配布
スマホ：フリーサイトからダウンロード
カメラのイメージ：フリーサイトからダウンロード
背景画像：無料商用可フリー画像からチョイス
レシート：テンプレート配布 自分で改良してOK!
シワ加工用：フリーサイトからダウンロード
商用可無料サイト一覧
https://bibourock.site/1221/basic-8/
パーツ系商用可無料サイト
https://www.freepik.com/home
検索ワード
can
wrinkled paper texture
3 : イラストレーター：ロゴ制作
イラストレータでロゴを作成します。
設定したドリンクのイメージで作成します
オリジナルで作成しましょう。
4:フォトショップで缶にラベルを貼る
今回は、フォトショップのワープを使用して、缶にラベルを貼ります。
イラストレーター2015バージョンですと3Dを使用すると、なかなか重くて作業がしづらい状況です。
ですので、今回はフォトショップで行います。
新規でフォトショップ作成
- イラストレーターで作成した、ラベルをjpgにします
ファイル > 選択範囲書き出し - 新規で作成したフォトショップに、缶の画像をコピペします。
コピー > フォトショップへドラッグ＆ドロップ
ワープで、立体感を出します
作業しやすいように、レイやーを透過します。
自分の好みの位置に設置
編集 > 変形 >ワープ
マスクしてはみ出てしまった部分をカット
足りない箇所がある場合は、長方形ツールで足します。
同じように缶のレイヤーを選択ツールでクリックして、黒い長方形のレイヤーを選択してマスクをクリックします。
缶のレイヤーを複製して一番上に重ねます。
ピンライトにして、透過を調整
色違い（味違いのバージョン）も作成しましょう！
ポイント！
５：レーシートをシワシワにする加工
フォトショップのデータは２つになります！
シワ加工のテクスチャーを準備→psd
しわしわ加工のレシートを作成→psd
商用可無料でダウンロードしたデータをコピー
フォトショップ > 新規作成 >ペースト
スマートオブジェクトをラスタライズに変換
フィルター ＞ ぼかし ＞ ぼかし（ガウス）
半径→1pixel
名前をつけて、セーブします
シワ加工置き換え用のpsdができました！
シワ加工用のpsd新規ファイル作成
イラストレーターからシワ画像をコピペ
クリッピングマスク
イラストレーターからレシート素材をコピペ
スマートオブジェクト変換
フィルター ＞ 変形 ＞ 置き換え
水平比率・垂直比率→10
置き換えマップデータは→同一サイズに縮小
未定義領域は→端のピクセルを繰り返して埋める
OKをクリック
完成！
構成・ページデザインレイアウト
配布パーツ
配布パーツはこちら
https://8.gigafile.nu/0427-b5a53dfab680dc2522c2db56bd9c183f1
テキスト
レシートを撮ってLINEから応募!
PRESENT CAMPAIGN
xxxxx発売記念キャンペーン
対象商品を購入して
レシートを撮影して送るだけで
抽選で
xxxxオリジナル充電器が200名に当たる！
キャンペーン詳細はこちら
SEND RECEIPT
レシートをアップロード
対象商品
xxxxxxxx
500ml缶
xxxxxxxx
500ml缶
応募方法
STEP 1
対象商品を対象店舗で購入してレシートを撮影する
STEP 2
アップロードボタンを押してレシートをアップロード。
STEP 3
応募要件を確認して「応募」ボタンをクリック！
STEP 4
当選画面が出たら、情報入力ボタンをクリック！
個人情報を入力して「送信」ボタンをクリック！
入力した住所に賞品が発送されます。
STEP 5
個人情報を入力して「送信」ボタンをクリック！
入力した住所に賞品が発送されます。
読みづらいレシート例
ピンぼけ
ななめ
クシャ クシャ
切り取り
2枚以上を1度に撮影
※購入した個数分応募可能です。
※1枚のレシートにつき最大●口応募可能です。
※店舗名、店舗住所、電話番号、購入日時、購入商品、購入個数、合計金額、支払金額、お釣りが記載されているレシートをアップしてください。
SEND RECEIPT
レシートをアップロードwrinkled-paper-texture
しわしわaiここです
wrinkled-paper-texture
レシートai
モバイル
parts_distribution
コメント