みなさんは、ブラウザは主に何を使われていますか？

↓こちらは、このブログの一ヶ月間の読者の方々のブラウザTop10なのですが、まだまだ半数以上の方々がIEを使われているようですね。。（少し見づらくて申し訳ありません…。）

ちなみに、こちらがIEのバージョン情報です。6.0を使っている方が、かなり多いんですね。

こちらはFirefoxのバージョン。圧倒的に2.0の方が多いです。

っと、いろいろなバージョンのブラウザを使われているので、どのブラウザで見ても、なるべく崩れたりしないように、サイトを構築していきたいものです。

本日は、MacやWindowsで複数バージョンのブラウザを共存させて、簡単にブラウザチェックができる方法をまとめてみました。

Windows IE編

Multiple IE

こちらは、かなり有名なのでお使いの方も多いのではないでしょうか？IE3〜IE7までを共存させる事ができるソフトです。とっても便利ですね。。ずいぶん前にこのブログでもご紹介しました。インストール方法はこちらからどうぞ〜。

IETester

こちらは、先日話題になっていたツールですね。共存というと少し違うのかもしれませんが、IE8.0 betaも確認できるところが良いですよね。

Mac IE編

2005年12月31日にサポートを終了したIE for macなのですが、IE6.0と7.0をMacにインストールできてしまうソフトです。ちなみに、めちゃめちゃ重いです。。さらに、7.0は、もっと重いです。。表示も6.0のままだったり…日本語も、フォントをインストールしないと文字化けます。。っと、使い勝手は良くないです。。が、BootCampやVMwareなどを使わずに、IEをMacで確認できるのは、ちょっと便利かも。

ies4osx

実際にインストールしてみると↓こんな感じです。

Mac Firefox編

Macで複数のバージョンのFirefoxを同時に起動させる方法

今回は、試しにfirefox3.0b4をインストールしてみました。ファイルをダウンロードして、開くと↓のウインドウが開きます。アイコンをデスクトップにドラッグ&ドロップ。

保存された、Firefoxの名前を変更します。（そうしないと、今お使いのFirefoxに上書きされてしまいます。）今回は、firefox3.0b4と名前を変更しました。名前の変更が終わったら、Applicationsフォルダにドラッグ&ドロップ。これで、Firefoxが２つ目がインストールされます。その後、Mac OS Xのターミナルを起動して、

$ /Applications/Firefox3.0b4.app/Contents/MacOS/firefox -ProfileManager

入力してreturnキーを。（Firefox3.0b4.appの部分は、変更した名前を入力してください。）

すると、プロフィールを選択するウインドウが開きます。ここに、新規でプロフィールを追加して、Firefox3.0b4は、別のユーザーが開く設定にすると出来上がり〜！

同時に、Firefox2.0と3.0が起動しました！

Mac Safari編

Multi-Safari

こちらは、MacのPantherやTigerをお使いのユーザーの方用ですが。。Safariの複数のバージョンがインストールできます。

Safari 2.0.4 for Leopard

こちらは、Leopardをお使いの方にSafari 2.0.4がインストールできます。

実際にインストールしてみました。少し分かりにくいですが…Safari2.0.4と3.1が同時に起動しました〜。

みなさんも気をつけてお試しください。

みなさん、仕事でPowerPointを使われる機会が多いのではないでしょうか。

資料作成もセンスが問われますね。。

きれいなデザインの資料はやっぱり、見ていて気持ちがいいですよね。

本日は、無料で使えるPowerPointのテンプレートサイトを中心にいろいろとまとめてみました。

1. Art of Office – PowerPoint

Office Macユーザーのコミュニティサイトです。その名のとおり、アートなOfficeドキュメントがいっぱいです！Windowsでもファイルを開くことができますよ。

2. PresentationPoint | Free PowerPoint templates to download

ビジネス系のとってもきれいなテンプレートがいっぱいあります。

3. Free PowerPoint Templates, Free PowerPoint Backgrounds for Your Presentations

こちらは、一部のテンプレートが無料で公開されています。無料でもとってもクオリティが高いです。

4. mactopia | Office 2004 Templates

MicrosoftのOffice Macのページで公開されている、テンプレートサイトです。

