今やテキトーだと非常にマズイ。バンドマンのためのホームページ作りをバンド”Skinny love”と共に考える

「普段みんなの前だと言いにくいことやら、本音と建前と暗黙の了解のアレで言わないこと、そういうのを排除して腹を割り、ざっくばらんに音楽について語る」別に明言しているわけでもないが、今まで読んでくれた人ならなんとなく察してくれてたと思う。このサイトはそういうインターネットだ。
建前ばっかり並べて良いとこだけで表面を取り繕ったところで身にならないんじゃないかという考えである。
一応そういうサイトだということを踏まえてから話を進めていきたい。

去る10月15日、我々の主催で「地下室LIVES」というイベントを開催させていただいた。その内容としてクラウドファンディングにより開催資金の出資を募るというものなのだが、その出資へのリターン内容の一つに「あなたのバンドの記事を書きます」プランというのを用意させていただいた。
そのプランにて出資していただいたのが今回の記事のバンドSkinny loveさん。
感謝の気持ちも含め、そういった形で縁があったのでそりゃあもちろん個人的にもバンドにとってプラスになる記事を作ろうという心持でいるのだが・・・

記事を書くにあたって資料等をおくっていただいたのだが、おや・・・
「ホームページがダサい！」
わざわざ出資してくださった方のことを悪く言うのは非常に心が痛むのだが、これを”良質なもの”として紹介しては間違いなくウソになってしまう。

こちらがSkinny loveのホームページ。
（一応彼らのホームページが改装する可能性を予想して、記事が書かれた現在のホームページの状態のスクリーンショットを置いておこう。）

改めていかがだろうか？
心が非常に痛むが記事にウソを書くわけにはいかない・・・
Skinny loveのみなさんごめんなさい、だが敢えてもう一度言おう、「ホームページがダサい！」

「ホームページがダサい」これが非常に重要な事態であるのだ。
それというのもホームページというのはネット上でバンドのことを知る最初の入り口の一つであるからであるからにして・・・
人間と言うのは幸も不幸もとにかく見た目で判断してしまう生き物である。金髪ノーメイク、ボロついたアディダスのジャージにキティーちゃんのサンダルという格好の人を見たとするならば、「あー深夜にドンキにいる人達だ」と判断するだろう。例えその人が稀代の人格者であろうとなんかすげーヤツだったとしたとしてもだな、まず第一印象で「コイツは俺と用事のない人間だ」という判断をされてしまう。人の世ってのはそういもんなんだ。

要はそういうことである。
「ホームページがダサい」というファーストインプレッションのおかげで、バンド自体のイメージはもちろんのこと音源やらなにやら、どうしても低く見積もってしまうという。
さらに今回のSkinny loveさんの場合は非常に言いづらいことではあるが、やはり曲も音源のクオリティもちょっとアレで、結構頑張ってベタ褒めしてしまったとしたらどうしても「おや・・・？」と違和感が生まれることになってしまう。この違和感というのが非常に危険で一度違和感を感じてしまうと信頼がアレするというか、読者にウソで塗り固められたものを読むという苦行を提供してしまうことになるのだ。何卒ご理解いただけますようお願い申し上げたい！

ということでだな・・・
まずは入り口からだ。「ホームページがダサい」というこの残念なファーストインプレッションを改善すべくSkinny loveのホームページが劇的ビフォーアフターできるようにクドクドと書いていくという企画である。
一応この記事を書いている筆者の私はウェブデザイナーとしてツライ日々を生き抜いている。「だからなんだ」というアレかもしれんが、ホームページについてズブの素人が書いた訳ではないということを宣言しておきたいのだ。

もう一度見てみよう

再登場のこちらが彼ら、Skinny loveのホームページ。

別に自分のセンスに特別な自身があるわけでもないが、誰がみてもほぼほぼ「ダサい」と感じるだろう。
多分本人らもそう思っているに違いない。できればカッコいいホームページにしたいが予算とか諸々の都合で自分達でホームページを作るしか他になく、苦肉の策として今の状態に収まっているはずだ。
という事情を察したので細かくツッコむことは止めておくが、とりあえずだ。
とりあえずホームページにアクセスして一発目の文章が「スマートフォン・iPhoneの方は右上「三」のような所をタップしていただけたら、メニューが開きます。」はちょっとヤバいんじゃないだろうか・・・。いや確かに「三」みたいなボタンだと思うけどさ。

 
ということでアレだ。私が日々の暮らしの中で学んだ「失敗しにくいデザイン」のコツを伝授しよう。
自分達でホームページを作る際はもちろん、誰かに頼む際にも役に立つはずだ・・・！

