PAGEKit 紹介動画 01

クライアントの情報

企業・チーム

株式会社アイデアクリップ
株式会社アイデアクリップは、大阪にあるWeb開発会社である。10年以上も前に、誰でも自分でホームページを作ることができて、自分で成長させられるようにすることを目指して、PAGEKit（ページキット）というWebサービスを開発。利用者を要望を反映しながら、サービスの改良を続けて、信頼と安心のビジネス用ホームページ作成サービスを展開している。

商品・サービス

PAGEKit（ページキット）
https://www.p-kit.com
PAGEKitは、3つのステップでビジネス用ホームページが完成するWebサービス。日本人のために日本人が開発したWebサービスで、初心者でもラクラク更新することができて、サポート満足度98%というサービスを実現している。ホームページについての専門知識や技術がなくても、ワープロ感覚でホームページを作ることができる。また、「15秒で作ってみる！」という押すと、本当にあっという間にホームページを作ることができる。

クライアントの要望

依頼者さんの要望は、PAGEKitのランディングページにある内容をもとに、アニメーションでサービスの紹介をしてほしいとのことだった。アニメーションが完成したら、PAGEKitのランディングページに大きく設置したいということだったので、それにふさわしい内容と表現から考えてほしいという要望だった。

プラスして、最近になってライバルとなる他のホームページ作成サービスが、動画広告の配信をしているそうで、自分たちも動画広告を配信したいという要望もあった。これについては、ランディングページに設置する長めのアニメーションに合わせて、動画広告専用の30秒バージョンを作ることで依頼者さんの要望を実現することにした。

依頼者さんに詳しくヒアリングしたところ、PAGAEKitの利用者は、パソコンやネットなどがあまり得意ではないちょっと年配の人が多いということだった。なので、アニメーションの内容や表現は、できるだけ理解しやすいようにしてほしいという要望もあった。

クライアントの課題

依頼者さんによると、PAGEKitのランディングページには「15秒で作ってみる！」というボタンがあって、そのボタンを押すと誰でも簡単にホームページを作りはじめることができる仕組みになっている。ところが、せっかくランディングページに来てくれても、「15秒で作ってみる！」ボタンをなかなか押してもらうことができないという課題を抱えているとのことだった。

それから、依頼者さんと相談しているときに、限られたアニメーションの時間では、PAGEKitの特徴をすべて紹介することができないという課題も生まれた。これはアニメーションの制作でよく起こることで、ほとんどの依頼者さんは、せっかくアニメーションを作るのだから、その中でできるだけ多くの情報を提供したいと考える。

ところが、できるだけ多くの情報を提供しようとすると、情報ばかりで分かりにくいアニメーションになってしまう。分かりやすくするためには、情報の取捨選択を行ってターゲットとなる人の心を動かす内容にする必要がある。なので、分かりやすくて、なおかつターゲットの心を動かす内容を考えるという課題も生まれた。

課題克服の考え方

課題克服として、実際に「15秒で作ってみる！」ボタンを押したら、何が起こるのかをアニメーションで具体的に紹介するのが良いと考えた。というのも、初めてのPAGEKitのランディングページに来た人にとっては、それは何が起こるのか分からない謎のボタンでしかなく、勇気を出さないとボタンを押すことができない。

なので、そんな心のハードルを下げるために、「15秒で作ってみる！」ボタンを押したら何が起こるのか、アニメーションの中で具体的に紹介するのが良いと考えた。

また、ターゲットの心を動かす内容にするという課題については、依頼者さんから提供された利用者アンケートなどの資料を読みこむことでヒントを得た。というのも、PAGEKitを気に入っているのは、どうホームページを始めてよいのか分からない、ホームページを運用するのは金銭的に高い、ホームページを思いどおりに作るのは難しい、そう感じている人たちだった。

そんな人たちが、PAGEKitを使うようになって、ホームページを作る分かりやすさ、料金の安さ、簡単に思いどおりに作れることに満足するようになる。というのが、資料から分かったので、そんな利用者の心の変化を描きながらPAGEKitというサービスを紹介すれば、ターゲットの心を動かすことができる内容になるのではないかと考えた。

アニメーションのコンセプト

ホームページを作りたい人が感じる、分からない、高い、難しいを解決して、自分の手でホームページを成長させることができる簡単ホームページ作成サービス。それがPAGEKitです！

アニメーションのアプローチ

ホームページを作りたいけど、分からない、高い、難しいと感じている3人の人物の悩みを、PAGEKitの独自キャラクターがひとつひとつ解決していき、3人の悩みを、自分でもできる、安い、簡単へ変えていく。

アニメーションの絵コンテ

今回のアニメーション制作では、まずキャラクターの会話などのナレーションで内容を作っておいて、そのナレーション原稿をもとに絵コンテを作っていった。PAGEKit 紹介動画の絵コンを作るときに、特に注意したのが内容を分かりやすく表現することだった。パッと見ただけで、内容が大まかに分かるように絵コンテを作っていった。

ちまみに、紹介している絵コンテの右下にあるのは、シーン番号である。

PAGEKit 紹介動画の絵コンテ01

PAGEKit 紹介動画の絵コンテ02

PAGEKit 紹介動画の絵コンテ03

PAGEKit 紹介動画の絵コンテ04

PAGEKit 紹介動画の絵コンテ05

PAGEKit 紹介動画の絵コンテ06

アニメーションのキャラクター

