kawada haruka portfolio

Hinano You Official Site

web site（クライアントワーク)

概要

情報設計

デザイン

サイトを見る（別サイトに移動)

「クライアントのブランディング」

クライアントは配信プラットフォーム「IRIAM」および「YouTube」で活動しているVtuberです。私自身、Vtuberのファンとして情報に追いつけなかったり過去のイラストを見るためにTwitterのメディアを遡ったりと大変な思いをした経験があり、クライアントも情報を纏める場所や自身を知ってもらうきっかけが欲しいとのことで、サイト作成を行いました。

内容: クライアントワーク(卒業制作)

課題: ①情報の錯乱 : Twitterのみでの運用のため、過去の情報が遡りにくい。

②他Vtuberとの差別化 : 数多くのVtuberが存在するため、埋もれてしまう。

目的: ①情報の集約化 : サイトに全ての情報を纏めることで、情報を追いやすくなる。

②差別化 : サイトを持つVtuberは少ないため、差別化を図れる。

③名刺代わりの使用 : イラストの依頼時などにサイトを見てもらうことで人柄など伝えやすくなる。

ゴール地点: 日奈乃葉のブランディング(ユーザーからの認知)

ターゲット: Vtuberが好きな人、またはVtuberから依頼を受けるクリエイター

サイトコンセプト: まるごと日奈乃葉（日奈乃葉のすべてがわかるサイト）
明るい、元気、ポップでわくわくするサイト

制作期間: ワイヤーフレーム : 1週間
デザイン : 3.5週間
コーディング : 一ヶ月
WordPress化 : 1週間

使用ツール: Photoshop / DreamWeaver

企画書

情報設計

(01)
ユーザーリサーチの結果を反映

Vtuberが好きな人に事前にアンケートを実施。何を知りたいか、重視しているかを把握。結果から、「人柄が知れるプロフィール」「過去のイラストを見ることが出来るギャラリーページ」「Twitterで運用している告知等を抜粋したお知らせページ」を作成しました。
(02)
ギャラリーページの細分化

イラスト数が多いため、ただ単純にまとめるだけではなくジャンル分けをして配置しました。こうすることで、イラスト追加した際にもユーザが見つけやすく、統一感も出ると考えています。
(03)
ファーストビューにLive2Dを配置

Vtuberの要であるLive2Dはファーストビューに配置しました。また、ユーザーが気にしている「雰囲気」「喋り方」「人柄」に関しては、オリジナル動画をサイト内で視聴出来るようにし、ファーストビューには直接飛べるようリンクを配置しました。

デザイン

(01)
クライアントのイメージを反映

「エンタメ界隈の人間」「明るく元気な人柄」であることを意識し、ポップなイメージに仕上げました。また、Live2D使用時によく動くVtuberさんなので、サイトも動きを多くつけています。向日葵がファンマークなので、メインカラーはオレンジ、アクセントカラーに緑を使用しました。
(02)
メリハリをつける

NEWSページや記事ページは文字情報を届けたいため、イラスト配置はせず文字のみを配置しています。ギャラリーページではイラストを目立たせたいので背景を変更し、方眼紙のような色みが邪魔しないもの、でもポップな印象は残したものにしています
(03)
遊びココロを取り入れる

クライアントがゲーム好きなことから着想を得て、様々な要素を取り入れました。背景は、〇×△などゲームボタンをイメージ。ギャラリーページの衣装セクションではキャラクター選択のような形でデザイン、動きを取り入れました。プロフィールの「もっと知る？」では音楽ゲーム選択画面のようにくるくると回り、選択できるようになっています。