この記事では、Web制作が快適に捗る、便利な最新オンラインツールをまとめてご紹介しています。 新型コロナウイルスによる影響で、在宅によるリモートワークが増えたことで、誰かと一緒になにかを行う、コラボレーション関連ツールの公開が多くなっています。 その他にも面倒な作業をワンクリックで完了させる、知っておくと便利なジェネレーター系ツールや配色リソースなどが揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. デザインコレクション 2. Web制作便利ツール 3. 配色ツール 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ デザインコレクション、UIキット Magma St
無駄な損失が多いPNG画像を最適化し、画像品質の穏やかな部分を利用して、ファイルサイズを大幅に軽量化するmacOS対応の無料アプリを紹介します。 アプリの性質上、得意な画像と不得意な画像がありますが、ほとんどがファイルサイズ半分以下に軽量化されました。 Crunch -GitHub Crunchで最適化した画像 Crunchのインストール・使い方 Crunchで最適化した画像 Crunchで最適化する際の得意な画像と不得意な画像を見てみましょう。 「DSSIM類似スコア」は、0に近いほど画像が類似している値です。 ※DSSIMは人間の知覚をシミュレートして、画像の類似度を比較するツールです。 元画像（size: 325.6 KB） 最適化した画像（size: 124.3 KB） DSSIM類似スコア: 0.001481 Crunchの得意なタイプの画像です。 目で感知できない部分を減少させ
日本の伝統や文化、四季の風物詩をピクトグラムで表現したアイコン素材を紹介します。 配布中止になっていたのですが、今回当ブログで再配布することになりました。作者様に感謝です！ アイコンのフォーマットは、2種類。 .png（透過PNG） .psd（シェイプ） アイコンは日本人に馴染みのある日本の伝統や文化、四季の風物詩がシンプルにデザインされています。.psdのシェイプは、サイズやカラーを変更することもできます。 日本の風習を伝える100のアイコン アイテム100種類は、下記の通り。 お正月 お年玉 年賀状 餅つき 成人式 節分 梅 お雛様 卒業式 ランドセル 桜 鯉のぼり 菖蒲 てるてる坊主 七夕 お中元(お歳暮) ガリガリ君 金魚すくい 朝顔 線香花火 うなぎ お墓参り 稲 松茸 紅葉 お月見 七五三 ゆず こたつ マスク 宝くじ 大掃除 除夜の鐘 厄払い 結婚式 法事 運動会 上履き お
「ギガが減る」ことを気にする人にとっては、たびたび読み込まれるサイトのロゴ画像は軽量であればあるほど嬉しいもの。テレンス・エデンさんはこの問題に取り組み、512ピクセル×512ピクセルでPNG形式ならファイルサイズが10KB以上になるようなロゴ画像を、SVG形式で1KB以下に抑え込みました。 GitHub - edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos https://github.com/edent/SuperTinyIcons Super Tiny Website Logos in SVG – Terence Eden's Blog https://shkspr.mobi/blog/201
AnimeEffectsは、ポリゴンメッシュの変形をベースとする2Dキーフレームアニメーション製作ツールです。 とっつきやすく、思いつきをすぐ形にでき、心変わりがあればいつでもやり直せるようなツールを理想として開発しています。 主な特徴 移動、回転、拡大縮小などの基本的な変形はもちろん、ボーン変形、自由変形(Free-form Deformation)、不透明度や画像の切り替えなど様々な要素をアニメーションさせることが可能です。 jpg、png、gifなどの基本的な画像ファイルはもちろん、Adobe PhotoshopをはじめとしてEasy Paint Tool SAIやClip Studio Paintなどでも対応されているPSDファイルを読み込む事が可能です。 レイヤーのクリッピング設定や、大部分のブレンディング設定にも対応しています。 ペイントツールでおなじみの、ペンタブレット操作や
2月26日にLINEのオリジナルスタンプをだれでも制作できると言う話が発表されました。「LINE Creators Market」イラストであることが必須、png形式、スタンプだけで40個…これは…なんというFireworks向き案件！ということで今回はその理由を。 まずは概要 LINEスタンプのガイドラインによると、必要なものは メイン画像(1個) 240×240px スタンプ画像(40個) 370×320px(最大) トークルームタブ画像(1個) 96×74px 上記の画像計42個で、形式は全てPNGです。スタンプ、トークルームタブ画像は性質上背景透過になると思います。 イラストをどのアプリケーションで制作するかというのは個人の好みの問題なのですが、Fireworksで作る場合にはぜひ「ステート」機能を使うことをおすすめします。 ステートとは Fireworks CS4以前は「フレーム
『日本の風習を伝える100のアイコン』プロジェクトの完成版です。 日本固有の風習を伝えるもので、多少なりともアイコンとしての需要がありそうなものを、今まで4回に渡って配布してきました。 今回はその完成版です。 100個揃った完成版をもって5回目の配布に換えさせていただきます。 また、完成にあたってシェイプを含むpsd及びaiデータの販売を開始しました。 $5.00で販売のところを、コリスさんとのタイアップ企画として限定3日間、無料にて配布させていただきます。 データの内訳は以下の通りです。 Free Download(無料版) ・.png(32px×32px,64px×64px) ・.psd(32px×32px,64px×64px) $5.00→$0(10月17-19日のみ無料) ・.png(32px×32px,64px×64px) ・.psd(32px×32px,64p
New application icons have a lot of changes: essentially different way to round the corners, increased size for the iPhone, a specific grid construction and other. We create absolutely new psd template with all known sizes of app icons for iOS 7. It contains: — slices for fast png export — known icon sizes (new ones for iPhone) — new vector grid — smartobjects for easy preview of different sizes —
こんにちわ！あんなです！ Androidのモックが欲しいなぁー…ということで！自分で作りました！ 商用利用可、利用報告・クレジット表記不要。加工もOK！ ご自由にお使い下さい♪ダウンロードは「続きを読む」から！ カラーは青・黒・白・ピンクの４色！ 全体図はこんなかんじ！ Fireworksで制作しました。データはpngです。 （参考にさせていただいた機種は愛用している、Xperiaです♪） ダウンロードはこちらから！ 私自身、日々の業務の中でたくさんのフリー素材を 使わせていただいてます。本当にありがたいです。 制作者の皆さま、ありがとうございます。 このモックも、少しでも誰かの役にたてるのなら幸いです。 それでは次回、 「FWで鷲頭麻雀透明牌を作る・・・!」もしくは、 「FWで逆刃刀を作るっ・・・!」で、お会いしましょう！ （今るろ剣が熱いっ・・・！）
Five years ago, Min Ming and I had this notion that designers didn’t have access to the same types of structured collaboration tools that programmers had built for themselves with CVS, SVN and later git. Min Ming had worked as a designer at Google where he found that assets were internally organized in a single massive shared folder. Finding the latest version of a file was nearly impossible with
webkit2pngコマンドがMacでは今のところ一番手軽だと思います。 brew install webkit2pngwebkit2pngはまたはgithub 経由か、http://www.paulhammond.org/webkit2png/:title開発者サイトから。 その他の方法について GUIが良い人は http://www.realmacsoftware.com/littlesnapper/ や http://derailer.org/paparazzi/ Linuxな人は http://khtml2png.sourceforge.net/ LinuxでもMozillaがいいよ！って人は http://www.hackdiary.com/2004/06/13/taking-automated-webpage-screenshots-with-embedded-mozilla/
WEBサムネイルを作成する方法はいろいろありますが。Macにも、それ用のコマンドがありました。 webkit2pngコマンドでサイトのサムネイルを作成する 配布元はwebkit2png インストールとかは特になし、サイトからPythonのソースコードをダウンロードするだけ curl http://www.paulhammond.org/2009/03/webkit2png-0.5/webkit2png-0.5.txt > webkit2png chmod +x webkit2pngまたは、githubから git clone https://github.com/paulhammond/webkit2png/最新版にするとFLASHもちゃんとショットされる。 使い方 ./webkit2png http://www.yahoo.co.jp 実行するとサムネイルが作られる オプションなしだと、
シンプルな矢印アイコンセットを公開・配布します。 もともとは個人的にちょこちょこ作成してきたものを、まとめてみました。 Fireworks用のPNGファイルと、Photoshop用のPSDファイルを用意したので、 自由にデザインワークで使ってください。 特徴 25種類×10サイズ 矢印アイコンのフリー素材は、ネットにたくさんありますが、 このアイコンセットでは、25の基本シェイプをベースに、それぞれ10サイズづつ用意してます。 各サイズごとに、ピクセルを最適化し、どのサイズにおいても、シャープに見えるように調整しています。 背景付き、枠付きなど、別パターンも収録 アイコンを使う場合は、裸でつかうより、四角背景の白ヌキだったり、 枠付きで使う場合も多いので、それぞれ、代表的なデザインで用意しました。
『哀しき獣』という韓国映画が面白すぎたので、もう一度観たいminamiです。 Fireworksの画像書き出しではもっぱらスライスの使用をプッシュしてきた当ブログですが、「レイヤーからファイルに書き出し」って便利じゃない・・・という衝撃を改めてお届けします。 「レイヤーからファイルに書き出し」使ってる？ Fireworksの書き出しメニューには幾つか項目がありますが、「レイヤーからファイルに書き出し」は今まで使ってきませんでした。 要因としては、 Photoshopと違いオブジェクトを直接編集できるので、パーツ毎のレイヤー分けを意識していなかった 画像書き出しはスライスが強力なので他の方法を気にしたことがなかった というのがあると思います。しかし、場合によってはスライスで管理するよりもこちらのほうが便利！ということで見なおしてみました。 同じレイアウトで大量に画像を作りたい 例えば以下のよ
iPhoneタブバー＆ツールバー用アイコン iPhone UI iPhone外観素材〔iPhone3 / iPhone 4 / iPhone 4S〕 iPhoneアプリケーションアイコン iPhone風のアイコンジェネレーター iPad UI iPad 外観素材〔iPad / iPad2〕 iPod Touch 外観素材 Androidメニュー用アイコン Android UI Android外観素材 Android Widget UI〔ウィジェットテンプレート〕 Droidくん Androidアプリケーションアイコン Androidアイコンジェネレータ〔画像をアップするだけでガイドラインに沿ったアイコンを生成〕 モノトーン系アイコン iPhoneタブバー＆ツールバー用アイコン 2010/9/26 PSD PNG PSD icon Sweets License: 個人・商用利用可 iPhon
Google+で使われている204個のアイコンがPSD形式でダウンロードできる「204 Google Plus interface icons」 Google+のデザインはオリジナルMacintosh開発チームのアンディー・ハーツフェルドが作られたようで、素晴らしいデザインに仕上がっています。 個人的にもすごくカッコいいと思います。 そのアイコンがPSDとPNG形式でダウンロードできるので、インスピレーションやデザインの参考にも使えそうですね。 カラーとグレースケールの二種類あり、サイズもそれぞれ 18 x 18pxと128 x 128pxが用意されていました。 商用利用可能なようですが、作成者へのリンクが必要なようです。 利用にはご注意ください。 詳細&ダウンロードは下のリンクからどうぞ。
Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。
This domain may be for sale!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
