リッチなHTMLを創るためのアイデア集

先日、とある会社さんから、その会社で運用しているサービスのデザイン変更を予定しているので相談に乗って欲しいと言われ、会議に参加させてもらいました。 その会社では10年以上同じジャンルで、毎月ペースでサービスサイトを公開し続けていて、サイト数が200を超えるボリュームです。 でも、HTML5 + CSS3以前のサイトは、Flashを使ってリッチWEBサイトを構築していたんですが、その会社のサービスは文字を読ませる事が主体のため、 これまであまり、アニメーションなどはやってこなかったとの事でした。 しかし、そうした静的Webサイトは、少し古臭く見られてしまったり、ユーザーの行動抑制につながらないため、もっと自社のホームページを今時の感じにしたいという意見を持っていたんですね。 以前にユゲタが、「あ〜すればいいのに」とその会社の人に色々と提案をしていたことから、実際にどうすればいいか現場のデザイナーやプランナーなどと一緒に、アイデアも含めた打ち合わせの場に参加させてもらいました。

潜んでいた本当の問題

ホームページをよく見せるためのアイデアは、思考すれば出てくるものではなく、いろいろなサイトを見たり、自分なりに想像をし続けていないと、なかなか元になるアイデアすら浮かびません。 でも、その会社での問題は、もっと別のところにありました。 それは、技術的な知見がほぼ無いという点でした。 テキストと画像を表示するHTMlレベルでこれまでサービスサイトを作ってきていて、CSS3でどれだけの事ができるのか？ Javascriptと組み合わせて、スクロールアニメーションをさせたり、イベント操作や視覚アクションなどをする知識幅がほぼない状態でした。 いわゆるレガシー思考というヤツで、新しい技術に目を向けないエンジニアなどが陥りやすい古臭い見た目が出来上がる環境でもあった会社でした。 というわけで、そういう事情を加味して、世の中のホームページ技術で、特別なことをしなくても、HTML+CSSだけでどれだけの事ができるのかという提案をしてあげるのが先行であることに気がついたので、 たくさんのデモ表示を用意することにしました。

動きの参考になるでもページ集

スクロール表現

風景が縦スクロールで映画のワンシーンのような効果が出ています。 https://codepen.io/isladjan/full/abdyPBw

See the Pen Parallax scroll animation by isladjan (@isladjan) on CodePen.

トップバナーからの導線に使えるスクロール効果です。 (ScrollIndicator) https://codepen.io/robooneus/full/noEKNr

See the Pen Scroll Arrow by Rob (@robooneus) on CodePen.

Scrollインしたタイミングでオブジェクトが効果的に動いて、演出ができるLPで使えるテクニックです。 https://codepen.io/syedrafeeq/full/QWKvYQ

See the Pen Animate on scroll with wow.js by Sayed Rafeeq (@syedrafeeq) on CodePen.

カルーセルを縦スクロールにした感じで、トップページ向きの効果です。 https://codepen.io/nxworld/full/OyRrGy

See the Pen Demo: CSS scroll down button by Naoya (@nxworld) on CodePen.

ScrollMagicライブラリを使ったデモ。 https://codepen.io/ncerminara/full/JodjPP

See the Pen ScrollMagic Demos - Animation Trigger by Nicholas Cerminara (@ncerminara) on CodePen.

ボタン表現

マウスオーバーで、効果的なホバーアニメーションが表現されています。 https://codepen.io/yuhomyan/full/OJMejWJ

See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen.

submitボタンがサイバー効果的な表現になっていて、なかなかの斬新さです。 https://codepen.io/soufiane-khalfaoui-hassani/full/LYpPWda

See the Pen Login Form with floating placeholder and light button by Soufiane Khalfaoui HaSsani (@soufiane-khalfaoui-hassani) on CodePen.

MagicCard : カードの怪しい表現

トランプやタロットなどの占いに使えそうなカード表現です。 マウス操作で、グラデーションが動いているのも、いい効果出てます。 https://codepen.io/gayane-gasparyan/full/jOmaBQK

See the Pen Magic Card by Gayane Gasparyan (@gayane-gasparyan) on CodePen.

背景グラデーションアニメ

背景のグラデーションが、ゆっくりと遷移している、心理効果的な印象を与えることができる表現です。 https://codepen.io/P1N2O/full/pyBNzX

See the Pen Pure CSS Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen.

スターウォーズ風

STARTをクリックすると、オープニングが始まります。（音も出ます） https://codepen.io/TimPietrusky/pen/AGrxGb

See the Pen Star Wars opening crawl from 1977 by Tim Pietrusky (@TimPietrusky) on CodePen.

すりガラス効果 : 隠し効果としても使える

写真や文章などの一部分を隠す時に使えるテクニックです。 モーダルウィンドウなどでも使うと効果的ですね。 https://codepen.io/ariona/full/xxdOaM

See the Pen Blurred Background CSS by Rian Ariona (@ariona) on CodePen.

キャッチフレーズ表示アニメーション

見出しなどを、目につきやすく見せるようにした効果です。（ただし演出が派手なので、向かないページもあります） https://codepen.io/Sonick/full/AwXJdM

See the Pen CSS3 Text Animation Effect by Nick Mkrtchyan (@Sonick) on CodePen.

wave : 心理描写等に使える

波を感じる見せ方で、ヘッダやフッタで使うと、なんとなく落ち着く効果が得られるかもしれません。 https://codepen.io/goodkatz/full/LYPGxQz

See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen.

タブ切り替え表現 : ちょっとした動きで楽しくなる

スライドセンテンスなどの場合に、画面外から入ってくる印象で、見る人の注目するモチベーションをアップさせる効果があります。 https://codepen.io/iamrubberducky/full/rMrXWW

