毎日コーディングでさまざまなコードを書くデベロッパーにとって非常に便利なスニペット。知っているだけで作業効率が格段にアップするもの。そんな方におすすめできる「30 Seconds of CSS」をご紹介していきたいと思います。 先進的な知識を多く取り込むためにも、基礎的な業務内容をいかに短縮して行っていけるかは非常に重要なポイント。デベロッパーの方はぜひ下記よりチェックしてみてください。 詳しくは以下 レイアウト、アニメーション、インタラクティビティ、その他といったようにカテゴライズされており、それぞれのジャンルに分類されたコードがわかりやすく記載されています。デモもすぐ閲覧できるようになっており、使いたい要素を探しやすいのも魅力。奇抜なものはありませんが、基本として使いたい、ぜひ知っておきたいものが揃っているので、日々のコーディングに非常に役立ってくれそうです。 コードを書く手間を短縮す

間も無く発売されるiPhoneX。販売開始を楽しみにしている人は多いのではないでしょうか。そんな中、デザインに携わるデザイナーやデベロッパーはいち早く新機種に対応するため、ディスプレイサイズや構造を知っておく必要があります。今回は、新機種iPhoneXのUIデザインのヒント集「UI Design Tips for iPhoneX」の紹介です。 全面ディスプレイになったiPhoneXは今までとは異なる点がいくつかあります。疑問を解決するためのヒントが紹介されていますのでWebデザイナー必見です。 詳しくは以下 まず第１に重要となるのはディスプレイサイズ。ここでは正しいアートボードのサイズから、ラウンド部分を考慮したマージンの取り方まで細かな数値で示してくれていますので、迷うこともなさそうです。ディスプレイサイズが変わったとなると、もちろん配置する画像解像度や見える範囲も変わるので注意しなけれ

レスポンシブ設計をスムーズにsuruレスポンシブレイアウトをテストする為のフリーツールまとめ「7 Free Tools For Testing Responsive Layouts」 現代のWebデザインに置いて欠かせない基礎設計となっている、レスポンシブレイアウト。PCとスマートフォンでの見え方の違いを手軽にチェックしたい、そんな時の手助けとなる便利なテストツールをまとめた「7 Free Tools For Testing Responsive Layouts」を今回は紹介したいと思います。 7 Free Tools For Testing Responsive Layouts | Webdesigner Depot 使いやすい全てフリーで利用できるツールが7種ご紹介されています。その中から幾つかおすすめのツールをピックアップしてまとめましたので、是非ご覧ください。 詳しくは以下 XRe

グラデーションカラーを取り入れたデザインは、現在の主流トレンドの一つとなっていますが、思うような色合いを作りだすのはなかなか難しいもの。そんな時に参考にしたい「ColorSpace」を今回は紹介したいと思います。 美しいグラデーションを簡単に生成することができるwebジェネレーターです。 詳しくは以下 基準にしたい1色を選択すると、その色を基準としたさまざまなグラデーションパターンのパレットが自動生成されます。生成パターンが非常に豊富で、それぞれのカラーコードもきちんと表示されており、非常に便利。また「gradient」メニューを選択すると、8種方向からのグラデーションパターンを確認することができます。思わずいろんな色で試してみたくなる、グラデーションの美しい色合いに魅了されそうです。 webデザインはもちろん、グラフィックデザインでグラデーションを取り入れたい、単色でどこか物足りなさを感

TOP  >  WebDesign  >  WEBデザイナーならチェックしておきたい活用できる最新素材まとめ「12 Freebies & Goodies For Web Designers」 Webデザインを行う際は、レスポンシブによる見栄えやUI設計への考慮など、さまざまな箇所に気を配らなくてはなりません。UIは日々進化しており、ユーザーが快適な使用ができるようにきちんと追いついていきたいもの。そんな方におすすめの、最新のUIキットなどがまとめられた「12 Freebies & Goodies For Web Designers」を今回は紹介します。 keyboard モックアップやWordPressのテンプレート、フォントなどがまとめられています。気になったものをいくつかピックアップしているので、下記よりご覧ください。 詳しくは以下 Resume/CV & Cover Letter |

