- 概要
- 自分のアマチュアバンド「HONK」の公式サイト
※個人サイトなので、クライアントは自分含めたバンドメンバー
- 制作時期
- 2014/3～2014/5（2014/5/17公開）
- 担当
- 全て（企画、設計、撮影、デザイン、コーディング、etc）
- 使用ソフト
- Photoshop CS3、UnEditor、Cacoo（Webサービス）
■企画
- 【企画理由】
- HONKの活動が安定化してきたので、情報発信するサイトを設けたいとの思いから企画。
- 【コンセプト】
- 「ライブへの架け橋」
ライブへ来てくれる方（お客さんだけでなく演者、主催含め）が、HONKのことを知って、よりライブを楽しめるようになるためのサイトを目指す。
- 【サイトの目的】
-
- ・HONKのことを知ってもらう
- ・ライブをより盛り上げてもらうための情報を提供する
- 【ターゲット】
-
- ・HONKの身内
- ・ライブ主催者
- ・対バンさんとそのファン
■設計
- 【サイト設計】
- アクセスがPCとスマホ両方に分散することが予想されるため、レスポンシブデザインとする。
～W540px・・・スマホ用デザイン
W541～900px・・・タブレット用デザイン
W901px～・・・PC用デザイン
- 【ワイヤーフレーム】（TOPページ）
-
（PC版）
（SP・TB版）
■デザイン
- ・カラーはメインにバンドイメージカラーのオレンジを使用
- ・コンセプトを満たすために「ライブ情報」「プロフィール」をメインに配置
- ・レスポンシブでもPC版では少しでもリッチに見えるように、ボタンに背景画像を使用
- ・PSDは要素ごとにレイヤーをグループ分けして見やすく
- 【デザインPSD】
■コーディング
- ・レスポンシブなのでHTML5、CSS3を使用
- ・フッターと下層ページのヘッダーはインクルードファイルで共通化して管理しやすく
- ・モジュールCSSを用いてコーディング時間の短縮化
