ユーザーインターフェイス策定
例年行われていたの個別機能のリニューアルを、ユーザーファーストで考えるプロジェクトにするよう社内に働きかけ実施しました。
改善のために必要な数値が見えない状況だったため、ディレクター、エンジニア、デザイナーの各担当者が今まで知り得た情報を持ち寄りメインターゲット像を作り、その人がどういう状況でサイトに訪れアクションするのかをストーリーを出しプロトタイピング路実施、各ページに必要なをコンポーネントを洗い出し構成していきました。
担当行程は幅広く、ユーザーストーリーの洗い出しや競合の調査の下準備から始まり、サイトマップ作成、ワイヤー作成、UIの設計から全ページの情報設計、状態に応じたデザインをし、プロトタイピングでの社内メンバーによるユーザーテストを経て更に改修しリリースに至ります。（今期リリース予定）
Vertical Rhythm と Modular Scale を採用しUXを意識。スクロールしたときの目や手の動きに均一な質を提供でき、読みやすいサイトになるよう配慮しています。
スタイルガイド・トーンアンドマナー策定
効率よく運用・更新が出来るように、また、訪れたユーザーがサービスに対し一貫したイメージが保てるよう、最低限のスタイルガイド（フォントサイズ、マージン、機能のカラー）と、基礎となるデザイン（ブランドカラー、キャラクターバリエーション、オリジナルフォント）を作成。 「ページを横断したユーザビリティーの統一感」と「ユーザーがそのページにおいて何を目的にしているか」という2軸を目的としデザインを再構築。コンバージョンボタンをひとつに絞るなど、構成をシンプルにすることで旧サイトよりコンバージョンが120%アップ（最高150%）しました。
ガイドライン
ルールを決めたことで、機能的な改修でデザイナーが関与しない案件でもクオリティーの維持に貢献しています。
カラー
Atomic Design からヒントを得て、グラフィックに用いるカラーガイドを策定。色盲チェックも踏まえ、機能のカラーとブランドカラーを明確に分け機能が埋もれてしまわないよう配慮しました。
CMS用デザインテンプレートデザイン作成
実施するキャンペーンのパターンを洗い出し、ユーザーに伝わる文章構成を担保できるよう配慮しながらデザインテンプレートを作成しました。誰でもCMSでLPを作成できるようにし、急遽決まったキャンペーン企画も時制作工数をなしで実施できるようになった。
CSS アニメーション
パスをシンプルに軽量化しSVG変換、CSSを使いanimationやtransformで制御しメインビジュアルとしてを作成しました。ブランドカラーは、Google アナリティクスから課金額が多いユーザーをメインターゲットにペルソナを作り、お金の印象や高揚を求めていると言う人物像の仮説を立て、「元気」で「快活」な意味を持つ黄色に設定。それに合わせprimaryカラーをオレンジ、secondaryカラーを水色に設定しイラストを作成しました。https://codepen.io/omura-hiroko/pen/WyBOpK
アイコンとオリジナルフォントの作成
数字をアピールする機会が多いサービスのため、LPやバナー作成時に訴求ポイントを引き立たせる数字フォントをオリジナルで作成。これにより、どのデザイナー担当がしてもデザイントーンの揺らぎが少なくなりました。
ランディングページ グラフィックデザイン作成
協業案件でLPを作成しました。IPに特質したゲームのため、世界観を損ねないようパーツの質感にこだわりました。
イベントツールの作成 1
イベントブースのサイズを元に、設置する背面ポスター・POP3種や配布用のチラシを一貫して作成。
実際に手にしたとき、その場に立ったときなど、什器や目の高さや距離感など考慮して物のサイズ感や配置する文字サイズに配慮しブースの存在感を出しています。当日は500人来場想定のところ1,500人と予想を上回る反響でした。
イベントツールの作成 2
ゲームタイトルのファンイベントに協賛の形でauゲームが参加した際の制作物です。ポスター（A1三連の物）、POP、チラシの3種。