TOP  >  WEBツール

Tag : WEBツール

2018年06月30日

WebデザインをオンラインでサポートしてくれるCSS作成オンラインツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」

Webデザインを構築するのに欠かせないCSS。基礎からアニメーションなどの特殊な効果まで、様々なことが行なえます。今回ご紹介するのは、そんなCSS構築の作業を手助けしてくれる、便利なWebツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」です。

40-free-web-based-tools
Palettes | Flat UI Colors 280 handpicked colors ready for COPY & PASTE

オンライン上で手軽に様々な効果や設定を試し、導入することができるツールが40種類紹介されています。その中から幾つかおすすめのツールをピックアップしましたのでご覧ください。

詳しくは以下

40-free-web-based-tools3
Clippy — CSS clip-path maker
Clippyは画像を切り抜くフレームの形を自由に調整することができるWebツールです。星や丸などベースとなる図形を27種類の中から選ぶことが出来、自由に編集できます。
 
 
 
40-free-web-based-tools1
CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs
トレンドのグラデーションをCSSで表現できるWebツールです。背景にグラデーションを使いたいときなど、大きい面積でグラデーションを取り入れたいときに。
 
 
 
40-free-web-based-tools2
Trianglify.io · Low Poly Pattern Generator
流行のポリゴングラフィックをCSSで表現するためのツールです。目の細かさや角度、色味などをカスタマイズでき自由度も高いです。
 
 
最適なツールを利用することで、クオリティの高いコーディングを短時間で完結することができます。サイトには他にも活用する機会の多いWebツールが多数紹介されていますので、興味をお持ちになられた方は是非下記リンク先よりご覧になってみてください。

40 Free Web-Based Tools & Apps for Working With CSS

続きを読む
このエントリーをはてなブックマークに追加
2017年08月10日

遠隔での仕事もスムーズに!リモートワークに最適なWEBツールをまとめた「Remote Starter Kit」

近年ネットワークの発達により、様々な障壁がクリアされ、会社に来て仕事をするということが一部では当たり前では無い世界がやってこようとしています。リモートワークの方法論など話題になり、出社せず自宅に居ながら仕事をするというスタイルが認知されつつあります。そんなリモートワークはデザイナーやクリエイターの方にはより、身近な働き方で実際そのような働き方をしている方も少なからずいるのではないでしょうか?今回ご紹介するのはそんな遠隔とのやりとりで仕事を行う、リモートワークに最適なWEBツールをまとめた「Remote Starter Kit」です。

remore

さまざまな視点から集められたWEBツールはリモートワーカーだけでなく、他の働き方をメインとする方の業務効率化にも最適なものばかり。今回はその中からオススメのツールを3つご紹介しますので、ご覧ください。

詳しくは以下
(続きを読む…)

続きを読む
posted 08:30  |  
Category: Design , Tool , WebService   
このエントリーをはてなブックマークに追加
2010年08月11日

CSS3を利用するときに役立つWEBツール6選「Six Useful CSS3 Tools」

徐々に利用され始めてきているCSSの新しい規格CSS3。現状のCSSでは、不可能だった表現がコードのみで可能にしてくれる次世代の規格ですが、今回紹介するのはCSS3を利用してコーディングしていく、または勉強するのに役に立つWEBツールを集めたエントリー「Six Useful CSS3 Tools」。


CSS3 Button Maker

数値を変えてデザインを確かめていけるものから、グラデーション表現の補助ツールなど様々なWEBツールがまとめられていました。以前Designdevelopで紹介したものもありますが、順に紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:08  |  
Category: WebDesign , WebService   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2010年02月02日

ポートフォリオをデザインするためのインスピレーション集「50 Inspiring Portfolio Designs」

デザイン業に関わらず、WEBの一つの使い方として、自分達はどんなことをやっているのか?どんな事をやってきたのかを伝えるポートフォリオというものがありますが、多くの場合中身ももちろんサイト自体のクオリティも見られます。今日紹介するのはポートフォリオをデザインするためのインスピレーション集「50 Inspiring Portfolio Designs」です。

portfolios01
Notorious Design

様々なかたちのポートフォリオのデザインが集められています。今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:06  |  
Category: WebDesign   
tag: 
2013年07月18日

25種のグランジテクスチャコレクション「Download 25 Free Colorful Grunge Textures」

web上で多数配布されている無料テクスチャ素材。デザインの幅をどんどんと広げていくためには、是非多くの素材を確保しておきたいものです。今回はそんな素材コレクションにおすすめのグランジテクスチャコレクション「Download 25 Free Colorful Grunge Textures」を紹介したいと思います。

vintage

ニュアンスの違うグランジテイストのテクスチャ素材が25種類セットになり、フリーでダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:47  |  
Category: Design   
2012年01月02日

コミック調のラフなフォントまとめ「A Collection of High Quality Free Comic Fonts」

