Chitose Kato’s デザイン解剖　VOL.7「梅花女子大学 舞台芸術表現学科」サイト

雑誌『Web Designing』の連載「MISH MASH」で紹介している「洗練された デザインのつくり方」。初心者から一歩踏み出したデザインのポイントをお届けしているこちらの内容を、最近気になった素敵なサイトとあわせて深堀りし、加藤千歳さんが独自の視点で解説（解剖）します。

話してくれた人

今回のWebサイトの概要

「梅花女子大学 舞台芸術表現学科」

今回紹介するのは、2026年4月に開設される梅花女子大学「舞台芸術表現学科」のシングルページ。アーティストとクリエイターを育成する学部ということもあり、ページ自体も非常にクリエイティブな作りになっています。一貫したストーリー性と世界観が印象的なページを、さっそく見ていきましょう。

なお、今回は『Web Designing 10月号』の連載（MISH MASH）で解説した「読む視線」と「感じる視線」を意識したデザイン術についても触れています。ぜひ、雑誌とあわせてご覧ください。

ストーリーの始まりは、幕が上がるところから

①「まもなく開演」のテキストとともに、左から右へ下線が伸びていくローディング画面は、まさにこれから舞台の幕が上がるような演出！ 「舞台芸術表現学科」のサイトとして、コンセプトの筋が通っていることもあり、期待感や物語性が一層ふくらみます。

②シンプルに見えるヘッダーメニューも、「情報を受け取るコンテンツへの導線」は日本語テキストでセンターにまとめられています。また、「自分が動く（アクションを起こす）情報」は英字＋下線で見せ方を変え、右側に配置。見る人がわざわざ意識しなくても、情報の区分が理解できるデザインです。

③印象的で記憶に残るファーストビューは、大きさや形が異なるフレームに、アンティークさを感じるモザイク画が描かれています。背景には、ふわっと舞い上がるようなオーガンジー（ステージ衣装などで使われる布）に、舞い散る花びらのぼかしが加わり、奥行きが感じられます。

④花びらとフレームには、マウスの動きに合わせて左右にほどよく揺れる演出。これによって、奥行き感に加え、ビジュアルに動きのある印象を与えてくれます。また、背景にキラキラとした光が散りばめられている点にも注目。光の使い方は、サイト内におけるポイントの一つになっています。

スクロールを進めると、全体の画像がゆっくりと大きくなり、中央フレームの画像が動画となって実際に動き出します。後に登場する写真を見ると、中央以外のフレームに描かれたモザイク画も、実際の写真をもとに描かれていることが分かります。

⑤見出しには、ファーストビューの印象とつながる上品でモダン、かつクラシカルな雰囲気のフォント（しっぽり明朝）が使用されています。ひらがな（助字）を小さめに組むことで、全体にメリハリも生まれています。

⑥「舞台芸術」のワードとマッチした背景の動画シーン。

⑦赤・青・黄の図形の配色には、つながり（バランスやまとまり）が考慮されていることがわかります。
　・黄：背景内、絵画の黄色
　・水色：演者さんの服の色
　・赤：前ページからのつながり（花びらの赤）

⑧画像内は縦のラインが引き立つ構図になっており（緑の点線部分：「赤い図形の縦ライン」「見出しテキストの縦ラインが揃っている」「人物」「背景の柱」「縦長の絵画」）、横書きのテキストと組み合わさることで、全体が縦横ともに整った配置に見え、無意識に美しさを感じられます。

また、全体が揃っているからこそ、図形の“ずらす要素”（形・角度・色）がアクセントとなり、整いすぎることなく、デザインに程よい刺激がプラスされています。

⑨スクロールを進めると、背景動画はそのままに、中央部分へ下から画像が現れてきます。人物は左向きで、手を向けている方向に（もともとあった）黄色の円が配置されていることもあり、バランスが良く、どこかストーリーを感じさせるあしらいになっています。

1画面に、1メッセージ

このあと各セクションの見出しは、「1画面」に大きく「1メッセージ」で展開されていきます。読む視線（中心視）をメインに、感じる視線（周辺視）では、画面内の空気感や情緒をより強く演出する構成です。

この構成では、準中心視〜周辺視での視線誘導がない（＝視線誘導に意識を奪われない）ため、見る人は世界観へより引き込まれ、内容にも集中して読み進めることができます。

⑩黄色ラインの高さのセンターに、セリフ（ひげ）ラインがきれいに配置されています。下線とフォントが一体となったデザインで、クリエイティブさのある美しいレイアウトです。

