【はじめての方はこちらをクリック!】《独学応援ブログ》では、Web制作の独学・営業・案件の進め方などのお悩み解決につながる記事を書いています。

【独学応援サロン】第1回デザインコンテスト 結果発表【+第1回コーディングコンテストの告知】

平均読了時間→ 3

今回は結果発表です!

完全無料のコミュニティとして運営している独学応援サロンですが、無料だからといって何の企画もなければメンバー同士の接点を増やせないよなぁということではじめてみたデザインとコーディングのコンテスト企画。

毎月一回ずつ実施することで駆け出しのみなさんに「制作例」と呼べるものを増やしてもらい、営業をはじめるときの武器を蓄えてもらえたらと思っていますが、今回は記念すべき第1回デザインコンテストの審査結果を発表します。

まずは今回のお題から確認していきましょう。

企画の概要はこちら
エントリー作品の一覧はこちら

今回のお題

今回は「クラウドソーシングで幼稚園の入園説明会のLP制作を受注し、クライアントから下記の基本情報をいただいた」という設定です。

あくまでクライアントはWebの知識がなく、構成も考えていないため、受注した側が考え、クライアントに確認しながら設計〜デザインすることになりますね。

「もちろんスマホ版のデザインも必要ですよね?」とか「サイズはどうしますか?」とか「園長先生のあいさつ文、長すぎませんか?」などといった通常の案件対応で必要な確認は、主催者である僕にDMで聞いてもらうことで判断していただきました。

それぞれ着眼点が異なり、そういうところにも個性が出るなぁと感じましたね。

今回の基本情報

幼稚園名:わくわくこども園

Webサイトの用途:入園説明会の告知LP

キャッチコピー:安心とぬくもりが広がる、わくわくこども園。子どもたちの幸せな日々を共に歩みます。

園長からのあいさつ

わくわくこども園の園長、山田と申します。

「安心とぬくもりが広がる、わくわくこども園。子どもたちの幸せな日々を共に歩みます。

このキャッチコピーを胸に、私たちは保護者の皆様とともに、お子さまの成長と幸せな日々を大切に育んでまいります。

わくわくこども園は、お子さまが安心して学び、のびのびと自己表現できる場所を提供しています。

私たちは、お子さま一人ひとりの個性を尊重し、温かなぬくもりと愛情で包み込みながら、確かな教育を提供してまいります。

教育は単なる知識の伝達だけではありません。

私たちは、お子さまが夢を抱き、自信を持ち、思いやりと共感の心を育むことを大切に考えています。

豊かな経験や多様な学びの場を通じて、お子さまの可能性を引き出し、成長を支えてまいります。

また、わくわくこども園は、保護者の皆様との信頼関係を大切にしています。

日々の連携を大切にし、保護者のご要望やお子さまの成長に寄り添いながら、共に歩んでまいります。

保護者の皆様のご支援とご協力が、お子さまの幸せな日々を作り出す大切な要素です。

わくわくこども園は、お子さまとともに未来への一歩を踏み出す大切な場所です。

保護者の皆様と共に、お子さまが笑顔で過ごし、成長を実感できるよう努めてまいります。

心よりお子さまのご入園をお待ちしております。

わくわくこども園で、お子さまの幸せな旅立ちを共に歩んでまいりましょう。

敬具

わくわくこども園 山田


入園説明会日程:6月4日12:00〜、6月11日12:00〜、6月18日12:00〜、6月25日12:00〜

メインカラー:#1C6EB8

納品ファイル形式:自由

参考サイト

審査方法

肝心の審査方法ですが、こちらはサロンメンバー達による一般審査の点数とサロン主である僕による5段階評価を足したその合計点を競っていただきます。

まず、メンバーたちによる一般審査は、ひとり1ポイントとして換算。

その際の選ぶ基準はなんでもOK。

たとえばこんな理由で…
  • このデザインは真似したい
  • このデザイナーさんと仕事がしたい
  • このデザインをコーディングして自分のポートフォリオに載せたい

などなど色んな理由が考えられますが、とにかくどんな理由であっても1点は1点として加算します。

また、僕の方はLPデザインにおいて大切な要素として下記の5つを審査させていただき、5点満点で採点します。