PAGEKit 紹介動画に登場するキャラクターは、コンセプトとアプローチをもとに、ホームページに対して悩みを抱えている3人を設定した。コンセプトとアプローチの段階では、PAGEKitの独自キャラクターも登場する予定だったが、ナレーションを作っている段階で、独自キャラクターは登場させないことになった。

キャラクターの違いを明確に表現するために、3人の設定をもとにして、それぞれのテーマカラーとなる背景色を作ることにした。下の画像で、キャラクターの背景色となっているのがテーマカラーである。

PAGEKit 紹介動画のキャラクター01

PAGEKit 紹介動画のキャラクター02

PAGEKit 紹介動画のキャラクター03

PAGEKit 紹介動画のキャラクター04

アニメーションのデザイン & レイアウト

キャラクターの他に必要となるデザインは、ほとんどをIllustratorで作っている。分かりやすさを重要視して作っていて、3人のキャラクターにそれぞれ背景色を設定しているので、それらに合う配色にするのが難しかった。

また、アニメーションに登場する3人のキャラクターが作ったホームページも、すべてウゴモーションが実際にPAGEKitを使わせてもらってデザインしたものである。3人のキャラクターの設定をよく考えた上で、ホームページのデザインや写真だけでなく、文章まですべて作り込んでいる。

PAGEKit 紹介動画のデザイン&レイアウト01

PAGEKit 紹介動画のデザイン&レイアウト02

PAGEKit 紹介動画のデザイン&レイアウト03

PAGEKit 紹介動画のデザイン&レイアウト04

PAGEKit 紹介動画のデザイン&レイアウト05

PAGEKit 紹介動画のデザイン&レイアウト06

アニメーションの制作

PAGEKit 紹介動画のアニメーション制作で、特に注力したのが3人のキャラクターの感情表現だった。顔のパーツによる表情だけだと感情が強く伝わらないので、キャラクターの感情に合わせて体の動きを加えることで、より感情が伝わるように工夫している。

また、場面転換のところでも3種類のアニメーションを使っていて、内容が大きく変わるところ、流れの中で場面が変わるところ、新たな情報が登場するところなど、どんな場面転換なのかに合わせて3種類のアニメーションを使い分けている。

PAGEKit 紹介動画のアニメーション01

PAGEKit 紹介動画のアニメーション02

PAGEKit 紹介動画のアニメーション03

PAGEKit 紹介動画のアニメーション04

PAGEKit 紹介動画のアニメーション05

PAGEKit 紹介動画のアニメーション06

PAGEKit 紹介動画のアニメーション07

PAGEKit 紹介動画のアニメーション08

アニメーションのスケジュール

PAGEKit 紹介動画の制作では、時間がかかっても良いからアニメーションの品質を高めてほしいというのが、当初から依頼者さんの要望だった。なので、そうできるように、時には他の仕事と並行しながら作業を進めたり、時には他の仕事を優先させて作業を止めたりしながら、地道に制作を進めていくこととなった。

なので、スケジュールの日程については、その頃にはその作業を進めていた...というアバウトな日程を紹介することになる。

スケジュールの日程

2017年08月 = コンセプト & アプローチ作り
2017年09月 = ナレーション原稿
2017年10月 = 絵コンテ作り
2017年11月 = キャラクター作り
2017年11〜12月 = デザイン & レイアウト
2018年01〜02月 = アニメーション作り
2018年03月 = PAGEKit 紹介動画の納品

アニメーションの成果

PAGEKit 紹介動画 30秒バージョンが、2018年04月09日からYouTubeで動画広告として配信が開始された。依頼者さんに教えてもらったところ、1再生にだいたい2円ぐらいの広告費が必要になったそうである。これを書いている時点での大まかな統計データを紹介しておこう。

PAGEKit 紹介動画 30秒バージョン

広告媒体 : YouTube
広告種類 : TrueView インストリーム広告
今回のデータ : 2018年04月09〜24日
総再生数 : 5223回
1日平均の再生数 : 348回
1日平均の広告予算 : 500円前後
平均視聴時間 : 29秒

PAGEKit 紹介動画 130秒バージョンも、2018年04月08日からPAGEKitのランディングページに設置されて、誰でも見ることができるようになった。ちなみに、こちらはまだ動画広告としては配信されておらず、依頼者さんの考えでは、いずれ130秒バージョンも広告配信したいとのことだった。

PAGEKit 紹介動画 130秒バージョン

設置媒体 : PAGEKitのランディングページ
LPのURL :https://www.p-kit.com
今回のデータ : 2018年04月08〜24日
総再生回数 : 415回
1日平均の再生数 : 26回
平均視聴時間 : 99秒

というのが、この投稿を買いている段階での結果となる。

動画広告にしても、ランディングページへの設置にしても、まだ始まったばかりなのでまだ結果や成果という段階ではないのだろうと思う。それを考慮してデータを見ていくと、30秒バージョンの動画広告は、わずかな金額で多くの人にサービスを知ってもらうことができるようだ。YouTubeの動画広告には5秒経つとスキップできる機能があるにも関わらず、多くの人が30秒バージョンの終盤まで動画を見てくれている。

また、130秒バージョンのほうも、視聴回数は少しずつしか増えていないけれど、全体で60%の人がアニメーションを最後まで見てくれている。YouTubeアナリティクスのデータによると、視聴者維持率では、最初から最後まで平均より上であるとのことである。