ココが駄目だよCampusWeb

この記事は+R Advent Calendar 2015の1日目を飾る記事である。
立命館大学について語るカレンダーね。

推敲もせず勢いだけで書く駄文になる予定なので、時間が余ってる暇人は読んでくれよな。

CampusWeb is 何

CampusWebとは立命館大学に通う学生のためのポータルサイト的な何かである。用途としては、受講登録、休講・補講の確認、定期試験の時間割を見る、大学からのお知らせを見るなどがある。

ここまでだけ聞くと「さすが総合大学、Webから色々できて凄いね」みたいになる。しかしこれが中々の地雷アプリケーションで、まあ中々の糞デザインと糞実装をかけあわせているのである。

「CampusWebは使いづらく、ログインした瞬間からユーザーをストレスマッハにさせるアプリケーションである」というのは立命館大学生の共通認識であると言っても過言ではなかろう。

一体こんな糞アプリケーションを作ったのはどこの糞企業だよ!作った会社を小一時間問い詰めたいぞ!と言いたいところだが某\F\士\通らしい。(真相は定かではない)

実装、ココが駄目だよ

まず初めにマークアップ的観点からこのCampusWebをけちょんけちょんに貶していきたいと思った。そう思ってChromeの開発者ツールでコードを見ようとして右クリックしようとしたら「右クリックは禁止されています。」です。ありがとうございます。

そこでcmd+option+Iで開発者ツールを開いたぼくがまずはじめに目にした衝撃の一文<meta http-equiv="Content-Type" content="text/html;charset=windows-31j">である。

windows-31j

Microsoft コードページ 932(以下 CP932)は、マイクロソフト及び、MS-DOSのOEMベンダがShiftJISを独自に拡張した文字コードである。また同時に、CP932はShiftJISのWindowsアプリケーションにおける「実装」を指す用語であるとも言える。

Wikipediaより

ShiftJISな時点で相当厄介なのにそれの独自拡張ですと。
要件定義のミーティングなどで

エンジニア「文字コードはwindows-31jでやりましょう!」
ディレクター「承認!」

みたいになるのが全く想像できないんだけど、なんでそうなったんだ。

脅威のテーブルレイアウト

文字コードから漂うレガシーなかほりに恐る恐る<body>タグ内をチェックし始めたわけだけど、ぼくが知っているHTMLではなかった。

ウェッブ業界に古くからいる人がたまに喋っている「テーブルレイアウト」なるものだ。中身は全てテーブルレイアウトで構成されていた。正直、初めて見たのでちょっと感動した。さすがCampusWeb。

そりゃ、こんなレガシーな仕様だとメンテナンスや更新のコストもかかるし、余計に時代に取り残される仕様になっていくわけだ。悪のスパイラルだと思った。

全体を通して気になったこと

デザイン、ココが駄目だよ

次、デザインについて。

見た目がカッコ悪いとかそういう表面上のアレコレではなく(もちろんそれもあるけど)、設計とか導線がヤバい。

ちゃんと使う側の立場にたってデザインされたのか疑問すぎて仕方ない。

トップページ

これがトップページである。

それぞれのパーツがWeb1.125くらいな感じでダサいとかいうのはさておいて機能的に問題が多々ある。

お知らせ、一覧で見たい

恐らくこのトップページで、ユーザーに一番伝えたい事は「あなたにお知らせするべきことの一覧」だろうと思う。
しかし、このデザインではひとつひとつタブを開いて見なければ自分宛てのお知らせが来ているか判断ができない。
せめて、「全てのお知らせ」みたいなタブを作ってひと目で全てのお知らせを認識できるようにするべきだろう。

ウィンドウサイズおかしい

このサイト、開くと勝手に別ウィンドウが立ち上がる仕様になっている。
そのサイズがサイトのmin-widthより小さい。
スクロールすると以下のようになる。

上、途切れてる。(画像では少し分かり難い)

お知らせページ

さて、次にお知らせページの中身を見ていく。

ブラウザバックで強制終了

ぼく「なるほど、欠席したので連絡が来てるんやね。このお知らせについては了解やで。次のお知らせを読みたいのでトップページに戻ろ...(ブラウザバック)...アレ...」

このアプリケーション、ブラウザバックをしたが最後、ログインからやり直しらしい。

ロゴorパンくずをつけて欲しい

ブラウザバックで強制終了するならば、せめて左上にトップに帰れるリンクを付けるべきだと思うのだけど、CampusWebでは一番下に付いているみたい。

画面上部にロゴもしくはパンくずを配置して、トップに帰ることがデキるようにして欲しい。

改善案

文句言い散らすだけ言い散らしたので、改善案を5つほど。

この5つをするだけでもかなり改善されると思う。