ホームページの閲覧はスマホからが多くなっている昨今、PCよりむしろスマホでの見せ方を工夫して成果アップを狙うのは運営者にとって必須のテクニック。アーティストのサイトをスマホに最適化させて、成果を上げている方にその工夫について話を伺いました。
今回は、Webデザイナーではないけれど、ご自身も音楽をやりながらサイトを作っていた経験を活かし、今や友人のアーティストのサイトも作るようになった久保山氏をインタビュー。サイトを作ることになった経緯や、スマホを意識したサイト作りへのこだわりについてご紹介していきます。
スマホからの試聴と購入を重視
久保山さんがスマホを意識したサイト作りのツールに選んだのは「BiNDup」です。
最初はご自身がサイト作りの仕事を頼まれて引き受けるようになるとは思っていなかったそうですが、今や友人のアーティスト「山口光貴｜OFFICIAL WEB SITE」のサイトとそのレーベル会社のサイトも作成していると言います。
スマホからもそのまま楽曲を試聴して購入できるなど、スマホからのアクセスが多いターゲット層に合わせてスマホ中心の見せ方にこだわり、ボタンの押しやすさや導線などを独自に工夫している点はプロのWebデザイナーと引けを取りません。
迷わせない親切な導線設計とデザインが好評
イベント告知のための情報集約にサイトが必要
どのような経緯でサイトを制作することになったのでしょうか？
久保山氏「アーティストの山口君とは友達で、家も近いので仲が良かったんです。もともと、コンサートやイベントの告知を複数のSNSで拡散していたそうですが、応援してくれているファンの方が必ずしも同じSNSを利用しているわけではないので、情報を１つに集約できるホームページが必要になり、制作を依頼されました。」
喜ばれたのは迷わせない操作性とデザイン性
利用者にはどんな声をもらいますか？
久保山氏「ファン層がスマホからのアクセスが圧倒的に多い世代だったため、スマホからの操作性にこだわりました。トップページを開いた後どうしたらいいか分からないのを避けるため、利用者が恐らくここを押すのではないか？と思う部分は「Push or Scroll」とテキストで入れるなど何かしら反応するように作りました。アーティストにもデザイン的な部分を気に入ってもらえたので良かったです。」
上手な拡散でサイトがコミュニティの場になる！
試聴エリアにSNSのシェアボタンを用意して拡散しやすく
サイトを持つことが目的達成につながりましたか？
久保山氏「利用者の皆様から、サイトで複数のSNSとブログが読めるのが便利という声をいただいています。サイトには楽曲の試聴エリアにSNSのシェアボタンを用意するなど、拡散しやすい作りを心がけました。それによって、サイトがファンの皆さんが集うコミュニティのような役割を持つようになりました。」
今は種蒔きの時期。今後はLIVE配信も視野に
サイト運用の最終的な目標は何ですか？
久保山氏「現在も楽曲の試聴から購入まで、スマホからも簡単に行えますが、まだまだ今は種蒔きの時期だと考えています。サイト内でのLIVE配信など他にもやりたいことがたくさんあり、現在計画中です。」
スクロール中も目に留まる、アニメーションを活用
スマホとPCでコンテンツを出し分け
スマホ対応として、具体的に何をしましたか？
久保山氏「SNSからの拡散は特に、ほとんどがスマホから見るだろうと予想していました。なので、PCサイトをレスポンシブ化してノータッチではなく、スマホ用にデザインを作り込むことは最初の段階で想定していました。
例えばサイトが最初に表示されるエリアはPCは背景動画、スマホは背景スライドショーと使い分けています。そしてスマホでは背景スライドショーの前にテクスチャーを敷く事でタイトルの視認性を確保。視認性だけでなくお洒落に仕上がるので気に入っています。」
スマホはビルボード背景にテクスチャを敷く事でタイトルの視認性を確保
久保山氏「そのほか、各見出し部分もスマホとPCサイトではデザインが変わるように構成しました。PC向けにサイト制作すると、文章をたくさん盛り込んでしまいがちなのですが、若い人や時間がない人は読まずにスクロールすることが多いと思います。できるだけ文章は少なくしつつ、見ている人の目に留まるようにアニメーションを取り入れ、変化を付けて、飽きさせない工夫を施しました。」
各見出し部分もスマホとPCサイトではデザインが変わる
実機での操作性の確認や空間の活用を意識
スマホの最適化で、特に気を付けたことは何ですか？
久保山氏「メニュー部分などのクリック可能な部分はBiNDupのCSS編集機能“Dress”で調整して、押しやすくしています。スマホでの見え方は、実機のAndroid（Xperia）と、iPhoneでしっかりチェックしながら調整しました。
試聴ファイルはカスタムタグを使って設置。これまでもスマホ対応に関してある程度の引き出しは持ち合わせていたので、特に苦労点はなかったです。」
BiNDupはプレビューが強化され、実機がなくてもさまざまなデバイスでの見え方をチェックできる
読み手目線でのこだわりがサイト制作の評価に繋がる
見やすさを一番に、情報量をコントロール
サイト作りに大切なことは何だと考えますか？
久保山氏「情報を見やすくするために、空間を上手く活用することだと思います。同じ情報量でも、詰め込まずに写真や文字のサイズや行間を調整して、スペースを上手く使うと全く違った見え方がします。BiNDにはスライドショー機能や画像編集機能などがもともと備わっていて、いろいろな表現ができるので、作り込んだ画像などでスペースを埋め込んでしまいがち。でも、そういうサイトは自分は楽しめても利用者からすると、何を伝えたいのか分からなくなってしまうので、利用者目線で作ることが大切だと思います。それにはある程度作ったら、時間をおくことが大事です。一度頭を休めてから朝起きると、また違ったアイデアが降りてくることがありますからね。特に頼まれてサイトを作る時は迷走しないように、休憩を取りながら作ることを心掛けています。」
同業種はもちろん、別業種のサイトなども見て研究
リサーチはどのように行いますか？
久保山氏「今回は国内外の有名な音楽系アーティストのサイトを参考にしつつ、ほかとの差別化を図るためにファッション、自動車、ゲーム、建設会社、弁護士事務所など、大手企業のサイトをひと通り閲覧して研究しました。海外の場合だと写真や動画をインパクトに使ったサイトが多くイメージを固める際の参考になりました。」
個人情報を預かるサイトならSSL化は必須
常時SSL化は最初から予定していましたか？
久保山氏「アーティストサイトに限らず、個人情報を預かるサイトはセキュリティ上SSL化が必須だと考えているので、手掛けるサイトはすべてSSL化を行っています。今回は以前取得したドメインを常時SSL化したのですが、迷いなくスムーズに行えました。」
BiNDupはサイトのセキュリティを高めるhttpsの常時SSL化に対応
サイト作りの基本は独学で習得
書籍やBiND CAMPで情報取集
サイト制作のノウハウはどこで覚えましたか？
久保山氏「BiNDの使用歴は長く、最初に購入したのは2008年の“BiND for WebLiFE* 2”でした。今では周りから依頼されてサイトを制作することがありますが、当時は自分がサイト制作の仕事を引き受けるとは思っていませんでした。サイト制作のノウハウは基本的に全て独学です。マニュアルや書籍、BiND CAMPなどから技術的な情報を得ています。10年以上ツールを使用してますが、これは知らなかったと思うような情報をBiND CAMPの記事から教わることも多々あります。メルマガも普段は読まないのですが、BiNDのノウハウに関するメールはひと通り読んでますよ。」
Dressに慣れれば短時間でハイクオリティなサイトを制作できる
BiNDを使ったサイト制作で、一番楽に感じるのはどの部分ですか？
久保山氏「デザイン編集機能の“Dress”は慣れが必要ですが、個人的には凄く便利な機能だと感じます。今ではBiND以外で制作されたサイトを閲覧した際に、余程複雑なサイトでない限りはBiNDで同じものを再現できるぐらいのスキルを持ち合わせています。BiNDはテンプレートが豊富ですが、どのテンプレートで作ったのか分からないぐらいDressを使って作り込んだりもします。BiNDは短時間でハイクオリティなサイト制作ができる点において、個人的にとても使いやすいツールだと思います。」
ありがとうございました
Webデザイナーでなくてもターゲットをしっかりと捉えて、スマホを使う人を想定したサイト作りを行っている久保山氏に話を伺いしました。レスポンシブWebのスマホ表示を自由にデザインしたいという人は、参考にしてみてください。
スマホの見せ方をカスタマイズできるBiNDup
BiNDupはスマホに合わせて自動で最適表示するレスポンシブWebに対応。スマホだけの見せ方に特化してカスタマイズできるのも強みです。
対策がこれからという方はお試しくださいね。
BiNDupのレスポンシブWebのテンプレートの一例
POINT
- 視聴エリアにSNSのシェアボタンを用意するなど、拡散しやすい作りに
- スマホの操作性は、しっかり実機でチェックして調整
- 読み手やファン目線でのこだわりがサイト制作の評価に繋がっている