そういえばバンドのホームページを金払ってウェブデザイナーに頼むと思っている以上の金がかかるぞ。コネがあるなら別だが、イメージしているようなカッコいいホームページを作ろうと思うと、ただでさえバンドで金が飛んでく中、払えそうもない額になることが多い。（大きい声で良いにくいが全体的に見ると若いウェブデザイナーのが安上がりになる傾向があるぞ・・・）
あと「初期費用なしでホームページ！」みたいなのは良い話聞いたことないし大体が払ったら払った分だけ損することが多いのでマジでおススメしない。

 

オーソドックスなレイアウトのススメ。

まずはレイアウト。
個人的なイメージだが、ホームページを作る際バンドマンは突然謎のクリエイティビティを発揮し、何故か最初から冒険したがる傾向がある。
始めてホームページを作るのならば、まずはオーソドックスなレイアウトから始めることを強くおススメする。

メリットとしては
・構造が把握しやすい
見る側が何がどこにあるかパッと見てわかるというメリットがあるが、それよりも”作る側”が情報を整理しやすいというメリットがある。どうしても始めて作るとなるとどこにどれを配置したら良いのかわからなくなりがちだからな。

・写真が見やすい
後述するが、ホームページを作る上で技術とかセンスとかそういうのよりも写真の良し悪しがものを言う。ベーシックなレイアウトが写真を見せるのに向いているかと言えばそうではないが、下手に冒険するよりはずっと写真が見やすくなることの方が多い。（難しいレイアウトだと、横長の写真を使う必要が出てきたりして大変なことになる場合も）
ダメだしする形になるが、Skinny loveのサイトで使われている背面全体に写真を持ってくるスタイルはデザイン難度が非常に高いのでマジでおススメしない。

・後から追加したり削除したりがラク
特にバンド系にはありがちだが、例えば重要なライブの告知にバナーを使ったりとか何かと追加したり消したりの作業があると思う。
その点ベーシックなレイアウトは優秀で、最初から追加しやすく場所が空いてる上に増やしても減らしても違和感が少ない。

このベーシックなレイアウト、かれこれ10年くらい前から今までずっと使われているが、伊達にスタンダードじゃない。
マジでおススメ。

 

写真マジ大事

写真はマジで大事。ホームページを見た人にとって、細かいデザインや色のアレソレよりも正直言って写真のほうがよっぽどイメージに関わってくる。

・ライブの写真は難しいぞ・・・
やはりバンドマンが一番輝く瞬間・・・そう、ライブの写真をホームページとかプロフィールに使いたがるバンドマンは少なくない。
だがライブの写真は非常に難しい・・・。会場は暗いわ、フラッシュ焚けないわ、ブレるわ、動くわ、照明はピカピカするわ、と言った具合だろうか。非常にハードコアな状況であるのだ。
ライブの写真に慣れている人が撮ってくれるならいいが、ライブに来てくれた友達とかにテキトーに頼んだ写真はちょっとヤバイことになるぞ・・・

・出来るだけ明るいところで撮ろう
日陰を生きるバンドマンにとってイメージ的なあれなのかよくわからんが、何故か暗いところで写真を撮りたがる人が多い。
デジタルカメラは構造上、明るければ明るいほど画質が良くなる。イメージ的なアレの方法は幾らでもあるからマジで明るいところで写真を撮るべき。明るさが足りなかったらライトを引っ張ってきてギャンギャンに明るくして撮ろう。
とにかく暗いところでとった写真は画像が荒れるので色々台無しになるのだ。

・出来るだけ高いカメラを使おう
もう単純な話だが、良いカメラの方が良い写真が撮れる。
出来れば一眼レフ、知り合いのカメラ好きに頼んで撮ってもらうなり貸してもらうなりしよう。よっぽどのことがなければカメラ好きの知り合いの一人や二人はいるだろう。

・ちょっとだけ引き気味で撮ろう
ホームページで使う写真は他の写真と若干性質が異なっていて、普通の写真ならば写真の枠内で良いものが撮れていれば問題ないのだが、
ホームページで使う写真はちょっと横長のものが必要だったりとかするときがある。
ということで対象物で画面を一杯にせずにちょっと回りの背景も写しておくと後からなにかと役に立つのだ。

・「写真　構図」でググろう　参考にする構図を探そう
写真の構図や技法はやり始めたらキリがないが、何か指針というか目標みたいなのがないと空中分解しやすい。
よっぽど自分のセンスに自身があるか、その辺の話に詳しいか以外の場合は、なにかお手本があると非常にベター。
「写真　構図」でググってそれっぽい構図で撮ってみるとか、イメージの近いバンドの写真と同じ構図で写真を撮ってみるとか。

