デザインを開発するという視点でお伝えするクリエイティブBLOG
動画はトラフィックを取られすぎてなかなか展開はできないけどなんとかしたいという思いから、動画部分をGIFアニメーションで代替して利用するというサイトを最近では見かけます。今日紹介するのはFacebookライクなインターフェイスでGIFアニメーションプレビューを実装できる「Facebook Like GIF Preview Using jQuery」です。
こちらはjQueryベースで制作されており、jQueryとライブラリ、CSSを読みこせて、HTMLとjsを追記するという形で、比較的簡単に実装が可能です。
詳しくは以下
GIFのマークをクリックするとGIFアニメーションがスタートし、再度クリックすると元に戻ります。挙動については、デモサイトが準備されていましたので「Gif Preview with jquery」からご覧ください。
クリックでイベントが起きるため、スクロール位置などイベントを作っておけば、表示位置に来たら自動的に再生するなんてこともできそう。使い方次第ではグッとサイトが良くなるかもしれないjQueryプラグインだと思います。ソースコードはgithubにて公開されておりましたので、試してみたい方は「Fork it on Github」からどうぞ。
熱いものから立ち上る煙や湯気。デザイン上で表現しようと思うと、質感や柔らかなを演出するのにとても苦労するかと思います。そんなシーンを一気に解消してくれる、さまざまな形の煙を表現できるphotoshopブラシまとめ「33 Sets of Free Smoke Photoshop Brushes」を今回は紹介したいと思います。
煙・湯気の形にもいろいろありますが、欲しい形のものがきっと見つけられるはずです。いくつかピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
デザインに役立つphotoshopブラシ、非常にたくさんの種類が公開されていることもあり、よく利用されている方も多いのではないでしょうか？そんな中今回紹介するのは、ハイクオリティなphotoshopブラシまとめ「80 All-You-Need Photoshop Brushes」です。
（Free Hi-Res Watercolor Photoshop Brushes | BittBox）
80種類もの豊富なブラシが多彩な種類で収録されており、デザイン制作に必ず役に立ってくれそうです。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
新しい素材が次々と登場する中、フリーフォントもさまざまな種類のものがダウンロードできるように。そんな中今回紹介するのは、13種の最新フリーフォントを集めた「13 New Free Fonts for Designers」です。
デザイン性に優れたフリーフォント13種が厳選され紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEB制作を行なうにあたりそのサイトの雰囲気を大きく左右するのが背景。色だったりパターンだったりテクスチャだったり様々な背景がサイトのテイストに併せて展開されていますが、今日紹介する「PatternWall.com」はそんな背景パターンをダウンロードできるWEBサイトです。
上記のようにグリッドに背景が引き詰められており、選択する事で、全面がその徘徊に切り替わります。さらにDownloadのボタンをクリックする事で、表示されている背景がjpgでダウンロードで切ると言うものになっています。
詳しくは以下
春が訪れ、デザインの現場でも春らしさを表現するデザインが増えていると思います。そんな時に活用っできる、春のやわらかな風景を表現できるベクター素材「A Collection Of Free Spring Vectors For Designers」を今回は紹介したいと思います。
（Colorful Spring – Vector Graphic by DryIcons）
花や蝶蝶、植物など、暖かい季節にぴったりな素材がイラストレーションに表現された素材が収録されています。気になるものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
Webサイトの利用者が増えるほどその使い方は様々で、幅広い使用用途を考慮した上でサイトの構築を行わなければなりません。中でもUIはとても重要で、いかに分かりやすくスムーズにユーザーを導くことができるかがポイントです。そんな時に役に立つのが今回紹介する、様々なシーンで使えるアイコンセット「Basicons Multipurpose Icon Set」です。
およそ500種類の異なるアイコンがカテゴリごとに集約された、汎用性の高いアイコン素材です。
詳しくは以下
どんなデザインにも必ずといって良いほど文字は必要になってきますが、フォントの選び方によって、デザインは全く異なる表情を生み出します。そこで今回紹介するのは、スタイリッシュなイメージにぴったりな、細身のフリーフォントをまとめた「50 Best Free Thin Fonts」です。
（Code Free Font | Fontfabric™）
綺麗に整列されたフォントから、デザイン性の高いフォントまで、様々なフリーフォントが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
タブ型のメニューはページナビゲーションとして取り入れられている方も多いかと思います。今日はWEB2.0っぽい今時のデザイン感のカスタマイズ可能なタブ型のナビゲーションメニュー「Pure Css Horiontal Menus」を紹介したいと思います。
作りは非常に単純で、リストで構成されています。配布は全部で6色こちらの「デモページ」で動作を確認する事が可能です。各メニュー項目はテキストデータなので日本語メニューも自由に作れるようになっています。またリスト形式でマークアップされていますのでタブを増やす事も簡単にできます。
動きに派手さはありませんが、デザインもシンプルで配色もスタンダードな物が揃っていますので、あわせやすいかと思います。配布は各色ごとにzipファイルでダウンロード可能で圧縮ファイルの中には各画像とCSS、メニューだけ表示させてあるHTMLが同封してあります。組み込み方法はHTMLファイルのソースを見て頂ければ簡単にサイトに実装可能だと思います。
多様化するwebデザインの中で、常に取り上げられるミニマルデザイン。シンプルなだけにアイデアやデザインクオリティの高さが求められます。そこで今回は、webデザインの参考になる、クリエイティブ性の高いミニマルデザインについての解説付きデザイン集「10 Minimal Website Design and Ideas」を紹介したいと思います。
一口にミニマルデザインといっても、テキストをメインに利用したページから、シングルページ、ワンビジュアルで魅せるデザインなど、クリエイティブ性はさまざま。そんなミニマルページをカテゴリーに分け、詳しく解説しています。
詳しくは以下
webサイトやスマートフォンアプリなどのデザインを制作する際、実際の見た目を確認するために実際の機種に当てはめた状態をチェックすることも多いはず。今回はそんなシーンで活用できるモックアップ用psd「23 Free Flat/Minimal Device Mockups [PSD]」を紹介したいと思います。
（Free Responsive Screen Mock Up – iMock Up Free Edtion on Behance）
フラットでミニマルなシンプルテイストなので、デザインに影響を与えることなく利用することができます。
詳しくは以下
