デザインを開発するという視点でお伝えするクリエイティブBLOG
先日「最新の使えるjQueryプラグイン集「25 Amazing and Fresh jQuery Plugins」」と言う記事で、最新の機能のjQueryプラグインをまとめたエントリーを紹介致しましたが、今日紹介するのはjQueryで動きが特徴的な魅せる動きを集めたエントリー「10 jQuery Transition Effects: Moving Elements with Style | DevSnippets」を紹介したいと思います。
Fluid Navigation – How to create an informative menu-bar with jQuery & CSS
スムーズに出現するフェードだったり、スライドインだったり、気持ちいい感じの動きをするjQueryのテクニックが集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
軽量で非常に高機能なjavascriptプラグイン。豊富な機能に加えて、デザイナーでも何とかわかる範囲の言語として最近さらに人気を集めていますが、今回紹介するのは最新の使えるjQueryプラグインを集めた「25 Amazing and Fresh jQuery Plugins」というエントリー。
最近リリーされた使えるjQueryプラグインが集められています。様々な機能のものがありますが、今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
アスキーメディアワークスさんに「WEB制作の現場で使うjQueryデザイン入門」を献本して頂きましたので紹介したいと思います。
まず本の内容に触れる前にドキッとさせられたのが帯のコピー。「もうプログラマーには頼らない
」、「javascriptはコピペ。クライアントの要求には応えられない」、「ゼロから始めてjQueryの制作力が身につく本」などと書かれていて、ライブラリを中心にパッケージを少し改変して利用していた自分にとってはかなり効いたコピーでした。そのコピーの通り内容は非常に分かりやすく、ゼロからの方でも順を追っていけば理解できるようになっています。
詳しくは以下
非常に高機能なjavascriptライブラリとして、WEBではかなり利用されているjQuery。今回紹介するのはjQueryとCSSで制御するスライダー「Automatic Image Slider w/ CSS & jQuery」です。
この手のjQueryを用いたスライダーは数多く存在しますが、「Automatic Image Slider w/ CSS & jQuery」はHTML部分、CSS部分とてもシンプルに作られており、カスタマイズが非常に簡単に行なう事ができます。また動きの部分のjQueryもシンプルなので、カスタマイズもjavascriptを知らないというかたでも何となく分かる作りになっています。
詳しくは以下
軽量で高機能なjavascriptライブラリjQueryですが、今回紹介するのはWEBレイアウトに使えるjQueryプラグインを集めた「15 jQuery Plugins for Better Web Page Element Layouts」です。
最近よく見かける、カラムが自動的に組み変るものだったり、文字の回りこみだったり、カラムの高さを揃えたりと様々なWEBレイアウトに効くjQueryプラグインが集められています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
軽量で高機能なjavascript、jQuery。様々なサイトで様々な形で利用されていますが、今回紹介するのはサイト制作に便利なjQueryを集めた、「15 useful jQuery plugins and tutorials」です。
キャプチャー、フューチャーリスト、サジェストなどなど様々なプラグイン紹介されています。今日はその中から気になったものをいくつかピックアップして紹介したいと思います。
詳しくは以下
WEBではインターフェース的にもデザイン的にも欠かすことができない、マウスオーバーした時のホバー処理。ちょっとしたギミックですが、全体のクオリティに影響する部分だと思います。今日紹介するのはわずか2.5KBと非常に軽量ながら、様々なホバー表現を可能にしてくれるjQueryプラグイン「Hoverizr」。
このプラグインではcanvasを利用して、白黒からカラーだったり、ぼかしからぼかしを取ったりと通常のホバー表現とは一味違った表現を簡単に可能にしてくれます。
詳しくは以下
WEBデザイナーを最も悩ませるインターネットエクスプローラ。大きく時代をまたいでいますが、未だに各バージョンともシェアがあり、それぞれのバージョンで崩れなく表示させると言う事は、多くの場合必須であり、あまりのバグの多さに煩わしい事でもあります。今日紹介する「Microsoft Expression Web SuperPreview」はIE6/7/8でのWebサイトにおける見栄えの違いを比較・検証できるマイクロソフト製ソフトです。
こちらはWebオーサリングツール「Microsoft Expression Web」に同梱されているWebページ表示の互換性チェックツール「SuperPreview」の機能限定版とのことですが、Firefoxのチェック機能が省かれているだけなので、IEチェック用としては十分利用できます。
詳しくは以下
アイコンにはさまざまな種類があり、定番として利用できるタイプのものは持っている方は多いと思いますが、テーマに合わせたものを探しだそうと思うとなかなか大変なもの。そんな中今回紹介するのは、トラベル系のデザインに最適なアイコンセット「Tourism & Travel Icon Set」です。
観光、旅行をテーマにしたデザインで活用できる種類のアイコンが100種セットでダウンロードできるようになっています。
詳しくは以下
スマートフォンの登場によって今までにない直感的な操作方法が一般的になってきましたが、「ピンチ」や「フリック」と言われてどんな操作方法かすぐに想像がつくという人もいれば、まだなれていなく想像できないという方もいらっしゃると思います。今回紹介するのはそんなスマートフォンの操作を視覚的に伝えることができる、60個のアイコンパック「Flat Gesture Icons Pack」です。
想定される操作のほとんどが収録されていて、これ１つあればどんなシーンでもカバーすることができそうです。
webサイトやスマートフォンサイトは、設計や構成レイアウト、デザイン感の決定からスタートし、さまざまな工程を経て完成に至ります。しかしどうしてもすべてを完了するまでには時間を要してしまうもの。今回はそんな時に利用したい、 デザイン性の高いUIキット「27 Useful UI Design Elements & UI Kits for Designers」を紹介したいと思います。
（Dashboard UI – Graphicfull | Graphicfull）
いろんなデザイン感のUIキットが豊富にまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
皆様、新年あけましておめでとうございます。
2016年もDesigndevelopを応援・閲覧して頂き、本当にありがとうございます。最近は更新頻度が滞っており、質ではなく量での優位性をもって、デザインや開発を行っている方に貢献するというブログの軸が少しズレてしまっていました。
開設当初は最低でも毎日2件、多い日はもっと数多くの記事をお届けしていましたが、最近では1週間でも2〜3本になってしまっていました。新年ということで改めて当初のコンセプトを再度認識し進んでいきたいと思います。
記事の編集・発信については今までと変わらず、Designdevelopという名前の通り、主にフロントエンドの開発周りから、デザインの際に役立つツールなど利用するものを中心に、今年は記事更新をなるべく行えるように仕組み化し、もっと多様性のある情報、多くのデザインや開発に役立つ情報を皆様にお届けできればと考えています。
2017年、今年もDesigndevelopをどうぞよろしくお願い申し上げます。
紙などのアナログな雰囲気を演出できるテクスチャは、デザイン制作になくてはならないツール。そこで今回紹介するのが、さまざまな質感を表現できるペーパーテクスチャまとめ「30 Sets of Free High Quality Lined Paper Texture」です。
Notebook by ~origin-missing on deviantART
ルーズリーフから方眼紙まで、さまざまな種類の紙が網羅されたテクスチャまとめとなっています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
プレゼントなどのラッピングに欠かせないリボンは、相手にスペシャル感を与えられる代表的なアイテム。webデザインの世界でも人気のあしらいとして、広く活用されています。今回は、そんなリボンを表現できるPSD素材をまとめた「30 Beautiful Ribbons PSD Files for Free Download」を紹介したいと思います。
Leather Ribbons & Web Elements | MediaLoot
ボタンやワンポイントなど、webサイトデザインで利用できるPSD素材が多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
画像等にちょっとしたデコレーションをしたり、特定のイメージが付かない背景画像を作成する時に利用したい抽象的なイメージ。抽象的なだけに決まった表現がなく、1からデザインするには時間がかかります。そこで今回紹介するのが、さまざまな抽象表現ができるPhotoshopブラシを集めた「New Collection of Cool Abstract Photoshop Brushes」です。
（75 Abstract Brushes II by =rocked-out on deviantART）
やわらかなラインを表現できるブラシから、光の動きを表現するブラシまで、さまざまなブラシが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
コピーやキャッチ、ロゴやタイトルなど、デザイン制作に欠かせない存在であるフォントは、常に最新情報をチェックして優れたものを入手しておきたいですよね。今回ご紹介するのはそんな、デザイナー必見の最新フリーフォントをまとめた「18 Fresh Free Fonts for Graphic Designers」です。
Fresh Free Fonts Download | Fonts | Graphic Design Junction
大胆な手書き風のフォントから、使いやすい凡用フォントまで幅広いフォントが18点まとめられています。その中からさらに、気になったフォントを幾つかピックアップしてみましたのでご覧ください。
詳しくは以下
(さらに…)
