原晴紀/情報デザイン演習IIA

Welcome to KSU Brass Band!

九州産業大学吹奏楽団部の公式HPを作ろう！

• 原 晴紀
• Keywords：吹奏楽, Webサイト, SNS, 宣伝
• Welcome to KSU Brass Band!
  
  
  
  

概要

これは何？

九州産業大学吹奏楽団部の活動を知ってもらうために
公式のHPを製作するプロジェクト

背景と目的

現状、InstagramやXなどはあるもののフォロワーがなかなか増えない状況である。そこでKSUブラスについての情報を総合的に閲覧でき、尚且つSNSにもリンクでとべるHPを作った方が良いのではないかという考えに至った。

コンセプト

• 大学生らしさ
  • 明るい
  • 元気
  • かっこいい
    
    

成果物の仕様

Webサイト

制作ツール

• STUDIO
• illustrator
• photoshop
  
  

プロジェクトの期間

2024.04.08 - 2024.07.15

プロジェクト管理

スケジュール

ToDo

• 他団体のサイトを多く閲覧する
• 練習やイベントの写真と動画を集める
• 大まかなレイアウトを考える
• 試作を作る
• 試作の改善
• 部活の記録や歴史の資料集めをする
• お知らせを更新していく

2024.07.15

2024.07.08

• 成果発表
  
  
  
  

2024.07.01

• レスポンシブデザイン対応途中
• Aboutページ作成途中
  • 写真集め
  • 昔の出来事調べ
    
    
    
    

2024.06.24

• ナビゲーションバーを英語で統一
• 要素にモーションをつけた
• Aboutページ作成途中
  
  
  
  

2024.06.10

指摘された問題点

• 説明文が小さくて読みにくい
  
  

高評価を得た点

• メインカラーを変更したことによって落ち着いた印象になった
• 情報がまとまっていて良い
  
  

その他

• ナビゲーションバーの統一感がない
  
  
  
  

2024.06.03

• サイト全体のメインカラーを変更
• レイアウトを調整
  • 色々なデバイスで確認しながら行う
    
    
    
    

2024.05.27

指摘された問題点

• フォントの統一感を出す
• 楽器や曲の紹介が欲しい
• レイアウトがバラけて見える
• 大会記録など部の記録を記載する
• 紹介文の改行が見にくい
  
  

好評価を得た点

• 依頼などを送れるお問い合わせがある点

その他

• 定期更新
• どのパートを募集しているか

2024.04.29

今回制作したプロトタイプ

サイトマップ

サイトのワイヤーフレーム

試作
サーバーの動作確認（プロトタイプサイト）

2024.04.22

アイデアの量産 ＞ 絞り込み

HPの公開方法

• 検討中
  • Google Site
  • STUDIO
    
    

HPの内容（素材ネタ）

• 練習の様子
• 部員紹介
• コンクール、その他コンテストの結果報告
• イベント出演の宣伝、報告(チラシや写真、できれば動画などの掲載)

HPのネーミング

• Welcome to KSU Brass Band!
  
  

HPの構成

• ホーム
  • お知らせ
  • KSUブラスについて
  • お問い合わせ
• SNSへのリンク
  • Instagram
  • X
    
    

HPの制作環境と方法

• デジタルラボ503のMacもしくは自身のMacBook
  • illustrator 簡単なイラストやロゴの制作と編集
  • photoshop 写真の加工
    
    
    
    

2024.04.15

現状調査｜テーマ内容の先行事例

• コンフォート・ウィンドアンサンブル
• 福岡工業大学吹奏楽部吹奏楽団
• 東京佼成ウインドオーケストラ
• 福大ブラス[福岡大学応援指導部吹奏楽団]
  
  

現状調査｜表現形式の先行事例

• PerfectDiary Japan
• ME:I OFFICIAL SITE

現状調査｜時間軸（対象の歴史的知見）

• 吹奏楽の歴史
  吹奏楽とは、「管楽器と打楽器のみの合奏、すなわち弦のないオーケストラである」と規定される。
  
  

現状調査｜空間軸（対象の地理的知見）

• 日本の吹奏楽発祥の地・妙香寺パイオニア吹奏楽団
  一般的にはルーツは古代エジプトにあり、ヨーロッパにおいてオスマン・トルコ時代のトルコ軍楽隊で発展した、などといわれていますが、いずれにせよ明確に「何年に誕生した」ということは分かりません。

現状調査｜技術

• 制作ツール（illustrator,photoshopなど）
• ホームページを自分で作成する方法14選！無料で試せるツールを紹介
• HTML の基本 - ウェブ開発を学ぶ - MDN Web Docs
  
  

解決すべき課題

• Webページの作り方
• 見やすさを意識したデザイン
• 内容
• 九州産業大学吹奏楽団部だけにある特徴

2024.04.08

プロジェクトのテーマ候補（10件以上）

• 九州産業大学吹奏楽団部の公式HP
• 吹奏楽曲をジャンルごとにまとめて紹介
• 自分の楽器（コントラバス）について紹介
• 大学周辺のラーメン屋の紹介
• メイクの手順紹介
• 使ってよかった化粧品紹介
• 一人暮らしお役立ち道具
• 好きなアーティストまとめ
• 推し動画作り方
• 長期休みにできること

参考リンク

• Webサイトとは? ホームページとの違いや種類を紹介
• 【メンズメイク】初心者でもできるやり方＆おすすめアイテムをプロが伝授！
• 推し動画の作り方は？おすすめの編集ソフト・アプリや制作手順を解説