twitter
WordPressデザインまとめコーディングツール
in 書いてみた。 - 15 4月, 2014
by との - one comment
2014年版 デザイナーでもコーダーにもおすすめ作業効率化Webツール
このエントリーをはてなブックマークに追加
Bookmark this on Google Bookmarks
Pocket


最近、便利なジェネレーターや整形ツールを使うことが増えました。
特にCSS3なんかは一から書いていると時間がもったいないのです。

 

普段使っているツールをまとめてみました。

 

 

 

 

 

 

 

 

 

 

 

3476669265_faae62fd9e_b

 

 

 

 

 

 

まずは鉄板!コピペプログラマにはhtaccessは敷居が高いのです・・・

.htaccess ファイルを簡単作成「.htaccess Editor」

http://www.htaccesseditor.com/

 

 

 

 

 

ローディングgif作成

 

Loader Generator – Ajax loader

http://loadergenerator.com/

 

 

 

 

Ajaxload – Ajax loading gif generator

http://www.ajaxload.info/

 

 

 

 

 

WordPress 一から書くのがめんどくさいやつ作成

GenerateWP » User friendly tools for WordPress developers

http://generatewp.com/

loopを作ったり、functions.phpなどよく書くようなコードを簡単に作成できるのでかなり重宝します。

 

 

 

 

 

JqueryやMootoolsなどのホスティングURL確認

 

Google Hosted Libraries – Developer’s Guide – Make the Web Faster — Google Developers

https://developers.google.com/speed/libraries/devguide?hl=ja

 基本的にはローカルに置く派ですがちょっとしたページはホスティングされているところから呼び出すことがあるのですが、毎回ググってるのでこれは便利。

 

 

 

 

Facebook関係

Facebookデバッガー

https://developers.facebook.com/tools/debug/

 単純なデバッグ以外にもFacebookにキャッシュされたデータもクリアできるのでおすすめ。

 

 

 

ボタンジェネレーター

https://developers.facebook.com/docs/plugins/like-button

Likeもシェアも作れる!

 

 

 

 

OGP画像シミュレータ | og:image Simulator

http://ogimage.tsmallfield.com/

 コロコロ使用の変わるOGP画像ですが、ここでFB上でどう表示されるかチェックできます。

 

 

 

 

 

 

 

 

  ダミーテキストやダミー画像の作成

CMSでも構築やHTMLでモック作成なんかしてるとダミーテキストやダミー画像は本当によく使うので、コーダーは覚えておいて損はありません。

 

ダミーテキストジェネレータ | Web制作小物ツール – dounokouno.com

http://webtools.dounokouno.com/dummytext/

 

 

 

すぐ使えるダミーテキスト – 日本語 Lorem ipsum

http://lipsum.sugutsukaeru.jp/

 

 

 

文字列ジェネレーター – LAZE SOFTWARE

http://lazesoftware.com/tool/strgen/

こちらもサイトはとても高機能で助かってます!!

 

 

 

Dynamic Dummy Image Generator – DummyImage.com

http://dummyimage.com/

個人的使用率No.1。特にクライアントから指定がなければ、CMSでサイト構築するときに欠かなせない「No image」や「Now Printing」とかはここで作ってます。

 

 

 

lorempixel – placeholder images for every case

http://lorempixel.com/

たぶんすごく有名・・・らしい

 

 

 

 

Placehold.jp|ダミー画像生成 モック用画像作成

http://placehold.jp/

 

 

 

 

PlaceIMG | Easy FPO and Dummy Images for Any Project

http://placeimg.com/

 

 

 

 

 

 

 

 

HTMLからセレクタを自動で作ってくれるやつ。

 

extractCSS – Online CSS Extractor

http://extractcss.com/

 

 

 

OneClickCSS

http://css.miugle.info/

 

 

 

 

 

 

 

 

非デザイナーの味方!色に関するツールいろいろ

CSS Gradient Generator | CSS3 Factory

http://www.css3factory.com/linear-gradients/

 

 

 

Paletta – HSV Color palette for every Programmer

Paletta HSV Color palette for every Programmer

色調の近い色を自動で作ってくれるので、これをもとにカラースキームを作ればおかしな色使いになることはありません。ぼくはよく資料作成の際に使用します。パワポとか色も形もごちゃごちゃだと取れる案件も取れなくなる可能性はあるので・・・。

 

 

 

Adobe Kuler

https://kuler.adobe.com/create/color-wheel/

 

 

 

こっちはコーダー向け

Devoth‘s HEX 2 RGBA Color Calculator

http://hex2rgba.devoth.com/

 

 

 

Flat UI Colors

Flat UI Colors

フラットデザインっぽい色ってどんなだろーって迷った時はここから。

 

 

 

 

色色 [:iroiro]

http://synthsky.com/iroiro/

言葉を入れると連想する色を作成する。マジですげぇ。

 

 

 

ロゴをちゃちゃっと作りたい!

Free logo design, Create a logo, Logo Maker, Logos, Business Logo

http://logotypemaker.com/

 

 

 

 

 

 

 

IE用にrgbaのフィルターを作成!便利!

RGBa & HSLa CSS Generator for Internet Explorer | Journal | Kimili

