デザインを開発するという視点でお伝えするクリエイティブBLOG
HTML5とJSの組合せでWEB上でできるとこは格段に広がり、様々な実験的なコンテンツが世界では展開されていますが、今日紹介するのはアイデア次第で面白いプロモーションに使えそうなHTML5とJSで動画に画像をWEB上で合成する「JavaScript Face Detection + Canvas + Video = HTML5 Glasses!」です。
こちらはHTML5で再生されているビデオにCanvasを利用して、ビデオに追従するエレメントを表示させるというものです。
実際どんなものか動画が公開されていましたので、下記からご覧ください。
動画は以下から
ユーザーが撮影した動画に対してなにかを合成したり、動画コンテンツに合成する絵を分けてコンテンツを変化させたり、様々な事ができそうな技術だと思います。
「Library」にソースコードや実装方法などが公開されています。気になる方は是非チャレンジを。
次世代の言語として期待されているHTML5、すでにスマートフォン関係の標準ブラウザで対応し始めていることもあり、利用したことが有るという方もWEB制作者であれば多いのではないでしょうか？今日紹介するのはそんなHTML5で作られたビデオプレイヤーをまとめたエントリー「10 Best HTML5 Video Player」です。
FryPlayer – HTML5 Video Player
全部で10種類のHTML5で作られたビデオプレイヤーがまとめられていましたが、今日はその中から幾つか気になったものを紹介したいと思います。
詳しくは以下
高機能で軽量なjavascriptライブラリjQuery。様々なプラグインがリリースされていて、現在では多くのWEBサイトで導入されています。そのなかでもよく見かけるのがスライダーを使った仕組み。限られたスペースで効果的に銃砲を見せることができます。今日はそんなスライダーをまとめたエントリー「28 Useful JQuery Sliders You Need To Download」を紹介したいと思います。
Animate Panning Slideshow with jQuery
単純に写真をスライドするものから、エフェクトを活かして作られたプラグインまで様々なjQueryスライダーが集められています。今日はその中から気になったものをいくつか紹介したいと思います。
詳しくは以下
デザインをする上で欠かすことのできないテキスト。時にはテキスト自体にデザインを加えることで、より印象的なグラフィックに仕上げることができます。今回はそんな時に参考にしたいチュートリアル集「Collection of Fresh Text Effect Tutorials」を紹介したいと思います。
非常にハイクオリティでグラフィカルなテキストデザインを作成する手順を学ぶことができるチュートリアルがまとめられています。
詳しくは以下
デザインのクオリティを高めるためには、奥行きを感じさせるデザイン制作を心がけることが重要です。そんな中今回紹介するのが、手軽にデザインにニュアンスをつけられる、光の表現がきれいなPhotoshopブラシをまとめた「30 Free Dazzling Photoshop Bokeh Brushes」です。
（Bokeh Brushes by ~thethiirdshift on deviantART）
デザインにふわっとした幻想的な雰囲気を演出できるさまざまなブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
ECサイトのデザインに欠かせないのがカートなどのショッピングに関連したアイコン。今日紹介する「Shopping Cart Icons」はそんなECサイト構築の際に役立つアイコン集をさらにまとめたエントリーです。
かなりデザインされた立体的なカートやショッピングバッグからシンプルで汎用性の高そうなアイコン集など幅広く紹介されています。今回は公開されているアイコンの中から気になったものをいくつか紹介したいと思います。
詳しくは以下
記事が増えてくると当然人気がある記事、無い記事とあるわけで、運営者サイドとしては非常に記事の人気が有る無しは気になる所です。そこで大体の人気の目安として活用できる、記事の閲覧数を表示してくれるプラグイン「wp-postviews」を今回紹介したいと思います。
投稿した時期や話題によっても異なるので完全にこれで人気を測る事はできないかもしれ舞えんが目安には指標には十分なってくれると思います。
1.「wp-postviews」よりプラグインをダウンロード
2.解凍してできたフォルダごと「wp-content/plugins/」へアップロード
3.[wp-postviews]を有効化
導入方法は以下から
テクスチャについては今までDesigndevelopでも何度も取り上げてきましたが、今日紹介するエントリー「Huge collection of 200+ Texture brushes」はテクスチャを自分で作りあげることができるphotoshopブラシをまとめたものです。
紹介されているブラシは全部で200種類。煉瓦の壁から、コンクリート、木目にいたるまで、様々なテクスチャが表現できるphotoshopブラシが収録されています。今回はいくつか紹介されているなかから、いくつか気になったブラシセットをピックアップして紹介したいと思います。
詳しくは以下
webデザインを制作する際に非常に役に立つアイコンは、フリー素材でもさまざまな種類が発表されています。そんな中今回紹介するのは、アウトラインで構成されたフリーアイコンセット「Free Outline Icons」です。
ラインのみを使ってデザインされたたくさんの種類のアイコンが200種類も収録されたセットとなっています。
詳しくは以下
最近はソーシャルサイトも増えてきて国内でもかなりの数のサービスが存在します。ソーシャルブックマークサービスを簡単に利用できるように、ソーシャルサイト用のアイコンを並べているブログも当ブログを含めて多いかと思います。
しかし上記のようにあまりにも並びすぎているとあまりにも不格好です。そこで今回紹介するjavascript「SocialHistory.js」はユーザーが利用しているソーシャルサイトを自動的に検出して、必要と思われるアイコンだけ表示させることができるスクリプトです。
詳しくは以下
いろいろなデザイン表現を可能にするソフト・イラストレーター。さまざまな場面で活躍してくれますが、機能が多くなかなか使いこなせないことも。今回はそんな時に参考にしたい、イラストレーターを使って描き出すテキストエフェクトチュートリアル「Awesomely Brilliant Adobe Illustrator Text Effects Tutorials」を紹介したいと思います。
How To Create a Comic Style Text Effect in Illustrator
テキストをグラフィカルに表現できるイラストレーターのチュートリアルが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