5. Template Central – Instant Design Solutions for Busy People

こちらは、有料になってしまいますが、とってもきれいなサイトだったので、ご紹介…

6. Chart Chooser

PowerPointとExcel用のチャートがダウンロードできます。種類も豊富でいい感じですね。

7. Free PowerPoint Design Template Builder (beta)

PowerPointのテンプレートビルダーです。色、タイプ、クリップアートを選んで出来上がり。こちらのサイトでは、フリーのテンプレートも公開されています。

8. Free PowerPoint Templates, PowerPoint Backgrounds

ビジネス系のテンプレートが豊富。

9. Free PowerPoint Templates and Backgrounds

シンプルできれいめなテンプレートがいろいろ。

10. Brainy Betty Official Site

いろいろなタイプのテンプレートがたくさん公開されています。

11. Microsoft Office Online

最後に、Microsoftのテンプレートサイト。

本日は、国別クリエイティブ・ウェブデザインまとめの第３弾です。

第１弾: 『ロシアのクリエイティブなウェブデザインまとめ』

第２弾:『イタリアのクリエイティブなウェブデザインまとめ』

今回はドイツ編です。ドイツ語サイトもとってもクリエイティブなものが多く、まとめて55サイトご紹介。

1. David Hellmann – Grafikdesign, Webdesign, Screendesign, (X)HTML, CSS

2. pixelgraphix – Webdesign, CSS, Grafikdesign und Blogging

3. surfgarden – Mac, Fotografie, Webdesign, Blogging

4. {ths}

5. CREAVATION – Agentur für Werbung • Werbeagentur für Deutschlandsberg und die Steiermark

6. I am Jeriko

7. Plunts.de Plunts.de – Wir sind eine Designagentur

8. draft.media Portfolio und Journal

9. Der Druckfarben DOC – Problemlösungen für den Druckalltag

10. K&N – Timmendorfer Strand

11. Interone Worldwide – An Agency of BBDO Worldwide

Die 100 Besten Schriften

13. Virtual Water – a double-sided poster visualizing the water footprint of products and nations

14. Photocase – Prettying up the world.

15. Sven Kils – Graphic Studios

16. dotkraft | Elegant Standards Based Webdesign | Graphic Design

17. Alles auf globalzoo.de

18. DUMMY MAGAZIN //JEDESMAL NEU. JEDESMAL ANDERS.

19. Thorsten Konrad

20. Kollermedia.at – The Website of the Freelancer Koller Jürgen

21. Startseite von »Denklichter & Denkgifte«

22. GIMMIXX NEW MEDIA

23. desres

24. Gutscheine und Rabatt-aktionen – TinyPrice.de

25. popnutten :: le blog plus cool ::

26. Screendesign, Webdesign & WordPress Blogdesign in Leipzig

27. iconwerk icon design icondesign piktogramme Icondesigner icons pictograms

28. tim-adler.com – a freelance blog

29. keasone.de | finest screen graphics

30. Piktogramme und Icons

31. Cube Club Chemnitz

32. Tennis, Leipzig, Tennisclub Blau-Weiß Leipzig e. V.

33. Miss & Lady’s Boutique

34. Jung von Matt

35. Styleserver.de – Online-Shop aus Berlin für Jungdesigner-Mode und Accessoires

36. Screenz.de

37. PIXELGANGSTER :: the daily DesignBlog

38. adehauserlacour.de

39. Spoonfork Online Magazin

40. dersven.de ¶: Typografie, Gestaltung und das Web-Leben als Blog

41. Kulturbanause – realise your fantasies

42. Master Plan – About the power of Google

43. FIFTYEIGHT 3D

44. Meiré und Meiré

45. Inspirationsquelle für verbale Design-Argumentation

46. Atelier Bernd Kuchenbeiser

47. So schön bist du – Professionelle Fotos für Dich!

48. Musikbetriebe

49. Glashaus [The Portfolio of Peter Hoffmann]

50. 3deluxe :: Transdisciplinary Design

51. only a blog

52. Bionic Systems — Studio for Design & New Media

53. derBauer® Audio Visual Media | LU: 02.02.2008 17:20 UTC

54. AUSMAG – das Australien Work & Travel Portal – Arbeiten und Reisen in Australien

