見出し画像

東大寺学園2019年度文化祭デザイン

ご覧いただきありがとうございます。

12/15(日)に灘校で開催された「みんなで文化祭デザインを考える」にて
「東大寺学園2019年度文化祭デザイン」を前PRパート長とお話ししました。

巷にはポスターなどの細々したデザインの情報はあっても、全体的な文化祭デザインの情報があまりないなと感じたので、当日のスライドとお話しした内容をご紹介します。みなさんの参考になるものがあれば幸いです。

スライド

まずはスライドをご一読ください。
以下それぞれについて話した内容を書き連ねていきます。

自己紹介

画像1

改めまして自己紹介を。
左側が今noteを書いております、光本と申します。
そして右側が前述の前PRパート長の田原です。
以降光本が話している場面は 光本)で、田原が話している所は 田原)で表記します。

画像2

・文化祭デザインの意義・目的
・文化祭デザイン組織・環境紹介
・各実施紹介

の3本立てでお話ししました。

文化祭デザインの意義・目的

画像3

光本) そもそも文化祭にデザインを持ち込む理由とは何か?
それは全体に大きなルールを生み出せることにあると思います。
左側のように個々の要求に答えるのではなく、右側のようにデザインを全ての活動に対して課すことで一体感を作り出す、それがデザインを導入する理由だと考えます。

画像4

画像5

画像6

2019年度東大寺学園文化祭、第55回菁々祭は「Sailing」をテーマとして掲げました。説明にもある通り、生徒が一丸となり作り上げる文化祭が、一つの"菁々祭"となって「Sailing」、出港するという意味をテーマに込めました。

ロゴでは、RGB(オンスクリーン)、CMYK(印刷物系)、どちらのカラーモードでも同色再現できる色にするよう注意しました。

画像7

実はこの「Sailing」、2019年度灘校のテーマ「SAIL AWAY」と超ニアピンというハプニング。
決定は灘校が先にしていたものの、発表を「Sailing」が先にしてしまったというのが事の顛末。今回灘校の担当の方と直接お話しすることができ、平和に一盛り上がり(?)しました。

文化祭デザイン組織・環境紹介

6 のコピー@2.5x-100

田原) 代わりまして今回PRパート長を務めていました私から当校の文化祭デザイン組織・環境紹介をいたします。

当校では文化祭のトップに実行委員会があり、次に職掌別、6つのパートがあります。そのうちの一つがPRパートで、PR関連業務全般を担当しています。

そしてPRパート内には業務別に4つの部門を設置し、そのうちの一つが制作部門で、デザイン業務を担当しました。
2019年度は制作部門が2人しかいなかったので光本が電子デザイン班、私が紙面デザイン班、と分担してやっておりました。

6 のコピー 2@2.5x-100

制作環境は皆さんご存じAdobe Creative Cloudです。
消耗品ではない都合上学校予算は使えず、個人契約という形でした。
ソフトは主にIllustrator(印刷物系用)、Photoshop(画像処理用)、XD(オンスクリーン用)を使用しました。

各実施紹介-電子デザイン

画像10

光本) 各実施紹介ということでまず電子デザインの方からご紹介します。
電子デザイン班は主にオンスクリーンでのデザインを担当し、

・サイトデザイン
・SNS管理
・当日ディスプレイ

の3つを実施しました。

画像11

「事前にどれだけ文化祭を伝えられるか」
を電子デザインの第一の意義として設定し、各活動を実施しました。
オンスクリーンメディアは印刷物メデイアとは大きく異なり、情報を何度でも、変化して伝達することができます。
その点において「事前にどれだけ文化祭を伝えられるか」を最重要視しました。

画像12

まず、サイトデザインから

画像13

デザインの土台として、
親しみやすいポップな文化祭らしさを表現する、筑紫A丸ゴシックを表示フォントに採用。Adobe Fontsのプロジェクトを利用しました。

また、全ページの背景を、テーマ「Sailing」に合わせ海をイメージしたグラフィックに統一しました。
全体に一体感を生み出す点でこだわったポイントです。

画像14

各情報を示すアイコンを新たに作成。

サイト来訪者が様々な情報に目を触れられるように、全ページ右下にナビボタンを配置。
スムーズなページ移動を可能としました。 

画像15

制作工程は、
スケッチアイデアをIllustrator,Photoshopで素材化