LPデザインの審査項目
  1. 目的とコンテンツの一致
    • ランディングページの目的やクライアントの要望に合わせてデザインされているか?コンテンツが明確で、ユーザーが求める情報を簡潔に伝えることができているか?
  2. ユーザビリティ
    • デザインが使いやすく、視覚的にわかりやすいか?ナビゲーションの明瞭さ、情報の整理、読みやすさなど、ユーザーがサイトを快適に利用できるか?
  3. 色の組み合わせ
    • 視覚的に魅力的か?カラーパレットが適切か?色の組み合わせが調和しているか?フォントや画像が適切か?
  4. レスポンシブデザイン
    • デザインはモバイルフレンドリーか?
  5. CTA
    • ランディングページの目的が訪問者に特定のアクションを促すことであると理解しているか?コール・トゥ・アクションが明確で、目立つ位置に配置されているか?ボタンのデザインや文言は適切と言えるか?。

以上を踏まえて、今回エントリーいただいた4作品を審査させていただきました。

ちなみに、それぞれのコメントでは率直な感想を書いています。

真面目に捉えすぎて傷ついたりしてほしくないなぁと思いつつも、それぞれのさらなるパワーアップのためにあえてオブラートに包むことを忘れてバカ正直にコメントしてますので、その点はご理解いただけると幸いです。

それでは、結果を見ていきましょう!

エントリー作品

エントリーくださった4名には本当に感謝しかありません。

これからたくさん参加者が増えてほしいと願っていますが、その第一歩を踏み出せたのはみなさんのおかげです。

また、そんな4名の作品に投票してくれたサロンメンバーたちにも感謝が尽きません。

これから毎月の定番として継続していきますので、よろしくお願いしますね!

それでは、みなさんの投票数と僕のバカ正直なコメントをご覧ください👇

①ゆうきさん

ゆうきさんが22年6月のデザインコンテスト用に作った幼稚園の入園説明会LP
この他にSP版あり。

審査結果

◆合計得点:10点!

◆一般審査:6点!

◆5段階評価:4点!

1111

◆コメント

一言で言うなら、「決して悪くはないけど、もっと良くできる!」です。

特に素敵だと思ったポイントは3つ。

  1. ユーザー目線で配置されたコンテンツ(ここだけでもう1点プラスしたいレベルです)
  2. (この記事には載せていませんが)SP版のデザインの質
  3. ユーザーに最終的なアクションを促すLP最後尾のボタンのデザイン

一方で、啓発点として挙げたいのも3つ。

  1. 指定されたメインカラーをメインカラーとして使わないという判断(色のトーンが暗いからといって幼稚園にふさわしくないわけでもないですよね)
  2. 子どもたちの元気さやわくわくさが感じられる参考サイトと比較して全体的に単調な印象が否めない色使い
  3. 編集したものの日本語として違和感のあるというか、どこかAIっぽい園長のあいさつ文

ということで、僕からは3点とさせていただきました!

②ことりえさん

審査結果

◆合計得点:3点!

◆一般審査:1点!

◆5段階評価:2点!

11

◆コメント

素敵だと思ったポイントは2つ。

  1. クライアントの要望に答えつつ、構成からはターゲットである保護者に安心や興味関心を持ってもらうことを意識したことが伺える
  2. 各セクションの情報が整理されていて分かりやすい

一方で、啓発点は4つ。

  1. 幼稚園っぽさは表現できているものの、全体的に単調な印象が否めない色使い
  2. 「園長からのあいさつ」のフォントサイズと背景色とのバランス
  3. レスポンシブではない
  4. もっと目立たせ、もっと直接的な表現ができるCTA

ということで、僕からは2点とさせていただきました!

③あーやさん

審査結果

◆合計得点:1点!

◆一般審査:0点!

◆5段階評価:1点!

1

採点する前に、あーやさんに関して補足します。

今回、あーやさんは学習中の身でありながら参加してくれました。

これってめっちゃ勇気がいると思うんですよ。

経験者の作品と並べられる恐怖もあるだろうし、自分の作品にどんなコメントがつくのかも不安でしょうしね。

しかし、デザイン初学者の段階で参加してくてくれたことには大きな意味があると思います。

デザインの質を高めるためにはとにかくフィードバックが重要ですから、あーやさんがエントリーしてくれたことが嬉しかったですし、ぜひこれから参加し続けていただき、成長していく姿をみんなに見せてほしいとも思っています。

ということで、素敵なポイントはこちら!

  • クライアントの要望を理解し、対応している点

啓発点は、こちら!

  • LPとHPの違いを学ばれると良いかもです(DMをいただければ直接アドバイスさせていただきます)

ということで、僕からは1点とさせていただきました!

④ikueさん

審査結果

◆合計得点:18点!

◆一般審査:14点!

◆5段階評価:4点!

1111

一言で言うなら「好き」笑。