See the Pen Vue2 page transitions with GSAP by Rubber Ducky (@iamrubberducky) on CodePen.

アルファチャンネルとスライダを組み合わせた表現

画像などの見せ方でシンプルにテキストを使って、印象深く見せることができる、Fontアルファチャンネル・スライダー https://codepen.io/mrspok407/full/bwLwvL

See the Pen Responsive Parallax Drag-slider With Transparent Letters by Ruslan Pivovarov (@mrspok407) on CodePen.

トップバナーのカルーセルに、ひと手間加えた印象深い効果。 https://codepen.io/mrspok407/full/NRxBWa

See the Pen Clean Slider With Curved Background by Ruslan Pivovarov (@mrspok407) on CodePen.

テキストアニメーション

シンプルに文字の変更がわかりやすい効果。 https://codepen.io/yoannhel/full/DMzjog

See the Pen Text animation by Yoann (@yoannhel) on CodePen.

メニューなどを効果的に見せやすくする表現。 https://codepen.io/yemon/full/pWoROm

See the Pen Simple CSS text animation by Nooray Yemon (@yemon) on CodePen.

文字アニメの効果的な見せ方。 https://codepen.io/RobinTreur/full/pyWLeB

See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen.

マウスオーバー表現（PC用）

マウスの動きでメニューが効果的に見せられる、真似したいサンプル。 https://codepen.io/noeldelgado/full/nweYMz

See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen.

モーダルアニメーション

メニューをクリックするといろいろなモーダルウィンドウ表現が見られます。 https://codepen.io/designcouch/full/obvKxm

See the Pen Modal Animations by Jesse Couch (@designcouch) on CodePen.

マテリアルデザイン・サンプル

フラットデザインの表示開始で効果的なアニメーションのサンプル https://codepen.io/zavoloklom/full/ZEmBGR

See the Pen Material Design (CSS-based) - Tiles by Sergey Kupletsky (@zavoloklom) on CodePen.

ナビゲーション・サンプル

ナビゲーションメニューのマウスオーバーアクションのサンプル https://codepen.io/EvyatarDa/full/waKXMd

See the Pen Navigation Animation by StyleShit (@EvyatarDa) on CodePen.

上下左右のボタンが効果的な見せ方になっているサンプル https://codepen.io/bradarnett/full/dNEbzB

See the Pen Panels by Brad Arnett (@bradarnett) on CodePen.

何とも印象深いヌルっとした表示のナビメニューサンプル。 https://codepen.io/abxlfazl/pen/VwKzaEm

See the Pen Animated Tab Bar by abxlfazl khxrshidi (@abxlfazl) on CodePen.

Rain

非常にリアルな雨の効果です。 https://codepen.io/arickle/full/XKjMZY

See the Pen CSS Rain Effect by Aaron Rickle (@arickle) on CodePen.

Loadingアニメーション

https://codepen.io/jtrancozo/full/mEoEVw

See the Pen #2 - Project Deadline - SVG animation with CSS3 by Jonathan Trancozo (@jtrancozo) on CodePen.

https://tobiasahlin.com/spinkit/ https://blog.myntinc.com/p/nowloading.html https://codepen.io/Manoz/full/kyWvQw https://projects.lukehaas.me/css-loaders/ https://codepen.io/nikhil8krishnan/full/rVoXJa

See the Pen Pure SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.

Neon

ネオンライトの様な表現で、いい感じが作れます。 https://codepen.io/FelixRilling/full/oNNLMb

See the Pen Neon Glow by Felix Rilling (@FelixRilling) on CodePen.

Particle Effect

文字に重ねたパーティクルアニメーション。 https://codepen.io/z-/full/bpxgWZ

See the Pen CSS Particle Effects by Zed Dash (@z-) on CodePen.

LPサンプル

見るのが楽しくなりそうなLPページが作れます。 https://codepen.io/jjperezaguinaga/full/DZxRmb

See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen.

ボタンアクション

クリックすると、かわいいパーティクルが表示されます。 https://codepen.io/nourabusoud/full/ypZzMM

See the Pen Bubbly Button by Nour Saud (@nourabusoud) on CodePen.

数値表現アニメーション

ダッシュボードなどでの数値表示で、効果的な見せ方です。 https://codepen.io/syedrafeeq/full/OJyLXw

See the Pen jQuery Number Counter by Sayed Rafeeq (@syedrafeeq) on CodePen.

効果アニメーション

吸い込まれるような宇宙空間の見せ方。 https://codepen.io/noahblon/pen/DpNRyR

See the Pen Hyperspace by Noah Blon (@noahblon) on CodePen.

マウス（タッチ）アクション

マウスの奇跡が、印象的に見える効果表現です。 https://codepen.io/soulwire/full/DdGRYG

See the Pen 30,000 Particles by Justin Windle (@soulwire) on CodePen.

テキストモーフィング

テキストの切り替えでモーフィングをやってみると、楽しく見えるのがわかるサンプル。 https://codepen.io/Valgo/full/PowZaNY

See the Pen Text Morph by Valgo (@Valgo) on CodePen.

あとがき

かなりのボリュームにお腹がいっぱいになったかと思います。 HTMLとCSSだけで、こんな事ができるのか！という気付きになるといいかと思って、サンプルをたくさん提示してみました。 中には、Javascriptやライブラリを使っているものはありますが、実際のWEBページで、動画などで表現するよりもよほど容量も軽く、手軽に導入できます。 個人的にこうしたアイデア提案など、やってて楽しかったので、もしアイデアブレストしてほしい会社さんや個人の方などいらっしゃいましたら、是非ブレストしましょう！