NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2018.10.29

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

づや

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

今みなさんがご覧になってるこの記事って、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を変えている感じです。

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

おまけ

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

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