ずぼらでもできた！AI伴走おしゃれなダッシュボード構築｜ Claude | GitHub | 生成AI | やり方 | 初心者 | 解決方法 | 非エンジニア | 失敗談 | 試行錯誤 | 達成感 | カスタマイズ
※最終更新日 2026・9・4
💀素人のつまづきポイントその６を追記しました。
有料部分に目次を追加しました。
こんにちは。
先日ゲーム作ってみた記事を書いてから放置していた
GitHubに久しぶりにログインした
考える赤柴です。
GitHub？ 今度は何を作り始めたんだ、赤柴！
新作のゲームか！？
それはですね…
こちら！！
✨️KITAcore式ダッシュボード作ってみた✨️
📌実は今回、初めて有料記事を書いてみました。
前半の無料部分ではなんとか無事に出来上がったダッシュボードを、
後半の有料部分では
コードもGitHubもほとんど素人の私が実際につまずいたポイントと、その解決方法をまとめています✨️✨️
KITAcoreさんの記事を読んで『自分にも実装できるかな？』と不安に思っている方の参考になればうれしいです。
なお、この記事にはKITAcoreさんの有料記事のコードや内容そのものは掲載していません。
実装する場合は、先にKITAcoreさんの記事をご購入くださいね！
初めての有料記事なので「公開記念価格」として10部限定300円。
その後は500円とさせていただきます。
✨️非エンジニアの赤柴でも、かっこいいダッシュボードできました✨️
KITAcoreさんの用意してくれた元々のデザインは
スタイリッシュで、めちゃくちゃかっこいいダッシュボード✨️
黒字にネオンカラーが映えるし、フォントも
ちょっと手塚治虫感がありますよね。
（数字は赤柴のです。スクショです）
👇️それを赤柴ふうに改造させていただいたのがこちら！
画像をクリックすると、実際のダッシュボードに飛びます🦘
記事のスキ数によって柴犬が育っていくギミックは
オリジナルで付け加えたもの🤭
ぜひ見てみてね！！
📌更新履歴📌 【最終更新日2026/09/04】
・素人のつまづきポイントその６を追記
・有料部分に目次を設定
・ビュー数とフォロワー数の推移のグラフに
記事投稿日（縦の点線）が反映されるよう変更
・URLの頭に小さなアイコン（ファビコン）が表示されるよう変更
・noteの記事に埋め込みリンクを貼ったときに画像が表示されるよう変更
・スマホで表示するとレイアウトが崩れる問題を修正
・赤柴のダッシュボード全コードを有料部分に加筆
ダッシュボードの数字って眺めてる？
赤柴は、ごくたまーに開いてみて
「うん、ちょっと増えたかな」くらいを確認して
そのまま閉じる。以上。
でした🤣
noteを続けていくには数字の管理・分析も必要だと思い立ち
手動でダッシュボードを開いて数字をコピペして貼り付けて…
という方法を試したものの
見事に三日坊主🤣🤣
めんどくさいが勝ってしまいました。
数字がどのくらい増えて、それがどういうことなのかも
ぱっと見ただけでは、あまり実感がありませんしね。
そもそもnoteのダッシュボードって
「もっと見る」を次々と押さないと全部見られないじゃないですか。
それだけでもうハードルが高いです。
そうなんです。
実はかなり、ずぼらなんです、赤柴。
まあね。数字を見なくてもnoteは書けるしね
♪～(´ε｀ )
と こ ろ が。
面白いもの見つけちゃったんです。
それがKITAcoreさんの2つの記事でした
■KITAcoreさんの記事 その１
よく見てみて！
自動で って書いてあります。
自動…なんて魅力的…🥹✨️✨️
さ ら に
■KITAcoreさんの記事 その２
こちらは、記事１を実装した前提で
ダッシュボードをグレードアップする方法
で、実装しました！
🔶用意したもの
●KITAcoreさんの記事その１（2026.8.25現在￥980）
●KITAcoreさんの記事その２（無料）
●GitHubのアカウント（無料）
●Claude（無料）
●将来のめんどくささを上回る好奇心（プライスレス）
●ちょっと集中する時間
●スクショを撮る方法（Windows＋Shift＋S）
スクショは、つまづいた所をClaudeに見てもらうのに
よく使います👆️
🔶赤柴の現在地
●GitHubはちょっとだけ触ったことがある
●Pythonとかひとつも分からない
●全然理系じゃない（人文学部卒）
●好奇心だけが取り柄😏✨️✨️
●コードのことならClaudeに聞こうと思ってる
です。
さてこの先は、興味のない方には不要かもしれません。
まず冒頭に書いたとおり、
この記事を購入していただいても
KITAcoreさんの記事の中身（実際のコード）は出てきません。
つまりこの記事は￥980の記事の内容が安く試せる…
というものではありません。
ではこの記事は何が書いてあるのかといいますと
・GitHubの初歩の初歩。アカウントを作るところから
・リポジトリ（フォルダのようなもの）を作るところ。
・そして初心者がどこでつまづいたか。
・どうやって解決したか。
・デフォルトのデザインをどう赤柴風にしたか。
なので、
✔ KITAcoreさんの記事は気になるけど、自分にできるのか心配な方
✔ 非エンジニア、非ITの人である普通スキルの赤柴が
つまづきながらも完成させたことに勇気を得たい方
✔ 非エンジニアはこんなところでつまづくのか…！と
びっくりしたい方
✔ 何かわからないけど赤柴を応援してやるかという方
ぜひ読んでいただきたいです！！
この先に進むべきかどうか判断していただく
フローチャートをご用意しましたのでどうぞ😆🎶
あてはまるほうへ進んでくださいね。
無料部分はまだもう少し続きますよ～
🌸Aだった方…ぜひ続きをお読みください🎵
もしかしたらお役に立てるかも
🌸Bだった方…ぜひKITAcoreさんの記事を購入して試してみてください🎵
🌸Cだった方…無料部分を読んた後、ぜひスキを押してください🎵
では材料はそろいましたでしょうか。
まず赤柴がやったのは
１・KITAcoreさんの記事１の内容をコピペしてClaudeに投入
そして
「この記事に書いてあることを実装したいのですが
当方初心者なので、伴走しながら１ステップずつ教えてください」
とお願いします。
え？
それだけ？
それだけなんです。簡単でしょ。
ええ、赤柴も最初はそう思いました。（伏線）
下へ下へスクロールしなくてもいいように
１ステップに区切って教えてくれます
２・GitHubに新しいリポジトリを作る
まずGitHubにアカウントを作ります。
👉️GitHubの公式ホームページはこちらから
Googleアカウントで作れます🎵
新しいリポジトリを作成します
リポジトリ名はClaudeの言うとおりにしました。
３・設定はprivateにすること
プルダウンメニューが出るので「プライベート」を選択します
その後はKITAcoreさんの記事を読み込んだClaudeが
指示してくれるまま
新規ファイルを作り
編集画面にコードを貼り…数十分で完成しました。
センシティブなCookieの取得方法や管理方法も
Claudeがちゃんと教えてくれましたよ。
⚠️ここで大事なこと⚠️Cookieについて
📌Cookieって何？
ブラウザが「私はこういうCookieを持ってるログイン済みユーザーです」とサーバーに送っている情報で、これがログイン状態そのものを表しています。
⚠️実装作業中に取得したご自分のCookie情報（文字列）は
記事・スクリーンショット・AIとの会話画面などに
絶対に載せないでください⚠️
👇️Claudeにもこんなふうに念を押されました😅
このCookie、絶対に私(Claude)にも貼らないでください。 チャットのどこにも入力しないでください。次のステップでGitHubのSecretsに直接登録するので、私が見る必要は一切ありません。
有効期限は約90日です。3ヶ月後くらいに「急に動かなくなった」となったら、まずこのCookie取得をやり直すのを疑ってください。
順調、順調。
なーんだ、Claudeがいれば
案外簡単じゃん、と思った赤柴でしたが…？
では伏線の回収にまいりましょう。
ここから先は有料部分です。
ここから先は
¥ 300 （数量限定：残り 4 / 10）
この記事が参加している募集
応援ありがとうございます！いただいたチップは学びのために大切に使わせていただきます。
