【Web制作】Webデザイン/Webディレクション

【Web制作】Webデザイン/Webディレクション

こちらはWebデザインやディレクション等の制作物をまとめたページになります。
目次をご参照いただき、興味のある項目へとお進みください。

※制作物の画像をクリックする事で、より大きく表示できます。
(クリック後画像が別タブで表示されるので、表示された画像を更にクリック。)

LP

定期的に行われるイベントの告知用LP。
ターゲットは既存ユーザーで、目的はイベント開催の告知です。

広告からの集客用ではなく、自社のゲームアプリや、サイト(ゲームのブラウザ版)内からリンクをかけて表示。
ファーストビューのインパクト重視で、派手で楽しそうなイメージで作成しました。

LP

バナー

ゲーム画面用バナー(自社ゲームアプリ)

アプリ内の上部で表示し、リンク先に誘導する為のバナーになります。
以下のように、ユーザーに何を伝えたいかを承り、ライティングやデザインはこちらで企画・作成しています。

・SNS認証すると5回分無料になる事を伝えて欲しい。
・遊び方を紹介するページを作るのでそのバナーを作成して欲しい。
・ユーザーが景品を獲得した時の動画を掲載したい。

デザインについて、特に伝えるべき内容で優先度を付け目立つようにしています。

遊び方のページは、作成する必要性から提案して実装をお願いしています。
(ユーザーがプレイしているのを見る限り、一部筐体において半数以上は遊び方を理解していないような挙動をしていた為。)

ゲームアプリ用バナー01
ゲームアプリ用バナー02
ゲームアプリ用バナー03

YouTube用サムネイル

サムネ作成の企画、デザイン、ライティング等全て私1人で担当しております。
Google動画検索や、YouTube内で競合を見た時に、シンプルなサムネが多かった為、逆にインパクト勝負で作成しました。
目的は競合との差異を出して、CTRを上げる事にございます。

上流である施策の立案から、動画制作や、SEO対策なども1人でしており、下記に作品や施策内容を掲載しております。

YouTube掲載の動画はコチラをクリックしてご参照ください。

VSEOの施策内容はコチラをクリックしてご参照ください。

YouTubeのサムネイル

Twitter広告用クリエイティブ

クリエイティブの訴求軸、構成案、デザイン等を全て自分で作成。
広告代理店様との折衝担当開始初期に、一旦下記要件で作成し運用開始。

・以下に掲載のクリエイティブと同じ背景。
・テキストを『ゲームで取ってリアルに届く!? 新感覚オンラインクレーンゲームで今すぐ景品をゲット!』で制作。

CTRを上げたかったので、広告代理店に依頼して以下クリエイティブとABテストを実行。
ターゲットがソーシャルゲームを好む層への配信だったので、他のソシャゲとの違いを明確に理解できるよう敢えてテキスト量(情報量)は増やしました。
以下クリエイティブの方がCTRが高かった為、以降こちらのクリエイティブで運用いただいています。

Twitter広告用クリエイティブ01

その他、下記クリエイティブ等でもテストしています。

ターゲットや目的は、ある程度クレーンゲームをプレイした事がある人に対し、通常のクレーンゲームとの差別化で下記を訴求しました。
(作成当時私のスキルが高くはなかった為、自分で持ち帰る手間等を示す事ができず話の繋がりが飛躍していましたが、今ならネガティブ訴求から始め、LP遷移後にオンラインクレーンゲームのメリットを伝えるやり方をテストするのもありと考えています。)

・通常のクレーンゲーム…店舗の営業時間内に店舗に行き景品を獲得して自分で持ち帰る手間がある。 ・オンラインクレーンゲーム…いつでもどこでもプレイでき手軽である事や、オファーとして景品は無料で発送される事を打ち出す。

こちらも立案から制作まで自己完結、運用は広告代理店にお任せし、代理店対応は私がしました。

Twitter広告用クリエイティブ02

アプリストア用画像

GoogleやApple等のアプリストアのダウンロード画面で表示する画像です。
こちらは既にあったクリエイティブをベースに、文章をそのまま使用し、デザインは私が作成しました。
(元々あったものがノンデザイナー制作のクリエイティブだった為、更新を兼ねてこちらで作成。)

アプリストア用画像01
アプリストア用画像02

アプリアイコン

アプリをダウンロードした後に、スマホの画面に表示されるアイコンです。
主に下記を意識して作成しました。

・アプリストアやスマホ画面で、他のアプリアイコンと並んだ時に目立つ事。
・一目で何のアプリかわかる。
・自社のイメージカラーを使う。

上司からの依頼はアイコンを作って欲しいとだけ承り、私が企画~制作まで行い、外部のシステム会社に依頼してアプリへ実装していただきました。

アプリアイコン

ディレクションで作成したドキュメント

ワイヤーフレーム

個人向けLP

非常に縦長な為、ワイヤーフレームの閲覧はこちらをクリックしてご参照ください。
ワイヤーフレーム

企業向けLP

非常に縦長な為、ワイヤーフレームの閲覧はこちらをクリックしてご参照ください。
ワイヤーフレーム

WebメディアTOPページ

非常に縦長な為、ワイヤーフレームの閲覧はこちらをクリックしてご参照ください。
ワイヤーフレーム

サイトマップ

※画像をクリックするとPDFを開きます。

サイトマップ

改善提案書

※画像をクリックするとPDFを開きます。

改善提案書

上記ドキュメント以外にも以下のような改善の経験もございます。

SEOの施策内容はコチラをクリック。

LPOやEFOの施策内容はコチラをクリック。

ポートフォリオカテゴリの最新記事