デザインを開発するという視点でお伝えするクリエイティブBLOG
webサイトをより魅力的に演出するために利用されることの多いjQuery。プラグインの種類にもさまざまなタイプがありますが、今回紹介するのはフォント表現の可能性を広げるjQueryプラグイン 「20 jQuery Typography Plugins」です。
独特の動きや文字組・文字列を表現できるクリエイティブなフォントのjQueryプラグインがまとめられています。
詳しくは以下
殆どのwebサイトで使用されるメニューは、サイト全体のレイアウトにばかりに手を回しがちで、どうしてもデザインがワンパターンになってしまうことも多いと思います。そんな時是非利用したい、CSS3・jQueryで表現するクリエイティブなメニュー「64 jQuery CSS3 Menu Plugins and Tutorials」を今回は紹介したいと思います。
（Responsive Multi-Level Menu – Demo 1）
シンプルで定番として利用できるもの、動きが凝ったもの、形状が個性的なものなど、いろいろなタイプのメニューがまとめられているので、サイトに動きを出したり、ちょっとした仕掛けを取り入れたい時に便利に利用できます。
詳しくは以下
2013年のWEBでは大きく活躍していたパララックス効果。視差効果によってもたらされる体験は、今までのWEBとはまた違った感覚を与えてくれました。今回紹介するのはそんなパララックス効果を簡単に利用できるプラグインをまとめたエントリー「7 Useful Parallax jQuery Plugins」です。
7 Useful Parallax jQuery Plugins
手前と奥にオブジェクトを設置し、遠近感を持たせて画面に奥行きをもたせるものから、スクロールによって背景と手前のオブジェクトを動かす定番のものまで様々なパララックス効果を得られるjQueryプラグインが紹介されています。今日はその中から気になったものをピックアップして紹介したいと思います。
高機能なサイトを作りたいけど、一からプログラムを組むのはちょっと…という方に向けて、今回は2013年で人気をあつめたプラグインを50種集めたエントリー「50 Most Useful jQuery Plugins from 2013」を紹介したいと思います。
Salvattore — A jQuery Masonry alternative with CSS-driven configuration
レスポンシブサイトに向けたものを中心に、様々なジャンルのプラグインが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
Jresponsive
レスポンシブなグリッドレイアウトが実現できるプラグイン。ウインドウサイズに合わせて要素の幅を縮小したり、１行あたりの表示数を変更することができます。
FlowType.JS — Responsive web typography at its finest: font-size and line-height based on element width.
ウインドウサイズに合わせて自動的にfont-sizeとline-heightを調整してくれるプラグイン。１行あたりの文字数を調整できるので、読み易いコンテンツに出来そうです。
jQuery Selectric
htmlのselectボックスを装飾してくれるプラグイン。選択時にプログラムを実行できたりもするようで、高機能なselectボックスを実装したい時に重宝しそうです。
こうしてポピュラーなプラグインを一堂に集めると、2013年のWebの動向が見えてきますね。ここで紹介されているものを導入するだけでも、最新のトレンドに近づけていくことができるのではないでしょうか。
新しいゲームを始めたり初めてのWebサービスを利用する時、どんな操作をすれば良いのか最初にチュートリアルがあると、とても分かりやすいですよね。今回はWebサイトにそんなチュートリアル機能を付与するプラグイン「Bootstro.js」を紹介したいと思います。
実際にデモを動かしてみるとわかりますが、対象箇所のハイライト + 画面スクロールで、とてもわかりやすく説明を受けることができます。
ページ遷移を可能な限り少なくして、シームレスに気持ちよく情報を見せようといったWebサイトを、最近よく見かけるようになりました。しかしそのようなサイトを構築したいと思っても、経験が無ければハードルは高いもの。そこで今回は、そのような機能を手軽に実装できるjQueryのプラグインをまとめたエントリー「12 jQuery Infinite Scroll Plugins and Tutorials」を紹介したいと思います。
Mark Holton | Web Application Development
スクロールに合わせて新たなコンテンツを読み込む機能を中心に、12種類のプラグインがまとめられています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
国内でも有名なソーシャルブックマークサービスである「はてなブックマーク」「Livedoorクリップ」「Buzzurl」「del.icio.us」を一度にgoogleの検索結果に表示させる事ができるGreasemonkeyスクリプト「Japanese Popular SBM Count With Google」を紹介したいと思います。
他にも似たようなグリモンスクリプトはありますが、このスクリプトは「Append bookmarkcount in Google」と「SBM Count With Google」の良い所を合わせたものということです。
詳しくは以下
自分自身を表現するシーンで自分の分身となるアバター。様々なタイプのアバターが世の中には溢れていますが、今回紹介するのはベクターデータで配布されている、かわいいアイコンセット「Autumn Kawaii Icon Set (50 Icons, SVG & PNG)」です。
このアイコンセットは全部で50種類ものアイコンがセットとなっており、雲や紅葉、りんごなど秋を感じるアイコンがセットになっています。
詳しくは以下
WEBをデザインしていく上で欠かせないCSS。厄介な部分もありますが、アイデアとテクニックしだいで様々な表現を可能にしてくれます。今日紹介するのはそんなCSSのテクニックをあつめた「35+ very Useful And Powerful CSS techniques」です。
様々なTipsが公開されていますが、今日はその中からいくつか気になったテクニックをピックアップして紹介したいと思います。
詳しくは以下
プログラムについてはそれぞれのジャンルごとに様々なサイトやブログでレビューやTIPSが公開されており、ソースコード自体を記載されています。今回紹介するのは、そんなソースコードをステップごとにわかりやすく閲覧させることができる、プログラムコードをスライダー形式で見せることができる「SPECTACLE-CODE-SLIDE」です。
行数が入り、かつ色分けされたよく見る埋め込まれたコード表示のままで、ステップを追って見せることが可能です。
詳しくは以下
Photoshop形式のフリー素材は、高いデザインクオリティが表現されているだけでなく、特にweb関連のデザインに利用しやすいのも嬉しい要素の一つ。そんな中今回紹介するのは、UIデザインなどに活用できるPhotoshop素材まとめ「Free PSD Files: Download 28 UI/UX Design Photoshop PSD Graphics」です。
Vintage Vector Logos – GraphicsFuel
デザイン性の高いいろいろな種類のpsd形式素材がまとめられており、どれも使ってみたくなるものばかり。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインは幅が広くグラフィックデザインという分野だけに絞っても多種多様な表現が存在します。今回紹介する「45 Explosively Colorful Photoshop Effects」はphotoshopで作るグラフィックデザインの様々な表現のチュートリアルを集めたエントリーです。
その作品と言うよりも、写真を絵画調にに見せるTips、60年代のサイケデリック風に仕上げるTipsなど、グラフィックの技と言う色合いが強いチュートリアルが集められてまとめられています。今日はその中から特に気になったチュートリアルをピックアップして紹介します。
詳しくは以下
はてなブックマークを始めポータル系を中心にソーシャルブックマークサービスが運営されていて、効果的に利用されている方は記事の周辺に下記のようなボタンを設置して、人気の目安だったり、ブックマークを促してアクセス数アップにと利用されていますが、今回はそんなーシャルブックマークボタンを簡単に設置してくれるプラグイン「SBM Popular Entry」の導入から利用方法までを紹介したいと思います。
こちらのプラグインは上記のようにブックマーク数を表示するだけでは無く、ブックマーク数を基準としたランキングも生成してくれて、コード一行追加するだけで表示できるようになっています。
ソーシャルブックマークボタンを設置してみたいけど面倒だ、またはソースをいじる自信が無いと言う方にはオススメのプラグインです。ちなみにWordpress2.3でも問題なく動作していますが、現在Yahoo!ブックマークで不具合が出ているようです。
導入方法は以下
(さらに…)
ものすごくシンプルで無駄を削ぎ落としたCSSレイアウトテンプレートサイト「Nice and Free CSS Templates」を紹介したいと思います。ゴチャゴチャしたメニューは一切無く、サイトにアクセスすると12の代表的なCSSのレイアウトサムネイルが並んでいます。
テンプレートは1カラムから3カラム、4カラムと標準的なものはもちろん。中央表示なんかもありました。
詳しくは以下
