游ゴシックってどうなんだ?

今までサイトを作る際、Windowsはメイリオ、Macはヒラギノ角ゴ Proを指定していました。

文字の幅が違い表示崩れが起きたりするため両OSでの確認は必須。

そのため何かと面倒くさい。

そして最近知ったのが「游ゴシック」。

続きを読む 游ゴシックってどうなんだ?

compresspngがパワーアップ

前に書いた「png画像を圧縮しよう」で紹介した無料でpng画像を圧縮できるウェブサービス「compresspng」。

ここのサイトは圧縮率が高く、一度に複数のファイルをアップロードできてとても便利。

なので大変お世話になっています。

で、先月あたりに「デザインが変わったな」なんて思っていたらついに日本語化されました。

しかし、サイト名まで日本語化されてしまい「PNGを圧縮」という名前になってしまっています。

よくよく見るとPDFまで圧縮できるようになっている。

どんどん便利になっていくcompresspngにはこれからも頑張ってもらいたいです。

■Compresspng
http://compresspng.com

HTML5がついに勧告された

HTML5
HTML5

「勧告された」と言われると、なんかまた仕様に変更でもあったのかな?なんて考えてしまうわけですが。

「勧告」されたという事は、正式な仕様が確定しリリースされたという事らしい。

もう何年も前からHTML5に触れているので、正直今更感が拭えませんがようやく確定のようです。

⇒ HTML5勧告?オープン・ウェブ・プラットフォームの重要なマイルストーンを達成

これからはHTML5化が加速しそうですね。

JPEGは移動やコピーで劣化する?

つい最近まで「JPEGよりもPNGの方が綺麗だ」程度に捉えていたわけですが、デザインに携わるようになりその辺も色々と調べるようになりました。

そんな中で気になったのが、JPEGは移動したりコピーしたりすることで劣化するのかどうかということです。

結論は「劣化しない」だそうです。

JPEGは非可逆圧縮と呼ばれる圧縮方法を使用した画像フォーマットで、編集し保存(圧縮)するたびに劣化していくとされています。

画像編集ソフト(GIMPとかPhotoshopとか)でJPEGとして保存する際、非可逆圧縮が行われた後に保存されます。

そのため、画像編集ソフトで保存を繰り返すとどんどん劣化していくそうな。

しかし、移動やコピーで他の場所にファイルを保存する場合には非可逆圧縮が行われることが無いため劣化しないそうです。

つまり、非可逆圧縮が行われるかどうかがポイントなんですね。

実に単純明快でした。

illustratorのスライスで透過PNGを生成する

illustratorを使い始めたばかりで全然機能を使いこなせていません。

そんな中で最近使い始めたスライス機能。

前まで素材をPNGで書き出す場合、1つならオブジェクトサイズで書き出し、複数なら書き出したPNGをPhotoshopで切り抜いて個々の素材に書き出すという面倒な作業をしていました。

しかし、スライス機能を使用すればそんな面倒な作業をする必要はありません!

そんなスライス機能を使いつつ透過PNGで書き出しちゃおうというのが今回のお題です。

続きを読む illustratorのスライスで透過PNGを生成する

png画像を圧縮しよう

最近はWEBで使用される画像はPNGが主流になりつつありますが、綺麗故に容量が重いという欠点があります。

作った素材が数MBなんてなんて事もしばしば・・・

そんな素材ばかり使ってたらサーバーの容量は圧迫するし、サイトの表示も重くなるし、Google先生にも嫌われちゃう!

出来うる限り画質を劣化させる事無く容量を削減しましょう。

という事で有名どころのサイトをご紹介。


続きを読む png画像を圧縮しよう

illutratorでアウトボードからはみ出た部分を無視して書き出し

最近サイトの素材はできる限りIllustratorを使用して作るようにしているのですが、初心者なのでわからない事がいっぱいです。

そんな中、今回困ったのがアートボードからはみ出してしまった部分だけを消して書き出す方法。

説明1
説明1

こんな感じでガッツりはみ出るわけですが・・・

色々やってみて2パターン見つけたので紹介します。

まずは「WEB用に書き出す方法」。

「ファイル」メニューの中にある「Web用に保存する」。

説明2
説明2

これを選択肢して「アートボードサイズでクリップ」にチェックを入れる。

説明3
説明3

するとアートボードサイズで書き出されます。

しかし、なんか変な警告が表示されます。

警告表示
警告表示

今回はテキスト入れてないのでラテン語なんて関係ないと思いますが・・・

無視して書き出しても特に問題なかったです。

しかし、警告が出るのは少し気分が悪い。

なので、通常の「書き出し」を使用する方法も試しました。

まず、メニューから「書き出し」を選びます。

説明4
説明4

そして「アートボードごとに作成」にチェックを入れます。

すると、チェックを入れない場合はプビューがこんな風に表示されますが、

説明5
説明5

チェックを入れるとこんな感じではみ出た部分が削除されています。

説明6
説明6

書き出しをクリックしたら書き出し完了。

「web用に保存する」と「書き出し」で出力されたものを見比べてみましたが、自分には違いがわかりませんでした。

なので、特にどちらで書き出しても劣化とかは無いと思います。

ちなみに今回使用したバージョンは最新のIllustrator CC 2014。

それ以前のバージョンでは操作方法が違ったりするかもしれませんのであしからず。

■追記

自宅のCS5で試したところ両方共可能でした。

しかし、CS2だと「書き出し」の「アートボードごとに作成」は存在しませんでした。

「web用に保存する」の方はCS2でも可能だったので、WEB素材を作る際はこれを使えばいいのではないかと思います。

続々・bingの検索結果に表示されるアイコンとfaviconの記述

