えるろだのウェブデザインの話
えるろだのウェブデザインの話
プログラムは組みたいがアートのセンスはない。でもこういうサービスをするならやらなければならないんだ…
ネットサービスの基礎: 3層アーキテクチャ
まずこの話をするうえでウェブサービスがどのように動いているかを知る必要があります。 最近のウェブサービスは
- データベース
- データを貯めておくやつ
- バックエンド
- ユーザの入力/出力を管理し処理するコンポーネント
- サービスの本質と言って過言ではない
- フロントエンド
- バックエンドの入力/出力をパンピーにもわかりやすくするやつ
の3層に分けて作成するのが常です。 これにより一部を変更するというのが容易になり保守性が上がります。
フロントエンドの意義
別にフロントエンドを介さなくてもえるろだはサービスとして成り立ちます。
l-uploader-api.puresign.tokyo/replays?page=0&order=desc にアクセスしてみてください。 文字列だけの画面が出てきたはずです。 しかし書いてあることはわかると思います。投稿一覧が字面で書かれているだけです。 ユーザがこの画面で満足するならこれでサービスとしてリリースしていいです。
しかし大多数の人間はこれだと分かりにくいと思うらしいです。仕方ないのでこの文字列を処理して l-uploader.puresign.tokyo のようなリッチな画面を作成するしかないのです。
さらにはユーザは l-uploader.puresign.tokyo のような画面しか見ません。つまりユーザにとっては フロントエンドこそがサービスの本質 なのです。実際のところはバックエンドがサービスの本質です。なぜなら入力に対しどういう処理をしてどういう出力を返すかはバックエンドが決めるからです。ですがユーザはバックエンドの入出力の様子は見ず、それをラッピングしたフロントエンドの画面しか見ません。バックエンドの人がどんなに頑張っても良質なサービスを作っても、フロントエンドが雑な画面だったらゴミサービスなのです…1 我々は労力をかけてフロントエンドを作成しなければならないのです…
けーろだの画面
ではえるろだの前のアップローダである旧ロイヤルフレア製のけーろだのウェブ画面を見てみましょう。
なるほど作品毎に色合いが分かれていて分かりやすいですね。しかしその他はどうでしょうか。以下のような疑問点が出てきます
- リプレイのダウンロードはどこから行う？
- 削除時はDeleteを押せばいいのかな…？
- 記録日時とアップロード日時の区別がパッとつきにくい
- 各投稿の横幅が揃っていなくて不格好
なお削除時はページの一番下にリダイレクトされてそこでdelボタンを押して初めて削除ができます。う～ん難しい…
えるろだの画面
けーろだに準拠したデザインにしてもよかったのですが2、誰も作っていなかったからしゃーなしみんな使っていたのだろうという判断のもと、Nuxt と vuetifyでモダンなUIを作成することにしました。
画面概要
以下が実際のえるろだの画面です。
UI自体はvuetifyの ワイヤーフレーム の Baseline をカスタマイズしつつ流用しています。
ダウンロードや削除等の各種操作はアイコンでわかりやすくしました。
投稿日やリプレイ作成日も投稿としての情報を表示する上の部分とリプレイの詳細を示す下の部分に分けることで直感的にどちらがどちらかが分かるようになっています。 さらにアイコンにカーソルを重ねるとリプレイ作成日と表示されるツールチップを導入しているので、直観力がない人にも対処しています。
また、旧ロイヤルフレアで定義されたゲーム毎のテーマカラーはそのままに、プレイ方針やプレイ内容、難易度や機体まで、リプレイ種別に関わるものほぼ全てにテーマカラーを定義し、より直感的にどういうリプレイか分かるようにしています。
加えてユーザが何を見るかということにも気を使いました。
特に東方界隈では ロイフレのudXXXXで上げといたから見て！ という会話が飛び交っていました。
つまりリプレイファイル名が重視されるのです。
よってリプレイファイル名は一番目立つ位置に置く必要があります。
しかしどの作品のプレイか、というのはリプレイファイル名と同じくらい重要です。テーマカラーで示しているとはいえ、もっと目立つものが必要でしょう。
ということで各ゲームのタイトル画面のキャラの画像を横に配置しました。これでリプレイファイル名とゲーム名が同じくらい目立っていると言えるでしょう。
そのうえで、旧ロイヤルフレアになかった要素も付け加えました。 特に旧ロイヤルフレアはcgiという技術を使用していたため3層アーキテクチャですらなく、静的なHTMLしか作成できませんでした。 このせいでゲームによってフィルタといったことが難しかったのです。 しかしえるろだは3層アーキテクチャです。意気揚々とゲーム名フィルタ、カテゴリフィルタ、タグソート3を実装しました。
レスポンシブデザイン
レスポンシブデザインとは画面サイズに合わせて良しなに表示を変える技術です。 単なる静的なHTMLではなくバリバリのJavaScriptフレームワークを使用しているのでフロント画面は動的に変更することが可能です。 そのためスマホのような横幅が狭いデバイスでも分かりやすい表示をすることが可能です。 また、スマホの場合はタイトル画面のキャラを省略したりするなどで必要最低限の情報を表示して画面がゴチャつかないようにしています。
ちゃっかり直リンク問題を解決しました
旧ロイヤルフレア時代はTwitter等に共有する際にダウンロードリンクをそのまま貼るような文化がありました。
これは一般に直リンクと呼ばれインターネットのマナー的に良くありません。
例えば何の経緯も知らない人が当該ツイートを見て なんだろう と思ってリンクを踏んだらいきなり知らないファイルがダウンロードされた場合どう思うでしょうか。 ウイルス！？ となってしまいます。
そのためえるろだではリプレイのリンクを共有する際に下記の詳細画面のリンクを共有するような導線を張っています。
これにより、何の経緯も知らない人のもとにリプレイのリンクを共有するようなツイートが流れてきた際にも、予め詳細画面を見ることによってダウンロードされるのが東方関連のファイルであることを認識したうえでダウンロードをするかしないかを選択することができます。
まとめ
この画面を作成するにあたり友人に滅茶苦茶お世話になりました。
画面を作成するたびにレビューを出して ここにスペースが必要！ このアイコンはここに配置して欲しい というのを逐一言われ フロント何もわからないよ～～～ と言いながら何とか対応していました。
ですがその甲斐もあって使い勝手の良いGUIにはなったんじゃないかなと思っています。
ちなみに自分は本職はフロントエンド屋さんではないです。どちらかというとバックエンドのような処理の繋がりを見るのが好きです。
もうこんな労力割きたくないから全人類 curl コマンドもしくは httpie コマンドでブラウジングすべき。
ですが良いUIにしてみんなに使ってもらえると嬉しいですね。
以上。