2023年度松ヶ崎祭サイト設計のウラ側
あくあたん工房 Advent Calendar 2023
この記事は、あくあたん工房 Advent Calendar 2023 23日目の記事です。
こんにちは。niyuです。本記事をご覧いただきありがとうございます。
この記事では今回制作しました 学祭サイトの設計 に関してUIを中心にどのような意図を持って設計したかを書き連ねています。
※あまり技術的な話はしてません。技術に関する記事はまた後日書こうと思います。
導入
今回私は京都工芸繊維大学の学園祭「松ヶ崎祭」の公式サイトの制作を担当し、UIデザインから実装までの工程を一貫して行いました。サイトのオレンジのロゴ以外のすべてのコンテンツの制作してます。ちなみに今までホームページを作ったことはありませんでした。これが人生20年間で初の作品になります。（それも制作期間が２ヶ月もなかったため非常に大変でした。）
↓このサイトです
学祭サイトのコンセプト
松ヶ崎祭公式サイトの制作において意識したこと、それは「最高に美しいもの に仕上げること」です。といっても抽象的すぎてわからないので以下の３つの点から簡単に掘り下げてみようと思います。
- ユーザーが欲しい情報を 最短で得られること
- ユーザーのサイト操作に関する学習コストを 極限まで下げる こと
- ユーザーの離脱率を防ぎ、学祭サイトとしてふさわしい 楽しいサイト にすること
ユーザーが欲しい情報を最短で得られること
サイト制作で最も重要なことのうちのひとつです。学祭サイトの訪問者は何を求めてこのサイトを閲覧するのか。その目的の多くは以下の２つに整理することができると考えられます。
- 学祭の開催日程の確認
- 展示や模擬店などが学内の どこ で いつ あるのか
学祭の開催日程の表示について
まずサイトの訪問者が最も確認したい情報は「学祭はいつ開催されるのか」ですよね。学祭は「何月何日何曜日」に開催されるのかが分かれば、その日に「友達を誘って行ってみよう」などと予定を立てたりすることができます。これは情報の優先順位の中で最も高いと考えられるので サイトを開いた瞬間に分かる必要があります。そのため今回のサイトでは以下の写真のように配置しました。
ユーザーが最初に見るのは 画面の中心より少し上 と言われています。そのためスマホ版では画面の中心より少し上に日付が表示されるようになっています。
またサイトを開くと分かるのですが、この地球と飛行機は 動きます!!!! Blenderで作った3DモデルをThree.jsを用いてブラウザに表示させてアニメーションをつけています。
人間は本能的に 動くもの に視線が行きやすいようにできています。これは天敵から身を守り生き残るためだと言われています。学祭サイトでも地球が動く部分に日付が表示されるようになっています。
またパソコン版では以下の写真のように日付を配置しました。
これは画面幅が大きいデバイスで閲覧した場合の表示です。飛行機が右下から左上に回転するように移動していますが、これも「日付」と学祭テーマである「Hello, world」に視線を向けるためにこのような設計にしました。
また京都工芸繊維大学の学生でない方もこのサイトを閲覧することが考えられます。その場合まず知りたくなるのは「松ヶ崎祭ってなんやねん」という情報です。松ヶ崎祭の内容や詳細な開催日程などを記したページも非常に重要になってきます。
これもトップページの目立つ箇所に置く必要があります。そのため地球の表示のすぐ下に松ヶ崎祭の概要が見れるページへのリンクを配置しました。
展示や模擬店などがいつ、どこであるのか
これも学祭サイトにおいて最も重要な情報のうちのひとつです。学祭サイトの訪問者は「〇〇先輩が出るステージ企画はどの日にあるの？」を調べたり「唐揚げが食べたいけどどこで食べられるの？」などの情報を求めているのではないでしょうか。
そうすると必要になってくる機能は「模擬店や展示などの内容」から「場所」「日時」などを探せる 検索機能 と 学内マップから場所を探せる 全体マップ の機能となります。これらの機能はサイトを開いた瞬間にアクセスできる必要があります。そのためスマホ版の表示では親指の位置である「右下」にフローティングボタンを２つ配置しそれらのページへのショートカットを作成しました。
なんとこのショートカットを利用することでサイト訪問時にワンタップで検索ページに遷移できます。美しいですね。サイト訪問者にできるだけ負荷を与えずスムーズなユーザーエクスペリエンスを提供する、これこそが私が意識したサイト設計における「美しさ」なわけです。
このように学祭サイトのトップページは、最短で必要な情報を探せるように 設計しました。
ユーザーのサイト操作に関する学習コストを極限まで下げること
これも私が考えるサイト設計における美しさのうちのひとつです。某M〇〇〇leなどのサイトは最近のアップデートで見た目は綺麗になっても、「どう操作していいか最初はわからない」のではないでしょうか。私はそうでした。UIが変わった時「前使ってた”あの”機能はどこに行ったんや」となりました。
しかし某M〇〇〇leのようにコンスタントに長期間使われるサイトは次第に使うことで慣れていきますが、学祭サイトはそうはいきません。学祭サイトは 超短期間 でしか使われない非常に短命なサイトのため、操作においてユーザーのフラストレーションができるだけ溜まらないように設計する必要があるわけです。
明日のスケジュールを確認するだけのサイトなのに色々いじってみようとはならないですよね。ほとんどの方がちょっと確認しようと思って訪問してるはずです。そういった場合企画の検索する操作が難しかったり探し回ったりするのは非常にイライラが溜まり、使われないサイト になっていきます。
ユーザーが企画を検索するプロセスについて
ほとんどのユーザーがサイトを訪問した際に最初に行う動作は「トップページをスクロールする」動作であると考えられます。
そのため、「模擬店」や「ステージ」などカテゴリ別に検索できる機能があること、またすべての企画から「キーワード検索」の機能があることを示すにはそれがトップページの目につく場所にあるべきです。そのため以下の写真のように松ヶ崎祭の概要説明のすぐ下に「企画情報」と「企画検索」のコンポーネントを配置しています。
そして「企画一覧から検索する」のボタンをクリックすると以下のページに遷移します。
企画一覧にはすべての企画名や紹介文などからフリーワード検索ができるようになっているのですが、フリーワード検索って難しくないですか？「フリーワード検索」とだけ聞くと、ユーザーは何を入力していいか直感的にわかりません。
しかし検索欄の下のタグを利用すると瞬時にそのキーワードに一致する企画が出てきます。そこでそのタグの文字が検索欄に自動的に入るのでユーザーは「こんなワードで検索できるのか」となります。
「たこ焼き」を押してたこ焼きの模擬店が出てこれば、次は「焼きそば」で検索してみようかな、となり、ここで初めて検索欄をタップするのです。
また「キーボードで文字を入力する」ことは非常にめんどくさい操作です。できればしたくないはずです。このページでは何ができるのかを伝えるにはその機能を体験してもらう必要がありますが、その体験の敷居が高くてはユーザーの離脱率が高まってしまいます。そういった意味でもタグを用いて検索のサジェストを表示する機能は非常に有用であると考えられます。
このように初めて見るサイトでも一瞬で使い方がわかってやりたいことがすぐにできるように設計しました。非常に美しいですね。サイト訪問者は「直感的な操作で」「脳死で」「何も考えずに」やりたいことができる、これこそが私が意識したサイト設計における「美しさ」のひとつです。
学祭サイトとしてふさわしい楽しいサイトにすること
今まで設計思想をつらつらと書き連ねてきましたが、それらはすべて「情報を得ること」のユーザーエクスペリエンスの向上に関する部分でした。しかし、今回制作したのは「学祭サイト」です。
みなさん、「学祭」と聞いてどんなイメージを思い浮かべますか？学祭に行ったら模擬店で美味しいものを食べたり、ライブを楽しんだり。学祭とは 楽しい ものですよね！！！
そんな「楽しい」イメージの学祭のサイトが楽しくなければ意味がないわけです。
「楽しい」「ワクワクする」をユーザーに提供するために主に以下の３つの点について実装しました。
- 3Dマップの導入
- 画面内の文字の量について
- 所々にある動く仕掛け
３Dマップの導入
正直これが学祭サイト制作で最も時間がかかった部分です。無料のCGソフト、Blenderを用いて、Google Earthを見ながらキャンパス全体をモデリングしました。以下の画像がその3Dマップです。
松ヶ崎祭の会場である京都工芸繊維大学松ヶ崎キャンパス全域をモデリングし、これもThree.jsを用いてブラウザに表示させています。このマップにはさまざまな仕掛けがあります。
道路には市バスやタクシー、焼き芋の移動販売車、松ヶ崎祭公式キャラクター「まつぴよ」を乗せた車、トゥクトゥクなど多種多様な車がたくさん走ってます。また時間によっては夕焼けが見れたり夜景が見れたり、「まつぴよ」を乗せた気球がキャンパス上空を遊覧飛行していたり。楽しめる要素が満載です。
以下の写真のように「ステージ企画」や「模擬店」などの各種企画のおおまかな場所が表示されるようにもなっているため、実用性も少しはあります。
これは「気球に乗っているまつぴよ」をクリックした時に表示されるポプアップです。マップにはボタンがたくさん配置されており、それぞれのボタンを押すとポップアップとその企画の説明、詳細ページへのリンクのボタンが表示されます。
3Dマップ上には気球のまつぴよを合わせて合計4匹のまつぴよが隠れているのでぜひ探してみてください！4匹目はかなり難しいです。
しかしこのマップの実装において大きな難関がありました。それは 表示速度 の問題です。Blenderでモデリングを行い、面の溶解及び頂点の溶解を行いポリゴン数を可能な限りまで減らしましたが、範囲が広いためどうしても5MBほどの大きさになってしまいました。
これをスマホ等で表示しようとするとどうしてもロード時間が長くなるのです。長いロード時間はユーザーの離脱につながるため、このロード時間を 少しでも「楽しく」できないかな と考えました。その結果が以下の写真です。
このダイアログを１行ずつ順々に表示することでマップの読み込み時間稼ぎ、読み込み時間だと感じさせない工夫を施しています。シンプルな仕掛けですがこれにより読み込み時間を稼ぐと同時にユーザーを 3Dマップの世界観に引き込む 工夫をしました。
↓ぜひ試してみてください
他にも3Dマップの世界観を阻害しないように画面全体にマップを表示し文字の表示を控えめにするなどその他細かな工夫も凝らしてあります。
余談ですが、トップページを表示するときにもロゴのアニメーションが表示されたと思います。これも実は表示に多少時間のかかる地球の3Dモデルをロードするための時間稼ぎです。
今回は学祭テーマが「Hello, world.」でありこれにはコロナの規制の緩和により、何か新しい出会いを見つけ、そして新たな世界に踏み入れようという願いが込められています。このテーマに合うようにこのロゴは設計されているそうです。
ロゴコンセプト
諸々の規制や日常といった抑圧から解放されて、ひらけた学祭を開催したいという思いを込め、六角形を解体して、開いた立方体の箱のようなロゴに仕上げた。
このイメージをアニメーションで実現できないかと思い、cssでロゴを再現してkeyframeで動かして以下のような動きを実現しました。
画面内の文字の量について
これもかなり意識したことです。皆さんもこんな経験ありませんか？
「ページ開いたはいいけどなんか文字だらけやから他のサイト見るわ〜」
私は少なからずあります。説明か何かわからないですが、もっと整理して情報を出して欲しいと思いますよね。しかしどうしても情報だけを表示するサイトは文字だけになりがちです。
文字が多いのは読むのが時間かかりそうでだるい、つまり楽しくないサイトになってしまいます。
これを防ぐため、できるだけ間を入れたりコンポーネントに背景色を追加したり、時には図形を配置したりなど、さまざまなスパイスを入れています。
所々にある動く仕掛け
これも主にトップページにて意識して設計しました。トップページでは、波が動いていたり、地球と飛行機が回っていたり。3Dマップでは紹介したように車や気球が動いていたり。またトップページの「探検する」ボタンは何秒かに1回ボタンが押して欲しそうに拡大縮小したりします。
このようにページを回遊していてユーザーを飽きさせない工夫をできるだけ入れるようにしました。こうすることでユーザーの離脱率の低下につながり、見ていて楽しい「学祭サイトとしてふさわしい」サイトになるように頑張りました。
まとめ
私は「美しくてワクワクするもの」が好きです。もちろんデザイン的な美しさもですが、本記事で紹介した設計における美しさもかなり重要だと思っています。（これまでサイトすら作ったことのないただのWeb素人が言っているので、何言ってるんだって思われるかもしれませんが。）
人間、情報の羅列ほど眠くなるものはないです。学祭サイトの設計では如何に情報の羅列感をなくし、学祭サイトとしてのワクワク感をユーザーに提供するかを第一に考えて設計しました。
非常に長い記事になりましたが、ここまで読んでいただき本当にありがとうございます。今回ご紹介できたのはほんの一部ですのでまた気が向けば記事を書こうと思います。
今後は学祭サイトの技術的な部分（例えば3Dマップの車はどのように制御しているかなど）について詳しく書いていきたいと思います。
それでは。
Discussion