UU-Circlesとデザイン

つい最近3月8日に気軽に大学のサークルビラをみることができるwebサイト「UU-Circles」をリリースすることができました!!

やったーー!!

今回の記事では「UU-Circles」のUIやUX、webデザインという方向から切り簡単に拘ったポイントなどをお伝えしていければと思います。

  1. ビラ配りを擬似体験するUX
  2. とりあえず見るだけでクスッと笑えるタグ
  3. 昨年から変更したメイン画像のビラのサイズ
  4. フリックによるボタン表示を使ったUIデザイン(未完成)

1. ビラ配りを擬似体験するUX

昨年と今年でさまざまなデザインが変化しましたが、それでも変わっていないものがあります。それが「現実のビラ配りを擬似体験させられるようなwebサイト」というコンセプトです。

実際にビラ配りを体験した同級生や先輩達は知っていると思いますが、ビラくばりはすごくお祭りのような雰囲気のイベントです。サークルの方々はこれでもかというほどにビラを刷り、新入生の手に乗っているビラに重ねていきます。多分新入生も今、どのサークルのビラを乗せられたかは、全く分かっていないのではと思います。

ですが、家に帰ってそのぐしゃぐしゃに混ぜられたサークルを見ていくのが結構面白く、「こんなサークルがあったんだ!」とある意味ガチャガチャでも引いているかのような期待感を感じるようになります。もしサークル名が並んでいてその先にビラや活動状況があったら、”自分の知っている世界のサークル”の中から選んでしまうと思います。それをあえて強制的に偶然に出会えるビラ配りというイベントはある意味で新入生に新しい扉を用意する行事なのだと思いました。

そういった思いもあり、webサイトのさまざまなところに、その根幹となるコンセプトを反映させたデザインが散らばっています。
例えばサークルビラ一覧サイトのメインページです。

サイトに入ってすぐ見れる部分のサークルは基本的にはビラを見て選べるように文字を極限まで影を薄くするようにしました。それによってビラのデザインからサークルを選べるようになります。またトップページでは毎回10件のサークルが見えるようになっていますが、このサークルは完全にランダムになっており毎回違ったサークルに出会えるようになっています。

昨年はトップページのランダムで全てのサークルが出るまで下が見れないようにしていたのですが、そうするとなかなか一番下まで見ることができない、という問題や意見がありデザイン的にも「感覚的に行動できる」という部分が損なわれてしまうという問題もあり、10件だけの表示となっています。

今回まだ実装していない機能として、昨年好評だった「ガチャガチャ」があるのですが、それが実装されるまでこれはある意味「10蓮のガチャガチャ」と捉えることもできるかもしれません。

左上の「UU-Circles」を押すことで、何度も新しいサークルに出会えるので是非体験してみてください!

2. とりあえず見るだけでクスッと笑えるタグ

トップページで次に押したくボタンとしては、絶対タグですよね!(“今日の新歓”と言ってはいけません笑)

今回はユーザーの移動を「困ったらトップに戻る」行動と「タグを使ったはしご検索」行動を制限するデザインにしてみました。

「困ったらトップに戻る」行動はあえてページで戻るボタンを作らず、困ったらトップに戻れる「UU-Circles」ボタンだけを置いて置くことで画面内が複雑になるのをすごく避けています。

また「タグを使ったはしご検索」というのは、ユーザーは

トップページの”オススメのタグ”から選んで検索

タグ検索先の中から1つサークルを見る

そのサークルの詳細についている別のタグを押してさらにタグ検索

またそのタグ検索先の中から1つのサークルを見る


を繰り返す行動を目指しています。これは最近のSNSで良く見られるタグ移動を意図的にデザインしたものです。これをすることで自分の興味あるサークルを上手く探すことができます。

またタグの魅力を高めるためタグ検索先の、紹介文にも拘りました。(と言っても後輩が)なんだかクセのあると言っても褒めすぎず、悪く言わずちょうどマイナス1点くらいの良い塩梅の紹介コメントをしてくれています。

自分もこの紹介文を後輩にお願いしたときは、こんなに気合いを入れる部分にするとは考えていませんでしたが、後輩のセンスの良さにデザイン的にもUX的にも面白くする気持ちが起こってしまったのだと思います笑

3. 昨年から変更したメイン画像のビラのサイズ

昨年のデザインから大きく変えたこととして、トップのデザインとビラのサイズです。特に去年はトップの画像は画面いっぱいに大きく、またビラのサイズも画面いっぱいに1枚をベースにしていました。しかし、そうすることで毎回開くとスクロールしないとビラが見えなかったり、雑に見えてしまう部分がありました。

そこで去年の最後に行なった反省会的なもので出た次のアイデアとして、トップページからすぐに活用できるwebサイトにしようと考え、今年はそれを採用したという感じです。

少しビラのサイズが小さくなってしまった事によるデメリットとして、小さな文字が読めなくなってしまうというのが挙げられます。ここはデザインとのトレードオフな感じですね。

4. フリックによるボタン表示を使ったUIデザイン

複数の同じ重要度のコンテンツに対して表示方法を考えたとき、

  • 横(縦)に並べて表示
  • 表示確率を操作して表示

という案が浮かびます。

しかしデザイン的には無駄に長くなるのはあんまり良くないので、結構悩みポイントでした。そこを上手く掬ったのはフリック操作を用いたデザインでした。これまではユーザーに対して縦ラインの動きが多かったですが、もう少し横の動きを入れ込むことでサイトのサイズを縦に伸ばすのではなく横にも伸ばすことで、上手くデザインをしました。

特に横の動きをつけると自動スクロールさせないとユーザーに横に動かせることを認知させられないという問題がありますが、自動スクロールだと逆に動きすぎて気になる場合もあります。そこで今回は下の方に中途で左右も表示されるようにしました。これを用いることで自動推移を止めても、左右に何かしらのコンテンツがあることを示唆させることができます。

いかがだったでしょうか?少しだけサークルビラ一覧が普通の学生によって作られ随所に小さなこだわりが詰め込まれて、このサイトはできていることを知ってもらえたでしょうか?

是非今後もサークルビラ一覧サイトを利用していただければ幸いです。

https://uu-circles.com/