Sketchのデザインリソースがダウンロードできたりまとめられているサイトのまとめ

Read Article

Sketchのデザインリソースがダウンロードできたりまとめられているサイトのまとめ

Sketchのデザインリソースをダウンロードできたり、様々なところで配布・公開されているものをまとめているサイトのまとめです。中には素材に限らずちょっとしたテクニックやチュートリアルを紹介したり、便利なツールやプラグインの紹介をしているサイトもあるので、普段からSketchを多用している人はもちろん、これから使ってみようと思っている人もぜひチェックしてみてください。

  • Material
slickのカレントクラスを利用した実装サンプル

Read Article

slickのカレントクラスを利用した実装サンプル

手軽にカルーセルを実装できるjQueryプラグイン「slick」には、現在表示されているスライド(表示の仕方やオプションの指定によって付与の対象となる位置は変わります)に対して`.slick-current`というclassが付与される作りになっており、これを利用することでCSSを少し追記するだけでもいろいろな見せ方が可能です。そこで今回は手軽にできて且つ個人的にも利用することが多い実装サンプルを…

  • Tips
CSSで実装するオーバーレイ表示時のエフェクトサンプル 10

Read Article

CSSで実装するオーバーレイ表示時のエフェクトサンプル 10

初期表示では非表示になっているナビ表示時やモーダル表示時の背景などで利用されるオーバーレイを表示する際のエフェクトサンプルを自分用にほしくて作ったのでシェアします。すべてCSSを使って実装しているので、カラーや透過率などのデザイン的な部分はもちろん、表示されるスピードやタイミングについてもCSSで調整可能です。また、全体的にシンプルで使いやすいもの中心なのでそのまま利用するだけでなく、いずれかをベ…

  • Tips
CSS(一部SVGも使用)で作成されたユニークなローディングアニメーション 15

Read Article

CSS(一部SVGも使用)で作成されたユニークなローディングアニメーション 15

見栄えからアニメーションまで基本的にCSS(一部SVGも使用)を使って作成されているユニークなローディングアニメーションを、CodePenにアップされているデモから紹介します。ローディングはそんなに長い時間表示させることは少ないですし、自分の場合はサクっと汎用的なシンプルなデザインのものを実装することがほとんどですが、こういった部分まで拘りたいとかちょっと面白いアニメーション付けたいってときに参考…

  • Tips
デザインするなら覚えておいて損はない、様々なデザインフリー素材を配布している「TopeconHeroes」プロデュースサイト

Read Article

デザインするなら覚えておいて損はない、様々なデザインフリー素材を配布している「TopeconHeroes」プロデュースサイト

シルエット・ピクトグラム・吹き出し・アイコン・パターン・リボンなど、デザイン制作時に役立つ様々なフリー素材を配布している「TopeconHeroes」プロデュースの各素材サイトをご紹介します。いくつかのサイトは以前にもこのブログでご紹介させてもらいましたが、他にも便利な素材サイトが沢山公開されており、いずれも規約内であれば基本的に報告等も必要なく商用利用も可能で、さらに配布形式・サイズ・カラーなど…

  • Material
npmでインストールされているパッケージを、npm-check-updatesでまとめてアップデートする方法

Read Article

npmでインストールされているパッケージを、npm-check-updatesでまとめてアップデートする方法

`package.json`に記載されているパッケージをアップデートしようと思ったとき、使用しているパッケージがひとつふたつならともかく、それらが数十個とかになってくるとそれぞれ行っていくのは面倒です。その際に便利なのが「npm-check-updates」というパッケージで、これを使用することで簡単に各パッケージの更新情報の確認や`package.json`の更新を行うことができます。

  • Services & Resource
ボタンにユニークなホバー・クリックエフェクトを付けたいときに参考になるエフェクトサンプル 10

Read Article

ボタンにユニークなホバー・クリックエフェクトを付けたいときに参考になるエフェクトサンプル 10

近年多くのサイトで採用されているパッと見がシンプルなボタンデザインでも、ホバーやクリックぐらいは少しユニークな感じにしたいと思ったときに参考になりそうなエフェクトをCodePenにアップされているデモから紹介します。そのまま参考にさせてもらうだけでなく、さらに自分なりにアレンジを加えてみたり、あとは紹介しているものを組み合わせてみても面白いエフェクトができそうです。

  • Tips
NxWorldをリニューアルしました − 2017

Read Article

NxWorldをリニューアルしました − 2017

普段からブログを見てくれている方やTwitter・FacebookといったSNSでフォローしてくれている方は気付いてくれた方も多いですが、先日NxWorldをリニューアルしたので、簡単にではありますが自分用の備忘録も兼ねて変更点などを紹介しようと思います。これまでの感じが特別嫌になったわけでもないのでデザインや全体な雰囲気などはそこまで大幅に変更しているわけではないですが、いろいろと細かい部分で変…

  • Blog

Close the search window,
please press close button or esc key.