WEBデザイナーの強い味方〜超便利なサービス達〜

プロジェクト管理・運用

Google Analytics

言わずもがな、Webに携わる者として必須のサービス。
いかんせん多機能すぎて見辛いので、pdfでレポートを自動送信するようにしている。
https://analytics.google.com/analytics

github

今日日の案件は、gitによるプロジェクト管理が前程となっているものが多くある。
途中でプロジェクトにアサインする場合も、gitでプロジェクトを管理しているとしていないでは状況把握に雲泥の差が出る。
専門用語が多いので、最初は頭がぐるぐるする。
https://github.com

コーディング

CodePen

ブラウザ上でコードのテストを行うことができる。
一々ローカルに環境を整えなくてもささっと確認することができ、
スニペットとして保存できるので便利。
また、他の人のpostを物色して参考にすることも多々有り。
http://codepen.io/

最近は、JSを書く機会が多いのでJSfiddleを利用する機会のほうが多いかもしれない。

js2coffee

JavaScriptをCoffeeScriptにブラウザ上でリアルタイムに変換(翻訳)することができる。
CoffeeScriptからJavaScriptへの変換も可能。
時々CoffeeScriptのお作法が分からないときに変換をかけて参考にしている。
npmをつかって$ npm install --global js2coffeeでインストールも可能。
http://js2.coffee/

Lebab

JavaScript(ES5)をES6/ES7にブラウザ上でリアルタイムに変換(翻訳)することができる。
こちらについてもES2016からEs2015への変換も可。
npmをつかって$ npm install -g lebabでインストールも可能。
https://lebab.io/try-it

json.browse()

jsonのURLを貼るか、ないしはjsonのコード自体を貼ると整形し、見やすくしてくれるサービス。ネスティングされていないjsonから任意の情報を読み取るのは至難の業なので、こういうサービスはありがたい。
https://jsonbrowse.com/

PXtoEM

タイトルの通り、単位をpxからemに変換したさいの値を確認することができる。
グリッドシステムを採用していたときにGarterの値を設定するときなどに大変世話になったが、
最近はflexでしゃらんとやることが多くなったので出番は少なめ。
http://pxtoem.com/

Table Tag Generator

あの面倒くさいtableのコーディングを劇的に楽にしてくれる、テーブルジェネレータ。
複雑にセルが結合されているようなテーブルを組む際は、これなしではもう作業なんてできない。
https://tabletag.net/ja/

difff

2つのテキストの差分(diff)を検査することができるサービス。
gitを入れていないプロジェクトで担当者が複数人いる場合、こいつの出番が増える。
https://difff.jp/

sublimetextのpluginでもdiffをみてマージすることができるやつはあるんだけど、
いかんせん高額だったのでこのサービスに落ちついている。
macの人はxcodeの中に差分をチェックするアプリ(FileMarge)が標準で入っているので、そちらを使うのもアリ。

モバイルフレンドリーテスト

コーディングしたページがモバイルフレンドリーになっているかをチェックするサービス。
当然SEOにも関わってくるので、ここでのスコアは重要。
https://search.google.com/search-console/mobile-friendly?utm_source=psi&utm_medium=link&utm_campaign=psi-ux-banner&hl=ja-JP

PageSpeed Tools

ページの読み込み速度を測定できるサービス。
google謹製なので、SEOのことを考慮するとここで出た警告は基本全て潰したほうが良い。
https://developers.google.com/speed/pagespeed/insights/?hl=ja

WEBデザイン

Font Awesome

超定番のWebアイコンフォントサービス。
使い方は下記のサイトが参考になる

楽して便利!Webアイコンフォント『Font Awesome』の使い方と活用 Tips https://h2ham.net/font-awasome

最近はアイコンの種類が増えすぎて、探すのに時間がかかる。
その際には下記の早見表が便利。
http://fontawesome.io/cheatsheet/

Alfredを使ってる人は、FontAwesomeのワークフローを入れると幸せになれる。
https://github.com/ruedap/alfred-font-awesome-workflow

placehold.it

アタリの画像を生成してくれるサービス。
url自体がアタリ画像の設定値になっているので、わかりやすい。
http://www.placehold.it/

favicon generator

タイトル通り1枚の画像から複数のfaviconを生成してくれるサービス。
一つ一つ自前でやるのは流石に骨の折れる作業なので、こういうサービスはありがたい。
https://ao-system.net/favicongenerator/

SVGOMG!

ローカルのsvgファイルをアップロードして、WEB用に最適化してくれるサービス。
色々オプションがあってGUIベースで触れるのでわかりやすい。
その上、結構綺麗にsvgコードを整えてくれる。
https://jakearchibald.github.io/svgomg/

coolors

カラースキームを作成できる。
サイトのカラー設計を行う際に、ここでおよそのイメージを固めてから
デザインカンプに流用するワークフローをとることが多い。
https://coolors.co/

metallic ratio

黄金比、白銀比なんかを算出してくれるサービス。
バナーのサイズを決める際に用いることが多い。
http://voidism.net/metallicratio/

ビジネス・マーケティング

Googleトレンド

今どのような単語が一番検索されているかがひと目で分かる。
任意のキーワードの複数設定して比較することも可能。
https://trends.google.co.jp/trends/

TED Talks

かの有名なTEDの講演をタダで拝聴することができる貴重なサービス。
多くは語るまい。ただ、聞いて学ぶべし。
https://www.ted.com/talks?language=ja

Behance

デザイナー達のポートフォリオサービス。
全世界のイケてるデザイナーのデザインや作品を見ることができる。
多くは語るまい。ただ、見て盗むべし。
https://www.behance.net/

mynoise

数多くの環境音を再生できるサービス。
作業中のBGMとして最適。個人的には山の中の音がお気に入り。
https://mynoise.net/