【制作実績】読み聞かせユニット「えへへほん」のwebサイトをデザイン

読み聞かせユニット「えへへほん 」のwebサイトを作りました！

えへへほんのwebサイト

 

webデザイナーとしての担当業務

ユニット名やキャッチコピーなどの相談にのったり、イラスト・ロゴ・SNSのヘッダーも担当しました。

制作期間	約２週間
使用技術	Illustrator/Photoshop/wix
対応機種	SP/PC

 

設定

ペルソナ	絵本が好きな幼稚園くらいの年齢の子どもとその親。（一緒に見る）
「えへへほん」のテーマ	笑顔を作る読み聞かせムービー
サイトのコンセプト	「〜えへへ・ほほほ・んふふ〜と笑顔になるほっこり温かいサイト」
デザインコンセプト	「ぐりとぐらのような雰囲気の絵本」白の余白が多い感じの絵本
サイトの目的	動画を観てもらう

このように決定しました。

コメント

カラー設定

ライトトーンを使って子どもっぽい、楽しい雰囲気を出しました。

同じトーンで統一させて、カラフルだけどまとまりが出るようにしました。

 

文字の大きさ

漢字が読めない子どもがほとんどだと思うので、

文字は大きくひらがなを使って読みやすくしました。

 

ロゴ

「えへへほん 」の「へへ」の部分を本の上下に見立てて作りました。

なかなか絵本に見えるようにできなかったので、微調整を繰り返しました。

 

イラスト

自分で描いたイラストを使用しています。

色は全てサイト内に使用されているライトトーンで塗りました。

温かい雰囲気が出るように心がけて描きました。

 

順番

はじめはページの順番を上から
ユニットの説明→自己紹介→動画→最新情報→コンタクトにしていたのですが、

サイトの目的は動画を見てもらうことなので一番初めに動画が目に入るようにしました。

新しく動画が更新されていないかな〜と思ってサイトを見に来る人もいると想定し、最新情報も動画を見た後に目に入るようにしました。

 

動き

PC版ではイラストがフワッと出てくるように設定し、

SP版ではローディング中にアニメーション（絵本が開かれるような）を設定しました。

 

SNSの素材

twitterのヘッダーやfacebookのチャンネルアートも作成しました。

 

おわりに

企画の段階から一緒にユニットの名前やキャッチコピーなどを考えたり提案したりしながら制作を進めていきました。

「子どもたちに観てもらって笑顔になって欲しい」という共通の思いを持って一緒にサイトを作ることができて、とても楽しかったです。

wixを初めて使ったのですが、スマホ版のレスポンシブ対応がうまくいかない部分が多く、てこずりました。