YouTuber 公式サイト
だいきの家の前 — 公式サイト
YouTubeチャンネル「だいきの家の前」の公式サイトです。最新動画・チャンネル紹介・オリジナルグッズへの導線をまとめ、独自ドメインで公開しています。
Next.js / Cloudflare Workers / TypeScript
サイトを見るRequest
「なんとなく安っぽく見えるので直したい」
具体的にどこが悪いのかは決まっていない状態からのご相談でした。こうした場合、見た目を派手にしても解決しません。原因を分けて特定し、一つずつ直していきます。実際に手を入れたのは次の4点です。
01
書体を1つに統一した
- 課題
- 端末によって表示される書体が変わり、文字だけが浮いて見える状態でした。
- 対応
- 丸ゴシック（Zen Maru Gothic）に統一し、太さを4段階に整理。8〜9pxの極小文字は10〜11pxに引き上げました。
- なぜそうしたか
- 「安っぽい」と感じる原因は、多くの場合デザインの派手さではなく文字の扱いです。読めない文字があるだけで、サイト全体の印象が下がります。
02
色を使う場所を決めた
- 課題
- ブランドカラーの赤が、罫線や装飾を含めてあちこちに散っていました。
- 対応
- 赤を使うのは「ロゴ」「見出しの強調語」「主要なボタン」の3か所だけに限定。装飾の罫線は無彩色の線に置き換えました。
- なぜそうしたか
- 色は多く使うほど安く見えます。1色を絞って使うと、その色が出てきたときに意味が生まれ、押してほしいボタンが自然に目立ちます。
03
英語のラベルを日本語にした
- 課題
- 見出しの上に SHOP / VIDEOS / ABOUT といった英字ラベルが並んでいました。
- 対応
- 「オフィシャルグッズ」「最近の動画」「だいきについて」など、中身をそのまま表す日本語に置き換えました。
- なぜそうしたか
- 英字ラベルは見栄えのために置かれがちですが、読む人にとっては情報量がゼロです。日本語にするだけで、そのページで何ができるかが一目で伝わります。
04
言葉をサイトの目的に合わせた
- 課題
- 見出しの言葉と、サイトが果たす役割がずれていました。
- 対応
- トップを「使うたびに、応援になる。」、動画欄を「最近の挑戦」、締めを「次の挑戦を、見届ける。」に整理。チャンネルのテーマを4つに分け、それぞれ実際の再生リストにつなげました。
- なぜそうしたか
- サイトの言葉は、訪問者に何をしてほしいかで決まります。グッズを「買ってもらう」ではなく「応援になる」と言い換えると、押し売りにならずに行動につながります。
Behind the scenes
見た目以外に整えたこと
公開したあとに効いてくる部分です。表からは見えませんが、検索での見つかりやすさや安全性に関わります。
- ドメイン・配信
- 独自ドメインで公開。Cloudflare 上の中継サーバーを通して配信しています。
- セキュリティ
- セキュリティヘッダと security.txt を付与。常時 HTTPS で配信します。
- 検索対策
- title・説明文・canonical・OGP・構造化データ・サイトマップ・robots を整備。404ページも日本語で用意。
- スマートフォン
- 375px 幅での表示崩れ・文字の潰れがないところまで確認。
業種が違っても、見られ方の作り方は同じです
この事例はYouTuberの公式サイトですが、直した中身は書体・色・言葉の3つです。 士業や中小企業のサイトでも、「なんとなく信用できなさそう」に見える原因はほぼ同じところにあります。 派手にするのではなく、削って揃える。BANSOU SQUARE の制作はこの方針で進めます。
料金と進め方はホームページ制作のページに掲載しています。
Our services
自社で開発・運用しているサービス
ご依頼いただいた制作ではありませんが、自分たちで作って運用しているサービスです。設計から公開、公開後の改善までを自社で回しています。