TOP  >  WebDesign  >  Webデザイナーやデベロッパーの大きな手助けになるCSS3チュートリアル集「10 Pure CSS3 Tutorials And Examples」 CSSはWebサイト構築の上で非常に便利なものですが、今回は様々な機能でデザインを形にしてくれる、CSS3をマスターするために便利なチュートリアル「10 Pure CSS3 Tutorials And Examples」を紹介したいと思います。 How to Code a Homepage Template with HTML5 and CSS3 | Medialoot 最新のCSS3を使ったチュートリアルがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 CSS3 calc() Function – Hongkiat 新しい関数を使用して長さの計算

TOP  >  Design  >  最新トレンドのスタイリッシュなデザインアイコンまとめ「10 Fresh Icon Designs For Free Download」 情報を視覚的に分かりやすくしてくれるアイコンは、適切なものを使い分けていきたいですもの。そのためには種類豊富にストックしておくことが大切です。そんなときにあると便利なアイコンのまとめ「10 Fresh Icon Designs For Free Download」を今回は紹介したいと思います。 Free Line Icon Set for Designers (AI, EPS, SVG, PNG) さまざまなテーマで制作されたアイコンがまとめられています。気になったものをピックアップしましたので、以下よリご覧ください。 詳しくは以下 Medical icons collection Vector | Free Down

サイトテンプレートからUI設計、アイコン、出来上がったデザインを実際に見せるためのモックアップに至るまで、WEBサイトを制作するにあたって、必要となる材料や要素は数多く存在します。そんな中今回紹介するのは、デザインを進めるにあたって必要不可欠となるツールをフリーでダウンロードできるサイト「UIPIXELS」です。 iPhone 6s Plus Mockups | Free PSDs & Sketch App Resources for Designers – uipixels サイトの構成を決めるテンプレートから細かなパーツまで、制作する中で活躍してくれるであろうアイテムが網羅されているのが、とても魅力的なサイトです。サイトでダウンロードできる素材をいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 24 Flat Mockups Free | Free PSDs &

TOP  >  WebDesign  >  クリエイティブな管理画面のためのインスピレーション集「20 Inspirational Dashboard Designs」 CMSなどのシステムの管理やユーザーが自らの情報を操作・管理を行う、管理画面/ダッシュボード。基本的にフロントでは表示されないため、デザインに拘らない場合も多いのですが、今日紹介するのクリエイティブな管理画面のためのインスピレーション集「20 Inspirational Dashboard Designs」です。 iPad Dashboard 管理画面/ダッシュボードのデザイン事例が全部で20集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Story Book シンプルでクリアなダッシュボード Dashboard Web App UI: Job Summary

TOP  >  WebDesign  >  WEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」 WEB上のユーザーインターフェイスの中で行われるちょっとしたアニメーションに驚きと感動をするということがたまにありますが、インターフェイスに即したアニメーションはWEBをより良いものにしてくれます。今日紹介するのはWEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」です。 Menu open / tick / close 全部で36ものアニメーションが原文ではまとめられていましたが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Sendingmail メールのアイコンが変形して紙飛

TOP  >  Design  >  クオリティの高いデザイン素材を多数そろえた「50 Free Resources for Web Designers for September 2016」 主流のデザインを手掛けるデザイナーにとって、常に最新の素材を手に入れることはとても重要なこと。今回はそんなシーンでチェックしておきたいまとめ「50 Free Resources for Web Designers for September 2016」を紹介したいと思います。 Avana – minimal portfolio template build with Bootstrap – Designstub クオリティの高いデザイン素材が多数揃っており、どれも活用してみたくなるものばかり。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Buffalo Script

ワイヤーフレームづくりに便利なキット40「40 Free Wireframe Templates for Mobile App, Web and UX Design」 本制作をする前にワイヤーフレームで制作して、UIやUXなどをクライアントと確認するというのはWEB業界では慣習的になっていますが、今回紹介するのは、そんなワイヤーフレームづくりに便利なキットを集めたエントリー「40 Free Wireframe Templates for Mobile App, Web and UX Design」です。 Carbon Material Design eCommerce Wireframe Kit (PSD & Sketch) WEBからiOS、AppleWatchまで様々なタイプのワイヤーフレームが紹介されています。今日はその中から特に気になったワイヤーフレームをピックアップして紹介したい

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