前回の

続・bingの検索結果に表示されるアイコンとfaviconの記述

から1ヶ月以上たった訳ですが。

未だにFaviconは表示されていません。

一体何がいけないのやら・・・

なんか策を考えるのも面倒なので、一旦ここで幕引きとします。

今後、もしFaviconが表示されたなら、またこれの記事を書くかもしれません。

サイト構築におけるフォントサイズはptよりもpx

「pt」ってなんかプロっぽい。

どこかのサイトさんの CSS 説明で pt を使用しており、なんかその他とは一味違う感じのプロっぽさに憧れました。

そんな単純な理由でフォントサイズに pt を使用していたわけですが・・・

昔、知人に「えっ、pt 使ってるの?」って驚かれたことがあり、正直その時は何を驚いているのかよくわからず。

今ならわかるよ・・・

px が良い理由は単純。

横幅や縦幅のサイズを px で指定しているから、フォントも同じ px で指定した方がデザイン崩れが少なくなる。

line-height などの余白を考えなければ、通常文字サイズが 20px ならそのボックスの縦幅と横幅は 20px になる。

そう、サイズの指定が楽なんですよね。

アイコンを作る際も、文字サイズが 20px なら画像も 20px で作ってあげればいい。

あぁ、なぜこんな単純なことに気付かなかったのだろう。

追記

最近の流行は px ではなく em や rem だそうですよ。

変換するのが面倒なので、自分はしばらく px で戦います。

続・bingの検索結果に表示されるアイコンとfaviconの記述

favicon 設定をなんやかんやいじりましたが・・・

結局まだ反映されておりません。

何がいけないのだ。

bing のクロールが遅いってのも一つの要因ではあると思いますが・・・

今度は表示されているサイトに絞って、header の記述や favicon のサイズをリサーチ。

やはり、表示されているサイトは大半が header に favicon の設定を記述していない。

「type=”image/vnd.microsoft.ico”」を設定していないのもまた然り。

そしてもう1点、「rel=”icon”」を設定していない。

これも何か関係するのだろうか。

favicon のサイズを調べるために、各サイトの favicon に直アクセス。

64px だったり 32px だったり 16px だったり・・・

統一性は感じられない。

何がいけないのか全く不明。

とりあえず自分のサイトの favicon に直アクセス。

すると画像が表示されず、ダウンロードされてしまった。

あー、マルチアイコンにしてるからいけないのか。

ちなみにマルチアイコンとは、複数の favicon 用画像を1つの favicon として変換したもの。

16〜48px の中から3つほど設定しておくと、その都度見合ったサイズの画像を自動で使用してくれるという優れもの。

最近では 64px まで OK な所もありますね。

そんな優れた技術を使用していましたが、たぶん画像として認識するには如何せんグレーゾーンなのでしょう。

ということで普通の画像1つのみの favicon に変更。

しかし、表示されることなくまたまたダウンロードされました・・・

うーん、待てよ・・・これは・・・

ダウンロードされたということは、画像として認識されてないってこと。

ということは、サーバー側に「.ico」は画像ですよって設定がされてないということなのでは・・・

なので下記設定を .htaccess に追記。

AddType image/x-icon .ico
<Files favicon.ico>
ErrorDocument 404 ファビコンをアップロードしたURL
</Files>

「AddType image/x-icon .ico」は、拡張子が「.ico」のファイルは「image/x-icon」タイプなんですよって記述。

設定を説明しているサイトさんで「AddType image/xicon .ico」と書いてるサイトさんがありますが、自分のサーバーはこの設定では動きませんでした。

もし動かない場合「AddType image/x-icon .ico」に書き換えてみてください。

<Files favicon.ico>
ErrorDocument 404 ファビコンをアップロードしたURL
</Files>

これは直下に favicon を置いていない場合にファビコンの場所を教えてあげます。

もちろん「ファビコンをアップロードしたURL」て書かれてるところはファビコンを UP した場所の URL に書き換えてくださいね。

ただ、この方法は「404 Not Found」になった後に参照される形になるのでエラー扱いです。

なので、できるだけ直下にも置いておく方が無難でしょう。

なぜ、直下にも置いた方がいいのか?

前回紹介した下記のサイトさんでも書かれていますが、今どきのブラウザはサイトにアクセスしてきた際に、直下の favicon へのアクセスも試みるようです。
⇒ favicon.ico は link 要素で明示的に指定するべきか

もしどうしても直下に置くのが嫌なのであれば、先ほどの 404 の方法の他にリダイレクトで表示する方法もあります。

RewriteEngine On
RewriteCond %{REQUEST_URI} ^/favicon.ico$
RewriteRule (.*)favicon.ico$ ファビコンをアップロードしたURL [L]

.htaccess に上記の様に設定すれば、直下の favico.ico にアクセスがあった場合、指定した URL にリダイレクトしてくれます。
※この設定をする場合は上で書いた 404 の設定は不要です

ただし、このリダイレクトでの方法が良いか悪いかはわかりません。

なのでできるだけ直下にも置きましょう。

この状態で試した結果、ちゃんと画像として表示されました。
※画像表示されたのは IE のみで Chrome 等はダウンロードされます

たぶんこれで大丈夫・・・であろう。

今回行った設定をまとめると・・・

  1. 「rel=”icon”」の行と「rel=”apple-touch-icon”」の行を消す
  2. 「rel=”shortcut icon”」の行の「type=”image/vnd.microsoft.ico”」の記述を消す
  3. .htaccessに「AddType image/x-icon .ico」の設定をする

以上。

追記

続きの記事を書きました。
⇒  続々・bing の検索結果に表示されるアイコンと favicon の記述