フロントエンドエンジニアの多くの方は、自分が利用するエディタというのを決めているとは思いますが、緊急の時だったり、どうしても自分のPCが手元に無い環境でコードを書かなくてはいけないなんて事も極稀ではありますがあると思います。今回紹介するのはそんな、もしもの時のためのHTML、CSS、JSが同時に編集できるシンプルなオンラインエディタ「playcode.io」です。
この「playcode.io」非常にシンプルなツールで順番に左からコントロールパネル、HTML・CSS・Javascript、HTMLプレビューと並んでおり、結果を見ながらコーディングすることが可能です。
詳しくは以下
ベクター形式の素材は非常に使い勝手が良く、特にイラストレーターを使用している方にとっては重宝する存在ではないでしょうか?今回はそんなベクター形式のイラストフリーデータをまとめた「15 + Free Quality Vectors To Download」を紹介したいと思います。
Free Vectors: Laptop Icons Set | Business
柔らかいタッチで描かれた、フリーで使用できるベクターイラストがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインを制作する際、行き詰まる事は誰でも経験した事があると思います。そんなときに新たな刺激を与えてくれるインスピレーション集が今回紹介する「Creative Graphic Design for Advertisement」です。
様々な表現のグラフィックが紹介されていて、タイトルの通りおもに広告のデザインを集めてきているみたいです。海外のデザインなのでなかなか日本でデザインしているとなかなかできないデザインが多いですが、だからこそインスピレーションを得るにはぴったりなデザイン集だと思います。いくつか紹介されていますが、今回はその中からいくつか気になったグラフィックデザインをいくつか紹介したいと思います。
詳しくは以下
繊細な素材感や風合いを表現するために高度な技術やセンスが必要とされる”羽”ですが、いざ素材として作成しようと思うとなかなか大変なもの。そこで今回は、鳥や蝶などさまざまな羽を収録したphotoshopブラシまとめ「44 Free Wing Photoshop Brush Sets」を紹介したいと思います。
(Wings – Photoshop Brushes by *ruby-proudfoot on deviantART)
さまざまな質感・種類の羽を描くことができるブラシが収録されており、デザインのクオリティをアップさせるのにもとても便利なツールとして活用できそうです。いくつかピックアップしてみましたので、下記よりご覧ください。
常に最新のデザインのものが発表され続けているフリーフォント。デザイン性の高いものも非常に多く、日々チェックされている方も多いのではないでしょうか?そんな中今回紹介するのは、最新のデザイン性の高いフリーフォントを集めた「50 Best Free Fonts Of 2015」です。
非常に魅力的なデザインのフォントが多数ピックアップされ、まとめられています。気になったものを以下で紹介しておりますので、まずは御覧ください。
詳しくは以下
Webサイトは、掲載内容や用途によって様々な表現をする必要があります。デザイン制作の効率化にも繋がるテンプレートはそんな時にとても役に立つ素材の一つ。そんな中今回は、テイストの異なるWebサイト用PSDテンプレート「12 Free High Quality Website Template PSDs To Download」を紹介します。
Freebie PSD: Perth – A Free Flat Web Design.
多種多様なPSD形式のテンプレートがまとめられてます。その中から幾つか気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
回線環境も機器も整ってきて、快適な環境であればほぼストレス無くWEBを閲覧できますが、本当に大きなデータを読み込ませたり、通信環境も考慮すると必要になってくるのがローディングです。ユーザーの待ち時間のストレスを緩和してくれるものですが、今日紹介するのはクリエイティブなローディングが簡単に実装できるjs「Creative Loading Effects」です。
幾つかのエフェクトが予めセットされており、それぞれのエフェクトを指定することで、簡単にローディングを実装することが可能です。幾つかエフェクトの種類についてキャプチャがありますので下記からご覧ください。
詳しくは以下
完成したデザインを実際に使用するメディアやアイテムなどに当てはめることで、製品になった時のイメージが非常につかみとりやすく、またクライアントなどに伝えやすくなります。今回はそんなシーンで活用したい、イメージビジュアルなどの作成に便利なフリーモックアップ集「11 Free New PSDs & Actions For Mock-ups」を紹介したいと思います。
11 Free New PSDs & Actions For Mock-ups | SmashingApps.com
11種の、高いクオリティが感じられるモックアップ素材が11種まとめられ、紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
写真からイラストレーターに落とし込むときは皆さんどういう風に書き出しているでしょうか、光と影をうまくつかまないとなかなかうまくいかずチープな物になってしまうことが多いです。今日紹介するのはイラストレーターで人物を書き出していくときのチュートリアル「
Beautiful Vector Illustration」です。
光と影をどうつかめば良いのか、何処の部分のライティングを押さえればうまく立体的に見えるのかなど、手順を交えて紹介してくれています。いきなりは難しいかもしれませんが、がんばれば上記のようなグラフィカルな人物を制作することができます。
詳しくは以下
デザイナーは、トレンドとなる要素を取り入れるため、新しく発表・配布された素材はチェックしておきたいところ。今回はそんな最新のリソースを集めた「What’s new for designers, August 2015」を紹介したいと思います。
Free Font Intro Rust by Fontfabric | Font Squirrel
参考サイトや、素材ダウンロードサイト、フォントからUIまで、多彩なジャンルのリソースがピックアップされています。
詳しくは以下
デザインフォントは、制作物をよりクリエイティブに見せてくれる要素の一つでもあり、選定がデザインの良し悪しを左右するほど重要なものとなってきます。今回はそんなクリエイティブなデザインを作り出せる12種のフリーフォントまとめ「12 Super Fresh Free Fonts for Designers」を紹介したいと思います。
個性的なもの、シンプルで洗練された雰囲気を演出できるものなど、厳選された12種のフォントが紹介されています。
詳しくは以下