WIND ORCHESTRA “楽”　Webサイトリニューアル

■概要

2003年より運営していたWebサイトで使用していたレンタルサーバーの運営終了に伴い

別のサーバーへの移転を機に、リニューアル作業を行うこととなった。

【リニューアル前Webサイト　ファーストビュー】

全てHTMLのみで作成しており、一般の吹奏楽団体の公式Webサイトと言う観点から

シンプルなデザインにしていた。

また、サイト来訪者に少しでも楽しんでもらうことを目的として、

Topページの画像はJavascriptを使用し、本番などの際に撮影した画像を

ランダムで表示させていた。

■担当箇所：

　企画・ワイヤーフレーム・デザインカンプ・ロゴ作成・コーディング

■使用ソフト：　Excel・PhotoshopCC・IllustratorCC

■使用言語：　HTML・CSS

【制作期間】：　約1.5ヶ月

■コンセプト

　団の主な活動内容が千葉県内の小・中・高校生を指導しながら活動している

　ボランティアバンドであるが、実情として慢性的な団員不足に見舞われているため、

　見学希望などの問い合わせを増やし、最終的には団員の増加を目標として

　コンバージョンを定めた。

　また、Webサイト作成担当が不在となった場合に備えて、

　『知識がない人でも更新作業が行えること』を条件として作成を行った。

　（使用ソフト：Excel）

■ワイヤーフレーム・デザインカンプ作成

　Topページで団の概要や練習日程などを掲載し、どのような団体なのかをわかりやすく

　伝え、興味を持ってもらえるようなデザインにするよう心掛けた。

　なお、団の概要についてはデザインカンプ作成時に配置場所を変更した。

（使用ソフト：PhotoshopCC・IllustratorCC・Excel）

■ロゴ作成（ 作成年：2005年 ）

　団員が紙に手書きでデザインした『楽』の文字をデータ化し、それを基にして

　特徴的な『楽』の文字を見せる形で2005年にロゴを作成した。　

　後にイラストレーターで再度レイアウトし直すなどのリニューアル作業を行った。

（初回作成時使用ソフト：ウェブアートデザイナー　/　制作時間：約3時間）

（リニューアル年：2012年　/　リニューアル時使用ソフト：IllustratorCS2）

ロゴ画像

■コーディング作業

当初ファーストビューは画面幅一杯に配置する予定だったが、

サーバーの仕様上レスポンシブにする事ができなかったり、スマホ用のサイトとPC用

サイトで素材やデザインを分けることができなかったりなど、不自由な点が多かった。

結果、PCサイトについては横幅を1280pxに固定し、スマホ用サイトについては不要な

画像を非表示にするなどの対応を行った。

■その他

　団員募集のページは団の活動や練習についての詳細を掲載するなど、

　より詳細でわかりやすくするよう心掛けた。