デザイン制作に欠かすことができないフォントにはさまざまな種類が存在しており、制作したいテイストに合わせた選定が非常に重要です。そんな中今回紹介するのは、ラフなタイプのデザインに活用したい、コミック調のフォントまとめ「A Collection of High Quality Free Comic Fonts」です。


DK Harrumph font by David Kerkhoff – FontSpace

海外のコミックなどで見かけるような、味わいのあるフォントがたくさんまとめられています。気になったものをいくつかピックアップしてみましたので以下よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:40  |  
Category: Font   
2012年01月22日

10pxで様々なものを表現するミニピクセルアイコンセット「Bijou」

WEBを制作にあたり便利な素材アイコン。一つ一つアイコンを制作するのはとても大変で、ピクセルアート的なピクトグラムであれば一層時間がかかります。今日紹介するのは10pxで様々なものを表現するミニピクセルアイコンセット「Bijou」です。

アイコンはすべてpngで配布されており、さらにありがたいことに、ソースファイルのpsdも用意されていますので、オリジナルのアレンジを加えることも可能です。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:37  |  
Category: Design , Photoshop , WebDesign   
2008年11月27日

230本収録!マーカーのベクターデータ集「230 Marker Illustrator Brushes」

以前Designdevelopの「商用化!106+105の水彩イラストレーターブラシ「Delicious Water Color Illustrator Brushes」」という記事で、水彩のイラストレーターブラシを紹介しましたが、今日紹介する「230 Marker Illustrator Brushes」はマーカーを再現したイラストレーターブラシを230本収録したイラストレーターのブラシセットです。

様々なマーカーが準備されていますので、かなりコアなブラシかも知れませんが、探していた人にとってはこの上無いものだと思います。サンプルを下記に貼り付けておきます。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:48  |  
Category: Design , vector   
tag: Design vector
2014年04月30日

ダーク系カラーベースのUIキット「DARKY UI FRAMEWORK」

webサイトやスマートフォンサイトをデザインするには、設計から制作までどうしても時間がかかってしまうもの。さらに高いデザインクオリティを求められると、さらに制作時間を要すると思います。今回はそんなシーンに是非利用したいUIキット「DARKY UI FRAMEWORK」を紹介します。

darky1

ブラック・グレーのダーク系カラーをベースにした、フラットデザインのさまざまなUIがセットになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2015年03月16日

うろこのような皮膚を表現できるPhotoshopブラシを集めた「A Collection Of Free Scale Brushes For Photoshop」

架空の動物ドラゴン、また蛇やトカゲなどの爬虫類には、まるでうろこのような皮膚で体が覆われているといった特徴があります。今回はそんな皮膚を表現できるPhotoshopブラシを集めた「A Collection Of Free Scale Brushes For Photoshop」を紹介したいと思います。

skin1
Dragon Scale custom brush by KeithSeymour on DeviantArt

ボコボコと美しく並ぶ皮膚の表情を簡単に描き出すことができるブラシが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Photoshop   
2012年08月22日

定番として活躍する ホームアイコン集「Naldz Graphics 4 25 Beautiful Sets of Home Icon」

webで多様する素材の一つ・家の形をモチーフにしたホームアイコンは、さまざまな場面で重宝する便利なアイテムです。そんな中今回紹介するのは、定番ストックとしてさらに追加しておきたい、ホームアイコン集「Naldz Graphics 4 25 Beautiful Sets of Home Icon」です。


Home Folder icon by ~Nachetegr on deviantART

詳しくは以下

(続きを読む…)

続きを読む
posted 09:41  |  
Category: Design   
2014年03月19日

写真に手軽にニュアンスを加えられるPhotoshopアクション「14 Time Saving And Free Photoshop Actions For Designers」

Photoshopでは写真にいろいろな加工を施すことができますが、なかなか思い通りのイメージに仕上がらない時もあるのではないでしょうか?そんな中今回紹介するのは、写真に手軽にニュアンスを加えられるPhotoshopアクション「14 Time Saving And Free Photoshop Actions For Designers」です。

action0319_1
+PSD – #006 by MixColors on deviantART

ヴィンテージ調から、写真をよりキレイに美しく見せてくれるものまで、いろんなパターンのアクションが紹介されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:04  |  
Category: WebService   
2015年08月06日

自身で一から作り上げることができるデザインチュートリアルまとめ「38 Best Design Tutorials for Learning Sketch 3」

1つのデザインを完成させるためには、多くの素材の組み合わせが必要になってきます。フリーで配布されているものも多数ありますが、時には自分で作らなくてはいけない、オリジナル性を求められるシーンに遭遇することもあるのではないでしょうか?今回はそんな時に参考にしたい、自身で一から作り上げることができるデザインチュートリアルまとめ「38 Best Design Tutorials for Learning Sketch 3」を紹介したいと思います。

vector_tu0807_3
iOS Design using Sketch. Part one: iOS Navigation Bar – YouTube

アイコンやイラスト、UI、アニメーション、ツール類など、多彩なチュートリアルがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る