TOP  >  WebService  >  サイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」 WEBサイトのクリエイティブのクオリティはデザインは然ることながら、どんな動きをさせるかというところでも、大きく影響がありますが、今日紹介するのはサイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」です。 「Block Reveal Effects」ではまず、はテキストや写真の出現エリアに色ベタのエリアが出現し、それがズレながら、本来描画されるオブジェクトに変わっていくというものです。 詳しくは以下 大きな動きと、何かが出てくる期待感は通常のlazyloadとはまた違ったクリエイティブ感を与えてくれます。様々なサンプルが公式サイトには準備されており、メニュー・モーダル・フォーム

TOP  >  WebDesign  >  2017年のWEBデザインのトレンドをまとめた「The Future of Webdesign: Trends 2017」 WEBデザインの世界は非常にトレンドの流行り廃りが早く、昨年のものは今年、今年のものを来年使えないぐらいのスピードでトレンドが移り変わっていきます。今日紹介するのは来年の2017年のWEBデザインのトレンドをまとめた「The Future of Webdesign: Trends 2017」です。 来年の注目すべき、WEBデザインのトレンドが全部で6つまとめられていましたので、順に紹介したいと思います。 詳しくは以下 1.モバイルファーストデザイン これは国内でも、数年前から現場では言われきましたが、いよいよ来年様々な検索エンジンのモバイルファーストインデックスが取り入れられる事により必須事項になりそうです。 2.WEBサイ

写真加工は現在様々なアプリケーションに搭載されており、もはや写真とは切手は切れない関係にありますが、今回紹介するのはWEB上でも動作する写真加工フィルタを生成できるCSSで実現するフィルタジェネレーター「CSSFILTERS.co」です。 このサービスでは、予め登録されたフィルタもしくは、パラメーターを指定して任意の画像にフィルタをかけるとと共に、WEB上で実現するためのコードも出力してくれるというものです。 詳しくは以下 1977、Aden、Inkwell、LofiなどInstagramなどでも見たことがある有名なフィルタが再現されており、それらは選択するだけでフィルタを実現しながらCSSのソースを参照可能です。さらにそこからパラメーターを触る事で独自のフィルタも作り出すことができます。 こちらをベースにWEBアプリなども制作することも可能ですし、CSSでクラスで管理しWEB全体にフィル

ブラウザの発展によりjavascriptによるアニメーション表現はより高度なものとなってきていますが、今日紹介するのはCSSやSVGとも連携し、様々なアニメーションを描画できる軽量なライブラリ「Anime.js」です。 回転や移動といったシンプルなものから、ランダムな動きなどなど、作りこめばかなり高度な動きも可能な用で、CODEPENでは様々なアニメーションサンプルが上がっていました。 詳しくは以下 アニメーションサンプルは「anime.js – a Collection by Julian Garnier on CodePen」に、全部で10個設置されており、コードとプレビューを見ながら触れることができます。また、ライセンス形式はMIT Licenseとなっており、「GitHub – juliangarnier/anime: Javascript Animation Engine」にはフ

CSS3で利用できるようになったFlexbox。WEBアプリやレスポンシブを想定して開発されたものですが、まだまだ現場ではそれほど普及していないのが現状です。今日紹介するのはそんなFlexboxを理解・利用するための様々なUIを簡単に利用できるCSSのFlexbox UIパターン集「Flexbox Patterns」です。 「Flexbox Patterns」は利用しやすくなるようにそれぞれのユーザーインターフェイス毎に、簡単な解説と、CSSとHTMLがセットでコピーできるようになっており、コピー＆ペーストで利用できるようになっています。 詳しくは以下 上記のようにCSSとHTMLがコピーできる形でまとめられているため、技術者でなくてもパーツだけなら簡単に組み込むことが可能です。 現在は実用的なものから、なかなかニッチなものまで全部で10のユーザーインターフェイスが登録されています。シンプ

マウスオーバーすると、色が変わったり、様々なアクションが走ったりと、WEBデザインでは多用されるホバーエフェクト。簡単に透明度だけ変えたり、色を変えたりというシンプルなものも良いのですが、一工夫されたホバーエフェクトは上手に使えばサイトの質を向上させてくれます。今日紹介するのはリッチなホバーエフェクトを実現するCSSセット「IMAGE HOVER EFFECTS」です。 画像が拡大されたり、フィルタが掛かったような表現になったり、全部で16ものホバーエフェクトを簡単に実装することが可能です。 詳しくは以下 こちらのホバーエフェクトはjavascriptは利用しておらず、全てHTMLとCSSで実現可能となっています。サイトにアクセスして、好きなホバーエフェクトをクリックすると実装するためのサンプルコードを見ることが可能です。 ライセンスはThe MIT License (MIT)となっており

