Webメディアなので「Webならではの見せ方」を考えてみた【1】

Webメディアなので「Webならではの見せ方」を考えてみた【1】

Kazuya Takato

Kazuya Takato

こんにちは、取締役のづやです。

今みなさんがご覧になってるこの記事って、Web上で動いてるじゃないですか。

「読みやすい文章」とか「SEOに強い」とか、記事を書く上で大事なことっていっぱいありますよね。

でもやっぱせっかくのWeb上なんで、「Webだからできる見せ方」ってあると思うんです。本質じゃないかもしれないですが、そういうのが好きなんで何個か考えて勝手にLIGブログに追加してみました。

ガクブルさせてみる

ブログ書いてると「ガグブル」とか「震える」とか使うことってよくありますね。たとえばこの記事にも。

これをこうしてみます。

thumbnail-inami緊張ガクブル。

 
ガグブル感が伝わりますね。

CSSのanimationで細かくtransformをいじってるだけです。これくらいはCSSですぐにできる、いい時代ですね。

常時揺れてると過度に表現しすぎて、文を読むのを阻害する気もするので、ホバーで動くようにしてみますか。

thumbnail-inami緊張ガクブル。

うん、これくらいならまあ分読むのを邪魔しなくていんじゃないかな。スマホ? タップしたら動くよ。

画像にブラーをかけてみる

やっぱこう、すぐ見られたくない画像とかあるじゃないですか、きっと。「大事なオチなのに、スクロールしすぎて先に目に入っちゃうじゃん」みたいなのを防いでみます。

たとえばこういう記事のギリギリな画像も、覚悟を持った上で見てもらうことが可能に。

PixiJSのFilterかけてるだけです。

こちらの記事のブラーフィルターを使用しています。一応data属性でブラーの度合いを変えられるようにする気遣いを見せてみましたが、あんまり使わない気がしてます。

例によってホバーで動くようにしてみました。スマホ? うん、タップしたら動くよ。

……え、CSS3のfilter: blurでいいじゃんって? それはそうだね、その通りだね。。。

でもほら、PixiJSでベースつくったらこうやって違うフィルターもすぐかけられるからさ。

役には立たないけど、楽しいじゃん、うん。

スクロールしたら自動で文字がでてくる

それっぽい記事を探したけど、役にたつシーンが全然思いつかなかったです。

まあ稀によくあるあれです。オチをゆっくりみせたいときとか?

最近めっきりさむくなりましたね。民間人が月に行く時代がやってまいりましたよ。そんな中私はせめて月とはいわないまでもですね、ミラーボールにのって水星に旅に出たいけど、ミラーボールをみたことないことに気づいたので、ミラーボールをみるところからはじめようと思った35歳の秋。

とこんな感じで表示させられます。

スクロールで発火するのはよくある実装です。本文内で使用する想定なので、対象class内のテキストを拾って、spanで囲むJavaScriptにしてます。1個1個transtionのdelayをずらして、順番にopacityを変えている感じです。

いかがでしょうか、まだ可能性はたくさんある気がしているので、思いついたら適当に記事にしていきたいと思っています。それではまた。

おまけ

使われることはないであろう、なんの役にも立たない表現です。

 
画像をクリックしてみてね。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

1983年生まれ。SIerとしてのキャリアをスタートし、JavaやC#を中心に多岐にわたる開発プロジェクトにエンジニアとして参加。その経験を活かし、LIGを創業。バックエンドおよびフロントエンドエンジニアとしての深い知識と経験をもとに、多様なプロジェクトに従事。2023年7月には社長室室長に就任にし、社内の体制やルールの最適化、AI技術の推進など、経営戦略の一翼を担っています。

このメンバーの記事をもっと読む