・編集は最低限に
写真を撮ったあとに、ホームページに合わせて画像のサイズを小さくしたりとか色を調節したりとか色々あると思うが、編集はマジで最低限にしておいたほうが良い。
これも単純な話なんだが、編集すればするほど画質が落ちるからだ。（音楽でエフェクターを掛ければ掛けるほど音が劣化していくのと同じイメージ）
どっちにせよ画像の編集も素人なわけだし、どうしても必要なとき以外は触らないほうがベター。

と言った具合だろうか。
別に特別なことは一つもないんだが、逆にこれに反することをしてしまうと結構すぐにダメな写真になりがちである。

---

 

あと覆面バンドというか、顔出ししてないバンドの場合もあるだろう。
今回のテーマのSkinny loveさんも顔出ししていない覆面バンドとのこと（何故かホームページは写真が載っているが・・・）
その辺の戦略は一長一短あるのでここでは触れないが、覆面バンドというもの、顔をださなけりゃ良いというものでもないのだ。

ホームページやネット上において覆面バンドのかたは特に意識してバンドの「ビジュアルイメージ」を作っていく必要がある。
どういうことかというと、例えばツイッターなんかがわかりやすいだろう。要は”アイコン画像”である。「アイコン画像が変わってたら誰かわからなくなった」みたいな経験はあるだろうか。要はネット上ではあれを”顔”の代わりになるものとして認識しているのである。だから自分達の顔を出さない覆面バンドこそ、イメージが薄くなりがちであるので、例えばイラストを描いてもらうとかロゴを凝ってみるとか色々な方法があるが、積極的にビジュアルのイメージを作り、それを前面に押し出していく必要があるのだ。

 

配色を考えよう

散々言われていることなのでご存知かもしれないが、配色を決めるときに落ち着きやすい配分というものがある。

ベースカラー:メインカラー:アクセントカラー を　70:25:5　に別けるというものである。

それぞれ
ベースカラー：背景とか文章とかが乗る部分。基本的に白とか白に近い薄いグレー、後は赤み掛かった薄いグレーとか緑掛かった薄いグレー、青っぽい薄いグレーとかそういう系の色、または黒にする場合がある。
だが、黒背景は簡単そうに見えて意外に難しいので、初心者は白系の色を使うと失敗しにくいぞ。

メインカラー：イメージを決定付ける色。例えばバンドのイメージカラーとか。そういうのを積極的に使おう

アクセントカラー：メインカラーの補色（「赤に対して青緑」「紫に対して黄緑」「黄色に対して青紫」要は反対の色）を意識して持ってこよう。

 

もちろんこれに沿う必要はないが、自分のセンスに自身がなかったり無難に丸く納めたいなら非常に役に立つと思う。
あと海外のサイトになってしまうが、Colour loversというサイトで配色パターンがめっちゃ紹介してある。
この中から気に入ったものを使えば割と問題ないカラーリングに収まりやすいぞ。

 

文字サイズは３パターンに留めよう

画像の中の文字とか、ロゴの文字とかそういうのを除いた”普通の文字”のサイズは大体３パターンくらいにしておくとまとまりやすい。
このサイトも基本は３パターン程度で出来ていて

大　大きい文字　見出しに使う

中　中くらいの文字　記事のタイトル（トップページやサイドバー）の中のサイズ

小　小さい文字サイズ　記事の平文は基本このサイズ

大体こんな具合である。
文字サイズがチグハグだと読みにくいしデザイン的にもよろしくない。
なんとなく太字とか色つけてみたりとかやってみたくなる気持ちもわかるが、シンプルにしておいたほうが無難だと思うぞ・・・

 

いかがだっただろうか

とりあえず上に書いたルールさえ守れば大よそヤバイホームページになることはないだろう。

最後にここまで書いといてアレだが一応Skinny loveの音源を紹介しておこう。

Skinny love - Anthem, Beer, and Beer-hall

90～2000年代あたりの邦楽ロックのちょっとユルく優しい世界観の楽曲。
正直に言うと演奏や楽曲もまだまだ発展途上にある（ギターソロのピッチが本気で気になる）といった具合だが、メロディ感にセンスを感じる。サビのシンガロングが妙に耳に残るというか。
持ち前のポップセンスが今後どんな方向に変化するか楽しみなバンドである。

ということで今回はこの辺りで！
ではまた！