髪の毛切り抜き / Photoshopを使って背景をきれいに切り抜く方法まとめ | DesignWalker
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
PHPでフラッシュのグラフを作る「PHP/SWF Charts」 - GIGAZINE
これを使えば無料で恐ろしく見栄えのするフラッシュでできたグラフをPHPで作成することができるようになります。標準的なグラフを表示するだけでなく、アニメーションを使った様々なビジュアル効果を加えたり、印刷ボタンや切り替えボタン、グラフを見る方向の変更、複数のグラフの混在なども簡単にできるので、一風変わったグラフ表示をお手軽にしたい人には最適ではないかと。 PHP/SWF Charts http://www.maani.us/charts/index.php その他のグラフのサンプルは以下を参照 http://www.maani.us/charts/index.php?menu=Gallery ダウンロードはこちらから http://www.maani.us/charts/index.php?menu=Download ほかにも有用なものがあるので、多彩な表現方法を手間無く使いたい人は必見。
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが１ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう？という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
プログラマが1ヶ月でWebデザイナーに転身する方法 - やねうらおブログ(移転しました)
サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。 しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。 そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね？」と思った。 今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。 ■ HTML,CSSを覚えよう まず、HTMLとCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。 ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えている
jQueryやCSSを使ったナビゲーションメニュー300選 – creamu
かっこいいナビゲーションメニューをさくっと実装したい。 そんなあなたにおすすめなのが、『300+ Jquery, CSS, MooTools and JS navigation menus』。jQueryやCSSを使ったナビゲーションメニュー300選だ。 以下にいくつかご紹介。 » Fancy menu かっこいいナビゲーションメニュー » Amazing apple style navigation menu Appleのサイトのようなナビゲーションメニューの作り方。↑のキャプチャはこちら » jQuery idTabs 8つのクールなjQueryメニュー » navigation-3 プルダウンメニューなど4つの例 » block-navigation CSSデザインのメニュー9選 その他のリストは以下から。 » 300+ Jquery, CSS, MooTools and JS na
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」:phpspot開発日誌
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」 2009年03月12日- jQuery Context Menu Plugin これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」。 ちょっと前までだと独自の右クリックメニューを作るのはすごく大変でした。特にクロスブラウザで動作することなんかを考慮すると本当に大変でした。 が、このライブラリを使えば簡単に実装できてしまいます。 特定のエレメント上のみに右クリックメニューを設定できるという、柔軟なつくりになっています。 どのアイテム上でクリックしたかっていうのがイベントハンドラで受けられるところも汎用的になっていていいです。 このライブラリ１つとってみても、jQueryを使う意味が出てきそうです。 jQueryは本当にデフ
モバイルサイトデザイン集のモバイルデザインアーカイブ 公式サイト
モバイルデザインアーカイブとは？ 携帯サイトを制作する上で、「ケータイサイトを参考にしたいけど、仕事に役に立つケータイサイト集ないかなー？」と思っているデザイナーの方へ向けて公開させていただきました。 そんなモバイルデザイナーのモバイルデザイナーによるモバイルデザイナーのための国内最大の携帯サイト集です。 モバイルサイト制作を請け負ったけど、「なかなかデザインがまとまらない」「洗練 された携帯サイトのデザインを参考にしたい」といった方のために、優れたデザインの ケータイサイトを集めました。 デザインに優れた携帯サイトはもちろん、技術的に優れた携帯サイト、そして現在のウェブトレンドを捉えた携帯サイトを掲載しています。
ウェブサイトの制作・検証に役立つブックマークレット集
レイアウト用のグリッドをオーバーレイで表示します。 URLを変更すれば画像の変更可。 Bookmarklet Layout Grid Overlay MRI
プロフェッショナルなロゴ作成の手順:phpspot開発日誌
How to Create a Professional Logo | Webdesigner Depot プロフェッショナルなロゴ作成の手順、ということで、単にロゴを作って終わりというのではなく、ロゴを作った後々まで考えた上での、プロならではの制作手順が書かれていてなかなか勉強になりました。大まかにメモしてみました。 1. まず紙に書いてブレインストーム 紙なら自由に書けるし、どこでも変更が容易ですね 色々練っておくことで顧客との調整もうまくいきそう 2. イラストレーターなどでベクター化 プリント・拡大/縮小されることなんかを考えて当然、ベクターでデザイン 3. 色合いを決める 依頼者のイメージにあった色合いを作成 「Adobe’s free Kuler service」などを使うと便利。 4. 白黒のバージョンを作る コピー、ＦＡＸ等、白黒で使われる場合のための表示確認。 白黒にした
アイコンデザインにおける10の間違い | CREAMU
アイコンデザインで注意するポイントが知りたい。 そんなときにおすすめなのが、『10 Mistakes in Icon Design』。アイコンデザインにおける10の間違いだ。 以下にご紹介。 アイコンのデザインの差があまりない アイコンをセットで作る場合、見分けられないデザインはよくない。↓はMac OS Xのユーティティーアイコン。見分けがつきづらく、間違って起動してしまう。 一つのアイコンに要素が多すぎる アイコンの中の要素は少なければ少ないほどよい。要素が多いと、小さくしたときに判別しにくい。 不要な要素を含んでいる 要素を少なくし、メッセージがストレートに伝わる要素だけを置きたい。↓はDBアイコンの例。DBであることがわかっているなら、後者の例にした方がわかりやすい。 アイコンセットに統一性がない アイコンセットは、カラースキーム、遠近感、サイズ、描画技術を統一すべき。 小さいアイ
ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集:phpspot開発日誌
25 jQuery Plugins for Navigation ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種がまとまっていました。 jQuery (mb)Menu クールなアイコン付階層メニュー BDC Drilldown Menu (iPod Style) iPod風ドリルダウンメニュー jBreadCrumb 動くパンくずリスト Treeview そのまんまツリービュー jQuery Full Width Navigation Widthを指定のサイズにあわせる jQuery Nested Tabs タブ内タブというネストが可能なプラグイン FastFind Menu クールなメニュー実装 jQuery Pagination Pagerを実装 全部見る 最近
プログレスバー 無料サービス「Preloaders.net」 - GIGAZINE
AJAXなどを使ってデータをバックグラウンドで読み込んでいる間、ユーザーが待っている時間のストレスをできるだけ少なくするためにできたのがこのプリローダーというもの。Flashなどではおなじみのアレです。このプリローダーを無料かつ簡単に作成できるオンラインサービス、それが「Preloaders.net」です。形・色・サイズ・アニメーションする速度を選べば即座に完成するというお手軽さ。だからといってできあがるアニメーションはしょぼくないというのがポイントです。 実際のサンプルや作り方などは以下から。 Preloaders.net | Free AJAX animated loading gif's | 3 dimensional (3D) http://www.preloaders.net/ 種類は「3次元（3 dimensional）」「四角形（Rectangular）」「円（Circula
離脱されない携帯サイトのフォーム作成術 (ユーザビリティ実践メモ)
みなさんは携帯サイトの会員登録を行う際に以下のような経験はありませんか？ ・入力エラーが発生した。 ・次ページの読み込み中に接続不良となった。 弊社のユーザ行動観察調査では、会員登録時に上のような状況に直面すると、多くの人が会員登録をあきらめてしまう様子が観察されています。 今回はこのようなトラブル発生を防ぎ、「離脱されないフォーム」を実現する上で重要となるポイントを２つご紹介します。 フォーム入力例を適切な位置に配置する フォーム内の各項目に入力例を明示することでエラー発生を防ぎます。ごくごく当たり前のことですが、PCサイトに比べてコンテンツスペースが少ないことを理由に、携帯サイトでは「入力例が省略されたフォーム」が多く見受けられます。 また、入力例の配置にも注意が必要です。たとえ入力例が配置されているフォームであっても、下図の左側のように入力欄の下に配置しているものは十分と言えません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]上級者向け、スタイルシートのテクニック集
http://www.designwalker.com/2009/03/form-design-2.html
同一色相配色のWebデザイン50 – creamu
Fireworksのチュートリアルいろいろ - DesignWalker
ikesai.com
