萌尽狼グ

音系同人サークルASIA LUNAR代表、萌尽狼(もえつきろ)の個人ブログ

ASIA LUNARウェブサイトのビフォーアフターまとめ

f:id:moetsukiro:20170608161813j:plain

http://asialunar.info/

音系同人サークルASIA LUNARのウェブサイトを本日2017年6月8日にリニューアルオープンした。
…っておいおい2月23日にリニューアルしたばかりではないか。→記事
約3ヶ月で再度リニューアルすることになったのはいろいろと問題点があったからだが、具体的にリニューアルによってどこがどう変わったのか?
ビフォーアフターまとめという名の反省会場はこちら(´;ω;`)


①見せたい情報が隠れていて、見せなくてもいい情報が表示されていた

【Before】

  • 「Information」は4つのパネルを疑似インラインフレームで表示していた。
  • 「Websites」は「Information」とは独立していた。
  • 「Series」で4つのシリーズを紹介していたが、シリーズ作品は他にもあった。またオリジナルキャラクター紹介はボタンが小さく隠しページ扱い。
  • 「Works」はタブ切り替えで、サークル・メディアごとに作品名を可能な限りすべて列挙していた。各作品情報はモーダルウィンドウで隠れていた。
  • 「Profile」は長文で要点がわかりにくかった。またレイアウトの関係で「Twitter」とソーシャルメディアボタンがバラバラになっていた。
  • 「Link」はボタンで、カテゴリはアイコンで表示していた。相互リンク・18禁などの情報は反映されていなかった。

f:id:moetsukiro:20170608154548j:plain

【After】

  • 「Information」「Works」「Links」をアコーディオンで統一した。
  • 「運営サイト紹介」は「Information」内の一項目とした。
  • 「Works」から主要作品を「Discography」に切り分けた。作品情報はモーダルウィンドウをやめて「Discography」のタブに表示した。
  • 「シリーズ紹介」は「Discography」内の一項目とした。
  • 「Profile」は要点をまとめ箇条書きにした。
  • 「Social Media」にTwitterソーシャルメディアボタンをまとめた。

f:id:moetsukiro:20170608161138j:plain


②見せたい情報をトップに配置したが、隠れている情報と内容が重複していた

【Before】

  • 「New release」「Pickup」をトップに配置して新作ベストアルバム紹介をしていたが、作品情報のモーダルウィンドウと内容が重複していた。

f:id:moetsukiro:20170608153857j:plain

【After】

  • 「Discography」により新作ベストアルバム紹介は不要になった。

f:id:moetsukiro:20170608160857j:plain


③試聴はSoundCloudニコニコ動画にあり、全曲試聴できなかった

【Before】

  • 「New release」「Pickup」にはSoundCloudのプレーヤーを埋め込んでいた。
  • 作品情報のモーダルウィンドウにはクロスフェードデモ・単曲試聴のリンクボタンのみが表示されていた。
  • 中にはクロスフェードデモも単曲試聴もない作品があった。

f:id:moetsukiro:20170608154943j:plain

【After】

  • HTML5オーディオプレーヤー「Able Player」と、全曲45秒の試聴MP3・Oggを実装した。
  • 試聴MP3・Oggは音量調整し、作品ごとの音量差を極力少なくして聞きやすくした。
  • 試聴MP3・Oggはフェードアウトしないものとした。

f:id:moetsukiro:20170608160651j:plain


④作品のジャンルや特徴がわかりにくかった

【Before】

  • 「Works」は作品リストを音楽CD・同人誌などのメディア別に分けていたが、どの作品がゲーム音楽アレンジなのかまではモーダルウィンドウを開くまでわからなかった。
  • 作品情報のモーダルウィンドウはタブ1がジャケット、タブ2が作品情報、タブ3以降が補足情報だった。
  • タブ2は上から紹介文、通販ボタン、クロスフェードデモボタン、トラックリスト、作品データの順に並んでいた。
  • タブ3以降の補足情報は、旧サイトにあった個別ウェブページの内容そのままで、不要な情報も多かった。
  • トラックリストは機種ラベルがカラフルだったがテーブルレイアウトだった。サブタイトルがある場合は2行にまたがり読みにくかった。
    【テンプレート】No|曲名 ※特記事項|使用場面|[機種]ゲームタイトル|アーティスト・ボーカル

f:id:moetsukiro:20170608160214j:plain

【After】

  • 「Discography」は2カラムで、左カラムにジャケットと作品情報、右カラムに作品傾向と作品内容、ボトムに試聴プレーヤーとトラックリストを配置した。
  • スマホではタブ切り替えのためにスクロール量が多くなるため、ページャーを用意した。※ただし、行って戻ってを繰り返すとボタンが押せなくなる不具合あり。
  • 通販ボタンをやめて作品情報に委託先をリストアップするなど、見える化して必要なボタンだけ残した。
  • 作品傾向という項目を新たに作り、ここにゲーム音楽チップチューン・オリジナル・ボーカルのどれに該当するかをチェックマークし、ジャンル・シリーズを記載してわかりやすくした。
  • 作品内容は見出しを「ゲームボーイ音源のチップチューンアルバム」のようにわかりやすくした。また紹介文は箇条書きにして今北産業を徹底した。シリーズ作品はひとつ目の箇条書きでシリーズについて解説した。
  • 作品内容はタブ2に初出一覧があるものはFMPSGや旧作からの再録ありとわかるようにした。またチップチューン作品はタブ3に制作環境をまとめた。
  • トラックリストは従来とは逆順となりテキスト1行でまとめるようにした。これは「Able Player」がリスト内でタグを使えないため。
    【テンプレート】No|アーティスト|使用場面|[機種]ゲームタイトル|曲名/ボーカル ※特記事項
  • 複数ゲームのメドレーや、空中戦車道シリーズのサブタイトルなど、トラック情報の注釈は「作品内容」にまとめるようにした。

f:id:moetsukiro:20170608160141j:plain


リニューアル後の問題点

  • 「Able Player」にはIE/Edgeで再生できない不具合があり、自力ではこれを修正することができない。→【6/15追記】試聴プレーヤーを「SimplePlaylist」に変更しました。
  • アコーディオンパネルを開くとサイトが縦に伸びるため、スマホでは不便。
  • スマホでは縦長になるため「Discography」のサムネイルとタブ、試聴プレーヤーが画面外になり操作が不便。
  • 試聴プレーヤーはサイト内に複数設置しているが、別個に作動するため曲を停止せずに別のタブを開くと音が混ざったりする。
  • 試聴時間は諸事情により45秒以内としたが、曲によってワンコーラス収まりきらずぶつ切りとなっており不満が残る。
  • トラックリストを書き換える際、サブタイトルに波線(~)を使うと範囲を示す波線と見分けがつかないのでサブタイトルの波線は半角マイナス(-)で統一したが、ゲームタイトルは正確な表記ではなくなった。

あとがき

1999年11月14日、ジオシティーズに初のウェブサイトを開設して以来、約17年半無料ホームページスペースを転々としながら試行錯誤を繰り返してきた。
2011年11月に独自ドメインを取得し、2015年10月から現在の有料サーバーに移転したが、このとき作品ごとにページを作った結果管理しきれなくなり約1年サイトを放置してしまった。
Bootstrap2は2012年7月から使用し、2017年2月23日にBootstrap3のRinHonokaのForkテーマ)に移行した。このときサイトはペライチにしようと考えた。
モーダルウィンドウは完全に独立したページのように振る舞うため、ペライチ内に個別の作品情報をまとめるにはうってつけだった。しかしやりすぎた。
結果としてモーダルウィンドウを開くボタンを押さない限り、サイト上からは完全に見えなくてお荷物になるから「押されないボタンという恐怖」に苛まれることとなった。
これは試聴プレーヤーにしてもそうで、モーダルウィンドウに試聴プレーヤーを配置しても意味がないのである。とにかくアクションは少ないほうが有利だ。
また、特に漫画系の同人作家サイトと比較して決定的にジャンル情報が欠如していることも明らかになった。作者が必要な情報と閲覧者にとって必要な情報はイコールとは限らない。
そして2017年5月12日、Twitterにある方から12年前の作品『蕾電伝説(つぼみでんでんせつ)』を聞きたいと問い合わせがあり、HTML5オーディオプレーヤーを実装することとなった。
これにより、トラックリストの大幅な書き換え作業が生じてしまったが、試聴に関する懸案は一気に解決に向かった。
ウェブに関してはまだまだ不勉強であり、5月24日に始めた作業は最初は単なるソースの見直しに過ぎなかったが、気がつけば大改修工事になってしまった。
個人のウェブサイトゆえ確たる答えもなく自己満足の域を出ないが、少しは人に見せられるようなコーディングになったのではないだろうか。