PAGEKit PV 01

クライアントの情報

株式会社アイデアクリップ

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

PAGEKit / ページキット

PAGEKitは、3つのステップでビジネス用ホームページが完成するWebサービスです。日本人のために日本人が開発したWebサービスで、初心者でもラクラク更新することができて、サポート満足度98%というサービスを実現しています。ホームページについての専門知識や技術がなくても、ワープロ感覚でホームページを作ることができるところが大きな特徴です。また、「15秒で作ってみる！」という押すと、本当にあっという間にホームページを作ることもできます。2026年の時点で、サイトが大幅にリニューアルされていて、アニメーションは設置されていません。
ホームページ作成 簡単 | ホームページ作成のページキット ≫

クライアントの要望

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

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

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

企画を考える

企画の課題

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

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

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

課題克服の考え方

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

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

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

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

企画のコンセプト

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

企画制作のアプローチ

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

モーショングラフィックスの制作

絵コンテ

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

キャラクター

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

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

デザイン & レイアウト

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

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

アニメーションの制作

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

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

制作依頼から納品までのスケジュール

スケジュール感

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

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

具体的な日程

• 2017年08月 ▶︎ コンセプト & アプローチ作り

• 2017年09月 ▶︎ ナレーション原稿

• 2017年10月 ▶︎ 絵コンテ作り

• 2017年11月 ▶︎ キャラクター作り

• 2017年11〜12月 ▶︎ デザイン & レイアウト

• 2018年01〜02月 ▶︎ アニメーション作り

• 2018年03月 ▶︎ PAGEKit 紹介動画の納品

制作で使用したアプリケーション

• Adobe After Effects

• Adobe Photoshop

• Adobe Illustrator