![topimg-machikanesai-2014](https://images.ctfassets.net/pwepcr3jaumx/33hWDyV8sYs9vhWM0prXBX/c665fc5d5a0f0a6a48e0020dfb96a861/topimg-machikanesai-2014.png?w=1120&h=630&q=50&fm=png)
WEBSITE
第55回まちかね祭公式サイト
2014年
大阪大学大学祭中央実行委員会
https://archive.machikanesai.com/14/Webサイトのデザイン・実装
HTML
CSS
大阪大学では、学内最大の大学祭「まちかね祭」が毎年11月初頭に開催されます。主催である大学祭中央実行委員会で広報を担当していた私は、まちかね祭の魅力を内外に宣伝するためにWebサイトを制作しました。
従来のまちかね祭公式サイトは、諸団体の企画や出展団体向け資料といった最低限の情報のみを掲載するシンプルなサイトでした。これに対して当サイトは、まちかね祭の概要や歴史、構内マップなどの来場案内、取材・協賛に関する詳細案内など、まちかね祭に関連するあらゆる情報を取り扱い、公式サイトがもつ役割や宣伝媒体としての位置付けなどを大きく変えました。
サイトのデザインは、まちかね祭のロゴデザインが持つイメージをさらに拡張させ、鮮やかな色彩や様々な模様を多用したコラージュデザインを採用、大学生が主催するイベントらしい若々しさを演出しました。トップ画像には、阪大の象徴的存在である旧イ号館と旧浪高生の像や、大阪を代表する建築物などを配置して、大阪大学の大学祭であることを学内外に印象付けることを図っています。
スマートフォン普及の過渡期にあった当時、他大学の学祭サイトに先駆けてスマホ用レイアウトを導入。当時はレスポンシブデザインの賛否がまだ分かれていましたが、コンテンツ変更時にかかるコストの低さを選んでこれを採用しました。HTMLとCSSのみを用いた技術的に単純な静的サイトですが、トップページのヒーローイメージのみ、スライダー機能を実現するためにJavaScript(jquery.bxSlider)を使用しています。
従来のまちかね祭公式サイトは、諸団体の企画や出展団体向け資料といった最低限の情報のみを掲載するシンプルなサイトでした。これに対して当サイトは、まちかね祭の概要や歴史、構内マップなどの来場案内、取材・協賛に関する詳細案内など、まちかね祭に関連するあらゆる情報を取り扱い、公式サイトがもつ役割や宣伝媒体としての位置付けなどを大きく変えました。
サイトのデザインは、まちかね祭のロゴデザインが持つイメージをさらに拡張させ、鮮やかな色彩や様々な模様を多用したコラージュデザインを採用、大学生が主催するイベントらしい若々しさを演出しました。トップ画像には、阪大の象徴的存在である旧イ号館と旧浪高生の像や、大阪を代表する建築物などを配置して、大阪大学の大学祭であることを学内外に印象付けることを図っています。
スマートフォン普及の過渡期にあった当時、他大学の学祭サイトに先駆けてスマホ用レイアウトを導入。当時はレスポンシブデザインの賛否がまだ分かれていましたが、コンテンツ変更時にかかるコストの低さを選んでこれを採用しました。HTMLとCSSのみを用いた技術的に単純な静的サイトですが、トップページのヒーローイメージのみ、スライダー機能を実現するためにJavaScript(jquery.bxSlider)を使用しています。
続きを読む
![subimg-machikanesai-2014-1](https://images.ctfassets.net/pwepcr3jaumx/6P86wmr59X9CX8xdONDs2S/b2080dd3ccfeacac9942973d326dfc7f/subimg-machikanesai-2014-1.png?w=1120&h=630&q=50&fm=png)
![subimg-machikanesai-2014-2](https://images.ctfassets.net/pwepcr3jaumx/5hbjrsYPny8WrZgKMVJZih/53a7957dbe98822d5347476cf8817e1c/subimg-machikanesai-2014-2.png?w=1120&h=630&q=50&fm=png)
![subimg-machikanesai-2014-3](https://images.ctfassets.net/pwepcr3jaumx/3hALRpOv1gZhREAIMaPruW/07e244d58094601047df006c2ccc2b15/subimg-machikanesai-2014-3.png?w=1120&h=630&q=50&fm=png)
![subimg-machikanesai-2014-4](https://images.ctfassets.net/pwepcr3jaumx/5DIH1aDtEZmDFOjE4aw7fl/29f870dfa3ccd2d7482b834947195250/subimg-machikanesai-2014-4.png?w=1120&h=630&q=50&fm=png)
![subimg-machikanesai-2014-5](https://images.ctfassets.net/pwepcr3jaumx/v6C6mmcfcWQevTU2yKacc/8ade9c41798c1cb2a444cbaead905e3e/subimg-machikanesai-2014-5.png?w=1120&h=630&q=50&fm=png)