素早く制作できた!Web制作に役立つトレンドのツール一覧

2014年、WPテーマやコーポレートサイト作成時にお世話になったツールと2015年に使いたいツール。素早くコーディングを行うために知っておきたいツールをメモ。
エンジニア速報は Twitter の@commteで配信しています。
もくじ
CSS ツール
- 1.CSS スニペット
- 2.CSSアニメーションサンプル
- 3.背景を様々な形に切り抜く ジェネレーター
- 4.SCSS/CSSに変換するツール
- 5.CSS フレームワークとチートシート
- 6.CSS3 アイコン
- 7.CSS / JS / HTML コード整形
- 8.レスポンシブ モックアップ作成
- 9.ブラウザ対応表
SVG / ロングシャドー / ポリゴン作成
- 10.SVG ブラウザサポート状況確認表
- 11.SVG ローディングアニメ作成
- 12.SVG 背景作成ジェネレーター
- 13.SVG パターン背景作成
- 14.ロングシャドウ生成
- 15.ポリゴン背景作成
- 16.アイコンフォント
- 17.OGP画像シミュレータ
エディタ関連
- 18.Sublime Text -プラグイン一覧
- 19.Sublime Text - ショートカット
- 20.Sublime Text -テーマ
- 21.Emmet - チートシート
- 22.Emmet - 各エディター プラグイン
- 23.VPS操作:コマンド
CSS ツール
1.CSS スニペット

色々なCSSテクニックを紹介しているCSS-Tricksから、CSS / Sass / js / WordPress のスニペット集。何かアイデアを得たい時にも便利。
2.CSSアニメーションサンプル

CSS3のアニメーションライブラリ。クラスを付与するだけで様々なアニメーションを出力してくれます。
3.背景を様々な形に切り抜く ジェネレーター

背景切り抜きジェネレーター。三角形や六角形菱型などを選択し、パスを動かすとプロパティclip-pathのコードを生成してくれるツール。backgroundに画像URLを指定すると画像切り抜きが簡単に出来ます。
4.SCSS/CSSに変換するツール

オンライン上でSassのコードをCSSに変換出来ます。
5.CSS フレームワークとチートシート

フレームワークに沿った記述をしていくだけで今風のデザインを構築出来るので便利。こちらはフレームワークを扱う時に見ておきたいチートシート。
- [チートシート] Bootstrap 3チートシート
- [チートシート] Foundation5のチートシート - かちびと.net
- [フレームワーク] Pure
- [フレームワーク] Gumby
- [フレームワーク] Responsive Grid System
- [フレームワーク]HTML5 Boilerplate
- [フレームワーク]HTML KickStart
- [UI]Flat UI
6.CSS3 アイコン

CSS3コードがコピペできる200以上のアイコン集『CSS3 Icons』 | IDEA*IDEAで紹介されてたCSS3だけで表示出来るアイコン集。アイコンをクリックするとコードがポップアップされ、コピーするだけという手軽さ。CSSの勉強にもなります。
7.CSS / JS / HTML コード整形

UIが綺麗なオンラインコード整形ツールならこれ。例えばliだけの要素を貼り付けて「Clean」を押すと、インデント整形・タグの補完などの他、bodyやheadなども挿入してくれます。
8.レスポンシブ モックアップ作成

表示確認しながら作成しHTML, CSSをダウンロードできるレスポンシブ用モックアップツール。もう一つはプロトタイプ作成ツールのAdobe Edge Reflowについて書かれた記事。RWD用のデザインカンプにかける時間をこれらで短縮。
- FROONT
- [参考] レスポンシブWebデザインのモックアップを簡単に作成できる「Adobe Edge Reflow」の使い方 (1/4):CodeZine
- [参考] レスポンシブWebデザインのモックアップが手軽に作れるサービス「FROONT」*二十歳街道まっしぐら
9.ブラウザ対応表

各ブラウザごとのHTML5/CSS3対応状況を確認する時はこれ。
SVG / ロングシャドー / ポリゴン作成
10.SVG ブラウザサポート状況確認表

