2013年10月アーカイブ

52

PNGファイルサイズを圧縮/軽量する方法[ImageAlphaとImageOptim編]

ブラウザのPNG対応も進み、透過PNGを使うのも怖くない時代になりました。
スマートフォンサイトでは、jpgよりもPNGを使用しておいた方が画像のレンダリングでのバグは安全です。(Retinaサイズに対応する場合に正確に2倍にしてない画像をiOS5/safari環境で縮小するとjpgではレンダリングバグが発生します)

ファイルサイズを軽量化することはWeb/アプリ製作においては基本中の基本です。

ではPNG時代の軽量化はどうすれば良いのか?

自分は下記の2種類のアプリケーションImageAlphaImageOptimの2つのアプリを使って軽量化をしています。


imageAlpha.jpg
http://pngmini.com/


imageOptim.jpg
ImageOptim
http://pngmini.com/


使用方法
  1. まずは、ImageAlphaを使用します。
    ImageAplhaはPNG画像の減色を行いますので、色数が多い画像に対しては、かなりの容量を減らせます。また透過PNGにも対応。


  2. ImageAlphaを使用した画像をImageOptimでさらに圧縮します。
    ここで大事なのはImageAlphaが減色ツールだったのに対して、ImageOptimはメタデータを削除し、画質を劣化させずに画像データを軽量化・最適化する事です。
    そのため、必ず順序はImageAlpha → ImageOptim の順番で行わないと
    ImageOptimの意味が無いです。

ぜひPhotoshopやIllustratorから、「Web用に保存」したスライスをそのまま使用してる方は、試して、より最適化されたWeb製作に役立ててみてください。

51

[iPhoneアプリ開発者の方向け]iicon | iOS/iPhoneアプリアイコンギャラリーサイトに掲載するiPhoneアプリを募集します。

iiconではiPhoneアプリ開発者の方向けに掲載したいアプリを募集しています。
特に個人開発者の方で無料で宣伝をしたい方はぜひご活用ください。

ご応募詳細は下記URLに掲載をしていますので、よろしくお願いします。


iicon | iOS/iPhoneアプリアイコンギャラリーサイト

50

Google Web Designer ベータ版リリース、グラフィックツールとしての可能性

http://www.google.com/webdesigner/index.html

2013年10月1日にGoogle Web Designerというサービスのベータ版がリリースされました。

概要
  • Google Web Designer は、HTML5 で構築された高度なウェブ アプリケーション。
  • HTML5 広告をはじめとするさまざまなウェブ コンテンツをデザインが作成できる。
  • デザイン ビューで描画ツール、テキスト、3D オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトをアニメーション化できます。
  • コンテンツの作成が完了したら、人間が解読可能な HTML5、CSS3、JavaScript を出力できます。
最終的には、HTML5、CSS3、JavaScriptで出力できるようですが、軽く作成してみた結果はpositionを多用していて、PhotoshopやFireworksでHTML書き出しした時と同じような状態だったので、もし使用するのであれば、現時点ではiframeで読み込む広告バナーの作成レベルという印象でした。
では、グラフィックソフトとしては、どこまでデザインが出来るのか?

現時点で備わっているグラフィック機能
  • ペン ツール
  • テキスト ツール
  • シェイプ ツール
  • アニメーション ツール
  • コンポーネント ツール
  • 3D ツール
  • イベントツール
が備わっていてますが、レイヤー機能やスポイト機能などは無く、書き出し/保存もhtmlになってしまうので、PhotoshopやIllustratorの代替ツールとしては正直まだ無理かと。

GoogleアプリをPhotoshop/Illustratorの代替ツールにするなら
WebサイトのデザインをGoogleアプリで行うのであれば、図形描画(Drawing)ツールの方がまだ使えると思います。
図形描画ツール(Drawing)
(※個人的にはハッカソン的な開発を行うときは、Drawingでメンバーと画面共有しながらWireFrameとラフデザインを一気にこのツール上で行ってしまいます。)

やはり、Photoshop CCやIllustrator CCほどのグラフィックツールの代替ツールの登場はまだまだ先になりそうですが、Google Web Designerの登場によりGoogleがパワフルなグラフィックツールを開発する可能性が非常に大きくなったのは確実だと思いました。


Google Web Designerヘルプ(日本語版)