pules designing

pules designing – データに強い奈良のWebサイト制作

Googleが新たな読み込み速度と売上の関係を示すツールを公開

昨日Googleがmobile Speed ScorecardとImpact Calculatorというツールを公開していました。

Speed Scorecardについて

Speed Scorecardは12ヶ国でスピードを表示できるツールです。
データはChromeのユーザエクスペリエンスレポートに基づいて提供されています。
関係ないですが、この辺り受け取ったデータの使い方がうまいですよね。。
3Gでは5秒以内、4Gだと3秒以内が望ましいようです。

Impact Calculatorについて

一方、Impact Calculatorは読み込み速度と売上の影響を測るツールです。
1秒ロード時間が増すごとにコンバージョンは20%以下落ちるそうで、こんなツールができたようです。
スピードは命だと言われていましたが、参考程度とはいえ見える化できるのは良いことですね。

使い方はどちらも簡単です。まずは使ってみましょう。
優先して測るべきページはトップページやランディングページです。

https://www.thinkwithgoogle.com/feature/mobile/

WordPressなら404ページをなくすのも一つの案

今日デザインを調査していたのですが、404ページの素晴らしいデザインを紹介している記事がありました。

14 Latest and Best 404 Error Page Designs for Webs/Mobile Apps

そもそも404ページはリンク切れしたページに表示されるわけです。
404ページにまでも素晴らしいデザインを作るからこのように取り上げられるわけですが、
404にならなければデザインを作る必要はありません。

WordPressであれば、404になったときにリダイレクトさせるプラグインがあります。
いろいろありますが、Custom 404 proというプラグインがおすすめです。

他のプラグインと比較して良いと感じた点は404エラーが発生したときに転送するページとステータスコードを選べるところです。
管理画面からインストールして設定するだけで良いので簡単ですよ。

Bootstrap/Angularを組み合わせたUIライブラリ「Sirius UI」

最近Reactのライセンスが問題になっており、これまでモダンなJSフレームワークも乱立していましたが、何となくReact以外にした方が良いのだろうという流れになっているように感じます。技術的には良いので残念ですが。

そんなわけで今日はBootstrapとAngularで作られているUIライブラリ「Sirius UI」を発見しました。

 

Sirius UI

デザイン的には割とマットなテイストで、基本的なものは揃っている印象です。

ボタン、ラベル、フォーム、アラート、ツールチップ、ドロップダウン、ナビゲーション、テーブル、モーダル、ページネーション、タブ、カルーセルなどなど。

レスポンシブデザインで使いどころによっては実装も早いでしょうし、便利ではないかと思います。

Sirius UIについてもっと知りたい方はこちら。

» Sirius UI

サイト内リンクをスムーズにスクロールさせるJQueryプラグイン「smooziee.js」

今日ご紹介するのはサイト内リンクをスムーズにスクロールさせる機能を実装するJQueryプラグインのsmooziee.jsです。

HTMLでidをつけておき、リンクで#(そのid)を指定することで、そのidの箇所にジャンプすることができますが、
急に移動して驚かせてしまうことがあります。

しかし、このプラグインを使うと、ちょうど良いスピードでそのidの箇所に移動してくれます。
ページが変わる場合にも対応されていて使い勝手が良いです。

早速実装してみました。(RESULTタブ)

RESULTタブにあるリンクをクリックするとささっとスクロールしましたか?
デフォルトの設定でも十分気持ち良い感じにスクロールしてくれます。

ぜひ使ってみてくださいね。

» smooziee.js

スクロールをサポートするJavaScript「Sly」

今日発見した技術情報は、一方向のスクロールをサポートしてくれるJavaScriptの「Sly」というものです。
水平方向、垂直方向いずれかを選んだらその方向へのスクロールをボタンなどでできるようにしてくれます。

試しに実装したのですが、JSFiddleだとsly.jsがhttpsで読み込めず、動かない問題があったので実装はお預けです。
デモはSlyのサイトで見れるのでチェックしてみてください。

実装自体はjQueryベースで簡単でしたよ。
方法はGithubにまとめられていました。

Slyのより詳しい使い方はこちら。
» Sly