SVGのブラウザサポート状況を確認できる表はこちら。トップのCan I useではCSS/HTML5/SVG/JS APIの一覧と検索が可能です。
11.SVG ローディングアニメ作成

オンライン上で動くSVGアニメーション生成ツール。コピペできるので簡単。例:一旦Circle 2と3を消しCircle1で形を整えたら、Actors横ボタンで図形を増やします。
12.SVG 背景作成ジェネレーター

ショーケースから任意のサンプルを選択しCode EditでSVGを出力します。トレンドのジオメトリックなパターンもあるので今後使いたいツールです。
13.SVG パターン背景作成

メニューの+ボタンで図形のパターンを選択し背景画像として作成することができます。SVGアップロード可能。
14.ロングシャドウ生成

ロングシャドウを作成するためのPhotoshopプラグインとオンラインジェネレータ。
15.ポリゴン背景作成

面倒なポリゴン画像をSVG出力してくれるツール。パターンを選択しノイズとサイズを指定可能です。
16.アイコンフォント

ウェブアイコンをフォント化したモノクロベースのオシャレなアイコンフォント。Iconvauはフォント生成サービス。
17.OGP画像シミュレータ

FacebookのOGP画像シュミレータ。画像をアップロードすれば、様々なサイズのプレビューをその場で確認することができます。
エディタ関連
18.Sublime Text -プラグイン一覧

主要パッケージの他に入れておきたいもの。Hex-to-RGBAやCan I Useは知りませんでした。処理が遅くなるので入れすぎに注意。
- 手放すなんて絶対無理!SublimeTextの便利パッケージ - Catcher in the tech
- Sublime Textの作業効率を飛躍的に上げるプラグイン31個 | aucfan Engineers' blog
- SublimeTextの教科書で紹介されてるプラグインまとめ - Qiita
19.Sublime Text - ショートカット

Sublime Text のショートカットキーをMacとWin版で分けて見ることができます。
- ショートカットキー一覧
- 1ヶ月使って便利だと思った Sublime Text 2 のショートカット 12 選(Win、Mac両方) | Developers.IO
- [参考] Developers.IO
20.Sublime Text -テーマ

テーマを変更したいときに。ColorsublimeはCSS / Rubyなど各コードのカラーをプレビューできるテーマ集。
- The Best Sublime Text 3 Themes of 2014 ♥ Scotch
- より見やすく、使いやすくなるsublime textテーマ8つ | 株式会社LIG
- Colorsublime
21.Emmet - チートシート

Emmetの使い方や例の一覧、公式チートシート。忘れたらここを見ます。
22.Emmet - 各エディター プラグイン

Sublime text、Dreamweaver、Notepad++など様々なエディターに対応したEmmetプラグイン一覧。
23.VPS操作:コマンド
VPSでファイルを扱う時に。VPSでWordPressを動かす時もターミナルからssh接続してコマンドを打ち込みます。以下結構使うコマンドです。
- [history] 履歴表示
- [タブ] 途中まで入力後、tabキーを押すと補完される
- [su] アカウントを切り替える
- [pwd] 現在位置
- [cd ..] 上に上がる
- [ls] ファイル・ディレクトリ情報を表示
- [ls -al] .htaccess を確認したいとき
- [ll] ファイル詳細情報閲覧
- [chown] 所有者変更
- [chmod] 権限変更
- [cp -rp] ファイルをコピー
- [cp -b file dir] バックアップコピー
- [mkdir] ディレクトリを作成
- [touch] 空のファイル作成
- [unzip] 圧縮ファイル 復元
- [zip] ファイル圧縮
- [sftp] 暗号化、sftp接続
- [scp] リモート⇔ローカルファイル コピー
参考サイト一覧
スポンサード リンク
関連記事
- 今どきのプログラマー向け社内共有ツール
- Mac初心者おすすめ!フロントエンドやコーダー向け初期設定
- CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー
- デベロッパーにおすすめのATOM開発系ダークテーマ
- CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10
- モダンなフォームを作るために覚えておきたいCSSの擬似クラス
- object-fit・currentColor・will-change・image-renderingなどマイ...
- CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ
- 聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
- スクロールした時に面白いエフェクトを出すためのアイデアまとめ
Leave a Comment