デザインを開発するという視点でお伝えするクリエイティブBLOG
WEB上では限定的な使い方にはなってしまいますが、フィルターのON/OFF・背景のモノクロとカラー、化粧の有り無しなど、全く同じもので異なる状況を比べるというときに便利なのが、今回紹介するスワイプでBefore/Afterを表現するスライダー「Beer Slider」です。
上記のように左右で写真が表示されて、スワイプまたはスライドで写真の表示領域を切り替えることが可能です。
詳しくは以下
最早Webデザインに欠かせない存在となってきたアニメーション。デザインに動きをつけることで、より見やすく魅力的なサイトへとクオリティアップすることも可能な魅力的なツールです。今回はそんなWebアニメーションからフローティングアクションボタンのみをまとめた「Floating Action Buttons: 20 Free Animations for Web Developers」をご紹介します。
Floating Action Buttons: 20 Free Animations for Web Developers
検索窓から何かと利用シーンの多いプラスボタンのアニメーションまで、全部で20種類ものアニメーションが集められています。その中から数点ピックアップしてご紹介しますのでご覧下さい。
詳しくは以下
(さらに…)
Webデザインに欠かせない様々なエフェクトやアニメーション。使い方次第でWebサイトを魅力的なものに仕上げてくれますが、今回紹介するのは、クリエイティブなマウスオーバーアニメーション「Stack Motion Hover Effects」です。
全部で30種類の立体的なマウスオーバーアニメーションがサンプルとして上がっており、サイトの雰囲気や印象に併せて選択することが可能です。
詳しくは以下
WEB制作ではスプリットスクリーンなどが極端な例ですが、中央線を軸に左右を大胆に振り分けて使う手法が流行の一つになっていますが、今日紹介するのは、異なるものではなく、一つのオブジェクトをミラーリングして表現できるライブラリ「Mirror Effect」です。
Mirror Effect | Demo 3 | Codrops
単純に全く同じものを出現させることもできますし、上記のように背景を切り分けて表示することもできます。いくつかのパターンが公開されていましたので以下からご覧ください。
詳しくは以下
フロントエンドエンジニアの多くの方は、自分が利用するエディタというのを決めているとは思いますが、緊急の時だったり、どうしても自分のPCが手元に無い環境でコードを書かなくてはいけないなんて事も極稀ではありますがあると思います。今回紹介するのはそんな、もしもの時のためのHTML、CSS、JSが同時に編集できるシンプルなオンラインエディタ「playcode.io」です。
この「playcode.io」非常にシンプルなツールで順番に左からコントロールパネル、HTML・CSS・Javascript、HTMLプレビューと並んでおり、結果を見ながらコーディングすることが可能です。
詳しくは以下
WEBサイトのクリエイティブのクオリティはデザインは然ることながら、どんな動きをさせるかというところでも、大きく影響がありますが、今日紹介するのはサイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」です。
「Block Reveal Effects」ではまず、はテキストや写真の出現エリアに色ベタのエリアが出現し、それがズレながら、本来描画されるオブジェクトに変わっていくというものです。
詳しくは以下
デザインのスキルアップはデザイナーにとって重要な課題。日々技術を上げるため、常にアンテナを貼っている方も多いはず。そんな中今回ご紹介するのは、webサイトデザインに関するPhotoshopチュートリアルをまとめた「50 Tutorials for Designing Website in Photoshop – Ultimate Roundup」です。
Design a Textured Outdoors Website in Photoshop
デザインの参考やスキルアップに使える、WebのUIデザインに関したチュートリアルが、50種類もまとめられています。その中から特に気に入ったものを幾つかピックアップしてご紹介しますので、ご確認下さい。
詳しくは以下
javascriptのライブラリとして人気が高い、jQuery様々なプラグインがリリースされていますが、今日紹介するのはカレンダープラグインのみを集めたエントリー「30 jQuery Calendar Date Picker Plugins」です。
Create astonishing iCal-like calendars with jQuery
jQueryを利用した様々なタイプのカレンダーが全部で30まとめられています。今日はその中からいくつかピックアップして紹介したいと思います。
詳しくは以下
デザインに質感や雰囲気を与えてくれる紙のテクスチャ。一枚背景に引くだけでデザインのイメージをガラリと変えることができます。今日紹介するのは素材感のある紙のテクスチャセット「High-Resolution Grungy Paper Textures」です。
種類こそは6種類と少ないものの、収録されているテクスチャはかなり高解像度で2592×3872ピクセルとなっています。このくらいのサイズがあるのであれば色々なシーンでりようできそうな気がします。配布されているテクスチャはFlickrにてセットで公開されていましたので、下記にスライドショーを貼り付けておきます。
詳しくは以下
イラストレータで各線は制御点が3つ （始点・中継点・終点）あり、イラストレータを覚えたての頃や使ったことが無い人はなかなか難しいものです。今回紹介する「
Illustrator Pen tool exercises」はそんなペジェ曲線を華麗に操るためのチュートリアルです。
チュートリアルはai配布されていて上記のように、チュートリアルを背景にしながら自分でペジェ曲線を書きながら進めていけるようになっていて、文章や本で見るよりも実践的に覚えることができます。チュートリアルは全部で6種類あり、星を各方法や滑らかなラインの書き方等が収録されています。難易度は低めですが、これからイラストレータを覚えたいと言う方にはかなり役立つチュートリアルだと思います。
配布しているaiのバージョンはCS, CS2 .CS3となっています。下記のリンクの「Download the AI file」の「here」からダウンロードできます。この他にもaiファイルの他にも英語のドキュメントになりますがペジェ曲線の基本記したpdfが配布されていますのでチュートリアルと合わせてどうぞ
プレゼンや、企画書など、クリエイター以外にも幅広くビジネスシーンで利用されるプレゼンテーションツール、パワーポイント。今日紹介するのはパワーポイントでの資料作成に便利な、フリーパワーポイントテンプレート集「345 Free PowerPoint templates, themes and backgrounds」です。
テーマは様々で、ビジネステンプレートから、医療業界で使えそうなもの、写真を大胆に使ったものなど様々なテンプレートが収録されており、全部で345個公開されています
詳しくは以下
写真をさまざまな表情に加工できるPhotoshopは非常に便利なソフト。プロの現場でほとんどの方が利用したことがあるのではないでしょうか？そんな中今回紹介するのは、グラフィカルな表現を可能にする写真加工チュートリアルまとめ「22 New Photo Manipulation Tutorials for Photoshop」です。
（Photoshop Tutorial: Retouching Photos in Ten Minutes or Less | Tutorials | Graphic Design Junction）
Photoshopを使ってできる、多彩な加工方法を紹介した記事がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
アイコンにはさまざまな種類があり、定番として利用できるタイプのものは持っている方は多いと思いますが、テーマに合わせたものを探しだそうと思うとなかなか大変なもの。そんな中今回紹介するのは、トラベル系のデザインに最適なアイコンセット「Tourism & Travel Icon Set」です。
観光、旅行をテーマにしたデザインで活用できる種類のアイコンが100種セットでダウンロードできるようになっています。
詳しくは以下
パンクやヘビーメタルなどのミュージックシーンでもよく利用されるガイコツのモチーフは、コアなファンも多いマークの一つではないでしょうか？今回はそんなガイコツを表現できるベクター素材をまとめた「A Collection Of Free Vector Skulls」を紹介したいと思います。
Motorhead Vector :: Vector Open Stock | vector graphics and vector art to download for free!
リアルな雰囲気のガイコツから、キュートな雰囲気のガイコツまで、さまざまな素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
紙という素材は、加工の仕方、紙質、古さなどで、様々な表情を見せてくれるため、個性というか味がでる、素材感が生きる素材の一つですが、今日紹介する「 30 Great Free Paper Backgrounds and Textures」はそんな紙を中心にした無料で使える背景素材、テクスチャ集です。
段ボールのような紙から、古びたノートのようなもの又は柄が入った者と幅広いジャンルの紙素材が用意されています。今回はいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
軽量で高機能なjavascriptライブラリjQueryですが、今回紹介するのはWEBレイアウトに使えるjQueryプラグインを集めた「15 jQuery Plugins for Better Web Page Element Layouts」です。
最近よく見かける、カラムが自動的に組み変るものだったり、文字の回りこみだったり、カラムの高さを揃えたりと様々なWEBレイアウトに効くjQueryプラグインが集められています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
