#author("2025-12-12T12:42:32+09:00;2025-12-05T16:43:13+09:00","default:member","member") #author("2025-12-12T14:22:02+09:00;2025-12-05T16:43:13+09:00","default:member","member") *福岡で笑おう！ 福岡のお笑いライブの情報をまとめたWebメディアの制作 福岡のお笑いライブの情報をまとめたWebサイトの制作 #image(251113.jpg) -''木村円香'' -'''Keywords：comedy, Website''' -__[[木村円香/卒業研究/限定]]__ ~ #settableborder(none) **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 福岡のお笑いライブに日常的に足を運んでもらうための情報をまとめたWebサイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; //社会的な現状 福岡では日常的にお笑いライブが開催されている。私自身、よく足を運んでおりお笑いライブを見ている時は笑うことに集中するため日常の煩わしいことを忘れることができる。笑うことは健康効果をもたらすことから、悩みの多い学生や新社会人にお笑いライブを観てたくさん笑ってほしいと思った。しかし、福岡でお笑いライブを観に行く人は少ないことがアンケート調査でわかった。また、「いつどこでやっていて、誰が出ているかわからない」という理由で足を運んだことがない人がいることもわかった。そこで、授業終わりや仕事終わり、週末に遊びに行く場所の候補としてお笑いライブに行く選択をしてもらうきっかけを作りたいと考えこの研究を行うことにした。また、社会人芸人のインタビューを掲載することで、福岡で活動する芸人さんに対して親近感を持ってもらい大手の劇場だけでなく福岡のお笑いライブ全体に興味を持ってもらうことを目指していきたい。 ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; 博多の屋台のように、仕事や授業終わりにふらっと立ち寄れる場所としてお笑いライブを提案する。屋台のあたたかさや人との距離の近さをモチーフに、福岡らしい親しみを感じられるデザインにする。お笑いライブを「特別なイベント」ではなく「日常の中にある身近なもの」として伝える。 ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -Webサイト（HTML） #image(251205.png,60%) ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -Webサイト制作 --Figma --Visual Studio Code --Github --ChatGPT --Gemini -インタビュー --スマホ2台（撮影・録音） --三脚 --カメラ（写真撮影） --Googleドキュメント（文字起こし） --質問カード ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; 2025.04.11 - 2025.12.26 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 本研究では、「福岡で笑おう！」の名のとおり、福岡の屋台文化をモチーフにした温かみのあるWebサイトを制作することができた。 閲覧者からは、文章量の多さによる読みにくさが指摘されたため、今後は写真やピクトグラムを用いて可読性を向上させていきたい。また、「福岡で笑おう！カレンダー」をXで公開したところ、芸人さんやお笑いファンからポジティブな反応が得られた。 今後は、Webサイトとカレンダーとブログの継続的な更新を通じて、福岡のお笑い文化の活性化に寄与する媒体へと発展させていきたい。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; Instagramのフォロワーを中心にアンケート調査を行った （回答者の78.1%が大学生、18.4%が社会人） ~ #image(II_1.png) お笑いに興味のある人は63.2%と半数以上いる（1：はい・・・5：いいえ） ~ #image(II_2.png) 劇場に行ったことのない人は65.8% 福岡の劇場に行ったことのある人は17.8%にとどまっている ※ここでいう「劇場」とは吉本興業が運営する常設の劇場のことを指している。研究の目的としては吉本興業の劇場に限らずさまざまなライブに足を運んでもらうことであるが、日常的に通うとなると高い頻度でライブを行なっている常設の劇場に行くことが多くなるためよしもと福岡の劇場を中心に調査を行った。 ~ 以上の結果から、福岡の大学生、社会人はお笑いに対する関心度は高いが劇場に行ったことない人も多く存在すると言える。よって今回の研究では劇場に行ったことのない人に向けてアプローチしていきたい。 ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -お笑いライブについての記事 [[お笑いライブのすゝめ>https://kyabatalian.hatenablog.com/entry/2018/08/05/114350]] --人間味のある文章＝良いものだと伝えたい熱量を感じる --「すすめる理由」が始めにある＝タイトルと伝えたい情報がマッチしている [[お笑いライブの楽しみ方って？>https://blog.hatenablog.com/entry/owarai-live]] --東京でお笑いライブを見に行くのに必要な情報がまとまっている -Webサイトの表現について参考にしたいサイト [[ワラパー>https://wluck-park.com/]] --記事を開いても常に両サイドに枠があって世界観を保っている [[NIIリクルートサイト>https://www.nii.co.jp/2026recruit/index.html]] --動的でスタイリッシュ --YouTubeの再生画面が表示されるまで２段階構成で世界観を損なわない --カラフルだけど白背景で引き締まって見える ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; Webサイト -Visual Studio Codeの中のAIを使って繰り返しの指定ができる -メタタブにキーワードを盛り込んで「お笑い」以外について調べた人の検索結果にも出てくるようにする（福岡_イベント、福岡_観光 など） ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; [[Notion>https://www.notion.so/ac6dda48a2c74691b7288859925ece95?pvs=4]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -%%ワイヤーフレーム%% -%%インタビュー%% -インタビュー映像（編集・公開） - 劇場への道順動画（撮影・編集・公開） -%%概要集作成%% -卒展準備 ***ToDo Archive -サイトマップ -ロゴの制作 -[[プロトタイプ>https://sites.google.com/view/fukuokaowarai/%E3%83%9B%E3%83%BC%E3%83%A0]]の制作 //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2025.12.05 ***作業記録 -説明パネル作成 -ブログ投稿 ~ ~ **2025.11.28 ***作業記録 -version4を作成 -ナビゲーションの仕様変更 -「芸人の声」個別ページテンプレ作成 -「芸人の声」インタビュー文字情報流し込み -サブタイトル追加 -各劇場のマップ埋め込み ~ ~ **2025.11.21 ***作業記録 -インタビュー動画のOPアニメーション絵コンテ -のれん画像の調整 -「楽しみ方」文字情報整理 ~ ~ **2025.11.14 ***作業記録 -version3作成 -概要集修正 -見出し画像のサイズ調整 -画像のサイズ小さくする -「ホーム」のナビゲーション削除 ~ ~ **2025.11.07 ***作業記録 -道順動画撮影（ライブハウス秘密、甘棠館Show劇場） -コーディング -「楽しみ方」中身の相談、練り直し -レスポンシブ対応 -[[カレンダー>https://timetreeapp.com/public_calendars/fukuokadewaraou]]更新 ~ ~ **2025.10.31 ***作業記録 -道順動画撮影（ライブハウス秘密） -コーディング -「楽しみ方」中身練り直し -「芸人の声」フォーマット作成 -[[カレンダー>https://timetreeapp.com/public_calendars/fukuokadewaraou]]更新 ~ ~ **2025.10.24 ***作業記録 -作品概要集 -デザインカンプ練り直し -メインビジュアル変更 -道順動画撮影 -お笑いライブ初心者が求める情報を調査 --[[怖いけどお笑いライブを劇場で鑑賞してみたい人へ(from1年目の初心 者)>https://shatorai125.hatenablog.jp/entry/2023/01/01/155641]] ~ ~ **2025.10.17 ***作業記録 -屋台調査のまとめ -デザインカンプを作成 ~ ~ **2025.10.10 ***作業記録 -インタビュー動画制作の先行事例調査 --[[月刊芸人>https://youtu.be/unC7p3RaAeY?si=3RGGua9s1KYTNfpU]] --[[バスを待ちながら>https://youtu.be/QmenHlr9OeU?si=SuHlhOVe-kpjDozC]] --[[COCHOCOCHO>https://youtu.be/lPlU3qfJ1Pc?si=9GDh1woTAy1RyKrX]] -Webサイトに「屋台」の要素を盛り込むために実際に足を運んだ #image(251017.jpg,70%) ~ ~ **2025.10.03 ***作業記録 Webサイトの調査 -[[福岡博多屋台>https://yokanavi.com/features/258116]] -[[my屋台を持とう>https://yokanavi.com/yatai-myyatai/]] --手書きの文字であたたかみを感じる --写真のふちはガタガタ加工、切り抜きはなめらかに --写真の色味は暖色ぽい --湯気が吹き出しになってる --のれんの下なみなみ --グラデーション --ざらざら加工 --料理の写真が横一列でスライドしてる --丸い図形も手書きっぽく少しいびつ -[[屋台のイロハ>https://yokanavi.com/features/1]] -[[8番出口>https://exit8-movie.toho.co.jp/]] --開いた時のアニメーション --一画面に1セクション収まるように ~ ***ToDo -博多の屋台の調査 --写真の撮影 --のれんがかかっている --椅子が並んでいる --外から見た印象と中に入った時の印象の違い -ビジュアルに反映させられるアイデアを検討 --ex.カーソルを合わせるとのれんがめくれるモーション --色、フォントの選定 -ロゴの調整（色変更、1列を2列にしてみる など） -屋台イメージで制作するにあたってコンセプトの練り直し ~ ~ **2025.09.26 ***作業記録 -インタビュー記事のサムネデザイン調査 --[[ナゴレコ>https://nagoya-meshi.com/category/feature]] -ワイヤーフレーム練り直し -[[カレンダー>https://timetreeapp.com/public_calendars/fukuokadewaraou]]更新 ~ ~ **2025.09.19 ***作業記録 -ライブハウス秘密道順動画撮影 --スタビライザーの使い方を学び直してから再撮影する必要がある -インタビュー文字起こし -[[TimeTreeカレンダー>https://timetreeapp.com/public_calendars/fukuokadewaraou]]更新 #image(251003.png) ~ ~ **2025.07.11 ***作業記録 -概要集のブラッシュアップ -Googleカレンダーを一般公開[[（福岡で笑おう！Googleカレンダー）>https://calendar.google.com/calendar/u/0/embed?src=fukuokadewaraou@gmail.com&ctz=Asia/Tokyo]] -SNSでカレンダーのみ先行公開 --芸人さんやファンの方の協力で拡散してもらうことができた --「便利！」「こういうの助かる」などの意見をいただいた --アマチュアのライブに詳しい方に協力してもらい2人で更新していく #image(250718.png) ~ ***検討事項 -Googleカレンダーについて --数件ブックマークされていたが本当に見返してもらえるのか？ --スケジュールを更新した時にSNSでお知らせする必要があるかも --毎月？毎週？色分けした画像を添付してSNSで流す？ ~ ~ **2025.07.04 ***作業記録 -「地雷原突破」インタビュー -「福岡で笑おう！」のGoogleアカウント作成 -Googleカレンダー作成 #image(250711.png) ~ ***検討事項 -スケジュールの追加方法 --九地下のライブなら手入力でいけそう（いつまで続けられるかわからない） --よしもとの情報は膨大かつ、直前に出演者の変更があるため継続的な更新が難しい --最新情報は公式アカウントをチェック！でSNSに誘導する？ ~ ~ **2025.06.27 ***動的なWebサイトの調査 -[[LAUGHREES>https://www.felissimo.co.jp/laughrees/laughrees_lh.html?xid=p_nr_2112092_RELEASE_laughrees%2F%3Fsp%3D1]] --スクロールすると左右から交互にアイテムが現れる --背景固定でカードのような部分が動く --右下のボタンがサンパチマイク -[[TryMore>https://www.trymore-inc.jp/]] --1メニュー1ページで完結している -[[西予市>https://www.city.seiyo.ehime.jp/section/seiippai/]] --動きは少ないが、文字や写真の配置で勢いを感じるサイト ***アイデア -スクロールするたびに舞台が進んでいくイメージ -スポットライトが動く -お笑いライブの要素 --サンパチマイク --スポットライト --赤いどんちょう（幕みたいな） --拍手 --なんでやねんの手 --フリップ --机とパイプ椅子 --香盤表 ~ ***気づいたこと -「福岡で笑おう」で検索するとTikTokのアカウントがヒットする （Google ChromeとSafari） --TikTokは特に使用しない方向で考えていたがサイトに誘導するために活用してもいいかも ~ ~ **2025.06.20 ***相談記録 -「劇場に足を運んでもらう」ためにWebサイトはどんな雰囲気にするのか？ ~ ***目指すイメージ -お笑いライブの「ワクワク感」が伝わるもの -ポップなイメージ -スタイリッシュなイメージ -芸人さんに親近感を持ってもらう --「お笑いはテレビで見るもの」から「観に行きたい」にする -アマチュアお笑いのアングラなイメージを払拭 ~ ***イメージを実現させるためのアイデア調査 -参考：[[「寄り道してく？ブックオフ」>https://www.bookoff.co.jp/brand/special/]] --「福岡で笑おう！」をモーションロゴにして常に動くようにする --リンクを埋め込む枠のパーツを作る -必要なパーツ --PICKUPライブ：劇場みたいな枠 --お悩み解決動画：テレビみたいな枠 --道順動画：矢印みたいな枠 --サンパチマイク --メニューの文字をロゴっぽく -参考：[[「トリスde晩酌ナイト やす子1stワンマンライブ『カンハイ～』」>https://www.sendenkaigi.com/marketing/media/hansokukaigi/028985/]] --インタビュー記事のサムネの参考 --人が飛び出してるようなデザイン -参考：[[「OYOGE」>https://oyogetaiyaki.com/]] --キャッチコピーが最初に出てくると目を惹く --線のみのイラストが控えめに動く --「#〇〇〇〇」でテーマを伝える -参考：[[「NISSIN カップヌードル」>https://www.cupnoodle.jp/]] --見出しがフランク「今日はどれ食べる？」「気になる商品ある？」 --背景がアニメーションで常に動いている ~ ***コンセプトの練り直し -気づいたこと --色の数もう少し増やす？寒色系だと楽しさ伝わりにくい？ --緑色のロゴは「楽しさ」「ポップ」な印象与えにくい？ --漫才＝サンパチマイク/コント＝暗転明転 -Webサイトのイメージ --お笑いライブの「ライブ感」 --次なにが起きるかわからない「ワクワク感」 --お笑い芸人のかっこよさ＝スタイリッシュなイメージで伝える --見出しやタイトルは短くインパクトのあるものに（〇〇？/〇〇！） --Webサイトで「ワクワク感」を表現するにはどんな方法があるか --動きをつける --「ケラケラ」「ワハハ」笑っているような動き ~ 新コンセプト：福岡のお笑いライブに足を運んでみて感じた「ワクワク感」とお笑い芸人の「かっこよさ」を感じられるWebサイトを制作する。シンプルな色使いでスタイリッシュなイメージを表現。また、アニメーションをつけることで視覚的に見ていて楽しいものにする。 ~ ~ **2025.06.13 ***作業記録 -インタビュー --「田島将」 --「ケイソウ」 --「ミチエダ」インタビュー文字起こし -ワイヤーフレームの作成 --スマホver #image(wireframe250615.png) --PCver #image(wireframe250615_2.png) -ワイヤーフレームをチャットGPTに画像で送ってコードにする --グレーボックスのワイヤーフレームから少しデザインを加えた --ハンバーガーメニュー（画像から勝手に機能をつけてくれた） --スマホ版とPC版のレスポンシブ対応するコードを書いてもらった #image(250619.png) ***相談記録 -劇場への道順動画の制作について：福岡よしもと劇場の道順動画はある。[[（こちら）>https://youtu.be/rjsLblYDGEE?si=iNwlx0sYfxC_9FUp]]甘棠館Show劇場とライブハウス秘密は道順動画無さそう。 --公式が既存で出していても別の視点で作ってOK -ワイヤーフレーム作成の進捗報告 --サイトデザインの方向性今の感じでOK --フォントは[[Googleフォント>https://fonts.google.com/]]にあるものからピックアップ ~ ~ **2025.06.06 ***作業記録 -動画の掲載方法のメモ スクロールした画面上にすぐYouTubeのリンクが現れる形ではなく、Webサイトの世界観に馴染む表示から再生ボタンを押して初めてYouTubeの再生画面が出てくるようにしたい（技術的にどうしたら実現できるか相談する） [[こんなイメージ>https://www.nii.co.jp/2026recruit/it/enjoy.html]] -「ミチエダ」インタビュー文字起こし ~ ~ **2025.05.30 ***作業記録 -メインビジュアルのコンセプト --「福岡で笑おう！」というタイトルから笑っている様子が伝わるものにした --お笑いの効能や社会的役割は「健康」であると考えてSDGsの目標である「すべての人に健康と福祉を」のカラーを選定した（#4c9f38） |10|3|10|3|10|c |#image(mv_1.jpg)| |#image(mv_2.jpg)| |#image(mv_3.jpg)| #image(mv_4.jpg) -カラーとフォントの選定 #image(designguide.png) -ワイヤーフレームの試作 #image(wireframe250606.png,50%) ~ ~ **2025.05.23 ***作業記録 -サイトマップ修正 #image(sitemap_II.png,60%) -「ケイソウ」インタビューアポ取り -「田島さん」インタビューアポ取り ~ ~ **2025.05.16 ***作業記録 -「背景と目的」「コンセプト」練り直し -パッチワークパンダ写真選定 →イラスト依頼 -「PICK UP」更新 ~ ~ **2025.05.09 ***相談記録 -目的・調査・コンセプトに一貫性 -足を運んでもらうためにどのように楽しさを伝えるのかをコンセプトに盛り込む -プロトタイプからHTMLに作り替える時の変更点は？ --Googleサイトではできないレイアウトに配置する ex.インタビュー記事のページで話者の写真アイコンから吹き出しが出てチャットで会話をしているようなデザインにすることで芸人さん同士の掛け合いを視覚的に感じられるものにする ***作業記録 -ミチエダインタビュー -[[「パッチワークパンダ」インタビュー文字起こし>https://docs.google.com/document/d/1_NGCM_D6xudd1DEA8jl3WqXWZUInyVOlIzuxdWAt2uY/edit?usp=sharing]] ~ ~ **2025.05.02 ***相談記録 -前期と後期の成果物 --前期：ワイヤーフレーム（Figma） ワイヤーフレームの画像からチャットGPTを用いてコードを生成するなら、試してみて可能であることまでわかった状態で前期の最終発表で述べる -Webサイトをどのように拡散するか --SEO対策について調べてみる --メタタブにキーワードを盛り込んで「お笑い」以外について調べた人の検索結果にも出てくるようにする（ストレス解消、福岡_イベント、福岡_観光 など） ***作業記録 -[[スケジュール>https://www.notion.so/ac6dda48a2c74691b7288859925ece95?pvs=4]] ***調査 Webサイトでどのような表現ができるかの調査を行なった -[[ワラパー>https://wluck-park.com/]] --WordPressでテンプレートを作成して記事の更新をしている -[[QJ ウェブ>https://qjweb.jp/]] -[[ひとまち>https://hitomachi.iwamiginzan.jp/]] -[[FREERUN JOURNAL>https://freerunjournal.net/]] -[[NIIリクルートサイト>https://www.nii.co.jp/2026recruit/index.html]] ***サイトマップ #image(sitemap.png,60%) ~ ~ **2025.04.25 ***作業記録 -[[「パッチワークパンダ」インタビュー文字起こし>https://docs.google.com/document/d/1_NGCM_D6xudd1DEA8jl3WqXWZUInyVOlIzuxdWAt2uY/edit?usp=sharing]] -写真の選定 ~ ~ **2025.04.18 ***作業記録 -[[「ダナブルー」インタビュー文字起こし>https://docs.google.com/document/d/1DpVvwNwvKrjgZGf-ASDRa2jbYX65FokR1TyvL2trlCA/edit?usp=sharing]] -写真の選定 -質問内容練り直し ~ ~ **2025.04.11 ***相談記録 -HTMLはビジュアルの表現方法が自由自在だけど記事の更新が大変 --Visual Studio Codeの中のAIを使って繰り返しの指定ができる ~ ***作業記録 -[[「ダナブルー」インタビュー文字起こし>https://docs.google.com/document/d/1DpVvwNwvKrjgZGf-ASDRa2jbYX65FokR1TyvL2trlCA/edit?usp=sharing]] ~ ~ ~