NOTTVパックのキャンペーンページ

NOTTVのプレミアムプランである、NOTTVパックの利用者増加を目的としたキャンペーンページを制作しました。

NOTTVのマスコットキャラクターであるnotty（ノッティー）のイラストを活かして、楽しさとお得感を伝えられるように構成しています。

※ nottyのイラストはご提供いただいた素材です。

運用効率を上げるためのコーディングの工夫として、ページ中盤のNOTTVパックページへの誘導コーナーは共通パーツ化（PHPインクルードによるモジュール化）しました。

これによって共通パーツの編集時には、変更内容が各ページで一括反映されるようになります。結果として運行効率が上がりました。

特集ページに限らず随所でコードのリファクタリング（内部構造の整理）しています。共通パーツのモジュール化をはじめ、HTMLやCSS構造を部分的に再設計するなど、運用しやすい仕組みづくりにも注力しました。

夏祭初音鑑の番組特集ページ

初音ミクを題材にしたイベントの告知ページです。キービジュアルの世界観に合わせつつ、イベントの楽しさやワクワク感を伝えられるようにポップで明るいイメージで構成しました。

※ キービジュアルおよび番組サムネイルは、ご提供いただいた素材です。

キャッチコピーのデザインは「ここから変わっていく」という言葉に合わせて、鮮やかな色と文字の傾きによって「変わっていく」という勢いを表現しました。

1文字ずつを線でつなげることで、「3つのプログラムを通して楽しんでほしい」というメッセージを視覚化しています。

各種バナー・グラフィックデザイン

開局1周年のバナーは、漢字部分が支給いただいた素材です。その漢字部分にあわせてロウソクとケーキのイラストを制作し、1周年記念を演出したデザインに仕上げました。

StationTV® 紹介ページ

NOTTVをiPhoneで視聴するための拡張デバイスの紹介ページです。

利用者視点でのStationTV®の魅力は、「簡単に見られること」と「軽量であること」の2点だと考えました。その魅力を強調するために、軽快さが感じられるようにデザインしました。

機能をわかりやすく伝えるために機能ごとのアイコンも制作しました。機能紹介文の文字は、StationTV®のイメージを崩さずにNOTTVらしさを感じられることを意識して、丸みのある書体を選びました。

デジタルサイネージ用の画面デザイン

mmbi社のオフィスロビーに設置されるデジタルサイネージ用の画面です。

NOTTVのブランドイメージと合わせた書体や色で構成。バリエーションとして4点を制作し、画面切り替え時に変化が感じられるようにしました。

NOTTV対応機種の判定ページ

閲覧者が使っているスマートフォンが、NOTTVに対応しているかを判定するためのページのデザインを担当しました。

判定結果が視覚的にわかりやすく、楽しい雰囲気が伝わるようなデザインを心がけました。

閲覧者の機種がNOTTVに非対応だった場合は、視聴をするための手順をわかりやすく記載し、NOTTVに興味をもっていただけるように設計しました。

SNS用カバー画像デザイン

季節の変わり目やキュンペーンに合わせて、SNSごとのカバー画像やアイコンなどを制作しました。

Twitter、Facebook、Google+の3種類を制作する必要があり、それぞれの画像サイズやレイアウトフォーマットに合わせて制作しています。

Twitter用のカバー画像とアイコンをデザイン。Twitterのユーザートップページはカバー画像の左下部分がアイコンで隠れるため、タイトルをやや右側にずらしたレイアウトにしました。

Facebook用のカバー画像。SNSごとに適したレイアウトで制作しています。

お友達ご紹介キャンペーンページ

利用者が特典を得るための手順を、イラストを用いてシンプルで親しみやすいデザインに仕上げました。

※ 人物のイラストはご提供いただいた素材です。

NOTTVサービス終了の案内サイト構築

NOTTVのサービス終了に伴い、サービス終了に関するQ&Aをまとめたサイトを新規に構築しました。情報設計、デザイン、コーディングなど、サイト構築を全て担当しました。

過去のアクセス解析結果を踏まえて、アクセス割合はスマートフォンが大部分を占めると予想できたため、スマートフォンに最適化したうえで、PC表示やタブレット表示も含めたレスポンシブ対応をしています。

特にQ&Aコーナーの文字の読みやすさや操作のしやすさに注力して構築しました。

制作・運用フローの改善

NOTTVサイトは規模が大きく更新頻度も多いため、品質とスピードの両方を求められました。そこで次の方法で効率化を図りました。

品質と運用スピードを高めるために実施した改善策

• Googleドキュメントの活用
• 制作依頼から公開までのフロー改善
• よく利用するデザイン素材のテンプレート化
• コードのスニペット化
• 共通箇所のモジュール化
• デバッグ手順の仕組み化

さらに私の不在時には他のスタッフに対応してもらえるように更新手順のマニュアルを作成し、運用体制の強化に努めました。

運用に活用したGoogleスプレッドシートと、Illustratorのデザイン素材テンプレート化の例。

デザインの作り込みやすさや微調整のしやすさを考慮して、デザイン作業は基本的にAdobe Illustratorでおこなっています。

Illustratorでパーツをにじみなく正確にスライスする方法は当時あまり知られておらず、情報が少ない状態でした。

試行錯誤のうえレイヤーのテンプレート機能を活用して、当時のAdobe Fireworksのスライス機能よりも効率的にパーツを書き出す方法を編み出し、制作速度向上につながりました。

※ プロジェクト進行当時に使用していたIllustratorのバージョンはCS6で、「アセットの書き出し機能」が存在しなかったため、上記のスライス方法で運用していました。