fullpage.jsを使ってみた

fullpage.jsを使うことが必要になってしまい、なんとなく敬遠していたこのJSを利用してみることにしました。

結果的には、予備知識がないまま「何となくでもいけるっしょ」的なノリで使用したので、ちょっと痛い目にあいましたが、経験として使ってよかったなと心底思いました。年々億劫になっているので、試してみたいという気持ちを大事にしたいです。

fullpage.jsの導入で失敗したこと

まず1ページに、色々な要素を詰めすぎました。

写真数点に加え、原稿もそれなりの量を入れる必要がありました。

それらをみっちり入れてみたところ、画面サイズが変わると画面の下の方の文字や写真が切れてしまったり、逆に余裕をもたせたページでは、画面サイズの大きいディスプレイですと、左右がスカスカになってしまったりして、メディアクエリーで細々レイアウトを設定しても、どこかしっくりこないページが出来上がってしまいました。

最初の構成の段階で、fullpage.js向きのデザインになっていなかったんですね。fullpage.js自体は素晴らしいのですが、そこ考慮していなかった点が失敗でした。

熟知している方でしたら、ある程度フレキシブルな見た目も作れるのかと思いますが、ちょこっとした労力で以外に喜ばれるJS(モーダルウィンドウを出すとか)ではなく、こういったページ全体を制御するJSは普段からあまり触れる機会がないので、自分からJSのお作法に合わせに行く習慣が無かったのも良くなかったです。反省です。

使うシーンの一例として

このJSは、もちろんメディアクエリーを細かく切って制御するというよりも、パーセンテージで各文字や画像の大きさをざっくり制御する、感覚的な利用が良いのかなと思いました。少なくとも自身にはあってるのかなと。
入れる要素を厳選すれば、スマートフォンでもそれほどPCの場合と設定を変えなくとも、ミニマルでカッコイイ見映えのページとなりそうです。

シンプルで強いメッセージを、手早く高いクオリティに持っていけるjsがfullpage.jsなんでしょうね。