Xdでデザインカンプを作成

Zeplin経由でコーダーとデザインをオンライン共有
という流れで行いました。

・動作が軽快
・インタラクションを瞬時に作成できる
・デザイン→コーディング作業の負担を大      幅に減らせる

を理由にXDを採用しました。XD、超便利です。

画像16

2019の6月下旬に公開してから文化祭が終了する9月中旬までに約3.5万PVでした。
量としては少ないものの、ドメインを新規習得し公開2週間ほどで
「東大寺 文化祭」のGoogle検索でトップに出せたので、来年度以降の継続した運用への一歩として貢献できたかな、と思います。

SNS運用

画像17

続いてSNS運用のご紹介です。
TwitterとFacebookの2つを運用していました。
後輩らが来年度以降も同じアカウントで更新していくのでフォローいただけると嬉しいです。(宣伝)

ここでも「事前にどれだけ文化祭を伝えられるか」を第一に運用しました。

・カウントダウン
・ポスター紹介
・サイト更新情報
・タイムテーブル
・展示紹介
・イベント特集
・グッズ紹介

という風に当日の文化祭の内容をすべて伝えきるよう運用していました。
また、テキストのみと画像付きでは大きなエンゲージメント率の差があるため、画像を積極的に利用し情報伝達するよう重視しました。
以下実際に投稿した画像類です。

画像18

カウントダウン

画像19

ポスター/校内図/タイムテーブル

画像20

イベント特集/イベント紹介/グッズ紹介

画像21

ビュアーに繰り返し情報を表示することを目的に、定期的・継続した投稿をするよう心がけていました。

当日ディスプレイ

文化祭当日、プロジェクター及びスクリーンを利用して校内3か所に

・現在時刻
・イベントのタイムテーブル
・イベントの整理券情報

を案内する当日ディスプレイを設置しました。

画像23

これもサイト同様、XDでデザインカンプを作成し、コーダーに共有。
という流れで作成しました。
いちいちパンフレットやスマホを開かずに現在時刻・イベントの時間がすぐわかるから便利、と来場者からご好評いただきました。

画像24

以上が電子デザインのご紹介でした。続いて田原より紙面デザインのご紹介です。

各実施紹介-紙面デザイン

29 のコピー@2.5x-100

田原) 今回紙面デザインの実施内容について

・パンフレット
・ポリ袋

をご紹介します。

15 のコピー@2.5x-100

まず、紙面デザイン班として一番大事にしていたことは
利用者の「使いやすさ」第一。です。
スタイリッシュさ、キュートさなどのイメージを優先させるのではなく、何よりも利用者の利便性を優先するべきであると考えます。
この考えの元、以下ご紹介するデザインを行いました。

パンフレット

29 のコピー 3@2.5x-100

パンフレット全ページは以下で配布しています。

例年B5版であったパンフレットのサイズをA5版へ小さくしました。
理由は、学生さんらにとってはB5版は慣れたサイズでリュックにも入るのですが、保護者・女性来場者などの大きなカバンを持っていない方にとって、B5版は意外とはかさばるものとなるからです。

また、載せられる情報量の圧倒的な差を鑑み、モノクロ→フルカラーにしました。

次にどんな改善をしたか、細かい内容をご紹介します。

29 のコピー 4@2.5x-100

当校は中学・高校棟、中庭、体育館、圓融館と様々な建物があるため、例年の校内全図(左側)では見切れている部屋は注釈、と非常に分かりにくい表記となっていました。それを今回、正面から捉えた立体図に一新しました。

フルカラーにしたので、建物別に、カラーユニバーサルデザインに沿った5色の色分けを行いました。人間の眼は5色を超えると瞬時な識別が難しくなるので5色を限度としました。

29 のコピー 5@2.5x-100

例年はB5版、見開きでB4版と大きめだったので、同フロアであれば中学・高校棟をまとめた捉えずらい平面図表記で展示紹介をし、余白に説明書き。
と雑多なイメージになってしまっていました。
そこで今回は片面に先程の全図から引用した立体的な地図、もう片面に説明書きと明確に区別しました。

多くの学校さんでは各団体が作成した画像を載せているのをよく見かけますが、当校の特徴及び伝統として、各展示団体にPRパートで統一的に設定したアイコンがあります。それはそのまま流用し、後述のサインシステムでも活躍しました。