⑪スクロールを進めると、中央の画像が全画面に広がり、新たな1メッセージが表示されます。テキストは人物が向いている方向に合わせて左揃えで配置され、文字のジャンプ率や下線によってメリハリがつけられています。

⑫次の画面でも、前のセクションと同じ動き・デザインが反復されています。ここでは、下線のラインや図形の丸が、ファーストビューの花びらやその次の画面の図形の「赤色」とつながり、サイト全体の一体感をつくっています（色も反復されている）。

⑬前のセクションと同じ動き・デザインが反復される一方で、写真は向きを逆にすることで変化をつけ、単調さを避ける構図になっています（座席の向きが右側を向いている）。

⑭ファーストビューと同じ背景に「1画面・1メッセージ」の英字フォント。異なるセクションのデザイン要素を組み合わせてつくられた新たな画面で、ここでもサイト内のつながりが演出されています。

見せ方に変化をつけて、コンテンツ（情報）を分ける

このセクションでは、背景写真が（「学び」に合った）角丸に変化し、見せ方を変えることで情報が変わったことを雰囲気で伝えています。

⑮写真の上から降り注ぐ光の先には、見出しのテキストが配置されています。

⑯降り注ぐ光によって、見出し自体も光があふれているような光彩のあしらいになっています。この光の表現は、この後のセクションでも反復されていきます。

⑰縦長のラインを左に配置することで、3枚の切り替え（情報）があることが分かります。デザイン要素が少ないセクションの中で、あしらいとしての役割も果たしています。

⑱読ませるコンテンツのため、背景を大きくぼかし、白文字が読みやすく調整されています。写真の中のフラッグ（ピンク）がアクセントカラーとなり、見出しのアイキャッチにもなっています。

「舞台」の世界観を感じる一貫性

⑳エンドロール（スタッフロール）のような見せ方で、ここでも「舞台」というコンセプトが統一されています。

㉑マウスを合わせると右側に写真が表示され、あわせてテキストの配置も右へずれることで、誰が表示されているのかが分かりやすいデザインになっています。

㉒縦に長い1ページのため、雰囲気を大きく変えるセクションを挟むことで単調さを回避しています。画面の印象はガラリと切り替わりますが、「赤色」でサイト内がつながり、ファーストビューのフレームも反復。布による“舞台感”で世界観も統一されています。

㉓ゴールドの見出しテキストには影がつけられ、奥行き感が出されています。

㉔ドレープたっぷりの背景画像。左側が暗く落とされているため、テキスト（白字）の視認性がしっかり保たれています。

㉕フレームへ光が差す演出（光のあしらいの反復）。光が入ることで全体がのっぺりする印象を避け、フレームと背景を違和感なくひとつのビジュアルにまとめています。

㉖視線の流れとドレープの流れが同じ方向に向かう構図になっています。

㉗フレームが浮いて見えるよう、フレーム下にはハッキリとした影をつけています。㉕同様、画面全体を一体にする要素になっています。

㉘デザインを反復したセクションですが、横スライドの画像は「ここで初めて出てくる見せ方」であるため、単調さを感じさせません。

㉙顔の位置や大きさをそろえているため、人物が複数並んでもごちゃごちゃした印象になりません。

メッセージを伝えるセクション

㉚メッセージを伝えるセクションは、ページ内で最も角が丸いあしらいになっています（縦書きメッセージの堅さを和らげるバランス）。

㉛ここでも光彩のある見出しテキストが使われています（光のあしらいの反復）。

㉜このあと、オープンキャンパス・アクセスへと進みます。

最後まで一貫された世界観

㉝お問い合わせも大きく全面で表示されています。
　・写真を含めたセンター揃え
　・舞台感（「舞台側」から見る人に向けて…）
　・ボタン部分だけ強めのぼかし
　・赤いドレープの反復（無意識につながる）

㉞フッターも全面表示。お問い合わせの背景写真はそのままに、舞台の幕が下りるようなイメージで「最後」であることが分かるデザインになっています。

㉟舞台のスポットライトが（学校で成長した自分に）当たっているかのように、上から光が降り注ぐあしらい（学校名にも光彩がかかっている）です。

ストーリーを感じる、美しいデザインの典型例

最初から最後まで世界観にたっぷり浸れるデザインには、「こんなところにも！ ここにも！」と気づくほど、「舞台芸術表現学科」を表現するクリエイティブで、ストーリーを感じる演出が舞台さながらにちりばめられていました。
みなさんもぜひ、実際のサイトで体感してみてください。

文：加藤千歳