文字数だけは多い、一日一サイトレビュー

JAL STEAM SCHOOLの案内サイト。

https://www.jal.com/ja/csr/soraiku/steamschool/

ターゲットは親子（子供は小学生）。
以下二点で、他の親子講座との差別化を図っている。
・STEAMという、5つの領域の学習ができる
・JALという航空会社の持つ、「飛行機」というブランド

基本的にはシンプルな配色、ページ構造にして、安心感を与えつつ、ところどころに遊び心を入れ、ワクワクを喚起させるデザインになっていると思う。

トップにプログラムの動画を配置することで、サイト訪問者が具体的にプログラムのイメージを掴むことができる

トップ画面に、プログラムの様子を撮影した動画を載せ、プログラムに以下の特徴があることを、サイト訪問者がより具体的にイメージできるようにしている。
・操縦士の人からレクチャーを受けられること
・デジタル（ipadを用いた授業）、アナログ（飛行機ミニチュアづくり）を組み合わせた体験ができること
・子供たちが中心になって学び、親が後ろから見守れること
・参加証として、飛行チケットのようなものをもらえること
この動画により、親は「子供が手を動かし、夢中になれるプログラム」であると感じることができる。子供は「ブロックを使ったり、飛行機を自分なりにつくれて、ワクワクできそう」と感じることができる。

安心感とワクワクを両立させた配色

サイト内の配色は、主に白、灰、赤の３色。
基本的には白と灰の背景で、落ち着いた印象を持たせている。しかし、ポイントポイントで文字色やオブジェクトに赤を出すことにより、楽し気、ワクワクする感じを押し付けがましくなく、出すことができる。親に安心感を持ってもらうために、あえて配色は抑えめにしているのではないか、と感じた。

フォントによる、子供向けの配慮

日本語フォントは基本的に以下の二つを使用している。
・Rounded Mplus 1c
・YuGo
前者の「Rounded Mplus 1c」は柔らかい印象を与えるフォント。本サイト内でこのフォントが適用されている文字は、サイズを16px以上の大きめのサイズ感で、ふりがなもふってある。
カリキュラム概要や項目の部分にこのフォントが適用されており、このサイトの入り口であるため、子供が読んでも、あまり抵抗感を感じないようにするため、このフォントやふりがなのような工夫をしているのではないか、と思った。
後者の游ゴシックはおなじみのフォーマルフォント。「Rounded Mplus 1c」だけだと、印象が砕けすぎてしまうため、サイトを引き締めてくれている。

単調にしない工夫

S字の目線移動を飛行機によって案内させたり、画像を中央に寄せるようにモーションさせてみたり、構造がベーシックだからこそ、モーションによって飽きさせない工夫を盛り込んでいる。

飛行機チケットのデザインを申し込みフォームリンクへのボタンにしていたり、動画再生ボタンをホイールにしていたり、随所に「飛行機」という世界観を表現している。
また、サイトの両サイドに上に向かって飛行機と岩（おそらく）が進んでいくアニメーションがある。影の出方からして、出立前の滑走路で地上を進んでいる状態時の飛行機と思われる。僕の予想なのだが、おそらく、この飛行機たちは、子供たちを、将来的に大空を羽ばたいていく存在＝出立前の飛行機と捉え、表現しているものと思われる。岩が一緒に進んでいるのは、「原石」を表している（たぶん）。世界観をちょっとした小道具で補強することにより、深みが増すななあ、と感じた。深読みかもだけど。