Now Loading...
menu
  • すべて
  • カメラで遊ぶ
  • 写真を楽しむ
  • 旅
  • モノ
  • おすすめツール
  • web制作

WEB制作とブログ運営で捗る、便利ツールあれこれ。

WEB制作とブログ運営で捗る、便利ツールあれこれ。

カメラが趣味です。

フィルムロールを撮り終えて、現像から戻ってくる写真は「なんだこれ」「いつ撮ったんだ」「どこだろう」という季節も場所もはっきりしない写真ばかり。

 

そんな時空を超えた写真ライフを送っているわたしですが、なんと意外にも仕事においては常日頃から「どうしたら早く終わるかな」などと正確性や効率など考えております。

 

WEB制作ってやることたくさん。ですが、

・プロセスは同じである

・やるべきことはだいたい決まってる

という点では、0から自分で作らなくてもショートカットできるようなシーンもあります。

 

実務で使っているツール、それから、ここでブログを書くときに使った便利ツールをまとめてみました。

 

SUMMARY

  1. WEB制作のとき(フロント寄りです)
  2. 資料を作成するとき
  3. ブログ運営ツール

 


WEB制作のとき

どちらかというとコーダーの仕事です。

 

cssで三角をつくる

CSS三角形作成ツール

いきなり三角の話です。

 


素敵なドロップシャドウをつくる

Make a smooth shadow box-shadowジェネレータ

ジェネレータを使えば簡単です。

 


おまけ:SVGで波をつくる

Make some waves!

まだ使ったことありませんが・・便利そう。

 


グラデーション生成

 

WebGradients
Grabient

ボタンや背景、文字などもcssでグラデーションにしてみるとおしゃーな雰囲気になります。雰囲気大事。

 


ファビコン一括でつくる

favicon generator

いろんなサイズを用意する必要があるんです。。

うっかり忘れがち。ファビコンとタッチアイコンを設置しよう。
  • web

 


emやptをpxに変換したり%にしたり、その逆も然り

pxtoem.com

なかなかよく使います。

 


比率計算

metallicratio

2:3、黄金比など計算してくれます。

 


アイコン系・FontAwesome

FontAwesome

 


SVGアイコン・かわいい系

Potlab Icons

アニメーションがかわいい!商用無料です。使いたい。

 


css3ブラウザ対応してる?チェック大事です

Can I use ?

ブラウザはどんどん進化しています。

みんなIE使わないで〜(心の声)

 


資料を作成するとき

sketchとか便利。Photoshopやイラレで作れば本当綺麗なんでしょうけど、綺麗に作りたいけども時間がない。そんなときに便利です。

 

綺麗なイラストや図が欲しい

canva

バナーもチャチャっと作れます。iPhoneでも作れます・・

 


ノンデザイナーでも簡単に

Figma

考える時間が減る。なかなか便利でした。

 


PDFのこと、健忘メモ

目次の作成

開き方などの設定

たまにしかやらないのでいつも忘れています。

 


ブログ運営ツール

htmlエンコード

HTMLエスケープツール

WYSIWYGエディタでは「<」「>」とか「;」など記号の部分をHTML特殊文字にする必要が。コードを書くときなど、これ便利です。

 


画像圧縮ツール

tinyjpg

1MBを目安に、圧縮したいところ。思いの外PNGデータは重い!

tinyjpgが一番お世話になっております。

 


画面を録画してGIFアニメを作成

LICEcap

操作の説明などは便利!プレゼン資料などにも良さそう。

Photoshopで作るGIFアニメではなく、画面の録画のイメージです。

 


HTMLエラーをチェック

HTMLエラーチェッカー

WYSIWYGエディタでダイレクトに記事を書くことは少ないですが、意図しないところに画像が挿入される、閉じタグがおかしい・・などのHTMLタグの間違いが起きていることもあるので、記事を公開するときにチェックしたいところです。

制作の段階では必須。Google Chrome拡張機能のエラーチェックはいつも使わせていただいてます。

 


速度改善系

PageSpeed Insights

表示速度も大事。

Search Consoleの中にも、速度(試験運用版)という項目が。低速なページが指摘されます。

 


 

継続は力なり、とはよく言いますが、力を入れるべきところは入れ、抜くときは抜く。そんな緩急が上手につけられることも、継続するうえで重要なポイントとなるのかもしれません。

 

参考になるんだろうか・・参考になれば幸いです。

 

 

share on