MercurySyscomトップページ
02
Feb

Adobe BrowerLab

WEBデザイン

Adobe BrowerLabというツールをご存知でしょうか。
Webサイトが各ブラウザでどのように表示されるかを再現し、
表示比較をしてくれるツールです。
それぞれのブラウザをいちいち立ち上げなくても、1つのブラウザ上で簡単に表示比較が
できるという便利なサービスです。(※要Adobe ID)
昨年6月に公開されていたものが、今年1月にアップデートされ大幅に機能が拡充しました。

このツールで再現できるブラウザ環境は以下の通りです。
■Windows XP
・Internet Explorer 6.x、7.x、8.x
・FireFox 2.0、3.0、3.5
・Chrome 3.0

■Mac OS X
・Safari 3.x、4.x
・FireFox 2.0、3.0、3.5

というわけで、さっそく弊社サイトで試してみました。

100202.jpg

はい、どのブラウザでも特に表示崩れもなく無問題でした(当たり前ですね!)
制作段階でブラウザ間のデバッグは徹底していますので、問題ないはずなのですが
改めてチェックしてみると少し緊張しますね。

この便利なツールですが、
残念なのはWeb全体に公開されているサイトのみが対象ということ。
当然ですが、社内サーバのイントラネット環境に仮アップしているサイトは
チェックすることができません。
本来ならばブラウザ間のデバッグは、サイト構築時に並行してチェックするべき問題なので
この点はちょっと残念ですね。

しかしクロスブラウザ表示というのは、サイト制作側にとっても非常に頭の痛い問題で、
古いブラウザについてもまだまだ対応をしていかなければいけないのが現状です。
こうしたツールの存在が制作の助けになることは間違いないですね。

by ebe 2010年2月 2日 16:27 トラックバックTrackback (0) コメントComments (0) このエントリーを含むはてなブックマーク
RSSATOM
06
Jun

ロゴ作成時に参考になるFlickr groups まとめ

WEBデザイン

デザイナーの上岡です。
ロゴデザインの参考になる、Flickr groups をまとめました。
グループのメンバーが自分で作成したロゴを公開したり、良いロゴをアップしたりしています。

logo.gif


さらに詳しく見る
by ueoka 2008年6月 6日 14:24 トラックバックTrackback (0) コメントComments (0) このエントリーを含むはてなブックマーク
RSSATOM
02
Jun

無料で使える230個以上のハイクオリティなアイコンセット

WEBデザイン

Free icons Download

ロイヤリティフリーの高品質なアイコンセットがダウンロード出来るサイトです。
個人利用で非商用であれば自由に使用可能。

free_icon.jpg

カテゴリーわけされていて見やすく、人気順などでソートすることも出来ます。
今後アイコンを作成する時に、チェックしていきたいですね。

by ueoka 2008年6月 2日 19:57 トラックバックTrackback (0) コメントComments (0) このエントリーを含むはてなブックマーク
RSSATOM
22
May

お世話になっているWEBツールベスト3

WEBデザイン

はじめまして、MS札幌支社の新入社員のSです。
入社してもうすぐ二か月になりますが、毎日はあっという間に過ぎていってしまいます。
日々、驚きと感動の連続です。

そこで、毎日奮闘している私が、お世話になっているWEBツールを敬意を込めてご紹介したいと思います。

さらに詳しく見る
by sakamoto 2008年5月22日 22:52 トラックバックTrackback (0) コメントComments (0) このエントリーを含むはてなブックマーク
RSSATOM
09
Feb

WEB2.0風パーツのジェネレーター

