White Blank Book

クライアントワーク

制作背景

授業で自らクライアントを探し、交渉してサイトを作るという課題が提出されました。
私はWEBを学ぶ以前から自分のバンドページを制作したいという強い思いがあったので、自らをクラアントと想定し制作しました。 6ヶ月間の授業のなかで特に力を入れて頑張った作品です。デザインからコーディング、ロゴ制作、撮影にいたるまで全てをワンパッケージで制作しました。以下は当サイトが出来上がるまでの流れを順を追って説明しています。

作業内容・工程

POINT

  • ☆本をテーマにしたデザイン
  • ☆複数ページの作り込み
  • ☆レスポンシブに対応
  • ☆ロゴマークの制作
  • ☆画像・動画撮影

1.コンセプトの整理

まず最初に取り組んだことはバンドのコンセプトの整理です。

「White Blank Book」というバンドがどういう思考で活動し、なぜWEBサイトをつくる必要性があるのか整理しました。

そこからサイトのテーマを明確にするため 箇条書きでノートにバンドのイメージを並べ、メンバーとも相談しサイト上での表現方法を話し合った上で方向性の確認をしました。

この作業によりバンド名の「White Blank Book」は白紙の上で新たな物語を紡いでいきたいという意味が込められており ジャンル、表現スタイルに囚われない楽曲制作をモットーに時間のあるときにライブができればいいという自由なコンセプトのバンドであるということを改めて知ることができました。

WEBサイトの必要性はファンのためのプラットフォームの創設が大きな目的です。また、ライブハウスに対しブッキングの際にどういったバンドかを説明するための名刺になるからです。

では、それらを踏まえてこのバンドをWEBで紹介するにあたりどうすれば効果的に見せられるか考えました。

バンド名の「White Blank Book」という名前にバンドの理念が強くこめられているので、白紙の本をテーマにしたWEBサイトにすることでサイトを観てくれた方にはビジュアルと名前を認識してもらえるのではないかと仮定し制作することに決めました。

2.全体の構成

必要なページ数が決まったところで、ノートにサイトマップの下書きをしました。

それにより膨らみすぎたアイディアを俯瞰することができ必要な箇所とそうでない箇所の判別に成功し整理することができました。

そして、PhotoShopを使用しサイトマップを作りました。

メモ（サイトの方向性について）
☆サイトのターゲット層は音楽に関心の高い若年層（10代〜30代）を想定。人気アーティストのサイトを参考にデザインを考案。

●参考にしたアーティスト
King Gun、あいみょん、サカナクション

☆配色は本をテーマにしたサイトにするため白と黒が基調。
・メインカラー（#fff）
・サブカラー(#333)
・アクセントカラー（#red）

3.各ページのデザイン

POINT

・ワイヤーフレームを想定したデザインの設計
・幅と高さを計算したサイズの調整

4.デザインカンプ

Photo Shopを使用したデザインカンプの制作。下書きのサイズに合わせるためグリッドを細かく引き幅と高さを微調整。

5.ロゴマーク

Illustratorを使用したサイトのロゴ制作。

サイトのテーマでもある本をモチーフにしたデザインにしました。 バンド名(White Blank Book) の頭文字「W B B」を4冊の白い本で形成しています。

SNSのサムネイルやグッズのロゴとしても活用できるように、正円の中での表現方法を考えました。（ インスタグラム、ツイッター等の多くのSNSのサムネイル画像は正円で表現されているため）

また、正円のアナログ時計の時針、分針、秒針がバランスのよい位置に配置されたデザインを参考にWBBの文字配置しました。

時計のデザインを融合させたのは有限的な時間の表現をロゴに盛り込みたかったからです。

限られた時間のなかで創作（楽曲制作）したものを表現（LIVE）するという意味が込められています。

SNSロゴマークの採用

6.コーディング

POINT

＊コーディングに際して注力した点

  • 1. タブレット・スマホのレスポンシブ対応
  • 2.ページごとに適切なページタイトルを付ける
  • 3.img要素のalt属性を適切に設定
  • 4.景色と文字色の適切なコントラスト比の設定
  • 5.TOPページにキーワードを盛り込む
  • 6.css・jqueryを使用したアニメーションの設定
  • 7.Google Map、Google Formの使用

その他
「Google Fonts」を使用した文字の表現にこだわりました。本をテーマにしたサイトなので、ハンドライティング・スタイルの文字を選び実装しました。

文字スタイル：Rock Salt、Permanent Marker

7.素材収集(撮影)

8.サーバーにホスティング

POINT

＊サーバーにホスティングする上で気をつけたこと

  • 1.レンタルサーバーを使用
  • 2.独自ドメインの取得
  • 3.SSLを使用したhttps通信暗号化
  • 4.Google Serch Consoleを使用したアクセス数の分析

理由
授業ではスターサーバー、忍者、XFREEなどの無料サーバーを使用していましたが、独自ドメインの設定をすることができないのでレンタルサーバーを利用することにしました。（制作当初から独自ドメインの利用を考えていました。）

「ロリポップ」を選択した理由は、初心者でも利用しやすい点と価格、サポート面、スペックで有用的と認識したからです。プランはハイスピードプランを選びました。

そして、https通信にすることでサイトのセキュリティ対策を図り、フリーサーバーでは設定できなかった設定に挑戦。

Google Search Consoleを使用した理由はアクセス数と設定したキーワードが機能しているかを判断するためです。

バンドサイトなので汎用的なキーワードで検索に引っかかることは極めて難しいのですが、例えばライブ後のサイトアクセス数から、バンドに興味を持ってくれたお客さんの関心度を測れるのではないかと予想しています。

9.まとめ


サイト制作の経験がないなかで初めて作った作品です。授業で教わった内容を基になんとか作り上げることができました。０から生み出す苦悩を味わいながらも今できる最善の工夫とアイディアで制作に挑みました。

コーディングしていく段階でclass名の付け方には悩みました。 今回は独自のルールで命名してしまったことが反省点です。またプレビューしてみるとイメージとは違った部分が多く、何度もCSSを書き直しました。

そして一番苦労したのはメディアクエリを使用したブレイクポイントの設定です。positionで配置した要素がうまくレスポンシブせず、日夜頭を悩ませました。

他にも悩んだ点は無数にあります。試行と修正を繰り返していくなかで自分の弱点を見つけることができ勉強になりました。

『こだわり』
コンテンツの中身をオリジナ素材で表現しました。極力無料の素材を使用せず、イラストレータでロゴを制作し、画像、動画も機材をレンタルして自分で撮り編集しました。 ワンパッケージの作品になるようにこだわりました。
大変でしたがやりがいを持って制作できたことが何よりも素晴らしい経験でした。

サイトへ