【JS】投稿コンテンツが幅を取るのでオンラインゲーム風のアナウンス式にしたい

子曰はく

現在進行中できむらぼホームページ改修中なのですが、トップページのコンセプトとしては

トップページ=LP=ストーリー性=1コンテンツ1話解決⇒まとめ(選ばない理由ないね!)

です。

意味わからないと思いますが、基本的にはLPくらいの広告性があるトップページにして、マーケティング的なUI・EEATを組み込むということです。(うーん難しい)

基本的には、1コンテンツで1話完結、

例えば、ABOUTコンテンツに対して、ざっくり何を目指しているか、方針などがわかる。1話完結。です。

本と一緒で、[まえがき、1章2章…まとめ、あとがき]みたいなイメージです。1コンテンツ=1章

で、課題はその後。

どのように表現するのか。

これです。

基盤は整ってきたのですが、実はデザイン苦手な私なのでこれが一番難しい。

文章で表現するのは簡単なのですが、図解(デザイン)はお客様や見てくださっている方に伝わりやすい一方でやはり技術力が必要なんですよね。というのも表現方法がたくさんある上に、そこにまたスクロール的なUIみたいな要素が入ってくるのでこれがまた難しい。

スクロールって、ページ離脱に繋がる要因になるので、いかに簡略化や目を惹きつける表現にできるかが勝負なんですよ。

ちなみに最近思うのが、関連記事や新着ニュースなどの投稿表示の表現の仕方。

コンテンツに対する関連記事って実績的な部分(経験値やそれに対する知識量の証明)にも繋がってくるので、割りと必須なのです。

でも、見た目的に幅を取ってしまい、スクロール多くなってしまうという課題があるんですよね。

で、解決策考えたらやっぱりJSを勉強するという結論に至りました。

投稿をスライダー式にする、もしくはオンラインゲームのアナウンス風にするこれが最適解ですかね。

日々努力ですね~…

イメージでいうとこちら

昔死ぬほどハマっていたネトゲ メイプルストーリー:https://maplestory.nexon.co.jp/

丁度私がやりたい表現がありました(笑)

一番上のアナウンス風とスライダーですね。流石ゲームのUI/UXが凄いからホームページも余裕で見やすいです。

懐かしい画像群↓

新着情報とかをこういうスライダー形式にしたり、ゲーム内の拡声器(アナウンス)っぽくするのが憧れですね。

SWELLはスライダー実装しなくても最初からついてると比較的簡単なレベルなので、勉強するとしたら拡声器風の表現方法ですかね。あとは装飾。(CSS)

やり方解説してくださっているサイト見つけたので近いうちに実践してみます!

IB note様

【jQuery不使用】JavaScriptとCSSで作るニュースティッカー:

https://itblogger-note.blogspot.com/2022/07/news-ticker.html

やっぱりゲームの表現の仕方憧れありますよね(笑)

ちなみに、いろんな表現の仕方のプラグインサイトも見つけたので貼っときます。

Best jQuery様

https://www.bestjquery.com/demo/jquery-news-ticker/?utm_source=chatgpt.com

頑張ります!

この記事がイイネ!と思ったらぜひ👇から応援してください!

欲しいものリスト

アーカイブ

カテゴリー

よかったらシェアしてね!
  • URLをコピーしました!

頑張る個人事業・中小企業さまを応援しています!Web集客・デジタルの伴走支援サポートはきむらぼにお任せください♪

※現在、制作案件は休止中です。その他のご相談はお問い合わせよりお願いいたします。

公式line

木村 水癸のアバター 木村 水癸 きむらぼ代表

―― AI Marketing Creator / Webコンサルタント
京都南部・山城地域の伝統・歴史・文化が『伝わる』仕組みを設計。DX支援活動にも取り組む。
SEO・LLMO・E-E-A-T施策をはじめとした、Web戦略設計やコンテンツ設計が得意。戦略家。愛用AIはChatGPT/Codex・Claude。

【主な実績】
➤地域関連キーワードで、わずか2か月でGoogle検索1位・AI Overview掲載を実現。
➤リラクゼーションサロンのWeb制作・公式LINEを同時に構築し、1年間で友だち登録者数1,000人達成。
➤歯科医療現場にて公式LINEを構築し、初回予約導線や定期健診のお知らせを簡略化する。
➤地域イベントの広報戦略を設計し、目標300人から約1,200〜2,000人集客を達成。低コストで圧倒的な集客を実現。
➤リラクゼーションセラピストとして、新人指名ランキング全国9位/リピート率60%超/ドライヘッドスパ店舗指名数1位/顧客満足率100%達成。

【資格・所属】
ウェブ解析士/デジタル推進委員/日本茶セレクター/医薬品登録販売者/アロマセラピスト検定2級 等

[PR]京都プロモーション

PR 当サイトはアフィリエイト広告を利用しています。
目次