間違いなくデザイン素人の僕には絶対に生み出せないデザインに感服させられました。

素敵なポイントは多いですが、特に今回の4作品の中で抜きん出ていたのは2点!

  1. メインカラーを活かしつつ、参考サイトと同じように子どもたちの楽しそうな声が聞こえてきそうな配色と写真や図形のセンス
  2. ユーザーの視線を迷わせないコンテンツの配置

もっともっと良くするための啓発点は1点。

  • ズバリ、構成です。ゆうきさんのようにユーザーの立場になって必要な情報を検討し、ゴールに向かって適切な順番を考えるステップを、デザインを考える前に設けてみることをおすすめします。
  • 入園説明会ということは、「わくわくこども園」の特徴や毎年の恒例行事を知らない保護者のみなさんがターゲットですよね。ということは、「自分の子どもを安心して預けられそうか?」「子どもはどんな環境でどんな生活を送ることになるのか?」などといったことを少しでもイメージできるような情報をLPの前半部分に載せることで「入園説明会に行く」という行動の優先順位を少しでも高めてもらうことが大切です。
  • そのために、申し込みボタンの文言をより具体的な表現にしたり、画面上に追従ボタンを配置して「ここの説明会に行ってみたい!」と思った瞬間に申し込みボタンを押せるようにするなどといった工夫も必要かもしれません。
  • ちなみに、エントリー後のお話の中で「HPへのリンクを入れた方が良かったかも?」とのお話がありましたが、僕は入れない方がいいと思いました。
  • あくまでLPはLPです。基本的にLPの途中で入園説明会に申し込む以外の行動をさせてはなりませんので、仮にHPへのリンクを貼るにしてもフッター部分がいいんじゃないですかね。離脱されたら、普通は帰ってこないですし。ご参考ください!

優秀作品はこちら!

ということで、第1回デザインコンテストの優秀作品は④ikueさんの作品に決定しました!

記念スべき初代優秀作品に選ばれたikueさんの歓びの声はこちら👇

ikueさんのコメント
今回のデザインを制作する上で気をつけた点はなんですか?

このLPを作るにあたって子供向けのかわいいデザインにしようと思ったのですがあくまでもターゲットは子供ではなく保護者なので「この園に子供を安心して預けられる」と思って入園説明会に来てもらえるというのをゴールにしました。 そのために全体的に動きや曲線を多く使って堅苦しくならないように柔らかいイメージにしましたが、園長先生の挨拶はしっかりと伝えられるようにシンプルに読みやすく作成しました。安心感を与えるために園長先生の顔写真も入れました。 また、入園説明会の案内のところではメールと電話のボタンを置いてすぐに申し込みがしやすいようにしました。 この他にも、このままこども園のHPに飛べるリンクを入れたり、下にスクロールしたときにページトップに戻るボタンを固定で右下に置くなどすれば良かった…とか後からいくらでも修正したくなりますね🥲

特に大変だったことはなんですか?

今まで小さいものしか作ったことがなく、LP自体が作ったのは初めてだったので幅を合わせたりフォントやフォントサイズに気をつけたりコーディングのことを考えて作ることの大変さがわかりました💦

このデザインをコーディングする人に伝えたいことはありますか?

どんな事に気をつけたらコーディングがしやすいか私なりに調べながらデザインをしたのですが、実際コーディングをする上でもっとここをこうした方が良いというアドバイスがあれば教えて頂けたら嬉しいです。

第一回コーディングコンテストの告知

ということで、このまま6月のコーディングコンテストのエントリーを開始します!

今回のデザインデータは独学応援サロンのドライブに格納されているので、そちらからダウンロードしてください。

ちなみに、ikueさんのデザインデータはとても丁寧なのでコーディングし易いと思いますよ。

スケジュールはこちら👇

6月のコーディングコンテスト
  • 6/18: エントリー開始
  • 6/28: エントリー締め切り
  • 6/30: 結果発表

作品の提出方法はシンプル!

作成したファイルを各々のサーバーにアップしていただき、そのURLを僕に送っていただければOKです👍

それでは、たくさんの方々の参加をお待ちしております!

Visited 27 times, 1 visit(s) today
ご感想はぜひツイートお願いします🧑‍💻
ABOUT US
めがねん管理人
Web制作の独学を「ただしく、くわしく、わかりやすく」|フリーランス5年目|Web制作の独学者向けブログ《独学応援ブログ》、無料コミュニティ《独学応援サロン》、個別サポートサービス《独学応援メンター》運営|ガジェット、SF、犬が好き🐶