FEVDES BLOG

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

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

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

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

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

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

関連記事

ボックスと余白の計算が楽になる「Gridulator」

デザインをやっていて、写真を並べたいときボックスと余白の計算が面倒だったりしませんか? そんな時に便利なサイトが「Gridulator」です。 Gridulator: Make pixel grids …

レスポンシブ用の画像を複数のサイズで自動生成

Responsive Image Breakpoints Generator レスポンシブWebデザインで、マルチデバイスに対応させる際、読み込む画像のサイズを複数設定したい場合があります。 そんな時 …

暗記しておく!イラレでギザギザの丸(円)を作る方法

よく使うこのギザギザの丸(円)。 今まで何度も使ってきましたし、使い映えするので、 絶対に暗記しておきたいです。

パターンがたくさんありテンプレート準備の参考になる「Summer UI Kit Free」

Summer UI Kit Free 明るい配色で海外のリゾートっぽい「Summer UI Kit Free」。 コーディングする前に、テンプレートであらゆるコンテンツに対応できるパターンをつくると思 …

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

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

プロフィール

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