hiroyuki-h's Portfolio Website

ポートフォリオ:HONK official website

概要
自分のアマチュアバンド「HONK」の公式サイト
※個人サイトなので、クライアントは自分含めたバンドメンバー
制作時期
2014/3~2014/5(2014/5/17公開)
担当
全て(企画、設計、撮影、デザイン、コーディング、etc)
使用ソフト
Photoshop CS3、UnEditor、Cacoo(Webサービス)
URL
http://honk-web.com/

企画

【企画理由】
HONKの活動が安定化してきたので、情報発信するサイトを設けたいとの思いから企画。
【コンセプト】
「ライブへの架け橋」
ライブへ来てくれる方(お客さんだけでなく演者、主催含め)が、HONKのことを知って、よりライブを楽しめるようになるためのサイトを目指す。
【サイトの目的】
  • ・HONKのことを知ってもらう
  • ・ライブをより盛り上げてもらうための情報を提供する
【ターゲット】
  • ・HONKの身内
  • ・ライブ主催者
  • ・対バンさんとそのファン

設計

【サイト設計】
アクセスがPCとスマホ両方に分散することが予想されるため、レスポンシブデザインとする。
~W540px・・・スマホ用デザイン
W541~900px・・・タブレット用デザイン
W901px~・・・PC用デザイン
【ワイヤーフレーム】(TOPページ)

PC版ワイヤーフレーム

(PC版)

SP・TB版ワイヤーフレーム

(SP・TB版)

デザイン

  • ・カラーはメインにバンドイメージカラーのオレンジを使用
  • ・コンセプトを満たすために「ライブ情報」「プロフィール」をメインに配置
  • ・レスポンシブでもPC版では少しでもリッチに見えるように、ボタンに背景画像を使用
  • ・PSDは要素ごとにレイヤーをグループ分けして見やすく
【デザインPSD】

コーディング

  • ・レスポンシブなのでHTML5、CSS3を使用
  • ・フッターと下層ページのヘッダーはインクルードファイルで共通化して管理しやすく
  • ・モジュールCSSを用いてコーディング時間の短縮化

このサイトを見る

キャプチャ画像1

キャプチャ画像2

このページの先頭へ