WEBデザイン
最近ではブラウザ上で簡単にWEB2.0風ロゴや、ボタン、 バナーなどが作れるサービスがあるようです。 実際に試してはないのですが(一応デザイナーなので)、 色々見ていたらこれがなかなかクオリティが高いのです。 こことか(ボタネイターと読むんでしょうか、怪しい悪役みたいですが) http://www.buttonator.com/ こんなのとか(サイトロゴがFrickrカラーですね) http://h-master.net/web2.0/ RSSFeedアイコン作成なんかも(なかなか可愛いですね・・・) http://www.feedicons.com/ これ最強なんじゃないでしょうか、Photoshop並に設定可能です。 http://tools.dynamicdrive.com/button/ 昔からある個人のWEB 素材屋さんなどで、文字の入っていないバナーや ボタンなどが配布されていました。 私も例外ではなく、素材屋をやっていてサービスで文字入れなんかした経験がありますが、 もはやそれも引退だ・・・ こんなサービスが出来るなんて、どんどんWEBは進化しているんですね。
by ueoka 2007年2月 9日 10:20 トラックバックTrackback (0) コメントComments (0) このエントリーを含むはてなブックマーク
RSSATOM
06
Nov

最強ツールバー

WEBデザイン
宇宙関連のサイトでAstrobiologyというサイトを見つけました。 宇宙に興味があるかというと、実はそうでもないのですが・・・ このサイト、各記事にすごいものを付けています。 記事をメールで送れる、FAX出来る、PDFにできちゃう、エクセルに、ワードドキュメントに、デスクトップに保存、PostScriptにケイタイに送る音声に変換 わーー!色々出来てしまいますね。 パっと見ただけでは何ができるのかわからないアイコンもありますが、代替でなんとかわかるようです。 情報を提供、発信する側の姿勢として、アクセシビリティとして見習うべきものがあります。 普段設置するものといえば、「印刷する」ボタン、「RSS」ボタンくらいでしょうか。 ニュースサイトや情報発信系のサイトを制作するときは、最低限これあったら便利だな、ということも考えたページ作りをしていかないといけないなーと、考えさせられました。
by ueoka 2006年11月 6日 23:36 トラックバックTrackback (0) コメントComments (0) このエントリーを含むはてなブックマーク
RSSATOM
18
Oct

小さなアイコンのチカラ

WEBデザイン
WEBデザインにおいて大事な箇所といえば、まず思い浮かぶのがロゴを含むヘッダー、ビジュアルエリア(トップ画像)、ナビゲーション等を思い浮かべます。 しかし、WEBデザインをしていてやってはいけないこと。 それはこれらを作ることに一生懸命になり、そこで力尽きてしまってその他の細かい部分がおろそかになること。 WEBページは細かなディテールをきちんと作りこむことによってクオリティが上がると考えています。 細かい部分を無造作に作ってしまうと、見る人には「あ~ここで手抜いたな」というのが伝わってしまいます。 更新日時の見せ方、小さなアイコンの色や形、区切るための線、これらの細かなパーツがWEBデザインにとっていかに大事か、テキスト中心のニュースサイトやポータルサイトを見るとよく分かります。 見やすく、読みやすくするための小さなパーツ作りが、よりよいサイトを作るための重要なポイントだと思います。
by ueoka 2006年10月18日 09:29 トラックバックTrackback (0) コメントComments (0) このエントリーを含むはてなブックマーク
RSSATOM
26
Sep

サイトの横のサイズをどうする?

WEBデザイン
最近は大きなモニターでWEBを見る人が増えてきているようで、それに合わせてサイトの横のサイズが大きくなってきているような気がします。 標準的とされる800×600を余裕でこえる1028pxのサイトも少なくありません。 因みに私がデザインする場合の基準は横778pxを超えないこと(要望があれば大きくすることもあります)。 しかし、私自身もそうですがブラウザの「お気に入り」を表示させながらネットサーフィンをする人も多いのではないかと思います。それにウインドウを最大化しないでちいさくして見る人も(こっそりネットするときとか・・・)。 そう考えると、やはりむやみに大きくはできないな~と思います。 こちらに解像度の統計が出ていました。 WEBのユーザビリティの鬼と云われているJakob Nielsen博士によると、最適な解像度は1024x768(!)であると言っちゃってます。 しかし、あくまでも
ユーザのウィンドウの大きさに合わせて、幅を流動的に変えるリキッド・レイアウトを使う(つまり特定のサイズに固定してはいけない)。
と書いていますね。 テキスト中心のニュースサイトをやる機会があれば、是非試してみたいものです。
by ueoka 2006年9月26日 09:37 トラックバックTrackback (0) コメントComments (0) このエントリーを含むはてなブックマーク
RSSATOM