55. Martin Klimas Photography

そろそろ、パソコンをもう一台購入しようかと考えている今日この頃。 どうせ買うなら、大きなモニターがいいなぁっと思ったり、今使っているモニターを接続して、デュアルモニターにしてもいいなぁとか… 将来的には↓こんな感じでどんどんとモニターを増やして。。。

ここまで、モニターは増やさなくても、デュアルモニターで作業をされているデザイナーの方々は意外に多いのではないでしょうか？ 本日は、デュアルモニター用のクオリティの高い壁紙を配布されているサイトをまとめてみました。

1. dual wallpapers | hi-res dual screen wallpapers

2. Vladstudio.com

3. mandolux

4. Digital Blasphemy Members Gallery

5. Social Wallpapering

6. PROWALLPAPERS.com

7. Browsing Multi Display on deviantART

8. Dual Widescreen Wallpapers

9. The Best HQ Celebrities Wallpapers

10. dmb – Dual Monitor Backgrounds

11. Dual-Display.com

12. Dual Monitor Babes

13. bestqualitywallpapers.com

14. Dual Monitor Backgrounds

15. DualScreenWallpaper.com

先日、DesignWalkerのタネでご紹介した『同じ画像ですい込まれていくようなドロステ効果なアートいろいろ』

とっても不思議な画像ですよね。。↓こんなん。

こんな画像が簡単に作れないかなぁ。

っと調べてみたところGIMPとmathmapというプラグインを使って作るドロステ効果のチュートリアルがFlickrにアップされていました。

と言うわけで、さっそく試してみたので手順をメモ。

最初に『Droste Effect Step #1』←こちらのページから必要なファイルをダウンロードします。

GIMPをインストールしていない方はこちらからダウンロードしてインストールしてみてください。

GIMPのインストールが終わったら、次にmathmapというプラグインをダウンロードします。

ダウンロードしたmathmapのファイルを解凍すると↓のファイルがあります。そのうち赤で囲まれた３つのファイルを以下の

plug-insフォルダにコピーします。
C:\Program Files\GIMP-2.0\lib\gimp\2.0\plug-ins

残りの２つのファイルを

mathmapというフォルダを以下のディレクトリに作成してコピーします。
C:\Documents and Settings\ “your-user-name” \.gimp-2.2\mathmap

最後に、今回のチュートリアルで使用するファイルをダウンロードします。

ダウンロードしたファイルを解凍すると↓の２つのファイルがあります。先に、”Droste4.txt”をメモ帳などで開いておいてください。

GIMPを立ち上げて、”Mark.psd”を開きます。

フィルターから”mathmap”を選択

“mathmap”を選択すると↓のようなウインドウが開きます。

開いたウインドウのタブ”Expression”をクリックして、先ほどあらかじめ開いておいた”Droste4.txt”の内容を全てコピーしてペーストします。

テキストをペーストしたら、右下の”OK”ボタンをクリックするとフィルターが適用されます。（多少時間がかかります。。）

するとこんな感じに仕上がりました～

みなさんも是非ドロステ～な画像を作ってみてくださいね～。

今日、大変興味深い記事を発見したのでメモ。

その名も「Speed Up Firefox web browser」

元記事の筆者が言うには３－３０倍Firefoxがスピードアップするということですが。。

っちゅうわけで、日本語訳しながら、早速やってみました。。

まず、Firefoxを立ち上げて。。↓のようにロケーションバーのところにabout:configってコピーしてenterキーを。。。そしたら、なにやら色々出てきます。。

下にfilterってボックスがあるので、そこにnetwork.http.pipeliningってコピーしてenterキーを

絞り込まれた、network.http.pipeliningを選択して、右クリックで「toggle」を選択して、Valueのfalseの部分をtrueに変更。

次に、またfilterボックスにnetwork.http.pipelining.maxrequestsってコピーしてenterキーを

絞り込まれた、network.http.pipelining.maxrequestsを選択して、右クリックで「modify」を選択して、Valueの4の部分を8に変更。

またfilterボックスにnetwork.http.proxy.pipeliningってコピーしてenterキーを

絞り込まれた、network.http.proxy.pipeliningを選択して、右クリックで「toggle」を選択して、Valueのfalseの部分をtrueに変更。