29 のコピー 6@2.5x-100

例年、ページを分けていたイベントのタイムテーブルと説明書きを、これも非常に見にくいので今回は各イベントの説明を30字以内に制限し、一つにまとめました。
説明を短縮した代替案として、フルカラーの利点も生かし写真付きのイベント特集を別に組みました。半ば実験的な試みでしたが、特に例年載せていなかった文化祭両日の最後に行われる中夜祭・後夜祭の細かいスケジュールも表記でき、利便性の向上に貢献できたかと思います。

ポリ袋

15 のコピー 3@2.5x-100

このポリ袋というのは、例年来場入口でパンフレットやうちわを素渡ししていたものを、このポリ袋にまとめて配布する目的で作成しました。

各展示団体が作成している部誌をいちいちバックに入れず、ポリ袋にまとめて入れ校内を周っていただけるよう、サイズはA4版にしました。

15 のコピー 4@2.5x-100

実際の配布風景です。
以上紙面デザインのご紹介でした。

各実施紹介-サインシステム

29 のコピー 8@2.5x-100

田原) 紙面デザインとは別に、今回限りのサインシステム計画を実施しました。簡単に言うと駅にある案内看板、あれです。
一度作れば数年はもつだろうということで組織化せず今回限りにしました。

・指示サイン
・同定サイン
・図解サイン

の3つの種類に分け、計画を行いました。
なぜ3つに分けたか、それぞれ詳しく紹介しながらご説明します。

指示サイン

29 のコピー 10@2.5x-100

こっちにいけば〇〇がある、こっちに曲がれば△△があるかを示すのが指示サインです。
それぞれの看板になにを載せ、どこに配置するか、「サインシステム計画学」を参考にしながら計画しました。
当然、前述の施設別5色に色分けしたカラーを利用しました。
来訪者が、現在地から目的地のルートを複雑な建物配置のなかで浮かび上がるよう計画、設置しました。

同定サイン

29 のコピー 12@2.5x-100

ここはなんの場所なのか、を同定するサインです。
各教室には、前述のPRパートで統一的に設定した各展示団体のアイコンを使用しました。ここでアイコンの、文字より優れた視認性が活躍し、来訪者が何の場所なのかというのを瞬時に理解できる。というわけです。

29 のコピー 13@2.5x-100

あとにつながる話ですが、指示サインと図解サインの連携を最重要視し計画を行っていました。サインシステムは、ただ単に集合体でいるのは無意味で、連携して初めてサインシステムとして成立するのです。
上図はそういった連携をしっかりと示しています。

図解サイン

29 のコピー 15@2.5x-100

図解サインとは簡単に言うと「地図」です。
パンフレットでもご紹介した校内全図を大判印刷し、貼布しました。

29 のコピー 16@2.5x-100

貼り付け場所は、廊下の途中であったり、階段の昇降口です。
例えばですが階段の昇降口であれば、図解サインと同時にここは何棟の何フロアかを示す同定サインを設置することで連携が生まれます。

29 のコピー 17@2.5x-100

まとめると、指示サインが○○へ行くにはどのルートをたどればよいのかを浮き上がらせ、そこに図解サイン(地図)がルート補助を行い、同定サインが目的地の確認を示すというわけです。

これが「サインシステム」がサインの集合体ではなくサイン「システム」である所以であり、一番大切なことであると考えます。

画像40

以上サインシステムのご紹介でした。

さいごに

アートボード 87@2.5x-100

光本) 私の敬愛するグラフィックデザイナー、芸術家である横尾忠則さんの言葉なんですが、

絵は芸術、
デザインは職人仕事。
徹することが大切。
ぼくはデザイナーを芸術家と思ったことがない。
ずっと職人だった。

この言葉に非常に感銘を受けていて、デザインっていうのは根気強さの塊だと考えています。それがデザインのしんどさでもあり一番楽しいことだな、と。
その意味で皆さんに共有したく最後にこの言葉をご紹介しました。

最後までご覧いただきありがとうございました。
「東大寺学園2019年度文化祭デザイン」のご紹介は以上となります。

自分たちがやってきたことを振り返り、まとめる大変貴重な機会となりました。改めて、今回開催いただいた灘校の皆さんに感謝申し上げます。




この記事が気に入ったらサポートをしてみませんか?