デザインを開発するという視点でお伝えするクリエイティブBLOG
殆どのwebサイトで使用されるメニューは、サイト全体のレイアウトにばかりに手を回しがちで、どうしてもデザインがワンパターンになってしまうことも多いと思います。そんな時是非利用したい、CSS3・jQueryで表現するクリエイティブなメニュー「64 jQuery CSS3 Menu Plugins and Tutorials」を今回は紹介したいと思います。
（Responsive Multi-Level Menu – Demo 1）
シンプルで定番として利用できるもの、動きが凝ったもの、形状が個性的なものなど、いろいろなタイプのメニューがまとめられているので、サイトに動きを出したり、ちょっとした仕掛けを取り入れたい時に便利に利用できます。
詳しくは以下
ナビゲーションメニューを作る時、いつも似たようなデザインになってしまってはいないでしょうか？そんな時に是非利用したい、CSSのみで実現できるナビゲーションメニューをまとめた「15 Beautiful and Creative CSS Navigation Menus」を今回は紹介したいと思います。
UAE, Dubai- Sharjah based web & designer, Front-end developer S.M.Riyaz
プルダウンのついた便利なメニューや、デザイン性を重視したハイクオリティなメニューまで、さまざまなCSSナビゲーションメニューが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEB制作に非常に便利なアイコン。内容の説明だったり、インターフェイスの向上だったり様々な側面で寄与してくれますが、今回紹介するのは様々なシーンで使えるプロユースなフリーアイコン集をまとめたエントリー「40 Free Professional Useful Icon Sets for Web」。
Free Mobile Berries Icon Set by templay-team
様々なタイプのフリーアイコンがまとめられています。今日はその中から特に気になったものをいくつかピックアップして紹介したいと思います。
詳しくは以下
自然な表情を楽しめる木のテクスチャは多数発表されていますが、希望にぴったりのタイプに出会うことはなかなか難しいもの。できればより多くの種類をストックしておきたいものです。そんな中今回紹介するのが、木の質感を活かした合板テクスチャをまとめた「30 High Resolution Plywood Texture」です。
Plywood edges by ~scott-451 on deviantART
木目の美しいタイプから、合板ならではの雰囲気を楽しめるものまで、さまざまなテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
非常に高機能でWEB制作には幅広く利用されている、jQueryプラグインですが、その中でも定番とも言えるのがスライダー。限られた領域でjQueryのプラグインの中でも多く利用されているスライダープラグイン。今日紹介するのはクオリティの高い、素晴らしいjQueryのスライダーを集めたエントリー「25 Excellent jQuery Sliders Tutorials and Plugins」です。
A Beautiful Apple-Style Slideshow Gallery with CSS & jQuery
定番の右から左へ流れるもの、トランジションが効いているもの、キャプチャやサムネイルと連動しているものなどなど、様々なスライダーがまとめられています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
WEB制作ではスプリットスクリーンなどが極端な例ですが、中央線を軸に左右を大胆に振り分けて使う手法が流行の一つになっていますが、今日紹介するのは、異なるものではなく、一つのオブジェクトをミラーリングして表現できるライブラリ「Mirror Effect」です。
Mirror Effect | Demo 3 | Codrops
単純に全く同じものを出現させることもできますし、上記のように背景を切り分けて表示することもできます。いくつかのパターンが公開されていましたので以下からご覧ください。
詳しくは以下
どんな写真でも、優秀なフィルターを用いることで、それらしい写真が撮影できるInstagramは国内を始め世界中で利用されていますが、今日紹介するのはCSSでInstagramで使われているフィルタ効果を実現する「CSSgram」です。
CSSは非常に軽量で、1kb以下のコードで、様々な種類のフィルタ表現がブラウザ上で可能になります。その数は全21種類にも及びます。
詳しくは以下
ユーザー登録などをする際に出現するログインフォームは、デザインする要素が少ないだけに、どうしてもシンプルになってしまいがちです。今回はそんなイメージを払拭してくれる、ログインをクリエイティブに演出できるまとめ「37 Free and Eye-catching PSD Login Forms」を紹介したいと思います。
（DW Premium: A Clean & Stylish Login Form (PSD) | DesignWoop）
シンプルベースでありながらも、細かなデザインにこだわりが光るフォームのサンプルpsdが37種紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
毎日数えきれないほど多くのアプリが配信されるiOS。そんな多くのアプリの中で存在感を放つためには、アイコンデザインの質の高さも重要なポイントの一つ。そこで今回紹介するのが、ユーザーを引きつけるiOS用3Dアイコンをまとめた「30 Superbly Designed iOS Icons」です。
Dribbble – Toilet Paper Icon by David Im
雑貨やゲームなど、さまざまなアイテムをモチーフにした立体感のあるアイコンが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBサイトのクリエイティブのクオリティはデザインは然ることながら、どんな動きをさせるかというところでも、大きく影響がありますが、今日紹介するのはサイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」です。
「Block Reveal Effects」ではまず、はテキストや写真の出現エリアに色ベタのエリアが出現し、それがズレながら、本来描画されるオブジェクトに変わっていくというものです。
詳しくは以下
テクスチャはオブジェクトの見た目を変えられる、デザインの質感を高めるための重要な素材です。そんな中今回紹介するのは、さまざまな岩の表情を種類豊富にそろえた「30 Free High Resolution Rock Textures」です。
Rock Texture2 by ~Mind-Illusi0nZ-Stock on deviantART
荒々しい雰囲気や鉱物の混じったもの、流涎的な質感のものまで、様々な岩肌テクスチャがまとめられています。中でも気になったものをピックアップしたので下記よりご覧ください。
詳しくは以下
バレンタインを間近に控え、さまざまなショップがハートで飾り付けられていると、どこかウキウキした気分になるのではないでしょうか。そんな中今回は、気分をアップさせてくれるハートをモチーフにデザインされたパターンをまとめた「100+ Free Valentine and Heart Patterns」を紹介したいと思います。
（DinPattern – Free seamless patterns » Finding A Cure）
可愛らしいハートパターンはもちろん、エレガントな雰囲気を演出できるパターンやユニークなパターンまで、さまざまなハートパターンが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
