イケメンギタリスト“筒井 朋哉”のホームページ制作した件。


Sponsored Link

なんやかんやでAARTでのホームページ制作サービス“AART Design lab.”のお仕事が増えてきています!(ありがとうございます)
そんななかで今回ギタリストである“筒井 朋哉”さんのホームページ制作を行ったので制作の流れや詳細、そして筒井さんのご紹介などについて!

穏やかな性格なのにイケメンなので…ちょっとジェラシー。。


デザインについて

今回のホームページ制作はクライアントである筒井さん自身がレイアウトデザインをしたものを基礎に作っていきました。

依頼時いただいたデザインラフ案はこちら。

トップページ
HOME

バイオグラフィページ
BIO

ディスコグラフィページ
DISCOGRAPHY

イラストの上手下手は別として(笑)、大まかにでもクライアント側の意図するものが伝わればホームページ制作をするこちらとしても非常に助かります!
このレイアウトを基礎に、ホームーページを組んでいきます!

今回ももちろん“Wordpress”

音楽系のホームページを制作するのには特にWordpressが最適と考えています。
個人的にですがバンドやアーティストがア●ブロを使うメリットをあまり見いだせていないってのもありますが。

使用テーマは“Underscores”

Underscores
今回はレイアウトデザインを細かく指定していただいたので、既存のテーマを使うよりはブランクテーマから組んでいった方がスムーズと考えこの“Underscores”を選びました。
このテーマの良いところはテーマネームを自分で決定したうえでインストールできるという点ですね!
Wordpressのオリジナルテーマを造る際には重宝しています!

Underscores

もっと見る→

カスタマイズ詳細

基本のテーマにどうカスタマイズしたのか。

ウィジェットの追加

こちらでわかりやすくするためであったり、コンテンツ内容を変更しやすいという理由からもよくウィジェットの追加を行います。

メニューレイアウトのカスタマイズ

いただいたレイアウトデザインにもメニューが円形だったので、こちらは画像を使わずCSSで円形表示してあります!

Instagramの連携

クライアントの筒井さん側でもInstagramで撮影した写真を自動でサイトに表示できるように連携をしました!
これには『Instagram Feed』というプラグインを使用しています。
便利!

Instagram Feed

スクロールバー機能付きのボックス追加

ギタリストとしてのキャリアが長い方なので、過去に関わった音源を紹介する際に必要な機能でした。
これはhtmlとcssで比較的簡単に組めるので便利です!

各ページ構築の詳細

では、各ページの詳細について!

トップページ

tomoya-website1

カルーセルスライダーは素敵なプラグイン『Shortcode Ultimate』を使用しました!
またSNSボタンとメニューボタンはウィジェットで管理できるようにしてあります!
公開前日の日に急きょコンテンツメニューの配置換えのリクエストがきましたが、ウィジェット管理なのでそこはスムーズに対応できました!

Biography/バイオグラフィページ

tomoya-website2

今回実は納期までの日程がキツキツだったのでレイアウトはphpで組まなかったんですね(苦手だから。)
なのでこの2カラムはhtmlで組んでいます!
ま、最初からレイアウト決まってるんならphpでテンプレート化して汎用性高くする必要ないので楽に組めましたね!

ちなみに筒井さんは大の鳥好きでご自宅にインコをかなりの数飼っているそうです!

Sponsored Link

Dischography/ディスコグラフィページ

tomoya-website3

前述したとおり、スクロールバー機能付きのボックスを追加してのページです。
実は写真とテキストの回り込みや表示方法についていろいろと工夫をしたのです(笑)

ちなみに声優の“花澤香菜”さんのアルバムでレコーディングしたことをお聞きしたときはテンションあがりました!(笑)

25(初回生産限定盤)

SHOWS/ショーページ

tomoya-website4

このページは特に指定はなかったので簡潔に構築させていただきました!
本当はカレンダー表示からのチケット販売システムや、オンライン予約システムなどまで組めたら最高なんですが、そこまで作るとなると追加料金発生します(笑)

PHOTO/フォトページ

tomoya-website5

事前にいただいた写真をカルーセル表示。
その下に筒井さん側で追加できるよう『Instagram Feed』というプラグインを導入し、Instagramとの連携をしました!

GUITAR/ギターページ

tomoya-website6

筒井さん自身が所有するギターの写真をカルーセル表示しました!
クリックすればlightbox風の表示もしますのよー!

…しかしいいギターだ!!

BLOG/ブログページ

tomoya-website7

アンチア●ブロの僕としては、SEOやミュージシャンのブログでのマネタイズも視野に入れてWordpressでブログ執筆をするよう勧めています。
ま、こうなるとクライアントワークを意識したカスタマイズが必要なので、各クライアントに合わせた方法でやっていく方がよいのかなと思っています。
この部分は今後も勉強必要な部分なのー。

LINK/リンクページ

tomoya-website8

ま、特に変わった機能はなし。
ちゃっかり自分のAART-INFOをリンクしています!(笑)

簡単にですが、こんな感じでホームページ制作をさせていただきました!

まとめ

というわけで、AART Design lab.の宣伝+筒井さんのステマブログと化しましたが、ここからが大事なこと。

バンドやミュージシャンにとってホームページはたんなる宣伝のためではなくなってきました。
メジャーな大手のバンド・ミュージシャンでしたら、ブランディング目的でのオフィシャルホームページという点はわかりますが、インディーズシーンをメインに活動している場合はブランディングよりも『解析ツール』
としての扱いが重要だと思っています。

どの地域からのアクセスが多いのか、どのコンテンツ内容がヒットするのかなどの解析から、楽曲やグッズデザインのABテストまで、使い方によっては非常に戦略のためのツールになりうると思います。
ホームページを制作し、納品したらはいさようなら、ではなく、バンドやミュージシャンのホームページを制作し、管理運営、解析まですることで初めて意味をなすのかなと。
そう考えてるんですよ。

バンド・ミュージシャンのホームページ制作はAART Design lab.まで

ギタリスト 筒井 朋哉公式ホームページ

LIVE SCHEDULE

【日時】2015年7月19日(日)
【場所】渋谷Edge End
【タイトル】Cylindrical Marsh
【出演&Dj】筒井朋哉 (ex-Electric Glass Balloon、ex-TOBYAS) & 沼倉隆史 (tae)
【時間】Open/18:00 Start/19:00
【料金】¥2500 (1drink 付)
【予約】ticket@tomoya-tsutsui.com

Sponsored Link

シェアする

  • このエントリーをはてなブックマークに追加

フォローする