柴田一輝/情報デザイン研究II

ギター基礎講座

ギターに触れてみよう！！・・・・・・・・・・・・・・・・

• Itsuki Shibata
• Keywords：guitar, site, teach,
• https://waka9393.github.io/guitar/

概要

これは何？

・これは、独学でギターを学んだ自分がギターを始める初心者の方に、このサイト1つで完璧にギターの知識を得られて、簡単に上達をすることを目指す初心者特化型のサイトです。

背景と目的

・僕は周りにギター経験者がいないことや習い事に行くにはギターを買う費用の影響で躊躇するといった理由でギターを独学で学び始めました。その際にやることが多かったり、細かい点やコツが分からなかったり、そもそもまず何からすればいいかもわからず、ネットや本、直接楽器屋さんに出向いてどうにか１から頑張って学んできました。その影響でギターを練習したり、知識を増やすのはとても大変でした。例えば、ギターを買う点の注意やギターのやり方、コツ　そして、ギターの管理方法や扱い方などです。その際にいつもサイトたった1つで初心者でも完璧にわかりやすくギターの知識を得られ、学ぶことができ、簡単に上達することのできる初心者特化型のサイトがあればいいなと思っていました。そこで、僕は今回の情報デザイン研究をきっかけに初心者やギターに少しでも興味があるのに、諦めや挫折をしてしまいギターから離れていく人に向けて、ギターを好きになってもらったり、簡単に上達してもらえるようなサイトを作る研究をすることにしました。

コンセプト

・なにもわからない初心者に特化してサイトを構築する
・独学でギターを学んだ自分視点から初心者の方に満足してもらう
・初心者に莫大な量の知識を教えるのではなく最低限必要な情報だけを記載し
　少しでもギターにハマってもらうそして、ネットに溢れるギターを教える動画
　やサイトとは違う自分の色を出す
・ラフなスタイルでのめりこめやすいサイトづくりを徹底する

成果物の仕様

・site (html)

制作ツール

・MacBook Air
・mii

プロジェクトの期間

・2023.9.20 - 2023..

まとめ

・今回は前期の続きであるギター基礎講座を制作しました。前期では、バラバラなあまりまとまっていない構成やGoogleサイトを使うなどとても反省点が多かったです。しかし、後期では、動画作りやイラスト制作、HTMLでのサイト制作と内容を変更し、見やすくまとまったサイト作りを行いました。まだ、未熟な点もありますが、少しは成長して制作できました。次の研究につなげていきたいです。

調査

現状調査

• 情報量が多いと初心者はわかりにくい
• 初心者に特化するためわかりやすく作成する
  
  

先行事例

• https://guitar-hakase.com/renshu/←多くの情報が綺麗にまとまっている
• http://www.3-guitar.com/guitar/index.html←イラストを使って可愛く紹介されている
  
  

技法・技術情報

• html,css
• 動画制作

プロジェクト管理

スケジュール

リンク

ToDo

• htmlでの制作を復習する
• 動画制作をする
• コード譜でのイラスト制作
• KJ法、サイトマップ

CONTENTS

• 2023.12.20
  • 作業内容
• 2023.12.13
  • 作業内容
• 2023.12.06
  • 作業内容
• 2023.11.29
  • 作業内容
• 2023.11.27
  • 作業内容
• 2023.11.25
  • 作業内容
• 2023.11.22
  • 作業内容
• 2023.11.15
  • 作業内容
• 2023.11.08
  • 作業内容
• 2023.11.01
  • 作業内容
• 2023.10.31
  • 作業内容
• 2023.10.25
  • 作業内容
• 2023.10.18
  • 作業内容
• 2023.10.11
  • 作業内容
  • 先行事例の調査
• 2023.10.04
  • テーマ案
  • 作業内容
• 2023.09.27
  • テーマ案出し
  • 調査
• 2023.09.20
  • テーマ案出し
  • 調査

2023.12.20

作業内容

• 最終発表に向けての準備
  • サイト内の配色を検討

2023.12.13

作業内容

• 最終発表に向けての準備
  • サイト各ページのメイン名変更

2023.12.06

作業内容

• メインビジュアル変更
  

2023.11.29

作業内容

