FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

Javascript jQuery WEBデザイン コーディング

【新人向け】簡単にできた!Webサイトでよくみる技術のまとめ

投稿日:2015年3月20日 更新日:

SPONSORED LINK

14773631096_e61b422359_z

4月から新たにデザイナーになる人も多いのではないかと思います。
クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。
そんな時に便利なものを、初心者でも設置・使用が簡単なものを中心にまとめました。
※ライセンス等は各自でご確認ください。ライセンスは、サイトまたはダウンロードしたファイル内に記述してあることが多いです。(GPLやMITやCCなど主要ライセンスの内容と意味のまとめ

もくじ

レスポンシブ対応!PCでも、スマホのフリック操作でも使えるスライダー

flexSlider2

slider
flexSlider2

レスポンシブ対応で、スマホでのフリック操作可能、かつ設置も簡単な
flexSlider2」が一番使いやすく、便利だと思います。
サムネイル有無、ナビゲーション有無も選択できます。

参考サイト

追記

effectでfadeを指定するとIE11でfadeしないので困りましたが、下記のサイトの通りにするとなおりました。

サムネイル付きでページングもできるフォトギャラリー

Galleriffic

Galleriffic

Galleriffic

写真の枚数が多いスライドショーの場合に利用しています。
かなり昔からあるプラグインなのですが、自動再生やサムネイルのページングなど、必要な機能が一通りあり便利です。
サムネイルのページングがあるプラグインは少ないので、Gallerifficは重宝しています。

参考サイト

パララックスさせたい

Nikebetterworld Parallax Effect Demo


名称未設定-2

簡単にパララックスさせるなら「Nikebetterworld Parallax Effect Demo」が簡単です。
こちらのデモのように背景画像をパララックスさせることができます。
パララックスは、以前ほどの流行はなくなりましたが、うまく使うとワンポイントになります。

スクロールに合わせて表示させたい

jquery.inview

inview

いくつか試しましたが、シンプルに使うにはこの「jquery.inview」が手軽でした。
jQueryで動きを追加すると、ユーザーの目を引きます。

参考サイト

背景画像を画面サイズにあわせて表示させたい

bgCover

[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック

ビジュアル重視のサイトなどでよく使われています。
CSSのbackground-sizeをcoverにすると画面のサイズに合わせて表示されます。

body {
  background: url(photo.jpg) center center no-repeat fixed;
  background-size:cover;
}

参考サイト

フルスクリーンでスクロールさせたい

fullPage.js

fullPage

fullPage.js

通常の縦長のサイトと違って、1画面ごとスクロールしますのでヴィジュアル重視のサイトなどに最適です。

参考サイト

スクロールするとヘッダーを固定させたい

headerFix

jQueryでスクロールするとヘッダーを固定させる

定番になった感のあるスクロールを始めると固定するヘッダー。
私が以前に作ったものがあるので、参考にしてもらえればと思います。

参考サイト

ヘッダーが固定されている分、ページ内リンクがずれることがありますので下記のサイトを参考にしてみてください。

順番にアニメーションさせたい

jQuery.Deferredでわかりやすく順番にアニメーションする方法

deferred

jQuery.Deferredでわかりやすく順番にアニメーションする方法

jQueryで、アニメーションを順番に実行させるには、delayやcallbackを使うのが簡単ですが、構造が複雑になり修正が大変だったります。
このサイトで紹介されているDeferredを使えば、順番通りにアメメーションさせたり、順番を入れ替えたりするのが簡単です。
アクセス時にアニメーションを表示させる時などによく使います。Deferredを使い始めて、作業時間がかなり短縮できました。

参考サイト

テキストをアニメーションさせたい

textillate.js

textillate

textillate.js

テキストをアニメーションさせる場合にはこの「textillate.js」が便利です。
多くのアニメーションが可能です。

参考サイト

その他の便利な小技

-Javascript, jQuery, WEBデザイン, コーディング

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

100種類以上のGoogleのアイコンがつかえる。Material icons

SPONSORED LINK アイコンを作成するのは大変ですよね。特に大量になると、時間も手間もかかります。 そんな時に便利なのが、Googleの「Material icons」です。 下のアイコンは …

配色を計画的にするために便利な「paletton.com」

SPONSORED LINK 配色は難しく、いつも悩みます。 ちょっとした色の変化で、大きくイメージもかわるため、計画的に進めていく必要があります。 計画的に配色するために便利なサイトが「palett …

PhotoShopでよく使うフォントを素早く変更する方法

SPONSORED LINK PhotoShopでフォントを変更するのは面倒です。 特に欧文だと、最初からインストールされているフォントが多くて選択するだけで時間がかかってしまいます。 私の場合は、フ …

バナー制作時の文字の組み方のちょっとしたコツ

SPONSORED LINK 新人の頃、 「クライアントに『自分でもつくれる』と思われたらダメ」 とよく先輩に言われていました。 クライアントから、 「自分でもパワポやエクセルで作れそう」と思われると …

私が新人の頃やっていたWebデザインの要望・修正指示の対応方法

SPONSORED LINK 新人デザイナーのころ、出勤したら、デザインの修正記事が机に置いてあると、そのまま帰りたくなっていました。 新人デザイナーにとって、デザインの修正指示は、寿命が縮む思いです …

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。