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

ギター基礎講座サイト

Basic Guitar Course ・・・・・・・・・・・・・・・・

• Itsuki Shibata
• Keywords：design,guitar,site,
• ギター基礎講座サイト

概要

これは何？

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

背景と目的

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

コンセプト

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

成果物の仕様

・googleサイト

制作ツール

・MacBook Air

プロジェクトの期間

・2023.4.11 - 2023.07.11

まとめ

・今回の研究テーマでは、ギターの基礎をサイトを使って他者に伝えるということをしました。その中で、動画やイラスト、文章での説明を頑張りました。動画制作では、あまり長くなりすぎないように”短く伝えたいことをわかりやすく伝える”ということを意識して作ったりと工夫をしました。また、サイト全体に言えることですが、できるだけ挫折をさせないようにラフな形や親しみやすく思ってもらえるように作りました。特に、色合いや言葉遣いを気をつけて、今回のテーマの研究に臨みました。しかし、離れた状態でどこまで初心者の方の力になれるだろうと何度も考え構築するのが大変でした。
最後に、今回のテーマでは自分の好きなギターを何もわからない人へ向けて工夫をしたり、制作を練ったりして、1から自分で何かを始めるということは新鮮でとても楽しく、自分のこれからの研究テーマへのヒントを得ることができた。

調査

現状調査

• 著作権などには注意する
• 参考サイトや動画の内容に偏り過ぎず、自分の色を出す
  
  

先行事例

• https://guitar-hakase.com⇦ギター基礎講座サイト参考
  • 良い点
    ・幅広い種類を丁寧にかつわかりやすく記載されている
• https://youtu.be/xee3vZt31FA⇦ギター基礎講座動画参考
  • 良い点
    ・細かい動作の説明をしてくれている
    
    

技法・技術情報

• ギター技術
• 動画、サイト等の編集技術

プロジェクト管理

スケジュール

• リンク
  
  

ToDo

• リンク

2023.7.20

作業内容

• ７月１７日の作業内容で検討したサイト内で初心者の方からの質問にメールを使い、直接答えることを決定とした　その受け取り用メールを作成中　随時、公開予定

2023.7.17

作業内容

• サイト内のもっと知ろうでの質問事項を考えた
  • ギターの価格は？⇦（最終発表の際に受けた質問から参考）
  • アコギとエレキどちらが簡単？
  • エレキで人気の機種は？
  • おすすめのエレキギターは？
• もっと知ろうのページでは、自ら初心者の方が抱きそうな疑問・質問を考え、”質問”と”答え”という形で記載をしており、それならば、サイト内メールアドレスを記載して、サイトの利用者からの直接の質問に答えても良いという案を出し、検討中

2023.7.16

作業内容

• ギター基礎講座サイト更新
• サイトの利用者からの意見を取り入れての今後のブラッシュアップ構築
  • 予備知識が足りないことや説明の省略が多いことも挙げられた
    しかし、もう一度見てみたいという親しみやすさがあるとも意見を頂けた　

2023.7.14

作業内容

• ギター基礎講座サイト更新
  • 11日に行ったサイト内変更を全ページに適用（見出し、フォント等）
    変更前
    
    変更後
    
    ・変更前と変更後の画像を見比べてみると、見出しが見やすくなり
    　より区別化することができた　
    
    

2023.7.11

作業内容

• 最終発表
• ギター基礎講座サイト更新>-[[ ギター基礎講座サイト更新]]
  • 言葉の大きさや配列を整理
    変更前
    
    変更後
    
    ・変更前と変更後の画像を見比べてみると、見出しが見やすくなったことや文字が大きいところと小さいところや下線があることで文章の内容が理解しやすくなった
    
    

2023.7.4

作業内容

• 最終発表を終えてのブラッシュアップ
  • サイト内の各メニューページのヘッダー写真変更
    変更前
    
    変更後
    
    ・変更前のメニューバーと比べると左右の黒い枠がなくなり、
    　メニューバーの言葉が見やすくなった。全体的にスッキリとなり、
    　文字も大きくなり読みやすくなった（変更前画像の赤い下線）
  • サイト内の文章のフォントの大きさや配列の整理
  • メニューバーのまずはここでのピックのイラストを写真に変更
    変更前
    
    変更後
    
    ・下手なイラストとは違い、写真で実際の現物を載せた方がわかりやすく
    　情報が伝わりやすくなった
  • 随時、動画や文章等のサイト内更新
    
    

