デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBデザインならではのエフェクトは、私たちの目を楽しませてくれたり、あっと驚かせてくれたりします。今回ご紹介する「WebGL Distortion Hover Effects | Codrops」は、WEBの中でもよく目にするホバーアクションのエフェクト集になります。
歪みの効果を与え、滑らかに動くスタイリッシュなホバーアクションです。
詳しくは以下
毎日コーディングでさまざまなコードを書くデベロッパーにとって非常に便利なスニペット。知っているだけで作業効率が格段にアップするもの。そんな方におすすめできる「30 Seconds of CSS」をご紹介していきたいと思います。
先進的な知識を多く取り込むためにも、基礎的な業務内容をいかに短縮して行っていけるかは非常に重要なポイント。デベロッパーの方はぜひ下記よりチェックしてみてください。
詳しくは以下
モダンな雰囲気からスタイリッシュな雰囲気まで、幅広い演出をしてくれるハーフトーン。今まで画像としてWebサイトに取り込むことが多かったのではないでしょうか。今回ご紹介する「Pure CSS Halftone Effect」ではWebならではの動きを楽しむことができるエフェクトを通したハーフトーンになります。
美しい動きで視線を惹き付ける、ぜひ取り入れてみたいエフェクトとなっています。
詳しくは以下
他の世界に入り込むような没頭感を味わうことができるVR。気軽にデモを作成ができたらと、デベロッパーであれば1度は感じたことがあるかもしれません。そんな中今回紹介するのは、CSSで作るVR「CSSVR: Progressive VR experiences」です。
VRの複雑な動きをどう再現していくのか、その再現率の高さはどうれくらいなのか。デベロッパーであれば気になるところ。下記にデモを載せているのでご覧ください。
詳しくは以下
Webデザインの中でもユーザーの目を簡単に引くことを可能にするエフェクト。動きがつくだけでサイト内がぱっと華やかになります。今や様々なエフェクトをつけることが可能ですが、ついついワンパターン化してしまいがち。そんな方におすすめできる、水のような動きに焦点をあてた「Liquid Distortion Effects」を今回はご紹介致します。
水のような動きは優雅さと洗練された雰囲気を与えてくれます。下記にデモをいくつかピックアップ致しましたので、ご覧ください。
詳しくは以下
予約フォームや等で、weｂサイトで日付の選択を行う機会は意外に多いもの。だからこそ、ユーザーの使いやすさを意識したUIの工夫が必要となってきます。そんな中、今回ご紹介する「10 Free Open Source Date Picker Plugins」は、日付選択のプラグインが集められたまとめです。
使いやすさや、見やすいデザインが考慮された日付ピッカーのプラグインがまとめられています。
詳しくは以下
どんどんと新しい種類が登場するフリーフォント。日々チェックされている方も多いのではないでしょうか？そんな中今回紹介するのは、最新のフレッシュなフリーフォント17種をまとめた「17 Free Fonts for September 2014」です。
比較的最近アップされた新しく、デザイン性の高いフォントがピックアップされています。気になったものをチェックしましたので、以下よりご覧ください。
詳しくは以下
街中などの歩道部分には、歩きやすいように舗装がされており、いろいろな素材がいろんな形で配置されています。今回はそんな舗装面をテーマにしたシームレステクスチャ「Absolutely Free Seamless Pavement Textures」を紹介したいと思います。
Stone Blocks by AGF81 on deviantART
舗装の柄に着目しテクスチャ化された舗装面がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
皆さんはWEBサイトを制作する時にどんな手順を踏んでいるでしょうか？制作会社さん、個人によってもその方法は様々だと思いますが、今回紹介する「43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation」はphotoshopでデザインされたモックアップをXHTMLとCSSで組み上げていくまでのチュートリアルを集めたエントリーです。
How To Create a Horizontally Scrolling Site
全部で43個と様々なWEBサイト構築のためのチュートリアルが紹介されていますが、いくつか気になったWEBサイトのチュートリアルをピックアップして紹介したいと思います。
詳しくは以下
今までDesigndevelopでは様々なwordpressのテーマを紹介してきましたが、今日紹介するテーマは少し変わっていて、画像を一切使わずに文字だけで見せるwordpressのテーマ「WP TYPO」です。
タイトルから、日付、ページ内の装飾に至るまで、すべて画像をつかわず表現しています。テキストベースですが、フォントの違いや文字の大きさの強弱の付け方で、メリハリをつけて見やすくなるように構成されています。
詳しくは以下
今までDesigndevelopでは数々のフリーアイコン集、もしくはフリーアイコンを配布するサイトを紹介してきましたが、今日紹介する「iconPot – totally free icons」はWEBサイト上で利用でき商用利用、個人利用問わず利用でき、なおかつ著者のクレジット、リンクバックが必要ではないiconを集めたアイコンサイトです。
Splashy Icons
web dev icons in PNG format (16×16)
現在いくつかのアイコンセットが公開されていますので、いくつか紹介したいと思います。
詳しくは以下
イラストレーターなどのデザインソフトを使うことで、さまざまなグラフィック表現が可能となりますが、頭で思い描いているデザインをどうやったら作り出せるかわからない時もあるのではないでしょうか？今回はそんなシーンで参考にしたい、最新のベクターグラフィックチュートリアル「New Vector Graphics Tutorials」を紹介したいと思います。
Create a Highlighter Text Effect Vector in Adobe Illustrator – Vectips
イラストレーターでの制作チュートリアルを中心に、いろんな種類のグラフィック制作方法が紹介されています。
詳しくは以下
先日「待望のWordPress2.5正式版がリリース-導入に当たってのまとめ」でも取り上げましたて、少し待ってからアップグレードしようとエントリーしましたが、待ちきれずにWordPress2.5にDesignDevelopもアップグレードしました。変わる変わるのWEB上では言われていましたがここまで変わるとは…といったのが正直な感想です。
アップグレードは特に問題なく無事終了。動作も全く問題なく、いくつか使えなくなったプラグインはある物の運営には困らないレベルでした。
詳しくは以下
デザインソフト上だけでの表現が難しい草花などの自然素材は、デザイン制作にテクスチャを利用するという方も多いはず。そこで今回紹介するのが、動きのある草や落ち葉のテクスチャをまとめた「25 Lovely Grass Texture Collection」です。
（Seamless grass texture by ~hhh316 on deviantART）
自然の広がりを感じられる素材はもちろん、さまざまな雰囲気を演出できるテクスチャがたくさん紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
ブログや記事投稿型のサイトなどでよく見かけるページネーションは、案外シンプルにデザインされていることが多く、味気ないもの。そんな中、今回紹介する「20 Free Pagination PSDs for Web Designers」は、さまざまなデザイン性が取り入れられた、デザイン制作に是非活用したいフリー素材です。
定番として活用できそうなものから、個性的なデザインのものまで、幅広いラインアップが魅力のページネーション素材がまとめられています。中でも気になったものをピックアップしましたので、下記より御覧ください。
詳しくは以下
WEBGLをjavasuriptで制御するためのライブラリThree.js。ブラウザで3D表現などを行う際には国内でも有名なライブラリですが、今日紹介するのはThree.jsを利用した実験的なサンプルを集めたエントリー「20 Exceptional Three.js Experiments」です。
Many Icons in 3D Using Three.js
全部で20個の実験的なサンプルが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
