HOME > コラム > WEB全般 > fullPage.jsを使ってページをつくりました

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

コラム

弊社サイト内に新たにコンテンツを設置致しました。
今回のページはインパクトを残したいと思い、紙芝居風な感じで fullPage.js のカスタマイズバージョン(厳密には別モノ?)を使いました。
それについて書き残しておきたいと思います。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

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

fullPage.jsイメージ

8 月 24 日、弊社のサイトに新たなコンテンツを設置致しました。
未来予想図 : http://www.oosaka-web.jp/service/seo_example/

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

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

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

利用したスクリプト

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

Jquery

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

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

利用した画像

利用した画像 : ぱくたそ

fullPage.js と書きましたが・・・

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

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

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

スクリプトの導入にあたって・・・

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

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

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

執筆 : 清水 隼斗

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP