リンクページを先進的な感じ(SPAっぽく)で表示する

2017年08月24日 :

Category :

注意事項など、少しのコンテンツを見せたいがために別ページを表示させることが無駄ではないかなと考えるようになりました。
では、ページ遷移せずにSPAっぽく別ページをモーダルで表示させたらどうなるんだろうと思い、実装したものが今回のサンプルです。

aタグを使用しているので、JavaScriptを有効にしていないユーザーに対しても通常のページ遷移を提供しています。

実際に使用する際には、キャッシュを利用するなどのブラッシュアップが必要ではありますが、PC版ユーザー、またはSP版Chromeユーザーに対しては割りと有効な方法ではないかなという感じがしました。下記リンクよりサンプルをご覧ください!

リンクページを先進的な感じ(SPAっぽく)で表示する

【SP】YouTube再生をモーダル以外で表示する提案

2017年07月06日 :

Category :

YouTubeをWebページに埋め込むということついては、モーダルで表示するということが標準になっている印象です。
個人的には、モーダルで表示することが最適な方法だとは思っていません。なぜなら、動画再生中は本来見たかったはずのWebページの文言を見る機会を奪ってしまうからです。

今回、その問題を解決したサンプルを実装してみましたので体験してみてください。
メディアサイトを想定しています。「観ながら見る」をお試しください。

YouTube埋め込みをモーダル以外で再生するサンプル

背景色に応じて文字色を変更できるプラグイン「BackgroundCheck.js」

2017年05月29日 :

Category :

画像の上に文字を配置したいが、色が被ってしまい文字を読むことがない!ということがあります。この問題を解決するためには、文字に枠を作ったり、画像の明度を変更するなど何らかの調整が発生していました。

これではCMSを組み込んだメディアサイトなどを運営するにはとても面倒です。

そんな悩みを解決してくれる便利なプラグイン「BackgroundCheck.js」が公開されています。文字の下の背景色を判定し、文字の色を変更してくれる素晴らしいプラグインです。

BackgroundCheck – DEMOページ

メディアサイトだけではなく、スライダーなどのページャーにも使えそうですね!

画面が真っ二つに割れてメニューを開く

2017年05月15日 :

Category :

左上のハンバーガーアイコンをタップすると、画面が2つに避けてメニューが出現するサンプルです。ページ全体のキャプチャを撮っているため、動作開始までに時間がかかってしまうなど難点が多く、実用には向いていないなぁというのが正直な感想です。

短いページや簡単なLP程度での使用ならば問題は多少改善されるかもしれません。
使用をご希望されるようでしたら、一度ご相談ください。

>> 記事詳細へ