動画の学び舎さまのLP／バナーコンペで審査員賞および大賞を受賞しました！

今年（2024年）の3月からX上で開催されておりました、動画編集スクール「動画の学び舎（@Marika__kouhou）」様主催の「LP／バナー制作コンペティション大会」にチームで参加いたしました！

そして先月結果が発表され、参加した21作品中、なんと…

当チーム制作のLPが審査員賞、バナーが大賞を受賞しました🥳🎉

今回の記事では、LP制作の過程や流れについて、各セクションの担当メンバーに聞いた話を交えながらご紹介していきます！

受賞した際に審査員の方々からいただいた嬉しいお声の数々も掲載していますので、ぜひ最後までお付き合いいただければ嬉しいです。

動画の学び舎LPコンペの概要

私たちチームが参加したのは、「動画の学び舎」という2024年2月に設立されたばかりの動画編集スクールが主催したLPとバナー制作のコンペ大会です。

「デザイナー・ライター・コーダーのチームでの参加可能」とのことだったので、チーム4名で参加することにしました。

コンペの概要は以下のとおりです。

動画編集スクール「動画の学び舎」LP／バナー制作コンペティション大会

• 主催者：動画の学び舎（https://do-mana.jp/）
• 募集期間：2024年3月20日まで
• 提出締切：2024年4月15日
• 結果発表：2024年4月30日
• 資格：18歳以上、実務経験不問、デザイナー・ライター・コーダーのチームでの参加可能
• 形式：スマホサイト・PCサイト（レスポンシブ可）
• LPのコンバージョン：動画の学び舎の無料相談会の参加やお問い合わせ
• 素材：ロゴ、写真、アイコン（使用するかは自由）、著作権フリーの素材の使用可
• 納品：HTMLもしくはWordPress
• 賞金（LP部門）：
  • 特別賞　50万円　※該当作品が選出されない場合あり
  • 大賞（1名）10万円
  • 審査員賞（3名）3万円
  • 動画の学び舎賞（最大50名）2,000円
• 賞金（バナー部門）：
  • 大賞（1名）1万円
  • 審査員賞（5名）1,000円
• その他：ポートフォリオ・SNSへの掲載可

大会開催の趣旨
設立間もない動画の学び舎をWEBサイト＋ネット上に認知を広がるために、皆さんに無料でLP制作をお願いしておりました。X上で募集した所予想以上の反響があったため、制作頂く方に還元したい気持ちとイベントとしてたくさんの方々にLPを作ってもらいたいと思い開催させて頂くことになりました。

まりか＠動画の学び舎@Marika__kouhou

参加メンバーと役割

3月中旬にメンバーのえみさんからコンペについて「実績にもなるしやってみよう」とメンバー全員に声をかけられました。

みんな「参加しよう！」と二つ返事で答え、ノリノリで参加することになりました。

チーム内の役割分担はこんな感じ。

最終的には、LP部門とバナー部門の両方に参加することになりました。

LPの制作準備（ターゲット・ペルソナ、要件定義）

チーム内の役割が決まったら、次は

• ターゲット・ペルソナ
• 要件定義

の設定をしていきました。

ターゲット・ペルソナの設定

今回のコンペのターゲットは、主催のスクール自体が「動画を学びたいすべての人」がターゲットであることもあり、参加者自身が自由に決めてもいい、とのことでした。

そこで、まず「ターゲット・ペルソナ」の設定から始めました。

動画制作に一番敏感な年齢層や性別はどこかをチーム内で考え、「大学生男性」とターゲットを設定。

チーム全体がターゲットへのアプローチを考えられるよう、ツールを使いながら詳細なペルソナの設定していきました。

ツールだけだと少し現実と乖離している部分が多いため、えみさんが中身を肉付けして行っています。

要件定義

LPは主にSNSからの流入を想定し、モバイルファーストのデザインを採用。

閲覧途中でユーザーが離脱してしまうような単調な作りにならないように制作しました。

コンバージョン部分は、始めは今回のターゲットである「大学生男性」の使用率の高い公式LINEへの誘導を想定していました。

ところがコンペ開催時には、主催者様が公式LINEを開設されていなかったため、メーラーの起動としました。

バナーについては主な流入経路と想定される、Xで使用できる広告用のバナーとして制作。

メインビジュアルを流用してLPとの齟齬がないようにし、ペルソナが求める情報が一目で入るようなデザインにしました。

LPの制作プロセスの詳細

ターゲット・ペルソナ、要件定義の設定後に、今回のコンペで実際に行ったプロセスはこんな感じです。

それぞれの作業についてメンバーに聞いた話を交えながら、ひとつひとつ解説していきます！

説明会の参加と草案の制作

コンペの説明会に参加し資料を確認。
その内容からテキストベースでLPの草案を制作しました。

法則に沿いつつも、「ペルソナだったらどんなことを知りたいのか？」「こんな内容があった方が良いのではないか？」を考えつつ内容を埋めていきました。