ジオメトリック柄のフリーテクスチャ&パターンまとめ「12 Free Geometric Textures & Patterns Sets For Your Design」 デザイン素材・種類として流行になっているものの一つとしてあげられるジオメトリック柄。いろいろなデザインシーンでよく見かけるため、使う際は他を差をつけてデザインしたいものです。今回はそんな時に参考にしたいジオメトリック柄のフリーテクスチャ&パターンまとめ「12 Free Geometric Textures & Patterns Sets For Your Design」を紹介したいと思います。 FREE!!! 5 Triangulation Mosaic backgrounds by mariannizmo on DeviantArt 定番ではあるけれど個性を感じさせるものを中心に、厳選された数ではありますが、活用しやす

TOP  >  Design  >  種類豊富なフリーPSDwebサイトテンプレートまとめ「Best of 2015: 100 Free PSD Website Templates」 活用するととても便利なテンプレート。中でもwebサイトのデザインテンプレートは、すでに完成されたデザインを使ってサイト設計ができるとても魅力的な存在です。今回はそんなwebサイトテンプレートを多数まとめた「Best of 2015: 100 Free PSD Website Templates」を紹介します。 Dribbble – Free psd template by Yana Smirnova 2015年のベストテンプレートが揃っており、ジャンルやテーマもさまざま。見応えのある内容も魅力となっています。きになったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Retina Read

フリーで使える ジオメトリック背景がまとめられた「12 Free Geometric Background Sets For Graphic Designers」 背景素材にはいろいろな種類がありますが、中でも特に流行となっているのがジオメトリック柄のもの。フリーでダウンロードできるものも非常に多く見かけます。そんなフリーで使える ジオメトリック背景がまとめられた「12 Free Geometric Background Sets For Graphic Designers」を今回は紹介します。 5 High Definition Geometric Backgrounds | Best PSD Freebies いろいろなテイストのジオメトリック背景がピックアップされています。きになったものを以下に紹介していますので、ご覧ください。 詳しくは以下 Crystalized 2 Vector

Photoshop形式のフリーpsd素材を集めた「Free PSD Files: Download 25 UI Design Photoshop PSD Resources」 制作時に非常に便利なソフトの一つとなっているPhotoshop。いろいろな加工や表現が可能で、時にはその表現の幅に驚かされることもあるのではないでしょうか？そんな中今回紹介するのは、Photoshop形式のフリーpsd素材を集めた「Free PSD Files: Download 25 UI Design Photoshop PSD Resources」です。 Bifold Flyer Mockup | Vectogravic いろいろなタイプのpsd形式の素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Brand-Fashion Store Template

TOP  >  Design  >  デザイン性・使いやすさが考慮されたフォームデザインサンプル「20 Awesome Form Designs Visitors Want To Fill Out」 サイトのコンテンツとして必要な場合が多いコンタクトフォームなどの送信ページ。シンプルに構成されていることが多いですが、時にはデザイン性を重視したり、より使いやすさが求められる場合もあるのではないでしょうか？今回はそんな時に参考にしたいフォームデザインサンプル「20 Awesome Form Designs Visitors Want To Fill Out」を紹介したいと思います。 Dobidos, sanitari salvaspazio con bidet incorportato | Contatti. デザイン性・使いやすさが考慮された、いろいろなタイプのフォームデザインがまとめられて

デザイン設計時にワイヤーフレームを使って構成を確認・設計することで、完成までのイメージを頭に想像できるとともに、進行・作業をスムーズに行うことが可能となります。今回はそんな設計時に利用したい、さまざまな種類のワイヤーフレームを集めたサイト「UI Tiles」を紹介したいと思います。 シンプルなテイストのワイヤーフレームが多数まとめられており、設計するサイトに合わせ選択し活用することができそうです。 詳しくは以下 ランディングページやブログ、フォト・ビデオのギャラリーページ、カレンダー、チャット、プロフィールなど、種類が豊富。aiやPhotoshopデータといった形式があるので、使うメディアによって使い分けも可能。ベースがシンプルなので、いろいろなデザインに応用できるのも嬉しいところ。 個人・商用ともに利用可能とのこと。企画書への添付はもちろん、イメージ作成などにも場合によっては利用できるか

TOP  >  Design  >  ヴィンテージ調のロゴデザイン作成に活用できる「15 Free Vintage Logo Template Collections」 ロゴやバッジなどを制作する際にとても便利なフリーテンプレート素材は多数配布されていますが、たくさんの中からどれを選んでよいか迷ってしまうことも。今回はそんな時に参考にしたい、ヴィンテージ調のロゴデザイン作成に活用できる「15 Free Vintage Logo Template Collections」を紹介したいと思います。 Freebie: 5 Vector Insignias | Every-Tuesday アンティークな雰囲気を感じることができるロゴテンプレート、いろいろな種類がセットでダウンロードできるようになっています。 詳しくは以下 5 Vintage Labels / Insignias Vol.1 | G

