デザインを開発するという視点でお伝えするクリエイティブBLOG
フロントエンドエンジニアの多くの方は、自分が利用するエディタというのを決めているとは思いますが、緊急の時だったり、どうしても自分のPCが手元に無い環境でコードを書かなくてはいけないなんて事も極稀ではありますがあると思います。今回紹介するのはそんな、もしもの時のためのHTML、CSS、JSが同時に編集できるシンプルなオンラインエディタ「playcode.io」です。
この「playcode.io」非常にシンプルなツールで順番に左からコントロールパネル、HTML・CSS・Javascript、HTMLプレビューと並んでおり、結果を見ながらコーディングすることが可能です。
詳しくは以下
国内でもプレイステーションVRが発売され、エンターテインメントの世界でもその他業界でも注目を浴びているVR（ヴァーチャルリアリティ）の技術。今日紹介するのはそんなVRのモチーフを集めたフリーアイコンセット「Virtual Reality Icons」です。
かなりマニアックですが、VRHMDをかぶった人、手のひらをセンシングしているもの、全身をトラッキングしているものなどなどVRに関するアイコンが集められています。全部で12種類用意されており、収録されているアイコンは以下からご覧ください。
詳しくは以下
今まで様々なフォントを紹介してきましたが、今回紹介する「FreshFonts」は少し変わった作り方をしています。その制作方法とはタイトルにもあるとおり、歯磨き粉やケチャップなどを使って作られるFontです。
実際上記のような形で、書いてから取り込んで、データに起こしているみたいで、かなりリアルな感じです。現在3種類のフォントが公開されています。3つとも下記に紹介しておきます。
詳しくは以下
サイトに動きを付ける、コンテンツを限られた範囲内で最大限に見せるために利用されるスクロール。シンプルなものが取り入れられがちですが、今回紹介するのは、さまざまな動きのスクロールプラグインまとめ「12 Free Scrolling Plugins For Websites」です。
動きに特徴のあるスクロールプラグインが12種紹介されています。
詳しくは以下
デザインの質感をより高めてくれるテクスチャ。下に敷くテクスチャで大きくデザインの印象は変わりますが、今日紹介するのは、様々な質感のフリーテクスチャを集めたテクスチャ集「30 Free High Resolution Texture Packs」です。
Texture Pack 04: black by =mercurycode on deviantART
(6 Textures, 4200×2800px)
高品質なテクスチャセットが全部で30紹介されていますが、今日はその中から幾つか気になったテクスチャセットをピックアップして紹介したいと思います。
詳しくは以下
デザイン制作に欠かせないパターン素材は、デザインソフトでカスタマイズできる状態だと、制作のさまざまなシーンで利用しやすいもの。そんな中今回紹介するのが、PhotoshopやIllustatorでカスタマイズできるパターンを集めた「Ultimate Round Up of Free and Fresh Photoshop Patterns」です。
（22 Hexagon Photoshop Patterns (PAT) | Photoshop Patterns）
幾何学模様のキレイなパターンから、アイテムをモチーフにしたパターンまで、さまざまなパターン素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
CSS3は現在広く利用されているCSS 2を拡張したもので、従来のCSSでは表現が難しかったドロップ車道や、角丸など、画像に頼らずに、表現ができ、新しい表現の可能です。今日紹介するのはCSS3で作られたユーザーインターフェイスキット「CSS3 UI Kit」です。
サーチボタン、角丸ボタン、完全な円形のボタン、プルダウン、ページングなどなどユーザーインターフェイスの基本となるパーツがセットになっています。
詳しくは以下
どんなWEBサイトでも利用できるシンプルなアイコンは非常に使い勝手がよく、上手く利用さればWEB全体のクオリティも上げてくれる優れた素材です。今日紹介するのはそんな汎用性の高いミニマムなアイコンセットを集めたエントリー「Top 10 Beautiful Minimalist Icon Sets」を紹介したいと思います。
一定以上数のあるアイコンセットが集められており、一つのアイコンセットでほぼすべて事足りるようなセットが中心です。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
ついにリリースされiPhone6。ディスプレイサイズが大きくなり、さらにiPhone6 plusというワイドなサイズのバージョンも発売されたことから、非常に話題を呼んでいます。そんな中今回紹介するのは、最新のappleスマートデバイスも取り揃えた「Free download: iPhone and Apple Watch vector mockups」です。
Phone6、Phone6 plusを始め、新しい形のデバイス・Apple Watchのモックアップまで収録されています。
詳しくは以下
HTML5とCSS3、随分昔からWEB業界ではよく聞く単語ではありますが、HTML5やCSS3の実案件というのは対応ブラウザの問題から意外と少なく、本腰を入れて勉強する機会も創らないとなかなかないのが現状だと思います。今日紹介するのはフリーで利用できるHTML5+CSS3テンプレート集「15 Free HTML5 and CSS Templates」。
案件ではあまり使えないかも知れませんが、知識を仕入れるには出来上がったのを触るのが手っ取り早い方法だと思います。全部で15のテンプレートが公開されていますが、その中からいくつピックアップして紹介したいと思います。
詳しくは以下
基本的なIllustratorの使い方はスクールなどで学ぶことはできても、実践的な使い方は仕事の中で学ぶことが多いもの。そんな制作のヒントになる、使い方を手軽に学べるIllustratorチュートリアルがまとめられていましたので、紹介したいと思います。
Create a Stylish Switch Button in Illustrator | Vectortuts+
ロゴマーク制作からイラスト制作まで、さまざまなシーンに利用できるチュートリアルが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
