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にすると画面のサイズに合わせて表示されます。

参考サイト

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

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」が便利です。
多くのアニメーションが可能です。

参考サイト

その他の便利な小技

PR

PR

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

執筆者:


comment

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

関連記事

素早く確実にWEBデザインをするための手順

新人から「どうやってデザインをしていいか、わからない」という声をよく聞きます。 私も新人の頃、他にデザイナーがいなかったので、 どのような手順でデザインすればいいか、わかりませんでした。 また、自分の …

サイトで使われているアプリがわかる「Wappalyzer」

サイトをみていて「どんなプログラムやサーバー、プラグインを使っているんだろう?」と思うことありませんか? 私の場合、サイトのソースコードをみて判断するのですが、 ソースが長かったり、使用しているプラグ …

イラレのグラデーションの色をスポイトツールで変更する方法

まわりに聞いてみると意外と知らないようでした。 確かにわかりづらいようですので、まとめてみました。

できないと諦める前に知識をつける方法

デザイナーやコーダーになって新人が最初にあたる壁が、「センスがない」「私には向いてないのではないか?」と思うことです。 大半の人は、「好き」や「やってみたい」と思ってはじめます。 しかし、大量の情報を …

イラレで簡単に文字を「手書き風」にする方法

1分くらいで簡単に文字を「手書き風」にすることができるテクニックです。

PR




人気の記事

プロフィール

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