高級ペライチって?参考にしたいおしゃれで面白い高級ペライチ40選


ダイナミックな動きや演出が目を引く高級ペライチ。今回は、デザインの参考にしたい、おしゃれで面白い高級ペライチをご紹介していきます。ぜひデザインの参考にしてみてくださいね。

高級ペライチとは

高級ペライチは、スクロールに合わせてパララックス(視差)やアニメーションの演出があるペライチ(縦長や横長の1ページのサイト)です。JQuery(ジェイクエリー)などを使って演出します。

※パララックス(視差):ページをスクロールする際、手前と奥とでスクロールの速度に差をつけることで、奥行きや立体感を表現するもの。

※JQuery:プログラミング言語であるJavaScript(ジャバスクリプト)のコードを、簡単に記述できるようにするJavaScriptライブラリの一つ。

おしゃれ・面白い高級ペライチ

では、実際に高級ペライチとはどのようなものなのか見てみましょう。おしゃれで面白いデザインの高級ペライチをご紹介していきます。

Finesse Design Atelier

Finesse Design Atelierのサイト

パリのクリエイティブスタジオのコーポレートサイトです。赤、黒、白の配色が印象的で、スクロールすると、黒い背景に映える白や赤を基調とした文字、写真が浮かび上がるように登場します。

【URL】 Finesse Design Atelierのサイトはこちら

森山直太朗オフィシャルサイト

森山直太朗オフィシャルサイト

歌手の森山直太朗さんのオフィシャルサイトです。スクロールすると、手書き風の目やサングラス、ヒゲなどが直太朗さんの顔にかかるようになっています。モノクロでクールな印象ですが、面白さもあるサイトです。

【URL】 森山直太朗オフィシャルサイトはこちら

ローラオフィシャルサイト

ローラのオフィシャルサイト

モデルでタレントのローラさんのオフィシャルサイトです。ページの中央にある黒いオーバーレイの上でカーソルを動かすと、オーバーレイが背景の写真と一緒に動きます。

【URL】 ローラのオフィシャルサイトはこちら

Webydo

Webydoのサイト

おしゃれなレスポンシブデサインのウェブページを作成できるサービス、Webydoのサイトです。スクロールに合わせてタブレットや写真が移動します。

【URL】 Webydoのサイトはこちら

La Moulade

La Mouladeのサイト

イギリス、ロンドンにオフィスを構えるクリエイブスタジオ、La Mouladeのサイトです。大きな動きをしますが、とてもスムーズに動くので、見づらさがありません。途中で出てくる自転車や靴のイラストも可愛いです。

【URL】 La Mouladeのサイトはこちら

株式会社コンテンツ

株式会社コンテンツのコーポレートサイト

制作プロダクション、株式会社コンテンツのコーポレートサイトです。今回ご紹介する高級ペライチの中では、最もダイナミックな動きのあるページかもしれません。バウンドするような動きが印象的です。

【URL】 株式会社コンテンツのサイトはこちら

Edits Quarterly × Ian Coyle

Edits Quarterly × Ian Coyleのサイト

それぞれのページが上下に重なっていて、スクロールすると下から次のページが出てくるように見えます。

【URL】 Edits Quarterly × Ian Coyleのサイトはこちら

color magic

color magicのサイト

color magicというキャンペーンのサイトです。スクロールに合わせて、各ブランドの洋服を着たモデルが歩いて登場する演出が、ファッションショーのようでおもしろいです。

【URL】 color magicのサイトはこちら

Soleil Noir 2012 | We believe in…

Soleil Noir 2012のサイト

フランスの広告代理店、Soleil Noirの新年のグリーティングサイトです。カラフルな配色とアニメーションが印象的なペライチで、スクロールすると、上に重なるように次のページが出てきます。

【URL】 Soleil Noir 2012のサイトはこちら

Elect-LO-nica Compilation

Elect-LO-nica Compilation

ロリータ専門雑誌「COMIC LO」のインスパイアコンピレーションアルバムのサイトです。スクロールに合わせてイラストや文章が動きます。

【URL】 Elect-LO-nica Compilationのサイトはこちら

探検!京都大学

探検!京都大学のサイト

「探検!京都大学」という名前の通り、キャンパスマップに表示されているイラストをクリックすると、京都大学の校舎の中などの写真を見ることができます。

マップには教授の方も登場し、クリックするとプロフィールを見ることもできます。また背景画像は、空や海、宇宙などのパターンがあり、ランダムに表示されるので、何度もサイトを訪問してみたくなりますね。

【URL】 探検!京都大学のサイトはこちら

Sorae

Soraeのサイト