どんな写真でも、優秀なフィルターを用いることで、それらしい写真が撮影できるInstagramは国内を始め世界中で利用されていますが、今日紹介するのはCSSでInstagramで使われているフィルタ効果を実現する「CSSgram」です。 CSSは非常に軽量で、1kb以下のコードで、様々な種類のフィルタ表現がブラウザ上で可能になります。その数は全21種類にも及びます。 詳しくは以下 実装方法は非常に簡単で、CSSgramのライブラリをダウンロード後、読み込ませ、Class名にフィルタ名を反映するだけで実現可能です。また、Sassでも実装可能になっています。フィルタの名前も、Instagramのフィルタ名称に揃えているようで、いつも利用している方は、名称だけでピンとくるのではないでしょうか？ 一点注意が必要なのは、対応ブラウザ、CSSFiltersとCSS Blend Modesを利用しており、

TOP  >  WordPress  >  スモールビジネスのサイト制作に最適なフリーwordpressテーマ集「12 Free Small Business WordPress Themes」 少数精鋭でありながらも、質の高いサービス提供を行っていくスモールビジネスというスタイルが今定着しつつある中、アピールするためのwebサイト制作も必須となってきています。今回はそんなシーンに最適なフリーwordpressテーマ集「12 Free Small Business WordPress Themes」を紹介したいと思います。 Ravel WordPress Theme 情報を的確に、シンプルに伝えることができるテーマが揃っており、どれも取り入れてみたくなるものばかり。きになったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Gateway | A Free Mobile

どんどんと新しい素材が配布され続けており、常にチェックされている方も多いのではないでしょうか？そんな中今回紹介するのは、デザイン性の高いフリー素材集「Freebies & Goodies For Web Designers」です。 Free Perspective Website Mockup | ZippyPixels アイコンからUI・モックアップまで、いろいろなタイプの素材がまとめられています。気に入ったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Amenities – 50 misc PSD icons – Freebiesbug シンプルなアイコンセット。塗りタイプとラインライプの2種が展開されています。使いやすいデザインが特徴です。 Renegade: Vintage Photo Filter Actions – ByPeople ヴィンテージ調の写真

サイトの仕様をグレードアップさせるjQueryプラグイン「Top 7 Free jQuery Plugins to Improve Your Web Design」 さまざまなプラグインがフリーで配布されており、取り入れてみることで今までの仕様よりもクリエイティブ性をアップさせることができます。今回はそんなjQueryプラグイン「Top 7 Free jQuery Plugins to Improve Your Web Design」を紹介したいと思います。 Cropper 7種という厳選された数ですが、どれも使ってみたくなるプラグインばかり。気になったものをピックアップしましたので下記よりご覧ください。 詳しくは以下 Swipebox | A touchable jQuery lightbox シンプルですが、印象的なライトボックスのプラグイン。写真を印象的に見せたい時におすすめのツール

TOP  >  Design  >  活用することでデザインをより魅力的に演出可能な9つのResourceまとめ「9 Fresh Resources For Web Developers」 通常のデザインだけでももちろん魅力的な演出は可能ですが、いろいろな機能を取り入れることにより、もっと魅力的なデザインに仕上げることができるのではないでしょうか？今回はそんなシーンにおすすめな9つのResourceまとめ「9 Fresh Resources For Web Developers」を紹介したいと思います。 GitUp デザインをより分かりやすく、さらに作りやすくしてくれる個性的なResourceがまとめられています。 詳しくは以下 toubou91/percircle · GitHub パーセンテージやキーワードなどを円形のモチーフで動きを付けて演出することができます。目立たせたい数値やワー

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

アイコンには実にいろいろな種類があり、デザインしているもののテイストによって使い分けていると思いますが、今回は200種の細めラインで構成されたアイコンセット「200 Nanoline Icons」を紹介したいと思います。 非常に細い、繊細なラインで描き出されたアイコンが200種、セットでフリーダウンロードできるようになっています。 詳しくは以下 種類としては、定番のレターアイコン、矢印、マップピン、吹き出し、天気などの他、UFOやカトラリー、食べ物、飲み物、動物といった独自の世界観のアイコンも収録されています。比較的定番の種類が多いので、基本のアイコンとしてストックしておけば、いろいろなシーンで活躍してくれそうです。 まずは基本となるベーシックな、こんなタイプのアイコンは持っていて損はないはず。ベースとなるデザインも以外に選ばず、使いやすいタイプのアイコンではないかと思いますので、こんなア