コンセプト立案と参考デザイン探し

ペルソナを軸に、「ネットリテラシーが高く、情報に敏感、フットワーク軽め（すぐに行動に移せるという意味で）」であることを想定しました。競合他社であるオンラインの動画／プログラミング／Webデザインスクールを参考デザインにし、その中でも「ブルー基調・キレイめ・情報が整理されている」ものに絞りました。

デザイン制作

クライアント様よりいただいた有益な情報（動画市場は右肩上がり）や、競合と比較してのメリット部分など掲載したい情報が多数ありました。それらをできるだけ図やイラスト・グラフで表現し、パッと見ただけで視覚的に情報を得て興味をそそるように工夫いたしました。

チーム内でデザインの校正を何度も行い、ペルソナが魅力的に感じるデザインはどんなものか？、見やすくわかりやすいデザインはどんなものか？と何度も何度も話し合いながら進めました。

テキスト校正とキャッチコピー制作

ペルソナである大学生男性が「自分のことだ！」と感じられるように校正しました。

キャッチコピーに関しても動画の企画から制作・運用を学んで就職や将来に活かしたいというペルソナをイメージして制作しました。

同時に、クライアント様である「動画の学び舎」のメリットが感じられる一言を作ろうという意識で取り組みました。

10本ほどに絞り込み、チームメンバーに意見を聞き、その中で票の集まった、

「一瞬のバズよりも、誰かの心を震わせる動画を」

をキャッチコピーに決定。

「一瞬のバズ」と「心を震わせる」に「一瞬と永遠」という対句のような効果をもたせることで、見た人の印象に残ると考えました。

サブコピーの「動画を「見る」時間を「学ぶ」時間へ。」は、動画の学び舎の「好きな時間に受講できる」という特徴から、普段は動画を見て暇つぶしをしている時間を、動画の学び舎でなら動画を学ぶ時間に変えられるという意味を込めています。

メインビジュアルの上部にある「今週、スクリーンタイムが3時間を超えた人へ。」も同じ意味合いがあります。

以下の記事にもコピーの作り方を詳しく紹介しています。ぜひ合わせてご覧ください！

構築

アクセスした時に印象に残るようなアニメーションを心がけ、細かな制御をJsとCSSで行うことで様々なデバイスでの崩れのない構築を行いました。一部抜粋して解説します。

メインビジュアルとフッターの画像のアニメーション制御にはGSAPを使用し、PCとSPの画像のアニメーション制御には、IntersectionObserverを使用しています。IntersectionObserverを使用して要素がビューポート内に表示されるかどうかを監視し、それに応じて要素にクラスを追加または削除することで、アニメーションを制御しています。

PCのMENU部分

ビューポートの高さが変化すると、要素の高さもそれに応じて自動的に調整されるようにしています。

height: calc(var(--vh, 1vh) * 100);

var(–vh, 1vh): –vh という名前のカスタムプロパティの値を取得します。
この値が未定義の場合、デフォルト値として 1vh を使用します。vh はビューポートの高さの1%を表し、* 100: 取得した値に100を掛けます。これにより、ビューポートの高さの100%に対する相対的な高さが計算されます。
この場合、カスタムプロパティの値と100を掛けることで、要素の高さが計算されます。このコードで、ブラウザのウィンドウサイズが変更されたときのビューポートのサイズを調整しています。

const dimensions = (function() {
const windowObj = $(window);
return {
vh: .01 * windowObj.innerHeight(),
vw: .01 * windowObj.innerWidth()
}
})();
document.documentElement.style.setProperty("--vh", dimensions.vh + "px"),
document.documentElement.style.setProperty("--vw", dimensions.vw + "px")

CVエリアのアニメーション

このコードは、要素の明るさと彩度の変化をなめらかに行われるように設定しています。

filter: brightness(5) saturate(0.5);
transition: all 2s ease;

brightness(5): 要素の明るさを調整します。この場合、元の明るさの5倍に設定されています。
saturate(0.5): 色の彩度を調整します。この場合、元の彩度の50%に設定されています。

【審査員賞と大賞受賞】完成したLPとバナー

完成したLPとバナーがこちらです！

メンバー全員が一丸となって作り上げたので、納品後は「おつかれ！」「素敵なデザイン・構築ありがとう！」と何度もお互いを労いました。

そして、4月30日の結果発表では、見事！

それぞれ受賞できました！！

結果発表後もチャット内は「すごい！」「やったー」という声が飛び交いました（笑）

受賞の際の審査員からのお言葉

審査員からの嬉しい受賞コメントもいただけたので、公開しちゃいます！

コンペに参加して本当に良かった！

この経験からチーム内の課題も多く見つけることができ、とても勉強になりました。更にステップアップしていけるように日々努力します☺️✨

ホームページ制作をしたい！ランディングページ制作をしたい！などご要望がありましたらお気軽にお問い合わせください。チーム一丸となってあなたをサポートします✊🏻𖤐 ̖´-