fullPage.jsを使ってページをつくりました

fullPage.jsを使ってページをつくりました

8月24日、弊社のサイトに新たなコンテンツを設置致しました。
未来予想図 : https://www.oosaka-web.jp/service/seo_example/
※2020年11月16日、コンテンツが古くなってきましたので削除いたしました。

これまで、コンテンツをつくる場合は、どうしてもテキストなどを気にしていたところでしたが、リニューアルをしたタイミングで

伝えたい事を伝える！言いたい事を言う！

という趣向に切り替えてページを作ってましたので、今回テキスト量の少ないページを制作することに対する反発はありませんでした。
これからもまだまだコンテンツを制作する予定ですが、このような感じで見てもらいやすいコンテンツを意識していこうと思います。
そして、今回のポイントだったところを残しておき社内でも共有しておきたいと思います。

今回利用した javascript と画像は以下のサイト様に公開されていたそれぞれのモノでした。

利用したスクリプト : BlackFlag : jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法

大元になる fullPage.js : fullPage.js

利用した画像 : ぱくたそ

このスクリプトに関しては、 fullPage.js を BlackFlag 様がカスタマイズ・・・厳密には別モノかもしれませんが、そのスクリプトを使わせて頂きました。
fullPage.js をそのまま使おうかと考えたんですが、不要な部分が多かったため、必要最低限のみのファイルで済みそうな BlackFlag 様のスクリプトを使わせて頂いた次第です。

以前からのことですが、どこかでぱくたそさんの画像を使ったコンテンツを作ってみたいと思ってました。
普通に市販されている写真素材とは一線を画す様な違いがあり、キャラの濃さが普通ではないところが気に入ってました。
しかし、なかなか使うタイミングがありませんでして・・・ということで、自社サイトで使わせて頂こうと思った次第です。
お陰様で、要所要所で吹き出すような笑いを誘うことができており、今のところ”上手くいってるかな？”と思えるような感じです。

今まで、コーポレートやプロダクトではなかなか導入しにくいであろうことはあまりしてきませんでしたが、これからはこういうことをどんどん導入したいと考えています。
単に口コミみたいな感じでシェアして頂きたいというわけではなく（勿論、シェアして頂けると嬉しく思いますがｗ ）、出来ることの幅を明示して付いてくる効果も明示出来るようにしたいと考えています。

細かい説明は省くとして、コンテンツの設置自体は、少々面倒でございました。
というのも、固定フレームの中にコンテンツを書かなければいけないため、絶対位置を指定してコンテンツを記述する必要がありました。
そのため、一つ一つ指定をしなければいけないのは、やはり少々の手間でした。
ただ、それ以上に余計な知識がなくても設置出来る程に簡潔な感じでしたので、そこは非常に助かったと思っています。

それぞれの背景については、 css で記述したモノでしたので、難しい話ではありませんでした。
Jquery で背景に画像を隙間なく入れる手法もあったようですが、あまり大きな違いを感じることができませんでしたので、 css で記述しています。
というのも、そもそも、 fullPage.js についてもブラウザを既に選んでいる状態ですので、 css でブラウザを選ぶのも大差ないということでした。

という感じですので、暫くは色々な Jquery を試しながらコンテンツとして導入したいと思います。
今は数多くのサイトで jquery の設置解説があります。
ですので、敢えて重ねるような感じの解説文章を記述しようとは思いません。
余程カスタマイズをした時はお伝えしたいと思いますが、そうでない限りは、ポイントだけ記載するように致します。
ただ、気になることは何でもお聞き頂ければと思います。
何なりと分かる範囲で返信をさせて頂きます。

執筆 : 清水 隼斗