【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をコピーしました!

木村 水癸のアバター 木村 水癸 「伝える」「癒す」をカタチにする人

#AI DigitalMarketing Creator
――AIに選ばれる人材へ 
\SEO×AI(LLMO)の知識を強化中!/

【SNS始めました!】
アイディアや日常的な事を発信しています!宜しければフォローで応援してもらえると嬉しいです\✡/

目次