同人音屋やバンドマンがWordPressでWebサイトを作るときに意識すると良さそうな5つのポイント

Webサイトは看板であり、顔であり、カタログなので、総合的なデザインが必要という話です。
御機嫌よう、蟻坂(@4risaka)です。

個人のWebサイト

今やSNSが台頭してきており、もしかして個人のWebサイトを持つ意味ってあんまりないんじゃ？とついこの間まで思っていたわたくしですが、
独自ドメインとWordpressのサイトを持ってみてその強力さがなんとなく見えてきたので、皆さんにも薦めてみようと思います。

個人サイトを構える意義

まずポータルサイト、オンライン名刺としての側面があります。「ここにアクセスすればすべてわかる」というやつです。Webサービスは「ランダムにめぐる」のに強いので、例えばYoutubeやInstagramはその偶然性に旨味があります。一方、個が薄いところがあるので一個人を主張するのにWebサイトは便利です。

次にドメイン価値があります。日々良質なコンテンツを更新し続けるサイトってGoogleで上に出てくるんですよね。つまりそれだけ人に見られる確率が上がるわけです。固有ドメインでサイトをわざわざ運営する利点はここにあります。

もうひとつ、サービスに依存しなくなるという点があります。
たとえばブログサービスであればブログの利用規約に、SoundCloudであれば運営の鶴の一声でめんどくさくなったりなど、サービスにコンテンツを振り回されるはめになります。個人サイトであればその辺は自由が利きます(もっとも、コンテンツをDigらせるのはSNSのほうが強いですが)。

いい個人サイトを作ろう

というわけで、個人サイトはじっくり育てると資産として非常に高い価値を持ちます。

故にしっかりサイトデザインを作りこむのは大切なことなのですが、音屋の皆様やバンドマンの皆様はWeb制作が本分ではありません。そこで、本記事で「何が良いサイト」なのかわたしの考えを述べておきますので、サイト制作の際の参考にして頂ければ幸いです。

いいWebサイトをWordpressでつくる

まずプラットフォーム(CMS, Contents Management Systemと言ったりもします)はWordpressを使います。
理由は

• テンプレートが大量にある
• プラグインが大量にある
• 書籍が大量にある
• 簡単インストールできるレンタルサーバーが大量にある
• 解説サイトが大量にある

要するに情報が桁外れに多いからです。このため本記事のようにポイントを抑えた記事も書くことができます。
他のプラットフォームではこうはいきません。

というわけで、いくつかのWordpressテーマ(テンプレート)の例から説明してきましょう。
自作してもよし、テーマを選んでもよし、です。

ポイント1: かっこいいアイキャッチ

まぁ基本なんですがぱっと見て「おおなんか凄そう」と思わせるのが大事です。
音楽をやっている人間でも、閲覧者が最初に見るのはトップページの外観です。従いまして美麗なアイキャッチが必要です。

具体的には、テーマ「OBISIDIAN」のような大画面に広がるアイキャッチを備えたものがアーティスティックで良いでしょう。
企業サイトのようなコンパクトなまとまり方もいいですが、アーティストらしく振る舞ったほうが「そういう印象」が出ます。

Obsidian Theme — WordPress Themes for Blogs at WordPress.com

ポイント2: 注目ページへのアクセス性

さて、Webデザインはマークアップによるコンテンツの誘導といった画面UIも重要なデザイン要素です。見た目だけではいけません。
ここでの重要なポイントですが、「閲覧者はサイトを読まない。眺める」という前提です。

どんなにくまなく作りこんでもパッと見て全貌が見えなければ驚くほど読みません。弊ブログだと実は検索フォームとかアーカイブが死にコンテンツになっています。
というわけで、最も注目してほしいコンテンツにトップページから導線を張るのは基本です。

テーマ「LUSH」のデモページにおける導線の張り方は印象的です。
トップページにNEW ALBUM RELEASEの情報と、右上にSHOPへのリンクが飛び込んできます。
「音源聞いてすぐ購入！」みたいなのを狙っているわけですね。これは結構尖ったパターンですが、単純にナビゲーションメニューを貼るだけより面白いと思います。

Lush – Music Band & Musician WordPress Theme – WordPress

もちろん、さきほどの「OBSIDIAN」のように、トップページにナビゲーションを作ってすぐにどこにでも移動できるようにするのは基本ですね。

ポイント3: 音楽へのアクセス性