TOP  >  Design  >  定番としてもストックしておきたい 魅力的なアイコンセットまとめ「700+ Free PSD Icons for Web Mockup and App UI」 さまざまなシーンで活躍してくれるアイコン。たくさん持っているほど、デザインの幅を広げてくれます。そんな中今回紹介するのは、定番としてもストックしておきたい魅力的なアイコンセットまとめ「700+ Free PSD Icons for Web Mockup and App UI」です。 [Dribbble – Bikini 60s by Sebastiano Guerriero](https://dribbble.com/shots/2232637-Bikini-60s) いろいろな種類、デザインのアイコンが多数ピックアップされ、まとめられています。気になったものを以下よりご覧ください。 詳しくは以下

TOP  >  Photoshop  >  最新のフリーpsd素材を集めた「25 New Photoshop Free PSD Files for Graphic Designers」 いろいろなデザインシーンで活用できるPhotoshop形式の素材。高いクオリティで制作されているものが多く、ダウンロードしておくと便利なもの。今回はそんな最新のフリーpsd素材を集めた「25 New Photoshop Free PSD Files for Graphic Designers」を紹介したいと思います。 Creative Agency on Behance テンプレートやUI、アイコン、テクスチャなど、さまざまな種類のpsd素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Download – Free PSD Files 水彩の塗テクス

定番素材のアイコンのデザインに差をつけるためには、ベーシックな種類だけでなく、他にはあまり見られない種類を取り入れることで個性を演出できるように。今回はそんなシーンで使用したい、アウトライン・塗りの2タイプを個性的なラインナップで揃えたアイコンセット「300 Free Icons」です。 非常に豊富な種類を取り揃えており、定番のアイコンも揃っていますが、他にはないデザインアイコンの種類が多く見られるのが特徴です。 詳しくは以下 メールや文具、ファイルなど、ビジネスシーンで多く使用する定番アイコンの他、キャラクター、フード、スポーツ、マーク、シンボルなどをラインナップ。どれもしっかりと細かい描写がなされているので、高いデザイン性を感じることができる点も魅力的です。 線で構成されたアウトラインタイプと、ベタ塗りのタイプと、同じアイコンデザインで2タイプ用意されているので、使いたいデザインエリア

ハイクオリティなデザインが多数揃ったフリーフォント&モックアップ集「46 Free Fonts and Presentation Mock-Ups Bundle」 素材自体のクオリティが高いことで、デザインの質が格段にアップすると思います。今回はそんなハイクオリティなデザインが多数揃ったフリーフォント&モックアップ集「46 Free Fonts and Presentation Mock-Ups Bundle」を紹介したいと思います。 フリーで使用可能なフォント、またモックアップ、非常にさまざまな種類・テイストのものがダウンロードできるようになっています。 詳しくは以下 フォントは、手書き風のものからアンティーク調に合わせやすそうなもの、ゴシック系、スクリプト系、個性派など、バリエーション豊富に揃っているのが特徴。またモックアップは、印刷物のビジュアルイメージからスマートフォンのモックアッ

定番から個性派まで 多彩なバリエーションに富んだフリーアイコンセットまとめ「34 Brilliant Free Icon Sets for Designers and Developers」 特にwebデザインシーンで多く使用するアイコン。いろいろな種類を持っていると、何かと重宝すると思います。そんな中今回紹介するのは、多彩なバリエーションに富んだフリーアイコンセットまとめ「34 Brilliant Free Icon Sets for Designers and Developers」です。 Dribbble – 63 Free Icons by Martin J.Berthelsen ぜひストックとしてチェックしておきたいアイコンが、定番から個性派まで種類豊富に紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Dribbble – 15

TOP  >  Font  >  最新のフリーフォントを厳選し紹介した「15 New Innovative Free Fonts for Designers」 常に新しいタイプが公開されているフリーフォント。トレンドに合わせて、いろいろな種類が展開されています。今回はそんな最新のフリーフォントを厳選し紹介した「15 New Innovative Free Fonts for Designers」を紹介したいとおもいます。 STOKED (free font) on Behance 15種の、デザイン性に優れたフリーフォントがピックアップされています。気になったものをDesigndevelopでもピックアップしましたので、以下よりご覧ください。 詳しくは以下 Jaden Typeface on Behance 一見シンプルですが、形状にこだわりが感じられるフリーフォント。定番のフォントとして

デザインに強調したい部分がある時、ECサイトなどでピックアップ情報を表示したい時などに利用すると効果が高まるバナー。自身でデザインに合わせて作ってももちろん良いのですが、今回はフリーで利用できる、魅力あふれるベクター形式のフリーデザインバナー集「30 Vector Banner Freebies」を紹介したいと思います。 Mesh banners template Vector | Free Download さまざまな形状のベクターバナーがピックアップされ、紹介されています。気になったものを以下よりご覧ください。 詳しくは以下 Wedding labels Vector | Free Download 可愛らしい女性をターゲットにしたようなテイストのバナー。子ども向けデザインにも合わせやすそうです。 Options banners Vector | Free Download 1~5まで