またfilterボックスにnetwork.dns.disableIPv6ってコピーしてenterキーを

絞り込まれた、network.dns.disableIPv6を選択して、右クリックで「toggle」を選択して、Valueのfalseの部分をtrueに変更。

またfilterボックスにplugin.expose_full_pathってコピーしてenterキーを

絞り込まれた、plugin.expose_full_pathを選択して、右クリックで「toggle」を選択して、Valueのfalseの部分をtrueに変更。

次に、どの項目でも良いので選択して、右クリックで「new」を選択して、「integer」を選択。

「integer」を選択しすると、↓のようなボックスが出てきます。

nglayout.initialpaint.delayと入力して、「OK」ボタンをクリック

「0」を入力して、「OK」ボタンをクリック。

filterで、nglayout.initialpaint.delayと入力して、enterを押して、nglayout.initialpaint.delayが見つかればOK

また、どの項目でも良いので選択して、右クリックで「new」を選択して、「integer」を選択。

「integer」を選択しすると、↓のようなボックスが出てきます。

content.notify.backoffcountと入力して、「OK」ボタンをクリック

「5」と入力して、「OK」ボタンをクリック。

filterで、content.notify.backoffcountと入力して、enterを押して、content.notify.backoffcountが見つかればOK

また、どの項目でも良いので選択して、右クリックで「new」を選択して、「integer」を選択。

「integer」を選択しすると、↓のようなボックスが出てきます。

ui.submenuDelayと入力して、「OK」ボタンをクリック

「0」と入力して、「OK」ボタンをクリック。

filterで、ui.submenuDelayと入力して、enterを押して、ui.submenuDelayが見つかればOK

一通り設定が終わったら、いったんFirefoxを閉じて起動しなおしてみます。。う。。。微妙に早くなったかな。。気の持ちよう？？いや、早くなったはず。。。うん。確かに早くなった気がする。。。

特に、画像の多いページを読み込むときには早くなったような気がします。。。
もちろん、ネット接続スピードが速くなるわけではないですが。。

どなたか、詳しい解説おねがいします～！！！（ひとまかせ。。。ごめんなさい。）

デザインblogランキング

先日、GIGAZINEさんの最強の呼び声高いブログ用対スパムプラグイン「Akismet」というエントリーを読ませていただき、前々から気になっていた、「Akismet」を導入してみました。

WordPressだけではなく、MovableTypeにもプラグイン公開されておったのですね。。（知らんかった。。）

っちゅうわけで、今回は「Akismet」をMovableTypeに導入する方法をご紹介じゃ。

1. 「Akismet」プラグインをダウンロード

まず、最初にMT用の「Akismet」プラグインをダウンロード。「Development」ページの真ん中あたりにMT用の「Akismet」プラグインがあるので、それをダウンロードしてくださいな。

2. ファイルをアップロード
ダウンロードしたファイルを解凍すると「extlib」「plugins」ってフォルダができるので、それぞれのファイルの中身をFTPで同じ名前のフォルダの中にアップロードします。

3. API Keysを取得
WordPressのアカウントを作ってAkismetのAPI keyを取得します。アカウント作成ページは→こちらから。

WordPressのアカウントはもちろんフリー。希望のユーザーネームとメールアドレス、規約に同意するチェックボックスにチェックを入れて、「Next」ボタンをクリックして次に進みます。

入力したメールアドレスに登録確認メールが送信されます。送信されたメールにリンクアドレスが送られてくるので、そのアドレスをクリックして、登録を完了させます。

登録完了すると、ユーザーネーム、パスワードが表示されます。

WordPressのトップページから表示されたユーザーネーム、パスワードで、ログインします。WordPressのトップページは→こちらから。

ログインすると、下のほうにAPI Keyが表示されてるはず。それをコピー。これで、API Keysの取得完了です。

4. MTのプラグイン管理画面にAPI Keyを張り付け
MTの管理画面のメイン・メニュー > システム・メニュー > プラグインから、MT-Akismetの設定を表示をクリックしてAPI Keyを張り付けます。

5. Askimetの設定
MTの管理画面のメイン・メニュー > 設定したいブログ > プラグインの設定から、MT-Akismetの設定を表示をクリックしてAskimetの設定をして完了！！

とりあえず、試しにAskimetの設定を１０段階の５に設定してみました。これでスパムのない平和なブログ生活が送れるのでしょうか？？

デザインblogランキング

日本語のフォントって、ブラウザで表示させるとギザギザに表示されて、綺麗じゃないんですよねぇ。。。

かといって、画像を毎回作るわけにも行かず。。。

どうしたものかなぁ。。っと悩んでおったところ。。
発見いたしました～！！

BJKit(BeautifulJapaneseKit)
JavaScriptと日本語のフォントを埋め込んだswfを用意することで、動的にアンチエイリアスの効いたフォントに入れ替えてくれます～。

いやぁ～。。待ってました。こんなん。
かなり画期的です。もう、お気づきの方も多いかもしれませんが。。。

試しに、このブログでも導入してみました。。

どうせなら、全部のフォントに適用して、きれいきれいなブログにしようと思っておったのでございますが。。。

とにかく、重い！。。swfファイルが重い！英語だけなら、アルファベットだけで済むので、かなり使える方法なのですが。。。

数千文字ある日本語のフォントを丸々埋め込むので、まだまだ、実用レベルではないのです。。。
でもでも、タイトル部分くらいなら、なんとか、いけるかなぁ～っと。。。

まぁ、とりあえず、肝心の導入方法をご紹介じゃ！

1. BJKit(BeautifulJapaneseKit)をダウンロード
BJKit(BeautifulJapaneseKit)
のサイトから、zipファイルをダウンロードして、解凍する。解凍したファイルをサーバにアップロード。

2. ↓のコードをhtmlの<head>から</head>の間にコピーして、beautifulJapanese.jsを読み込みます。

3. ↓のコードをhtmlの</body>の上にコピーします。

↑赤字の部分は、それぞれの設定の値を入力します。

左から、変換対象タグのid、変換対象のタグ名、flashファイルのファイル名、表示領域の幅、フォントのサイズ、行間サイズ、一行あたりに表示する文字数、フォントの色、リンク時のフォントの色、ロールオーバー時のフォントの色をそれぞれ指定します。

そしたら。。。

もう少し簡単に設定できて、フォントサイズが縮小されるようになったら、かなり使えそうですねぇ。。

デザインblogランキング

現在、IE（インターネット・エクスプローラー）の最新バージョンは、７がリリースされておりますが、未だにver.6を中心に前のバージョンを使っているユーザーさんが、たくさんいらっしゃいます。

このブログでアクセス解析してみたところ、７～８割のユーザーさんが、6.0を使用。１～２割のユーザーさんが7.0を使用。残りの１割弱のユーザーさんが5以下のバージョンを使用されているようです。。

今後、徐々に7.0にアップデートされていくようですが。。。まだまだ、統一されるまでには時間がかかりそうですねぇ。。

というわけで、サイト製作者は、IE（インターネット・エクスプローラー）5～7でのブラウザチェックはまだまだ、必要なようですね。。。（はやく統一してくれ。。。）

っちゅうわけで、簡単にIE（インターネット・エクスプローラー）の前のバージョンを同時に起動できんかなぁ。。なんて思っておったら。。見つけました。

Multiple_IE
このサイトからMultiple_IEっちゅう、ソフトをダウンロードして、インストールすれば、IE（インターネット・エクスプローラー）3～7まで同時に起動できますねん！

ではでは、早速インストール方法のご紹介。

1. Multiple_IEのサイトから、multiple-ie-setup.exeをダウンロード

↑のように、「Download Multiple IE installer」っちゅうところをクリックすると、ダウンロードが始まります。そのファイルをセーブ。

2. Multiple IEをインストール。

3. 規約に同意する。

なにやら、色々な規約がかかれてます。よければ、「I accept the agreement」の方をチェックして、「Next」ボタンをクリックして次に進みます。

4. インストールする場所を選択

5. インストールするIE（インターネット・エクスプローラー）のバージョンを選択

バージョン3.0～6.0までのバージョンを選択できます。インストールしたいバージョンをチェックして、「Next」ボタンをクリックして次に進みます。

6. 名前をつける

プログラムメニューに表示される名前をつけます。最初は、「MultipleIEs」になってます。よければ、「Next」ボタンをクリックして次に進みます。

7. ショートカットを作成。

デスクトップにショートカットを作りたいときは、「Create a desktop icon」にチェック。クイックランチに作りたいときは、「Create a Quick Launch icon」にチェックして、「Next」ボタンをクリックして次に進みます。

8. インストール情報を確認

インストール情報を確認して、よければ、「Next」ボタンをクリックして次に進みます。

9. インストール

インストールが開始されます。

10. インストール完了

インストールが完了したら、「Finish」ボタンをクリックして、ウィザードを閉じます。

そしたら、インストールされたIE（インターネット・エクスプローラー）がこんな感じ↓で表示されるはず。

なかなか、便利ですねぇ。。早速、このブログをいろんなIE（インターネット・エクスプローラー）のバージョンで、開いてみました。。

注: わたくしのPCでは、問題なく動いておりますが。。。問題が起こる可能性もあるそうです。。Virtual PCなどを使ってインストールする方が無難かも。。

デザインblogランキング

現在、わたくしがデザインしております、ＡｊａｘツールのサイトＡｏＤ!(エイ・オー・ディ びっくり）が本日、バージョンアップしたので、ご紹介。

このツールは簡単に言いますと、Ajaxのポップアップツールですわ。簡単に、あなたのブログにもクールなポップアップが取り付けられまっせ。って感じ。

Ajaxのポップアップって、正直。。。「ウザイ」

っちゅう人が多いのでは？？

まぁ。。。確かに。。。でも、使い方次第で、なかなか便利なツールになるかも？

わたくしの持論では、このＡｏＤ!(エイ・オー・ディ びっくり）は、本とかによくある、注釈みたいな感じで使えば、結構使えるような気がしてます。。

例えば、このＡｏＤ!(エイ・オー・ディ びっくり）の説明文。

っと。。。こんな感じなのですが。。。この文章を読んで理解できる人は多くはないはずですね。。

文章の途中途中に専門的な用語が出てきて・・・一般ユーザーの方々は、読んでる間になんのこっちゃわからんわい！ってなってしまいそうです。。

そこで、このＡｏＤ!(エイ・オー・ディ びっくり）の登場でございます。

↑の文章中に意味のわからん、単語をクリックしてみると。。。

とりあえず、今回はサンプルとして、Wikipediaの検索をくっつけてみました。。

これなら、ブログ読者もブラウザの新しいウインドウを開いて、検索して意味調べて。。。みたいな作業をすることなく、このページ上で問題解決できそうです。

さらに、ポップアップしたウインドウの上のバーの部分↓

ここをドラッグすると、ウインドウを動かせます。これで、今読んでる記事を邪魔することなく、注釈を確認しながら記事を読めますねぇ。さらに、一度閉じたポップアップも閉じた所で、場所を記憶しているので、再度ポップアップするときはその場所に開いてくれます！（←これが意外と便利）

右側に移動すると、次にポップアップするときには、同じ右側に開いてくれます。

まぁまぁ、適当に遊んでるうちにいろいろ発見できるツールになっております。

それでは、使い方のご説明。

1. ↓のコードを、ＡｏＤ!(エイ・オー・ディ びっくり）を表示したいhtmlの<head>から</head>の間にコピーします。

*赤字の部分は使用したい用途に応じて書いてください。とりあえず、そのままコピーすればいいですが。。。

2. コードをコピーしたら、本文のポップアップさせたい文字を

こんな感じで、タグで囲めばできあがり～っす。
*赤字の部分は使用したい用途に応じて書いてください。上の、例は、Wikipediaで「ブログ」の検索結果をポップアップさせたい場合っす。

他にも、YouTubeでの検索結果を表示したり、英和、和英辞書をポップアップさせたり。。いろんな使い道がありますよん。

さらに、プログラマな人には、自分でお好きなAPIをつなげて、ポップアップさせることも可能でございます。。

詳しい使い方、設定方法は↓

ＡｏＤ!(エイ・オー・ディ びっくり）のサイトからどうぞ～。

ポップアップのデザインも今後、追加予定でございますので、ご意見、ご要望、ご質問、などなど、どしどしお寄せくださいな。

デザインblogランキング