2023.6.27

作業内容

• 最終発表
• ギター基礎講座サイト更新
  • 言葉の大きさや配列を整理
    
    

2023.6.20

作業内容

• ギター基礎講座用完成参考動画作成
  • ギター基礎講座用完成参考動画（Cコードを弾く方法）
• ギター基礎講座サイト更新
  • サイト内の配色や言葉の整理
  • 14本の参考動画やイラストをサイト内に記載
  • サイトを利用した人の感想　※要約しています
    ・コードの押さえ方や特徴についてしっかり説明されていてよかった
    ・言葉がたくさん並びすぎて読みにくい
    ・ステップごとに練習出来るのが良い
• サイトトップページ作成・更新
  
  • サイトトップページ全写真
• 本サイトと他サイトの違い
  • 本サイト　
    ・本サイトは初心者に特化した作りになっているので
    不必要な点はできるだけ添削して作った
  • 他サイト
    ・初心者に教えるべきことだが、その内容が多すぎて
    ややこしく、やる気を失くしてしまう
• コード譜を載せる際のイラスト制作
  • コード指板図イラスト（Cコード）
    
  • 全コード指板図イラスト
• 学科サイト更新

2023.6.13

作業内容

• サイト更新
  • エレキギターとアコースティックギターでの線引き構築
• 動画撮影
• 学科サイト更新

2023.6.6

作業内容

• サイト更新
• 基礎講座用完成参考動画字コンテ
  • 教えるコードの題名→全体のアップ、指板のアップ→お手本→補足
• 中間発表

2023.5.30

作業内容

• ギター基礎講座用完成参考動画絵コンテ
  
• サイト更新
• 中間発表
• 学科サイト更新

2023.5.23

作業内容

• サイト更新
  • ステップ練習　テーマ決め
• 動画撮影
• 中間発表
• 学科サイト更新

2023.05.16

作業内容

• サイト更新
  
  

先行事例の調査

• https://knatsubrand81.com⇦ギター基礎講座サイト参考
  • 良い点
    ・色んな層が見やすい作りになっている
    
    
    
    

2023.05.09

作業内容

• サイト更新　
• ギター基礎講座試作動画洗出
• 良い点
  • 文字で説明されるので確認ができるため理解しやすい
  • 短い動画にまとめられているので気軽に見れる
• 悪い点
  • 文字での説明のみのためやることの進み具合がわからない
  • カメラの視点が少ない
  • 動画が単調で見ていて楽しくない・やる気が出ない
• 改善点
  • 声での説明も加える
  • 明るく親しみやすい動画作りをする
  • 細かい動作やポイントの説明もしっかりと増やす・表示する
  • カメラの視点を増やす

2023.05.02

作業内容

• ギター基礎講座サイト作成⇩
  • リンク
• ギター基礎講座試作動画作成
  
  
• サイトマップ作成
  
• ワイヤーフレーム作成
  • リンク

先行事例の調査

• https://youtu.be/xee3vZt31FA⇦ギター基礎講座動画参考
  • 良い点
    ・細かい動作の説明をしてくれている
    
    
    
    

2023.04.25

作業内容

• テーマ設定
  • ギター基礎講座サイト
    
    

先行事例の調査

• https://guitar-hakase.com⇦ギター基礎講座サイト参考
  • 良い点
    ・幅広い種類を丁寧にかつわかりやすく記載されている
  • 悪い点
    ・初心者にはまだ早い知識も記載されていたり、初心者には
    　情報が莫大すぎる
    
    
    
    

2023.04.18

作業内容

• テーマ設定
  • ギター基礎講座
  • ギター紹介
    
    

先行事例の調査

• https://youtu.be/bhrwrNytvCk⇦ギター基礎講座動画参考
  • 良い点
    ・細かい解説がなされている
    
    
    
    

2023.04.11

作業内容

• テーマ設定
  • ギター基礎講座
  • ギター紹介
    
    

先行事例の調査

• https://youtu.be/cAuOzU0-QOI⇦ギター基礎講座動画参考
  • 良い点
    ・手の動きやギターの画角が見やすい
    ・高画質
    ・コード譜が映像に添えてあり理解しやすい
  • 悪い点
    ・コード譜の読み方がわからないと読めない
• https://youtu.be/kS1HSczSGC8⇦ギター基礎講座動画参考
  • 良い点
    ・ギターを弾く側の目線での映像がある
  • 悪い点
    ・映像が少し乱れている気がする