デザインを開発するという視点でお伝えするクリエイティブBLOG
Webデザインを構築するのに欠かせないCSS。基礎からアニメーションなどの特殊な効果まで、様々なことが行なえます。今回ご紹介するのは、そんなCSS構築の作業を手助けしてくれる、便利なWebツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」です。
Palettes | Flat UI Colors 280 handpicked colors ready for COPY & PASTE
オンライン上で手軽に様々な効果や設定を試し、導入することができるツールが40種類紹介されています。その中から幾つかおすすめのツールをピックアップしましたのでご覧ください。
詳しくは以下
Clippy — CSS clip-path maker
Clippyは画像を切り抜くフレームの形を自由に調整することができるWebツールです。星や丸などベースとなる図形を27種類の中から選ぶことが出来、自由に編集できます。
CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs
トレンドのグラデーションをCSSで表現できるWebツールです。背景にグラデーションを使いたいときなど、大きい面積でグラデーションを取り入れたいときに。
Trianglify.io · Low Poly Pattern Generator
流行のポリゴングラフィックをCSSで表現するためのツールです。目の細かさや角度、色味などをカスタマイズでき自由度も高いです。
最適なツールを利用することで、クオリティの高いコーディングを短時間で完結することができます。サイトには他にも活用する機会の多いWebツールが多数紹介されていますので、興味をお持ちになられた方は是非下記リンク先よりご覧になってみてください。
近年ネットワークの発達により、様々な障壁がクリアされ、会社に来て仕事をするということが一部では当たり前では無い世界がやってこようとしています。リモートワークの方法論など話題になり、出社せず自宅に居ながら仕事をするというスタイルが認知されつつあります。そんなリモートワークはデザイナーやクリエイターの方にはより、身近な働き方で実際そのような働き方をしている方も少なからずいるのではないでしょうか？今回ご紹介するのはそんな遠隔とのやりとりで仕事を行う、リモートワークに最適なWEBツールをまとめた「Remote Starter Kit」です。
さまざまな視点から集められたWEBツールはリモートワーカーだけでなく、他の働き方をメインとする方の業務効率化にも最適なものばかり。今回はその中からオススメのツールを3つご紹介しますので、ご覧ください。
詳しくは以下
(さらに…)
徐々に利用され始めてきているCSSの新しい規格CSS3。現状のCSSでは、不可能だった表現がコードのみで可能にしてくれる次世代の規格ですが、今回紹介するのはCSS3を利用してコーディングしていく、または勉強するのに役に立つWEBツールを集めたエントリー「Six Useful CSS3 Tools」。
数値を変えてデザインを確かめていけるものから、グラデーション表現の補助ツールなど様々なWEBツールがまとめられていました。以前Designdevelopで紹介したものもありますが、順に紹介したいと思います。
詳しくは以下
基本的なIllustratorの使い方はスクールなどで学ぶことはできても、実践的な使い方は仕事の中で学ぶことが多いもの。そんな制作のヒントになる、使い方を手軽に学べるIllustratorチュートリアルがまとめられていましたので、紹介したいと思います。
Create a Stylish Switch Button in Illustrator | Vectortuts+
ロゴマーク制作からイラスト制作まで、さまざまなシーンに利用できるチュートリアルが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
ユーザー情報を登録するためのフォームに必ず必要になるのが、入り口となるサインインのデザイン。シンプルな機能面の箇所だけに、味気ないシンプルなデザインに偏ってしまいがちではないでしょうか。今回はそんな状況を改善できる、PSDで制作されたサインイン・サインアップフォーム素材をまとめた「Free Sign-In and Sign-Up PSD Files」を紹介したいと思います。
Classic Login Form | Design Kindle
シンプルなフォームから、サイトのデザインに合わせて使いやすいさまざまなフォーム素材が多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
料理の湯気だったりタバコの煙だったり、様々なシーンで演出的に使われる煙。今回紹介するのはphotoshopで使える煙ブラシセット集「350+ Smoke Brushes for Photoshop」というエントリーです。
様々なタイプの煙を表現したphotoshopブラシが紹介されています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
普段私たちが見ているサイト。それを構成するHTMLはこの数十年のうちに大きく発展をしてきました。開発されたプログラミング言語は膨大であり、追いかけることも一苦労。わからないことを検索するのも非常に手間がかかります。そんなときに活躍してくれる「Interactive HTML Cheat Sheet」を紹介していきたいと思います。
目的のHTMLを簡単に検索することができる便利なチートシートになります。
詳しくは以下
CSS3は現在広く利用されているCSS 2を拡張したもので、従来のCSSでは表現が難しかったドロップ車道や、角丸など、画像に頼らずに、表現ができ、新しい表現の可能です。今日紹介するのはCSS3で作られたユーザーインターフェイスキット「CSS3 UI Kit」です。
サーチボタン、角丸ボタン、完全な円形のボタン、プルダウン、ページングなどなどユーザーインターフェイスの基本となるパーツがセットになっています。
詳しくは以下
アイコン素材はデザインの感覚を揃えて利用すれば、サイトの統一感、ユーザーインターフェイスの精度など向上させてくれます。今日紹介するのはまとめて利用できるレトロポップな170個収録のビジネスアイコンセット「170 Retro Business Icons」です。
上記の様なポップでレトロな温かみのあるデザインテイストでビジネスに関するアイコンが全部で170個収録されています。収録されているアイコンセットは以下からご覧ください。
詳しくは以下
仕事をしていてファイルの転送は自社でサーバーを持っていなかったりすると、WEBでのファイルのやり取りやバックアップは相当窮屈な感じがします。無料のオンラインストレージは多々あるものの容量の問題や転送料量に縛りがあったりして、なかなか無料で快適にと言うわけには行きません。そこで今回紹介するのは最大50Gまで使える無料オンラインストレージ「ADrive – Online Storage & Backup」です。
50Gという大容量でなおかつ無料という好条件は、国内外探してもはなかなか無いサービスだと思います。
詳しくは以下
Webやグラフィックデザインを手がけるデザイナーにとって、時間短縮や作業効率はとても重要な課題です。そんな時に役に立ってくれるアイテムが今回紹介する、豊富に揃ったアイコンやイラストのベクターセット「25 Flat Design Freebies You Should Download」です。
Shopping round icons set Vector | Free Download
様々なジャンルのベクターデータが揃っている中から、いくつか気になったものをピックアップしてみました。
詳しくは以下
(さらに…)
webデザインは無限の可能性を持っており、日々新しい仕様やデザインが発表されています。様々なデザインを見比べ勉強することが新たなアイデアを生み出すための近道ではないでしょうか？そんな多彩なデザインの中から、シングルページで情報を分かりやすく伝えているサイトまとめ「63 Fresh and Creative Single Page Website For Design Inspiration」を紹介いたします。
スクロールもなく見たままの1ページで構成されたサイトから、1ページという空間を上手く利用した見やすいサイトまで、さまざまなサイトが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
スマートフォンやPC、タブレットなどそれぞれに合わせたUIデザインやWebデザインから、名刺やポスターなどの紙媒体まで、デザインといってもその形は様々です。今回紹介するのは、デザインのイメージを掴みたい時に役立つフリーモックアップテンプレート「20 Free PSD Mockups You Must Download」です。
Free Minimalistic Phone Mockups for Your Presenations
WebデザインやUIだけでなく様々な分野のモックアップが紹介されています。
詳しくは以下
