0 likes554 views1 min

サイトのデザインをリニューアルしたのでその辺のもろもろを自分語り。
Auramorte(@Auramorte)の中の人、蟻坂だよ。ご機嫌いかが。

リニューアルしました

見りゃわかるけど、AuramorteのWebサイトのデザインをリニューアルしました。

以前のテンプレートを使っていて思った色んな問題点をちょっと直しつつ、まだ課題は残っているので、その辺のお話をしてみるよ。皆さんの感じた印象と認識があっているか確認する意味も込めて。

テーマは「Tune」を使用

いきなり技術的なハナシっぽくてごめんね。

このWebサイトは「Wordpress」っていうコンテンツマネージメントシステム(要するにWebサイトを簡単に管理・制御できる仕組み)を使って構築しているんだけど、見た目は原則として自分で作らないといけない。

でもそれじゃ大変だから、Webデザイン能力を持った有志が無償・有償でかっこいい外観を提供してくれている。これが「テーマ」というものね。お菓子で例えるなら外装の箱みたいなもんだと思って。箱一つとっても、見た目がオシャレで開けやすかったらすばらしいでしょ？

今回、Wolf ThemesのTuneというテーマをほとんどそのまま使っている。前回は結構改造したんだけど、しっくり収まってくれたので最低限の調整(色とか画像とか)しかやってなかったりする。便利。

つまり、真似すれば誰でもこれくらいのサイトはできちゃうってこと。ほんとはあんまり言いたくなかったなぁ でもソース覗いたらGenerator属性がすべてを語っているから一緒だね

なんでTune？

WordPressのテーマはそれこそ星の数ほどあるといっても差し支えなくて、

  • お店のサイトに向いているテーマ
  • 個人ブログに向いているテーマ
  • ミュージシャン向けのテーマ

といった具合に、やりたいことに応じて色々ある。Tuneはこのうち3つ目の「ミュージシャン向けのテーマ」に該当するね。プレイヤーとか、ディスコグラフィーのページを簡単に作るためのお手本が予め用意されているから、つくるのが簡単！

あと好みの問題として以下の条件は外したくなかったので、そういうのに該当するテーマということで探した。

  • なるべくミニマルに、クドくなりにくい見た目
  • コンテンツ全部の総ページ数が少ない
  • 一方で音楽プレイヤーや動画ページなど必要なものは全て揃っている
  • InstagramなどのSNSとの連携が簡単
  • ブログをサイトのコンテンツのひとつとして組み込める

更にマークアップSEOとかモバイルファーストとかレンダリング速度とかUXとか色んな面で主観的に20個位評価して見定めた結果これにしたんだけど何言ってんのかわからんと思うから気にしないでいいよ。カッコイイとか使いやすいとか、そういうのが共有できればいいな。この記事を読んでいるあなたに「前の方がいい」って思わせちゃったら僕の負け。

改善したかった箇所とか

前回のテーマと比べて良くなったところのハナシ。

コンテンツへの導線

前回のテーマで使ってて気になったのが音楽をどこでどうやって聴けるのかよくわからないというのと、動画コンテンツとInstagramへの導線が中途半端なこと。

特に動画ね、いま流行ってるから機会を捨てるわけにはいかないなーと思って、動画ページを簡単に作れるテーマを選ぶのは必須だった。トップページなら即、他のページからなら1クリックでYoutubeリンクのある場所に飛べるよ。

あとプロフィールページは掘り下げても仕方ないのでトップページにオマケみたいにくっつけた。Twitterに一発で飛べるし、いいでしょこれで。

アクセス性を良くしてみたつもり

やってみればわかるんだけどほとんど全てのコンテンツに2クリック/タップで到達できる。もう1回クリック/タップを増やせば販路にも飛べる(AmazonとかiTunesとか)。販路と言えばBOOTHはあんまり意味ないので捨てた。

歌詞の展開とかブログのアーカイブページとか、別に見たい人だけ見ればいいやつは奥にしまってあったりする。

支持者の皆さんならともかく、最初に検索か何かから飛んできた人からしたら何やってるのかよくわからないじゃん？となるとDISCOGRAPHYなりVIDEOにさっさと飛べるようにしないと困るよね、って思ってなんとかしてみた。さっさと移動すれば、プレイヤーがそこにあるので即聴ける。ちなみにここは大きく変えていてフルで聴ける。

妖怪コンピ限定収録の曲だろうがなんだろうがフルで聴ける。手元の音楽プレイヤーに入れたかったら買ってね。そっちのほうが音質良いし読みやすい歌詞もついてくるし。

フォント

地味だけどフォントね。こういう本文を記載するところはサンセリフ体(ゴシック体的なやつ)を原則にした。だって読みにくいし。PHIROSOPHYページだけは別だけど。

まだ納得がいってない箇所とか

ハンバーガーメニューやめたい

スマホでこの記事を閲覧しているそこのあなた、右上の「三」みたいなやつ押しづらいでしょ？

これはハンバーガーメニューといって、最近のスマホ向けWebサイトでは当たり前のように存在していて、今回のテーマ「Tune」も最初から搭載されていたのでとりあえず使ってるんだけど実は僕はこれが嫌い。
だって、

  • タップ回数が1回増える
  • ページを開いた瞬間にコンテンツの全貌が見えない
  • そもそも何のアイコンなのか直感的にわかりにくい

かつて、Webデザイン界隈では「2回のクリックですべてのページに遷移できるのがキレイな階層構造だ」みたいなことを云われていたらしいんだけど、1回タップ増えるんじゃ退化してるじゃん。だめじゃん。

あと、パソコンでこのページを見た時一番上に出てくる「HOME BLOG ……」みたいなメニューは「グローバルナビゲーション」っていって、ページの全コンテンツを把握するのに役立つナビゲーションなわけだけど、スマホで見たら隠れてるんじゃナビできてないじゃん。だめじゃん。

極めつけに、アイコンの「三」ってなんだこれは。しかも右上にあるんじゃタップしにくいったらありゃしない。

とまぁ、全てにおいてUX的に死んでると思うのでなんとかしたいなーっていうのが正直なところ。ここ改善しないと肝心のスマホで見てる人に対して全然導線の改良ができてない。バージョンアップをご期待下さい。Faceboookとかが採用しているタブメニューがいいなぁ。

Philosophy読みづらい

Phirosophyページ、セリフ体のフォントなのはともかく文字が背景と同化するというしょーもない問題をそのまま放置してたりする。背景画像を新しくつくれば解決するので、もうちょっと待ってね。

おわりに

見た目は変わったけど、Webサイトは手段でしかないから、まずブログの更新より新しい音楽を出すのに時間使わないといけないね。というわけで更新は相変わらず頻度少なめでいきます。引き続き応援下さい。

Share:
Essays

More Posts