熊本電子ビジネス専門学校
クリーンなホワイトを基調とし、テキストに引き締まったダークグレーやブラックを配した明快なコントラストの中に、知的なシアン、活気あるイエローをアクセントとして盛り込んだ、モダンでスタイリッシュな配色。配置された写真は、少し彩度を抑えたシネマティックでクールなトーンで統一されており、真剣に学ぶ学生たちの眼差しや手元のディテールをドラマチックに引き立てています。タイポグラフィは視認性と力強さを兼ね備えたゴシック体を主軸とし、ファーストビューの「大人になる、プロになる。」という力強いコピーにしっかりとしたウェイトを持たせることで、学校の揺るぎないスタンスを視覚的に宣言しています。レイアウトは堅牢なグリッドシステムをベースにしつつ、画面幅をいっぱいに使ったダイナミックな写真の帯や、背景にうっすらと配置された巨大な英字タイポグラフィを交えることで、空間に奥行きと洗練されたリズム感を生み出しています。ホバー時にはカード要素やバナーが微細に変化してフォーカスを可視化しており、視認性の高いフッター手前のバナー群が、ユーザーを迷わず資料請求、オープンキャンパスや詳細ページへと導く優れた導線設計となっています。
札幌調理製菓専門学校
温かみのあるクリーム色を基調に、活気を感じさせる鮮やかなイエローと、食欲をそそるオレンジをアクセントに用いた、親しみやすくエネルギーに満ちた配色設計。写真は明るいトーンで統一され、学生たちの生き生きとした表情や料理のシズル感を魅力的に引き立てています。タイポグラフィは見出しにクセのあるフォントで、本文は可読性の高いゴシック体を主軸としつつ、背景や装飾に手書き風のあしらいを交えることで、手作りの温もりやクリエイティビティを視覚的に表現しています。レイアウトは、料理のクリームや生地を連想させる波打つような有機的な曲線をセクション境界に用い、要素を効果的に重ね合わせることで、楽しげなリズム感のある視線誘導を実現しています。マスクされた学生の写真が小さくポイントで配置され、賑やかな雰囲気と校内で学生と顔を合わせるような印象に。特に閲覧者が興味のある卒業生へのインタビュー情報を設置することで、ユーザーに寄り添い、学生目線での制作が伺えます。
MEJINAVI2026｜目白大学がまるっとわかるメジナビ
画面全体を一本の道が貫くポップなイラストベースのレイアウトが、ユーザーの視線を自然と下部へ導く回遊性の高い導線設計となっています。厳格な四角いグリッドというよりは、背景の地形という見えない線に沿って各要素を整列させることで、まるでテーマパークを巡るようなシームレスでワクワクする体験を構築。この世界観を支えるのは、鮮やかなグリーンと温かいクリーム色を基調に、多彩なアクセントカラーを効かせた明快な配色です。配置された写真は明度が高く自然な色温度で統一されており、学生の活き活きとした表情をクリアに引き立て、大学の魅力を最大限伝えています。見出しにはポップな英字に丸みのある装飾的な太字、和文の本文にはプレーンなゴシック体を併記するルールを採用し、明確なウェイト差とゆとりのある字間設計によって、親しみやすさと情報の読みやすさを両立させています。スクロールに伴うアニメーションは、カードや装飾が短い距離をジャンプイン、賑やかなビジュアルの中でも過度なノイズにならず、かつ目を引く遊びが施されています。ホバー時にも写真やカラーが入れ替わったり、微小にズームするボタンがフォーカス状態を的確に可視化しており、ユーザーに迷いのないアクションを促しています。
武蔵野美術大学 市ヶ谷キャンパス
大学キャンパスの紹介サイトとしてファーストビューから施設の魅力的なグラフィックが印象的。サイトカラーはテクスチャーのある薄いグレーと白背景の境界線を組み合わせ、テキストやグラフィックにブラックを用いて明快な情報の切り分けを特徴的に。写真は彩度と明度を抑え、色温度をニュートラルに整えることで、建築や学生の活動を客観的かつ静謐に捉えるトーンに統一。見出しには洗練されたサンセリフ体、本文に可読性の高いゴシック体を採用。英語と日本語を軽めのウェイトで並記し、字間を詰めることで、情報の密度とスピード感を両立。たっぷりとした余白を活かしたレイアウトは、厳格なグリッドシステムに基づく見えない線で各要素が整列されており、まるで建築物のような堅牢な骨格を形成しています。スクロールに伴うモーションは、要素が下から上へ緩やかなイージングを伴ってフェードインする挙動で統一され、画面全体にリズムを生んでいます。マイクロインタラクションは、リンク要素へのホバー時に背景色が変化し、アイコンの移動等に限定され、操作に対するフィードバックが即座に返ります。
目白大学入学センター
ファーストビューは余白を削ぎ落とし、画面いっぱいに広がるセンスの光るイラストと、ポップで特徴的なフォントで一気に賑やかさを立ち上げる構成。色面とタイポが層を成して重なり合い、「真面目な大学案内」という枠を軽やかに外しながらも、雑多にならず整理されたレイアウトで視線を受け止めます。スクロールに合わせて現れるカードや写真は動き自体は控えめながら、出入りのタイミングと配置の緩急によってテンポが生まれ、自然と次の情報へ視線が流れる設計。学部紹介や学生生活のセクションでは、写真とテキストの組み合わせが軽やかに切り替わり、情報量が多くても“読む負担”を感じさせません。特に特徴的なのは、案内コンテンツを“進路選びの読み物”として再編集している点です。アイコンや色分け、カード型レイアウトによって情報の入口が細かく分解され、どこから触れても理解が深まる導線設計。終盤ではオープンキャンパスや資料請求へと過度な煽りなく視線をつなぎ、意思決定のタイミングだけをそっと強調します。派手な演出で驚かせるのではなく、楽しさ・分かりやすさ・安心感を積み重ねることで、“迷わず前に進める”体験をつくり上げた、進路支援型のデザインです。
UM English Lab.｜洋楽で英語を学ぶ
深い余白とくっきりしたタイポに、ジャケット風のビジュアルが響くファーストビュー。ロゴカラーを筆頭にカラフルな配色ながら、トーンや用いるシェイプに統一感があり、このサイトの核となるポップで楽しそうな世界観を丁寧に作り込めていると感じます。スクロールに沿って並ぶ Feature／Interview／Study のカードは、音楽メディアの読み口を思わせる設計で、目と耳の記憶に寄り添う導線です。各セクションのレイアウトはシンプル。しかし、ホバーアクションの細やかさと大胆な余白運用が唯一無二の手触りを生み、自然と好奇心を引き上げます。なかでも Keywords セクションは象徴的で、配色・シェイプ・モーションの要素が過不足なく重なり、全部クリックしたくなる心理を巧みに設計。終盤では、教職員向け副教材のダウンロードへとさらりと橋渡しし、編集的な厚みと実用導線が一筆書きでつながります。“読む・聴く・学ぶ”を心地よく往復できる、ブランドの魅力と学びの楽しさを両立させたサイトです。