• html,css編集
• E,F,Cコード解説動画完成
• 課題曲のお手本、解説、テンポ・歌声のみの動画完成

2023.11.27

作業内容

• 課題曲をボーカロイドを使い作詞作曲し終えた
  • 歌詞とコード進行
    ・僕の唄をどうか聴いてそして君の星になるよ
    ・E→E→F→C

2023.11.25

作業内容

• html,css編集
• 練習メニューの課題曲は著作権の影響も曖昧なため、ボーカロイドを使用してオリジナル曲を作る。初心者が弾きやすいコードやストロークパターンを意識して作曲をする。

2023.11.22

作業内容

• html,css編集
• 練習メニュー内の課題曲を既存のアーティストの曲にするか
  自作のオリジナル曲にするかを著作権の関係性から決める

2023.11.15

作業内容

• html,css編集
• 動画制作においての絵コンテ・字コンテ
  
  • タイトル→お手本→あらゆる角度からの映像

2023.11.08

作業内容

• 後期ギター基礎講座サイト　Cコードイラスト譜
  
• 前期ギター基礎講座サイト　Cコードイラスト譜
  
  • こだわった点
    ・抑える指を指定した
    ・色や正確さを上げた
• コード譜　イラスト制作
  • Cコードイラスト譜
  • Eコードイラスト譜
  • Fコードイラスト譜
• html,css編集
• 動画作り

2023.11.01

作業内容

• 前回のギター基礎講座（グーグルサイト）の改善点
  • メニューバー等のサイト構成がバラバラ
  • 言葉での説明が多い
  • サイトやフォントの雰囲気と教え方が合っていない
• 今回のギター基礎講座（html）で改善すること
  • 前回は、コード練習のみのため、課題曲を追加する
  • 動画の字幕を凝ったり、音声などの追加をする
  • サイトマップをきれいにまとめる
  • 自己紹介等を含める
  • 前回追加できなかったメール等での質問箱を記載して募集する

2023.10.31

作業内容

• 中間発表までの準備
  • サイト作り
• 前期でのギター基礎講座からのブラッシュアップ
  • 前期制作のグーグルサイトギター基礎講座
  • グーグルサイトでの制作からHTML等からの制作に変更
  • 前回は、コード練習のみのため、課題曲を追加する
• 今回も初心者の方に特化して情報多量になりすぎないことやサイト内や動画、イラストのまとめ方をスッキリとするサイト、動画、イラスト作りをしていく
  • メニューバー等のサイト構成がバラバラ
  • 言葉での説明が多い
  • 動画に力を入れる

2023.10.25

作業内容

• サイトマップ制作
  
• ギター基礎講座サイト試作
• サイト内に練習動画を貼った
  
  
  

2023.10.18

作業内容

• html,cssサイト作り
  • メニューバーの中にメニューを追加した
    
• サイトマップ制作
  
  

2023.10.11

作業内容

• KJ法
  
• 予定サイトマップ制作
• サイトマップ制作のための前サイトの洗い出し
  • メニュー数が微妙な多さ
  • 課題曲がないためギターの練習をした気にならない部分がある
  • 動画での説明にもう少し工夫がいる

先行事例の調査

• https://guitar-hakase.com/renshu/←多くの情報が綺麗にまとまっている
• http://www.3-guitar.com/guitar/index.html←イラストを使って可愛く紹介されている

2023.10.04

テーマ案

• ギター基礎講座
  
  

作業内容

• 前期でのギター基礎講座の洗い出し
  • 参考動画での音声での解説を追加してさらに理解しやすいようにする
  • サイト内の色の配列や文章等での説明を改変する
  • 前期では、コードの練習しかしなかったので、課題曲を取り入れる
• htmlでの試作のサイト制作
  
  

2023.09.27

テーマ案出し

• 図書館ウェブマップ
• うさぎ生活日記ブログ
  
  

調査

• うさぎ等のペットのブログはありふれている

2023.09.20

テーマ案出し

• ギター制作
• ピック制作
• うなぎ飯マップ
  
  

調査

• ギター制作には、本体や工具等で多額の金額になる
• ギター制作参考動画→https://youtu.be/WcI0w8ZJVsg?si=fCQxSAgnyehr-KDq