http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

ただ、なぜか自分の環境(IE11のレンダリングモード)でデバッグすると、IE10がうまくいかなったりするw

 

 

 

 

 

クライアントのIPアドレスを知りたいときなどにURLを開いてもらいます。

アクセス情報【使用中のIPアドレス確認】

http://www.cman.jp/network/support/go_access.cgi

IP制限かけたりすることが多いのですが、ほぼすべてのクライアントは自分のIPアドレスなんか把握してないので、URLを送って表示されてる数字を教えて下さい的なことをやってます。

 

 

 

 

コードの整形ツール

ぜんぶのせ

Make your code beautiful with Code Beautify

http://codebeautify.org/

 

 

 

 

 

CSS

CSS Beautify

http://cssbeautify.com/

メディアクエリがうまくいかない・・・

 

 

 

 

HTML/CSS/JS

Dirty Markup · Tidy and Beautify your HTML, CSS, and JavaScript

http://www.dirtymarkup.com/

 

 

 

 

HTML

HTML整形ツール(プチ・デバッグ機能付き

http://u670.com/pikamap/htmlseikei.php

 個人の方が作ったサイトの更新なんか依頼された際は一度これ通さないとコードが読めないことが多々あります・・・

 

 

 

 

コード圧縮系

HTML

Compress HTML

http://www.textfixer.com/html/compress-html-compression.php

 

 

 

 

 

CSS/JavaScript

Compress javascript and css. Amazing code compression. Quick,easy

http://compressor.ebiene.de/

Jsはギチギチに圧縮するのでこっち派

 

 

 

 

JavaScript Compression – Compress JavaScript Code Free with this

http://www.creativyst.com/Prod/3/

CSSはある程度可視性を求めるのでこっちで。

 

 

 

 

 

 

Webフォント

Google Fonts

http://www.google.com/fonts/

 Webフォントはとりあえずこれだけで今のところ充分。

 

 

 

 

 

 

CSSはジェネレーターに任せるw

CSS見出し-ジェネレーター | WEB道

http://web-dou.com/tool/css_gen_h.php

CSSだけでもけっこういろんな見出しがサクッと作れるので、簡単なランディングページとかに最適。

 

 

 

CSS3プロパティジェネレーター | CSS-EBLOG

http://css-eblog.com/eblog_sample/0912/css3-generator/

 

 

 

Ultimate CSS Gradient Generator – ColorZilla.com

http://www.colorzilla.com/gradient-editor/

 

 

 

CSS3 Generator

http://css3generator.com/

 

 

 

CSS Border Radius Generator

http://border-radius.com/

 

 

 

The ultimate CSS tools for web designers | CSSmatic

http://www.cssmatic.com/

 

 

 

CSS triangle generator

http://apps.eky.hk/css-triangle-generator/

CSS3で簡単に三角を作ってしまうすごいやつ。

 

 

 

CSS + CSS3 Generator | Generate CSS

http://www.generatecss.com/

なんとなくここを使う率が高い。

 

 

 

 

 

 

超苦手な正規表現はまずここでチェックします。

Rubular: a Ruby regular expression editor and tester

http://www.rubular.com/

 

 

 

ツールじゃないけど超お世話になっています。

TEST CORDING » JavaScript正規表現 怒濤の100サンプル!!

http://testcording.com/?p=2013

 

 

 

 

 

 

 

TABLEIZER! — Spreadsheets to HTML Tables Tool

http://tableizer.journalistopia.com/

エクセルを貼り付けるとTable組みができちゃう。

 

 

 

 

 

 

 

 

Placeit: Free Screenshot App Marketing Tool & Templates

https://placeit.net/

海外でよく見るサイトを埋め込んだ画像が作成できます。

 アプリの紹介とか、レスポンシブでこう見えますよとか、プレゼンとか提案資料に最適。

 

 

 

 

 

 

 

Feedly購読ボタン作成

feedly. your news. delivered.

http://www.feedly.com/factory.html

最近RSSボタンよりこっちつけてと言われるパターンが多くなってきました。

 

 

 

 

 

 

サイトマップを作成-自動生成ツール「sitemap.xml Editor」

http://www.sitemapxml.jp/

サイトマップ(sitemap.xml)作成ツール

 

 

 

Responsive Checker | レスポンシブデザイン検証サービス

http://html5-lab.jp/checker/

レスポンシブに必須な検証ツール

 

 

 

PageSpeed Insights

http://developers.google.com/speed/pagespeed/insights/

ある程度構築が終わったらページの表示スピードにも気を使うために使う。

表示スピードを改善するためにリリース前に一度は確認します。

 

 

 

 

 

まとめ

 

以上、自分のブラウザに実際ブックマークしているWebツールをまとめました。特に圧縮やジェネレーター、整形をするツールなどはサイトによって癖があったり、使い勝手がそれぞれ違ったりするので時間があるうちに試してみて慣れておくと、帰宅時間が大幅に早くなる可能性がありますので、ぜひ使ってみてください。

 

時短ツールは社畜の味方!作業効率化は早期帰宅に直結します!w

 

 

このエントリーをはてなブックマークに追加
Bookmark this on Google Bookmarks
Pocket

follow us in feedly