エーアンドエーのデザイナーが選ぶ、デザインが素敵な小学校サイト10選［前編］
みなさん、こんにちは。
今回は、シリーズ化している「デザインが素敵なサイト10選」の第3弾、「エーアンドエーのデザイナーが選ぶ！デザインが素敵な小学校サイト10選［前編］」をお届けします！
前回までの記事はこちら
大学サイト編
デザイナー歴10年以上のプロが選ぶ、デザインが素敵な大学サイト10選［前編］
専門学校サイト編
デザイナー歴10年以上のプロが選ぶ、デザインが素敵な専門学校サイト10選［前編］
昭和学院小学校
第3弾さっそくいきましょう！最初は「昭和学院小学校」です。
シンプルで品が良いですね。
ですね。全体的にシンプルなデザインなので、画像がぐっと引き立ちます！
トップページではメイン画像を大きく使っていて、学校の雰囲気がとても良く伝わってきますね。
下層ページも画像がたくさん使われてますね。どの画像もキレイ。
画像の色味が統一されてますね。フィルム写真みたいな雰囲気があって素敵です。
画像と言えば、トップページバナーが細長くて印象に残りました。
PCで見るとこじんまり見えますが、スマホではちょうどよく見えるので、PCよりもスマホの表示を優先してデザインが考えられてるのかもしれませんね。
注目したポイント
- シンプルで品の良いデザイン
- 学校の雰囲気が伝わる写真
- スマホでの見やすさを考えた配置
はつしば学園小学校
続いては「はつしば学園小学校」。ポップでかわいいデザインですね！
あしらいや色使いも賑やかで元気な感じが伝わってきます。
ですよね。私も曲線、円のあしらいや色使いがポップで楽しそうだと思いました。
まさに、キャッチコピーの「色とりどりの世界」ですよね。
明るい色を使ってる印象を受けますが、少し明度が落とされていて見やすさも考えられてますね。
トップページのメインビジュアルの見せ方、ここまで割り切ってしまう学校サイトは新鮮ですね。
たしかに。珍しいですよね。常に様々な場面が流れているのでつい見ちゃう。
そうなんです。だから画像が小さくても賑やかに見えますね。
スマホだと、メニューが画面下で固定されてますね。
よく使う項目もメニューと同じ画面下にまとめてありますね。スマホでの閲覧が意識されていいと思います。
注目したポイント
- ポップなあしらいや色使い
- 小さい画像が複数流れるメインビジュアル
- 考えられたスマホ表示でのメニュー位置
湘南白百合学園小学校
こちらは「湘南白百合学園小学校」。ローディングがどーんとせまってくるようですね。
そのあとに表示される、キャッチコピー「湘南の学舎へようこそ」の「ようこそ感」がより強まってる感じがします。
キャッチコピーが大きいのもインパクトがあっていいと思います！
メインビジュアル下のコンテンツに、小さなドットやストライプが使われていてかわいいですね。
かわいさもあるし、きれいさもありますよね。上手に融合されているなと思います。
グローバルメニューにマウスオーバーすると、それぞれ画像ありのリンクが表示されますね。
ですね。他にも画像が、たくさん使われてますよね。中ページとか。
画像が大きく使われていて学校生活が伝わりやすくていいですよね。
注目したポイント
- インパクトのあるローディング
- 「かわいい」と「きれい」の融合
- 学校生活が分かるたくさんの画像
大阪教育大学附属天王寺小学校
続きまして「大阪教育大学附属天王寺小学校」です。こちらもローディングが表示されますね。
フクロウのモチーフに色が塗られていくみたいで可愛いですね！
私は、ぱっと見、大学サイトのような印象を受けました。
真面目で誠実そうな雰囲気ですよね。
渋い緑色を使ってるからですかね？
でもモチーフに遊びがあったり、明るい色を使っているので地味にはなってないですね。
四角がいくつか積み上がったようなパーツとかですよね。各ページのタイトルもそのパーツで揃えているのが面白いなと思います。
そうなんですよ、真面目さの中に遊び心もあっていいですよね。
そのあたりが「個が生きる学校」というキャッチコピーに合ってますね。
注目したポイント
- 動きのあるローディング
- 真面目で誠実な印象を与えるデザイン
- 深みのある色と明るい色のモチーフの組み合わせ
追手門学院小学校
こちらは「追手門学院小学校」。メインビジュアルがコマ送りなのが可愛いです。
コマ送りのメインビジュアルは、あまり見たことないので面白いですよね。
ですね。サイト自体の色味はロゴマークの赤と黒グレーでスッキリしているので、メインビジュアルや画像が引き立っているなと思いました。
アイコンのイラストが繊細、且つおしゃれですよね。
ですね。個人的にこちらのサイトとても格好良いなと思ってます！
例えばどんなところでしょう？
先程挙がったメインビジュアルや、大カテゴリ「◯◯を知る」の見せ方ですね。
それから「1人1台のタブレットとシームレスなICT環境」では、タブレットのモックアップを使っているのもイメージがしやすくていいなと思いました。
たしかに。
それから、「沿革」の校舎の新旧の差の見せ方や、「たんけん！おうてもん」など、そもそもコンテンツ作りからよく考えられた良いサイトだと思いました。見習いたいですね。
確かに、沿革年表や施設紹介にしがちな内容をうまくみせてますよね。
スマホの見せ方もとても考えてあって、すごいです。勉強になります。
注目したポイント
- コマ送りのメインビジュアル
- シンプルで繊細なデザイン
- 考えられたコンテンツ
後編に続きます。
エーアンドエーでは学校サイトのご相談やリニューアルも常時承っております。
「うちの小学校サイトも見てほしい」「リニューアルしたいんだけど、どういうデザインにすればいい？」などなど、お気軽にご相談ください！
エーアンドエーとホームページを制作しませんか？
エーアンドエーは「高い制作品質」と「柔軟なお客様対応力」が強みの愛知県名古屋市のホームページ制作・Web制作会社です。デジタル技術とアナログな心でお客様の課題を解決し、名古屋・東海地域を支える企業様から選ばれてきました。ホームページのことでお困りの方、信頼と実績のあるホームページ制作会社をお求めの方は、ぜひエーアンドエーまでご相談ください。
