エーアンドエーのデザイナーが選ぶ、デザインが素敵な小学校サイト10選［後編］
こんにちは！
今回は、「エーアンドエーのデザイナーが選ぶ！デザインが素敵な小学校サイト10選［後編］」をお届けします。
前編はこちら👇
エーアンドエーのデザイナーが選ぶ、デザインが素敵な小学校サイト10選［前編］
南山大学附属小学校
さてこちらは「南山大学附属小学校」です。
全体的にとてもスッキリと丁寧にまとめてあっていいと思います。
ですね。特に中ページは知りたい情報を探すのに迷わなくて、とても分かりやすいなと感じました。
アイコンも可愛いですね。スッキリしたデザインによく合ってる。
キャッチコピーやグローバルメニューに使われているフォントとのバランスもいいですよね。
「教育の特色」部分は、ポップアップでパッと見れるので読んでもらいやすそうだなと思いました。
ニュース&トピックスに、サムネイルを載せてあるのもいいですね。サムネイルがあることで、小学校ならではの活動や元気のよさが伝わってきます。
文字だけより、サムネイルがあることで詳細を見てみたい気持ちにさせられますしね。
（ちなみに「南山大学」のサイトは当社で作成いたしました。気になる方はこちらの記事もご覧ください）
注目したポイント
- スッキリとした迷わないデザイン
- デザインに合った可愛いアイコン
- サムネイル付きのニュース&トピックス
立命館小学校
続いては「立命館小学校」です。
シンプルで分かりやすいデザインだと思います。
シンプルですよね。でも中ページごとのレイアウトがとても凝っているので、ちゃんと細部にまで手をかけられているのがいいなと思いました。
レイアウト、確かにページによって様々ですね。いろんな見せ方が面白い。
そうなんです。でも統一感があるのでどのページでもちゃんと「立命館小学校」らしさが感じられます。
「制服・制定品」のページでは、制服を360度くるくる回しながら見られるのがいいですね。
ホントですね。くるくるできる！
私は、「教育方針」のページがいいなと思いました。「立命館小学校4つの柱」が1ページずつ分かれていて、きちんと伝えたいという学校の「思い」を感じました。
「教育方針」のページもですが、画像や動画がたくさんあるのも学校生活が想像できていいですね。
注目したポイント
- シンプルだが細部にまで手をかけられたデザイン
- 統一感を損なわない凝ったレイアウト
- 学校の「思い」が伝わる見せ方
瀬戸SOLAN小学校
こちらは「瀬戸SOLAN小学校」。
背景の幾何学模様が印象的ですね。
あまり小学校っぽくなくて、先進的な姿勢のこの学校にあっているなと思います。
そうですね。この学校らしさが表現されてると思います。近未来っぽさも感じました。
全体的に賑やかな雰囲気でいいですね。
スクロールして気づいたのですが、背景とかぶってテキストが読みづらくならないように、白の背景をひく配慮もされてますね。
やさしい！ちょっとしたことで読みやすさが変わってきますね。
幼稚園ではよく見るのですが、小学校のサイトで一日の過ごし方を載せてるサイトは珍しいですね！授業のイメージも湧いて良いと思いました。
注目したポイント
- この学校らしさを表現した背景
- テキストの読みやすさへの配慮
- 学校生活のイメージが湧くコンテンツ
立教小学校
お次は「立教小学校」です。
両サイドの紫のラインがぱっと目に入ってきました。
この紫がスクールカラーのようですね。これがあることで、サイト全体の統一感が出ますね。
確かに。あと濃い紫なので、引き締まった感じもしますね。
ただ、中のコンテンツでは、明るい紫を使っているんですよ。同系色でトーンを変えてデザインするの真似したいなと思いました！
コンテンツと言えば、ブラウザの横幅いっぱいに広がるブロックと、一定幅で固定されるブロックが1ページ内で混在しているのに、違和感がないですよね。うまくデザインされてるなと思いました。
そういえば、そうですね。スカスカした感じもないです。
写真が沢山使われているのも関係しているのかも。「立教小学校の今」では、Instagramの写真を載せてるんですね。給食とか行事が見られるのいいですね。
丸の中のテキストを縦書きにするのもおしゃれだと思いました。
学校サイトは使える写真が少ないことが多いので、変な言い方ですが羨ましいですね（笑）
注目したポイント
- 両サイドの紫のライン
- 同系色の明暗を使ったデザイン
- 学校風景の分かるたくさんの写真
光塩女子学院初等科
最後は「光塩女子学院初等科」です。
こちらはエーアンドエーが手掛けたサイトですね！
とても斬新なデザインですね！インパクトがあります。
こちらのデザインは、藤野さんのご担当でしたね。どんな経緯でこちらのデザインを作成されたか教えてください！
そうです。私が担当しました！
まず、「どこの小学校とも似ていない独自デザインのサイトにしたい」「品の良さと楽しさを共存させたサイトにしたい」というご要望がありました。
それから私の方で、どのように独自性を出すか考えて、光塩女子初等科のスローガン「あなたがたは世の光、あなたがたは地の塩」に着目しました。
キリスト教の教えでもあり学校名にもなってる「光」と「塩」をモチーフ化し、塩の結晶を菱形にすることで、十字架と光の意味をこめています。
キャッチコピーの菱形になっている箇所に気づいた時、「なるほど！うまいなぁ〜」と思いました。
フッターもおしゃれですよね！写真とメインの情報、他学校のリンクなどが、菱形を使ったりして、いい感じにまとまってると思いました。
写真や背景、見出しなどに菱形を多用することで全体的な統一感を図りました。また、菱形を多用しつつも必要な情報が見辛くならないように気をつけました。
全体に菱形を使っているのが、凝っていておしゃれだと思いました。背景色がじわ～っと変わっていくのも好きです！
色の変化に多様性や成長、季節の巡りなどの意味合いをこめました。
中ページのコンテンツはシンプルなデザインにしたので、その分、寂しさを感じさせないようキーカラーをゆっくり変化させていくことで華やかさを加えています。
個人的に、「menu」を開いたときのデザインがとても好きです。縦の写真を良い感じに使っていて、メニューも見やすくておしゃれですね。
ですね。私は中のカテゴリトップページで切り抜きの子どもがほわっとでてくるのもかわいいなと思いました！
ありがとうございます。動きのある児童の全身を入れることで楽しさを表現してみました。
色んな小学校サイトを見てきましたが、それぞれの学校の個性が出ていて面白かったですね！
注目したポイント
- 独自性、品の良さ、楽しさを表現したデザイン
- スローガンを表現した菱形
- 変化のある背景色
「エーアンドエーのデザイナーが選ぶ、デザインが素敵な小学校サイト10選」を前編・後編に渡ってお届けしました。小学校サイトをデザインする際の参考にしていただけると嬉しいです。
さて、エーアンドエーでは小学校を始め、さまざまな業種のサイトリニューアルも常時承っております。
「今のサイトはデザインが古く感じる」「リニューアルしたいんだけど、どういうデザインにすればいいの？」などなど、お気軽にご相談ください！
私たちデザイナーが素敵なサイトをご提案させていただきます💁
相談するエーアンドエーとホームページを制作しませんか？
エーアンドエーは「高い制作品質」と「柔軟なお客様対応力」が強みの愛知県名古屋市のホームページ制作・Web制作会社です。デジタル技術とアナログな心でお客様の課題を解決し、名古屋・東海地域を支える企業様から選ばれてきました。ホームページのことでお困りの方、信頼と実績のあるホームページ制作会社をお求めの方は、ぜひエーアンドエーまでご相談ください。
