カテゴリー: ウェブお役立ちTool, 制作Tips

最近はウェブサイト制作も様々な便利なツールが出回っていますね。特に無料で公開されているものもたくさんあり、ウェブ制作での効率化には欠かせません。筆者は基本は Adobe のソフトをを使用してウェブサイトを制作していますが、場合によっては Adobe のソフトの機能を使うよりも効率、完成度が上がる事が多々あります。今回はそんな管理人が使用する無料ソフト、ウェブサービスを画像圧縮・加工の分野で紹介します。

Jpeg Mini

ウェブサイト

最近は横長、縦長のウェブサイトも増えてきて、非常に大きいサイズの画像を使う頻度も上がってきました。ウェブサイトの表示速度に非常に大きく依存する、画像の容量。こちら、ほぼ画質を落とす事なく画像の容量を下げる事が可能です。このウェブに直接画像をアップロードする形でも行けますし。ソフトダウンロード版も一部無料で使えます。（制限有り）

Tiny PNG

ウェブサイト

こちらは上記がJpegであるのに対し、PNGファイルの圧縮ができます。こちらもほとんど画質を下げる事なく画像の容量を下げる事が可能です。

リサイズ超簡単！Pro

ウェブサイト

こちらは国内産の一括リサイズが可能なソフト、例えばスライダー、ギャラリー制作で２種類の違ったサイズの写真が必要な場合、一括縮小が可能です。こちら無料ダウンロードで使用でき、使い方もいたってシンプル。縮小したい画像をドラッグ＆ドロップして後は変換したいサイズをピクセルで指定し、実行するだけです。シンプルかつ高機能で是非お勧めのソフトです。

Placehold. It

ウェブサイト

ウェブサイトを制作中、レイアウトを制作した時にダミーの画像を入れられる事ができるサイト。使いかたも超簡単で、上記から画像リンクを持ってきて、後はサイズを指定するだけです。例えば　200px x 200 pxの画像を表示したいとき　img src=”http://placehold.it/200×200″ とコピペするのみ。例えばクライアントにここにこういうサイズの画像を入れたいと見せる時などに活用しています。

GIMP

ウェブサイト

言わずとしれた無料画像加工のソフト。Photoshopと比べるとやはり機能の制限はありますが、画像の色を加工したい、簡単なバナーを自分で制作したい人には持ってこいのサイトです。やはり無料ダウンロードというのが非常に嬉しいです。

今回は画像という分野に絞って紹介してみましたが、いかがでしたでしょうか？今後も別ジャンルも含め、ウェブデザインに欠かせない本当に使える無料ソフト、ウェブサービスを紹介していこうと思います。

最近世界中で Google Chrome のシェア率も拡大しております。アメリカではシェア率は他のブラウザを上回り１位となっていますね。それはやはりGoogle Chrome のウェブサイト表示の速さ、豊富な拡張機能のお陰ではないでしょうか。日々Chromeの制作に携わっている人々、また拡張機能を開発している人には本当に頭が上がりません。
かくいう管理人も約３年前にChrome ユーザーになり、様々な拡張機能を使ってきました。今までもウェブデザインで使える拡張機能は色々目にしたと思います。そんな中で今となってはもうこれなしではウェブ制作のに支障が出るほどの拡張機能を紹介します。

Eye Dropper

拡張機能ウェブサイト

こちらはウェブサイト上のどんな色でもカラーコードを取得できるツール。色使いのきれいなウェブサイトを見て、色合いの研究にはもってこいです。

Image Properties Context Menu

拡張機能ウェブサイト

Chromeには右クリックで画像のプロパティを参照する機能がデフォルトではありません。手っ取り早く画像サイズや情報を取得したい人におすすめです。

MeasureIt!

拡張機能ウェブサイト

こちらは立ち上げるとウェブサイトのどんなパーツでもピクセル形式で図る事が可能です。Inspect Elements を立ち上げる必要も無く、手っ取り早くウェブサイトのパーツのサイズを知りたい人に非常にお勧め。超便利です。

Lorem Ipsum Generator

拡張機能ウェブサイト

ウェブサイトを制作時レイアウトで仮文字を入れる事も多いかと思います。そんな時はわざわざ検索して文字を持ってくる必要もありません。たったワンクリックでレイアウト用の文字をコピペできます。（英語限定）

PageSpeed Insights (by Google)

拡張機能ウェブサイト

こちらGoogle Developerにあるウェブサイトのスピードを測定する機能です。立ち上げ方は Inspect Element を右クリックで立ちあげると、最上部に項目が見えると思います。その一番右にPageSpeedという項目が追加されています。後はクリックしてページスピードを測定すると、ページが何故重いかという原因を判定してくれます。

また正式にいうと拡張機能ではないのですが、右クリックのInspect Element（デバッグツール）は非常にお勧め、最近はこれで html/css をデバッグし、レイアウトの変更をした後CSSにファイルに直接張り付け。という流れでウェブサイトの制作をしています。こちらの詳しい使い方についてはまた後日記述したいと思います。

今まで様々な拡張機能を試してきましたが、上記の拡張機能は本当に使える拡張機能です。こんな便利ツールが豊富のGoogle Chromeはウェブサイト制作の効率化に欠かせません。まだの人は是非一度お試し下さい。

最近レスポンシブウェブデザインが非常にポピュラーな物になり、制作をしている人も多いかと思われます。ただ、PC用のウェブサイトと違いデバッグが困難と考えている方々も多いのではないでしょうか？私はAndroidユーザーなのですが、調べたところタブレット、スマートフォンではウェブのデバッグのアプリは見当たりませんでした。そんな時に見つけたのが、

　http://www.jamus.co.uk/demos/rwd-demonstrations/

まず上記の様なPCからタブレット、スマートフォンなどのデバイスの表示が確認できるウェブサイトにアクセス、自分が制作しているサイトを表示する。（個人的には上記のサイトがシンプルで一番使い易いです。）

次にGoogle Chrome, Firefox等をたちあげ、それぞれのデバッグツールを立ち上げる。（ChromeならInspect Element, FirefoxならFirebug等）後は普段PCで行っているでバックをこのサイト上で行うだけです。本当にタブレットやスマートフォンで表示されるのと少し表示が違う事もあれど、私は今までレスポンシブコーディングを行う時はこの方法で行っています。非常に便利な方法になっていますのでお試し下さい。