遺灰をカプセルに入れ、宇宙に飛ばせるサービス、Soraeのサイトです。トップページを下にスクロールすると、カプセルが地上から宇宙空間に飛ぶアニメーションが付いています。スクロールに合わせてカプセルが動きます。

【URL】 Soraeのサイトはこちら

株式会社リクサス

株式会社リクサスのコーポレートサイト
物流サービスなどを手がける株式会社リクサスのコーポレートサイトです。スクロールに合わせてトラックが道路を走ります。

【URL】 株式会社リクサスのサイトはこちら

波瀾万丈!おかね道

波瀾万丈!おかね道のサイト

2013年に開催された企画展、「波瀾万丈!おかね道」のサイトです。スクロールに合わせて、イラストや文章が登場します。

【URL】 波瀾万丈!おかね道のサイトはこちら

JETBULLS AIRLINE

JETBULLS AIRLINE

LP(ランディングページ)制作を手がけるクリエイティブ集団の高級ペライチです。機内アナウンスのような音声が入っていて、「JETBULLS AIRLINE」という名の通り、航空会社の世界観が作り上げられています。

上に向かってスクロールするようになっていて、スクロールに合わせて飛行機が上昇していきます。

【URL】 JETBULLS AIRLINEのサイトはこちら

JR東日本「行くぜ、東北。」

行くぜ、東北。のサイト

CMでもおなじみ、JR東日本の「行くぜ、東北。」のサイトです。スクロールに合わせて文字や写真が動きます。

【URL】 行くぜ、東北。のサイトはこちら

自民党 選挙公約

自民党 選挙公約のサイト

スクロールに合わせて文字や写真が登場します。

【URL】 自民党 選挙公約のサイトはこちら

株式会社 キュー

株式会社 キューのサイト

トップの赤ペンが目を引くデザインです。ペンをドラッグ&ドロップして円などの図を書くと、線の内側に様々な動画が再生されます。様々なところに工夫が凝らされたデザインです。

【URL】 株式会社 キューのサイトはこちら

YouTube one hour per second

YouTube one hour per secondのサイト

アニメーションを使って、「YouTubeには、1秒間に1時間分の動画がアップロードされます。つまり…」という説明をしてくれるサイトです。左下のキャラクターの再生マークを押すと、アニメーションが始まります。

【URL】 YouTube one hour per secondのサイトはこちら

CORSO(コルソ)

CORSOのサイト

富山県にある美容室、CORSOのサイトです。カーソルを合わせたり、スクロールすると出てくる動物たちがとても可愛いです。

【URL】 CORSOのサイトはこちら

東京スカイツリー

東京スカイツリーのサイト

東京スカイツリーの公式キャラクター、ソラカラちゃんが画面の上から登場したり、スクロールに合わせて文字が登場したりします。

【URL】 東京スカイツリーのサイトはこちら

Slavery Footprint

Slavery Footprintのサイト

現在でも奴隷のように働かされている人々や、子どもたちの労働をなくすために活動しているMIAFW(MADE IN A FREE WORLD)のサイトです。

「どれだけの奴隷があなた一人のために働いているか」を説明してくれます。文章をカラフルな腕が運んできてくれるアニメーションが付いています。

【URL】 Slavery Footprintのサイトはこちら

The evolution of the web

The evolution of the webのサイト

横に長いペライチで、ウェブやブラウザ、インターネットの歴史を時系列順に表示したサイトです。

【URL】 The evolution of the webのサイトはこちら

菊地凛子オフィシャルサイト

菊地凛子オフィシャルサイト

女優の菊地凛子さんのオフィシャルサイトです。横長のペライチですが、横にスクロールしても、縦にスクロールしてもページが進むようになっています。

【URL】 菊地凛子オフィシャルサイトはこちら

Kekselias Inc.

Kekselias Inc.のサイト

Kekselias Inc.のコーポレートサイトです。写真をバックに、左側から文字が出てきます。

【URL】 Kekselias Inc.のサイトはこちら

BeerCamp at SXSW 2011

BeerCamp at SXSW 2011

スクロールすると、奥に進んでいく奥スクロールの高級ペライチです。

【URL】 BeerCamp at SXSW 2011のサイトはこちら

京急蒲田処女小説文藝大賞

京急蒲田処女小説文藝大賞

下にスクロール、上にスクロールを交互に繰り返すことで、ページを進めるという珍しいサイトです。

【URL】 京急蒲田処女小説文藝大賞のサイトはこちら

MEFILAS

MEFILASのサイト

言葉や文章にカーソルを持っていくと、画面いっぱいにその意味に関連するアニメーションが登場します。

【URL】 MEFILASのサイトはこちら

黒田賢オフィシャルサイト

