Help us understand the problem. What is going on with this article?

Webデザインやコーディングでよく使っている便利ツール10選

More than 3 years have passed since last update.

どうも。Web系メンターのれもん🍋です!Life is Tech! アドベントカレンダー8日目です。

今回どんなお題で書こうかなと迷っていて3日前まで、「CSSでクリスマスっぽいロゴを作るだとかCSSで絵を描く」という無駄な内容でいこうと思っていたのですが、無駄すぎたので、役立ちそうな記事を書きます。いきなりですが、

コーディングやWebデザインってめんどくさいこともある・・・

タグを一つずつ打ったり、デザイン画と照らし合わせたり、割とめんどくさい作業が沢山あります。

Webデザインやコーディングをするときに、ツールを使ったり、Googleの拡張機能を使ったりすると、そのめんどくさいや無駄を省いて効率化したり、便利になったりします。日頃よく使っているものを紹介します。

  • Emmet
  • Markup Validation Service
  • Mapture
  • Can I use
  • Webフォント
  • tinyping
  • PLACEHODE.IT
  • スニペットツール
  • Blisk
  • Full Page Screen Capture

Emmet

コーディングをしたことがある人なら、絶対知ってるであろうEmmet。SublimeやAtom、Bracketsなどにプラグインとして使うことができます。タグやCSSプロパティを省略して書くことができ、tab一発で爆速でコーディングができます。「エディタ名 + Emmet」で検索してみてください。

Markup Validation Service Nu Html Checker

https://validator.w3.org/#validate_by_input
スクリーンショット 2016-12-07 17.15.56.png

W3CのMarkup Validation ServiceのNu Html Checkerでサービスの名前の通り、HTMLをCheckしてくれます。例えば、閉じタグがなかったり、imgタグにはalt属性を付けてねだったり、EroorとWarningに分けて表示してくれます。
マークアップにきちんとした正解はないなんて言われることもあるけれども、一旦コーディングしたものをこれに通すことで、何が間違いなのか教えてくれる便利ツールです。

Mapture http://anatoo.jp/mapture/

Maptureとは、画像や画面をキャプチャして常に画面の最前列に置いて使えるMacのアプリです。どういう使い方をするのかというと、デザイナーさんが作ってくれたデザイン画と自分のコーディングをしたものを照らし合わせ、本当に細かいずれがないか確認するために使います。

Can I use http://caniuse.com/

スクリーンショット 2016-12-07 17.23.17.png

タイトルそのまま、HTMLやCSSやES6のclassなどがどのブラウザで使えるか確かめることができるツールです。古いCSSのサポートが切れていたり、逆にIE8でも見えるようにして欲しいとか様々な要望があります。そんな時にcssのプロパティ名やhtmlタグを入れるだけで、簡単に一覧で把握することができます。

Webフォント

Webフォントは知っている人も多いのではないかと思いますが、簡単にアイコンを文字として出力することができます。
利点として、
- 色やサイズが簡単に変えられる(画像だとそうはいかない)
- hoverなどのアクションの時にも便利
- 簡単にオシャレになる

よく使うのはこのあたりです。
-IcoMoon https://icomoon.io/
-Font Awesome http://fontawesome.io/

tinyping https://tinypng.com/

alt

パンダのトップページが可愛い「tinyping」は画像の質を落とさずに、ファイルの容量を大幅に下げてくれる便利ツールです。画像が重いだけでローディングに時間がかかって、離脱率が増える(かもしれません)。
ドラッグandドロップで簡単に圧縮してくれるのでかなりおすすめのツールです。

いちいち圧縮した画像をダウンロードしなきゃいけないのと思った、そこのエンジニアの方!是非この記事を参考にしてみてください。こっちの方が楽そう。

まだTinyPNGで消耗してるの?「pngquant」+「Automator」で画像圧縮にかける時間を限りなくゼロにしよう!

PLACEHOLD.IT https://placehold.it/

メディアサイトを作る時や、まだ画像が未定だけども何か置いておきたいというときに便利なものです。



<img src="http://placehold.it/350x150">

上記の画像タグの350x150の値を変えるだけで、その大きさの画像が生成されて使うことができます。

スニペットツール

スニペットツールとは、一度書いたコードをためておけるものになります。テーブルタグや、TOPへ戻るなどのJSの処理や、ナビゲーションなどよく使うものを置いておくことで、コーディングの効率化が図れます。

オススメはGistBox、githubと連携することができます。Qiita teamでもコードの共有ができるそうで、会社などで使うときは便利そうだなと思います。

Blisk https://blisk.io/

alt

BliskはChromeの検証ツールよりも、より正確にデバッグしたいけど、デバイスがないときに役立つツールです。URLを入れるだけで、他のスマートフォンデバイスやタブレットでどのように写るか確認することができます。いいなと思うところは、スマホとWebページを同時に確認できるところです。

最近使用時間が1回30分に制限されてしまって、課金しないといつでも使えないようになったのが残念です。

Full Page Screen Capture

これは、Googleの拡張機能なのですが、Webページを一枚の画像としてスクリーンショットのように撮ってくれるお手軽ツールです。開発環境がないデザイナーさんやディレクターさんにコーディングしてこんな感じになったと確認したり、またポートフォリオサイトに載せる時などに便利です。

https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl

まとめ

他にもテンプレートエンジンやSass、HamlやSlimといった便利なものがたくさんあります!是非是非調べてみてください。良いコーディングライフを送りましょう〜!

明日はふなみんがイラレについて語ってくれます!デザイン系楽しみ!

yuzooho
PHP,JavaScript,MySQL,HTML,CSS、React NativeとかRxSwiftを業務で触っていました。今はPMをしています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away