さて、ミュージシャン・アーティストなら外せないのは音楽へのリンク。
これ、個人的にはDiscoGraphy→音源へのリンク→デモとかやってるようじゃ遅すぎると思ってます。
先ほど申し上げましたように「閲覧者は眺めるだけ」なので、音源に辿り着くのが面倒だったら来ません。聴きません。せっかくのサイトが意味ありません。

というわけで、テーマ「JAM SESSION」の例のように独自プレイヤーでもSoundCloudウィジェットでもいいので開いた瞬間に聴ける状態にしちゃうのはどうでしょう。

JamSession – Music & Music Band WordPress Theme – WordPress

この狙いは、「Webメディアなどで紹介されて、そこから辿ってきた人が一瞬で音楽に関する情報(=音楽そのもの)にアクセスできる状態にする」というのを狙っています。
先日「SEOはがんばらなくていいんじゃないかな」という記事を書きましたが(→ 【 現代のバンドマンのネット活用方法は、プラットフォームの多角化と多作だと思う 】)、その代わりクリエイターはSNSシェアで生かされる面が強いので、シェア前提でコンテンツのアクセス性を作りこむのが重要と思われます。

ポイント4: SNSへの拡散可能性

さて、仮にWebメディアとかtwitterからやってきたお客さんが「これいい！シェアしよ！」と思ったとしましょう。
そのときサイトをパッと見てtwitterボタンとかfacebookボタンがなかったら凄まじい損失になります。なので、SNSボタンは必ず用意してください。

弊ブログの場合記事の最下部に用意して「読み終わった流れでシェアする」という力が働くようになってたりしますが(STINGERのおかげで)、アーティストのWebサイトという観点だとどこ見ててもシェアボタンが目に入るくらいのものがおすすめです。
そのためにはスクロール追従型のシェアボタンを備えたもの、たとえばテーマ「VICE」のようなものが良いでしょう。常に画面右上にシェアボタンがあります。

Vice: Music Band, Dj and Radio WordPress Theme – WordPress

ポイント5: モバイルファーストであること

なんだか小難しいコトバが出てきましたが、要するにスマホやタブレットで表示した時に操作しやすいデザインに変化するようになっていること、です。
正確には「パソコン向けよりスマホ向けサイトを優先して作りこむこと」という意味なのですが、以下に示す通りスマホにさっさと対応するという点では同じような意味なのでこう書きました。

弊ブログ「ありんこ書房」ですが、アクセス解析を行うと訪問者の6割がスマートフォン(もっと具体的に言うとiPhone)であることがわかっています。
DTMの話を書くブログなので、デスクトップ環境が多いように感覚的には思うかもしれませんが、その実態は全く逆で、今後もこの流れは加速していくことかと思います。

となると、「スマートフォンで見づらいサイト」というのは看板として全く意味を成さないと言ってよいでしょう。なので、スマートフォンやタブレットで表示できるモバイルファーストデザインは必携のデザインポイントであります。

ここまでに述べてきたテーマは全てモバイルファーストになっています。デモサイトをスマートフォンで開けばわかりますが、美麗さはそのままに操作しやすい専用のデザインが現れます。

テーマ自作する上で最強にめんどくさいのがこの「全デバイスに対応する」というところだと思っています。わたしはコーディングもデザインもできますが、スマホやリッチなCSS,JavaScriptのせいで要求のハードルがどんどん高くなってきて、最近めんどくさすぎてやる気が起きません。。。

まとめ

同人音屋やミュージシャン、バンドマンがどうせ自分でWebサイト構えるなら、Wordpressのテーマを最大限活用しつつ、以下の4点

• アイキャッチ
• ページのアクセス性
• 音楽へのアクセス性
• SNSへの拡散しやすさ

を満足するデザインができたらいいんじゃないでしょうか、という話でした。

ありがちなのが見た目に注力しすぎて重かったり見づらいサイト。意味がありません。訪問客を一番に考えた快適なサイトはブランド的にも重要な意味を持ちますので、独りよがりなサイトデザインはやめましょう。
ちなみに今回紹介したテーマは全て有料テーマですが、個人的には余裕で回収できるだけの投資価値があると思っています。

どうしても自作してみたい人はこの本がおすすめです。1ページ目から順番に手を動かしていくと基本的なテーマができあがる仕掛けになっています。

 - 創作, 方法論 Wordpress, デザイン, 個人サイト