黒田賢さんのオフィシャルサイト

映像ディレクターの黒田賢さんのオフィシャルサイトです。スクロールに合わせて、文字や写真が登場します。

【URL】 黒田賢さんのオフィシャルサイトはこちら

大塚製薬 オロナイン軟膏

大塚製薬 オロナイン軟膏

スクロールに合わせてオロナイン軟膏がくるくると回ったり、ポーチからオロナイン軟膏が出てきたりします。

【URL】 大塚製薬 オロナイン軟膏のサイトはこちら

Online Portfolio von Jan Ploch

Online Portfolio von Jan Plochのサイト

“hey”という文字がカーソルの動きに合わせて変形します。

【URL】 Online Portfolio von Jan Plochのサイトはこちら

Atlantis -Lost World’s Fairs-

Atlantis -Lost World's Fairs-

スクロールに合わせて、人が海底に潜っていき、最後は海中に沈められたとされる伝説の大陸、アトランティスに到達します。

【URL】 Atlantis -Lost World’s Fairs-のサイトはこちら

Nizo for iPhone

Nizo for iPhone

スクロールすると、引き寄せられるようにiPhoneの周りに様々な部品が集まってきます。それぞれの部品は、ドラッグして移動させることができます。

【URL】 Nizo for iPhoneのサイトはこちら

三人展「片想い」

三人展「片想い」

若手グラフィックデザイナー3人による展示会のイベントページです。スクロールに合わせて、「片想い」の文字が散っていきます。

【URL】 三人展「片想い」のサイトはこちら

Nikon 1

Nikon 1

ニコンのミラーレスカメラ「Nikon 1」のスペシャルサイトです。スクロールに合わせてカメラが動きます。

【URL】 Nikon 1のサイトはこちら

Panasonic ラムダッシュ

Panasonic ラムダッシュ

パナソニックのメンズシェーバー「ラムダッシュ」のスペシャルサイトです。ダイナミックに動くアニメーションで、シェーバーが紹介されています。

【URL】 Panasonic ラムダッシュのサイトはこちら

Letters ~拝啓、未来へ。~

Letters ~拝啓、未来へ。~のサイト

甲南女子大学の校訓を作った、90年前の学長から届いた手紙の内容や、校訓などをストーリー形式で紹介していくサイトです。

【URL】 Letters ~拝啓、未来へ。~のサイトはこちら

百景デザイン研究所

百景デザイン研究所

コンピューターグラフィック制作の会社、百景デザイン研究所のサイトです。スクロールするとイラストの建物が割れ、写真や文章などが登場します。見た目はポップですが、内容はシンプルな作りになっているので読みやすいです。

【URL】 百景デザイン研究所のサイトはこちら

三井住友VISAデビュープラスカード(学生)

三井住友VISAデビュープラスカード(学生)

クレジットカードの三井住友VISAカードが学生向けに提供する、三井住友VISAデビュープラスカードのサイトです。写真をバックに文字やイラストが登場します。

【URL】 三井住友VISAデビュープラスカード(学生)のサイトはこちら

FELISSIMO 500色の色えんぴつ TOKYO SEEDS

FELISSIMO 500色の色えんぴつ TOKYO SEEDSサイト

通信販売を行っているフェリシモが販売しているメイド・イン・ジャパンの500色の色えんぴつのサイトです。
スクロールすると、色鮮やかな色えんぴつが登場します。

【URL】 FELISSIMO 500色の色えんぴつ TOKYO SEEDSのサイトはこちら

高級ペライチを活用しよう!

変装メガネをかけた犬
いかがでしたか?どのサイトもパララックスやアニメーションが印象的で、見ていて楽しいですよね。高級ペライチを効果的に使うことで、伝えたい情報をユーザーの印象に残すこともできるかもしれません。

また、高級ペライチを作るのは難しそうと思うかもしれませんが、WordPressのテンプレートやJQueryプラグインを使うと、比較的簡単に作ることができます。高級ペライチの作り方については、以下の記事をご覧ください。ここでご紹介していない高級ペライチも少しまとめています。

パララックスサイトとは。作り方や参考例、テンプレート、jQueryプラグインまとめ!

無料でホームページを作れる「ペライチ」

誰でも簡単にホームページ作成を!「ペライチ」

HTMLやCSSでお悩みなら簡単ホームページ作成サービス「ペライチ」におまかせください。
特別な知識は必要ありません。好みのテンプレートを選ぶだけで誰でも簡単にホームページを作ることが出来ます。
誰でも簡単にホームページ作成を!「ペライチ」

ホームページ大学編集長/フリーライター ウェブデザインや動物、美容、ダイエット等幅広いジャンルの記事を手掛ける。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする