第1部 アプリケーションデザインの基礎 アップルヒューマンインタフェースガイドラインのこの部では、Macintoshインタフェースの裏側にある哲学と心理学を提示します。 直感的で人をひきつけるヒューマンインタフェースを提供する、すばらしいソフトウェア製品を作るために、あなたが利用できるデザイン原則と配慮について、この部を読んで学んでください。 あなたはどのようにして、優れたヒューマンインタフェースの配慮とあなたのデザイン、そして意思決定のプロセスをまとめるのか、また、どのようにして、ユーザをデザイン工程全体を通して関係させていくかについて、発見することでしょう。 さらに、このガイドラインの魂と志を支持するうちに、どのようにしてこのガイドラインと共に作業し、この内容を超えていくかを、本稿はあなたに告げることでしょう。 ←はじめに →第１章：デザイン工程

IE用に条件付きコメントを使用してスタイルシートを配置した際に、ブラウザのレンダリングをすこし早くするテクニックを紹介します。 ※下記の画像はクリックで拡大 Conditional comments block downloads 上：test 1の測定結果（適用前：CSSの後に読み込み開始） 下：test 2の測定結果（適用後：CSSと並列で読み込み） [ad#ad-2] 下記は上記ページを参考にしたものです。 はじめに スタイルシートの構成 test 1：ごく普通に条件付きコメントを使用 test 2：条件付きコメント使用時に並列読み込みを可能にする その他の解決方法とまとめ はじめに 条件付きコメントを使用しない場合は通常、CSSファイルと次のファイルが並列で読み込まれます。 条件付きコメントを使用した場合 詳しくは後述のtest 1：ごく普通に条件付きコメントを使用を参照 これを並

Faviconをはじめ、iPhone, iPad, Androidなどのモバイルデバイス、Chrome, Safariなどのブラウザ、Lunux, Mac OS X, WindowsなどのOSで使用するアイコンのサイズとフォーマットを紹介します。 Icon Reference Chart 上記より主要なものを下記にピックアップしました。 favicon size 32px, 16px format favicon.ico, .png, .jpg, .gif Android -Launcher&Menu size 36px(idpi), 48px(mdpi), 72px(hdpi) format .png Google Chrome Extension Icon size 16px, 48px, 128px format - iPhone App icon size 57px(10px) f

960pxのグリッドに4, 6, 8, 10, 12カラムとそれに伴ったガイドを1クリックで用意してくれるPhotoshopのアクションを紹介します。 960 Grid Actions for Photoshop アクションはPhotoshopのドキュメントを新規作成するもので、グリッド・カラム・ガイド以外にもレイヤーにヘッダやフッタなどのフォルダも準備されます。 フォルダも準備されます アクションを一から作成するのは面倒なので、これをそのまま使用してもよいし、自分用にカスタマイズしてもいいかもしれません。 ダウンロードしたアクションファイルは当方のPhotoshop CS4日本語版でエラーが出てしまったので、それを修正する方法を紹介します。 ※再配布のライセンスがなかったので説明のみで。 日本語環境と英語環境で作成される名前が異なるため、エラーが表示されます。 エラーの内容はレイヤー「G

2009年04月01日HARELが新しくなりましたHARELが、新機能の追加でますます便利になりましたので、ぜひお試しください。 お手持ちのHTMLファイルをHTMLアップロードページからアップロードすることで、HTMLファイルをチェックできるようになりました。HTMLテキストをHTMLテキスト入力ページから入力することで、HTMLテキストを直接チェックできるようになりました。結果をまとめて表示する機能が追加されました。また、より多くのチェック観点でチェックできるようになりました。 今後ともHARELをご愛顧賜りますよう心よりお願い申し上げます。 とても危険な画面の点滅【解説】ユーザの注意を引くことを目的に、ロゴやバナーを点滅させているウェブページがあります。 画面の点滅は光源性てんかんを誘発する場合があり、大変危険です。特に、弱視のユーザで、画面を拡大している方の場合、点滅の範囲が広く

Mobile App Galleryは各種アプリのデザインギャラリーサイトです。カテゴリごと、色ごとに分けて分かりやすく表示しています。

Photoshopで使える高品質なグラデーション25セット（約750種類） 2010/04/05 | カテゴリ：カラー・グラデーション ◆25 High Quality Gradient Sets for Photoshop - 750+ Gradients Speckyboy Design Magazineの上記エントリーにて、Photoshop用のグラデーションファイルが25セット（全部で750種類ほどのグラデーション）まとめられているので、そこからいくつかピックアップして紹介します。 ◆Clean Gradients Set ◆Vintage Gradients ◆Dooffy gradients set002DC ◆Adobe CS3 Gradients ◆Shattereds Gradients ◆iPhone Gradation Set ◆75 Modern Photoshop

+ or arrow up    to zoom in - or arrow down  to zoom out space            to cycle through sizes f                to toggle fluff If you like Testsize.com, please also check out Time.is, for the exact time, time in London, time in Paris, time in New York, time in Sydney, or the time anywhere in the world! There is also a JavaScript clock widget which you can put on your own website, a meeting plan

Adobe BrowserLab requires Adobe Flash Player version 10.0.0 or higher and Javascript enabled in your browser. Click the button below to download and install the latest version of Flash Player now Adobe BrowserLab An easier, faster solution for cross-browser testing Preview and test your webpages on leading browsers and operating systems - on demand. Adobe BrowserLab makes it easier and faster t

Simplistica Icon Set is the new free icon set of DryIcons’ creative team! After few weeks of icon development they are giving away another free icon set. The Simplistica icon set is very user friendly and has a glossy style. It consists of the most useful application and web icons. Icons come in these sizes: 16x16px, 32x32px, 48x48px and 128x128px and 32-bit transparency PNG file format. Simplicit

青・紫・赤・オレンジ・茶・緑・モノクロなど、カラー別Webサイトデザイン50選 ◆50 Monochromatic Website Designs [Webdesigner Depot] [情報元：同一色相配色のWebデザイン50:CREAMU] 青・紫・赤・オレンジ・茶・緑・モノクロというカラー別に、全部で50のWebサイトが紹介されています。以下では各カラーごとに1サイトずつ紹介します。ちなみに、上記画像のサイトは「Loewy Design」 Blue - 青 ◆Mark Lamb | User Experience Designer - User Interface & UX Designer, Brisbane Purple - 紫 ◆DesignSvn - Subversion for Designers Red - 赤 ◆Kobe - Horsforth's premier b

Share Your Color Ideas & Inspiration. COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love.

ブログカスタマイズ講座 > デザイン編 Photoshopなどの画像編集ソフトを使用して作成することも可能ですが、ストライプ画像作成ジェネレーターを利用すれば、もっと簡単に作成できます。 ストライプ画像を背景画像として使用すると、単色でベタ塗りした背景よりも、洗練された感じがしますので、是非、試してみてくださいね。 ■ サンプル（ストライプ画像） 1. background image maker 「斜め線」や「平行線」、「ドット」、「グラデーション」の４パターンを簡単に作成することができます。また、線の間隔や、線の色、背景色、透過、サイズなども指定することができますので、かなり自由度が高いです。 使用方法 値を指定してから「Make」をクリックすると、右側にサンプルが表示されます。 「image」の下にある画像、あるいは、「URL」に表示されているアドレス先の画像をダウンロ

ブログカスタマイズ講座 > デザイン編 Photoshopなどの画像編集ソフトを使用して作成することも可能ですが、「ロゴ作成ジェネレーター」を利用すれば、あっという間に作成することができます。 「Web2.0」のデザインの特徴は、「グラデーション」「反射効果」「角が丸い」「BETAバッジ」などが挙げられます。実際に、サンプル画像を見て頂ければイメージしやすいと思いますが、数多くのサイトで見かけるデザインですね。 「Web2.0」風のロゴを作成する際には、是非、試してみてください。 ■ サンプル（Web2.0風ロゴ画像） 1. Web2.0 Logo Creator by Alex P テキスト（半角英数字）を入力するだけで、Web2.0風のロゴを作成することができます。また、色・グラデーションの指定や、「反射効果」「BATAバッジ」の表示の有無が設定できます。 使用方法 「T

ベストデザインのサイト、Best of CSS Design、Photoshopなどの画像のチュートリアル、スクリプトやソースなどさまざまなテーマの2008年のベストを選出しているサイトの紹介です。 デザイン関連