使えるユーザビリティーガイドライン10 – creamu
遅いエントリーですが、Smashing Magazineで使えるユーザビリティーガイドラインがまとまっています。 ざっとご紹介しますね。 1. フォームのラベルはフィールドの上がベスト study by UX Mattersによると、フォームのラベルはフィールドの上が理想的とのこと。多くのフォームで、ラベルはフィールドの左に置かれ、2カラムのレイアウトになっている。いいデザインだが、最も使いやすいレイアウトとは言えない。なぜなら、フォームは一般的に垂直方向に並んでおり、ユーザーは上から下に向かって入力していく。ユーザーは視線を下の方向に向けていくのだ。そのため、ラベルが左にあるよりも、同じ方向にある方が認識しやすい。 2. ユーザーの視線は人の顔に向く Webページを見るとき、人の顔や目に視線が行く。マーケッターにとっては、注目を集める有効なテクニック。ユーザーは画像の中の人の視線が向いて
知っておきたい使えるCSSテクニック25 – creamu
Web Developer plusで、知っておきたい使えるCSSテクニックが紹介されています。 いくつかご紹介しますね。 ・テキストハイライト時の色を変更する SafariやFirefoxでテキストを選択した時の色を変更できる。コードサンプルは以下 ::selection{ /* Safari and Opera */ background:#c3effd; color:#000; } ::-moz-selection{ /* Firefox */ background:#c3effd; color:#000; } ・プリント時にページを指定箇所で分割する 以下のクラスを指定することで印刷時のページを分割できる .page-break{ page-break-before:always; } ・テキストの代わりに画像を表示する よく見られるSEOテクニック。ユーザーには画像を見せ、検索エ
シンプルなjQueryチュートリアルTOP12 – creamu
WebAir blogというブログで、シンプルなjQueryチュートリアルが紹介されています。 ざっとご紹介。 » Amazing Music Player Using Mouse Gestures and Hotkeys XHTMLとjQueryで実装されたミュージックプレーヤー。マウスジェスチャーとホットキーで動作する » FancyBox lightbox系のクールなエフェクト。MITライセンス » Jcrop 画像をトリミングする機能を追加できるjQueryプラグイン » Table Row Checkbox Toggle テーブルの行をクリックすることでチェックボックスにチェックを入れてくれる » AJAX Upload ページ遷移なしのAjaxファイルアップローダー » Scrollable jQueryで実装するクールなスクロールコンテンツ。HTMLを中に含むことができ、水平
illustratorでどんなフォントもスケッチフォントに変える方法 – creamu
vectipsで、クールなTipsが紹介されています。illustratorでどんなフォントもスケッチフォントに変える方法ですね。 ↑みたいなフォントが作れます。 1. テキストツールでテキストを入力 2. 塗りと線をなしにする 3. アピアランスパネルで、新規塗りを追加 黒を選択 4. 効果 > スタイライズ > 落書き で以下のように設定 5. 2ptの黒で線を追加 6. 線を選択した状態で 効果 > パスの変形 > ラフ で以下のように設定 以上ですね。 さらに、1クリックでこの効果が適用できるように、グラフィックスタイルパネルで新規グラフィックスタイル登録しておけば、1発で効果を適用できますね。 詳しくは以下からどうぞ。 » Turn Any Font Into a Sketch Font MacのDockを自動的に隠す設定にしてウィンドウが広くなりました☆表示するの好きだったんだ
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
FlashとAction Script3.0のチュートリアル30 – creamu
noupeで、FlashとAction Script3.0のチュートリアルが紹介されています。 ざっといくつかご紹介。 » Create an Impressive Magnifying Effect with ActionScript 3.0 displacementMapFilterを使って拡大鏡のエフェクトをかける » Creating Gradients in Flash Flashでグラデをかける基本操作を動画で学ぶ » Infinite Gallery / Menu Flash,AS3でギャラリーやメニューを作る方法 » Using the Timer Class to animate rotation タイマークラスを使って、シンプルなシェイプを回転させるチュートリアル » Flash Mouse Trailer with Stars マウスに星がついてくるエフェクト » C
いいデザイナーになるために参考になる50サイト – creamu
dzineblogで、いいデザイナーになるために参考になるサイトがたくさん紹介されています。 ざっといくつかご紹介。 チュートリアル » Tutorial9 » Photoshop Lady » HV Designs » Tutorial Dog デザインフォーラム » Designers Talk » Graphic design forum コミュニティー » Humble Voice » Deviant Art » Carbonmade デザインブログ » Design Melt Down » A list Apart » Design Mag 有名なものからちょっとマイナーなものまで、よくまとまっていますね。 ぜひ見てみてください。 » 50 Sites That Will Help You To Become a Better Designer MacBookのスピーカーの音がよ
素晴らしいjQueryのチュートリアル45選 – creamu
jQueryでクールなインターフェースを実装したい。 そんなときにおすすめなのが、『40+ Excellent jQuery Tutorials』。素晴らしいjQueryのチュートリアル45選だ。 以下にいくつかご紹介。 » デザイナーのためのjQueryチュートリアル » Facebookスタイルのlightbox » ソートできるポートフォリオの作り方。↑のキャプチャはこちら » フェードインするメニュー » jQueryとPHPで投票システムを作る方法 » PHPとjQueryで編集できるギャラリーを作る方法 » jQueryとXMLでAmazonのウィジェットを作る方法 » WordPressのコメント欄にjQueryのバリデーションをつける方法 » Appleのサイトのメニューを作るチュートリアル » タブインターフェースを作るチュートリアル » スライドするアコーディオンメニュ
Webデザイナーとしてのスキルを上げるためのPhotoshopチュートリアル70選 – creamu
デザインのスキルを上げたい。 そんなあなたにおすすめなのが、『70+ Photoshop Tutorials to improve your Skills as Web Designer』。Webデザイナーとしてのスキルを上げるためのPhotoshopチュートリアル70選だ。 以下にいくつかご紹介。 ↑のキャプチャは自然にインスパイアされた背景。 プロフェッショナルなヘッダーデザイン 艶のある3Dボタン Wiiのヘッダー ブログのクリエイティブなフッター その他のリストは以下から。「レイアウト」「ヘッダー」「ボタン」「ナビゲーション」「その他」のカテゴリーでたくさんのチュートリアルが紹介されている。 » 70+ Photoshop Tutorials to improve your Skills as Web Designer Webデザイナーとしてのスキルを上げるためのチュートリアル、チ
デザイン講義7 – creamu
久々にメモ。 デザインで色を決めるときは、コンセプト（色調）をどんどん詰めていくことが大事。 どんな感じなのか。さらにその中のどんな感じなのか。 カラーイメージ（色彩心理）が作られる要因 1.体験・記憶（8割方共有できるもの。2割の人はずれる） 2.文化・風土・環境 3.生理（脳科学） 葉っぱとか色がすごく綺麗に出るから、スキャンしてみるといい。 今回は短くこんな感じ。 先端色彩学では、色は脳科学の領域に踏み込んで解析されていて、どの色が体のどの成分を刺激して、それによって人間にどんな印象を与えるのか、ということがわかってきているようです。 知識として学んだから、あとは実践だな。 おすすめされたのが以下の2冊。 「デザイン解体新書」はデザインの総論がよくまとまっているようですね。 「バウムテスト」の方は、「木を描いて」って言われたときに、どんな木を描くかによって人間の行動心理が分類できる、
デザイン講義5 – creamu
さて、デザインの授業が色の世界に入ってきた。早めにまとめとこうっと。 色を身につけると武器になる。→知っている人あまりいないから 最新の知識（裏付け・根拠のある正しい理論）+トレーニングで色はうまくなる 記憶色：記憶は色をちょっと鮮やかに残す。→より美しく、よりおいしく見せるためには、実際の色ではなく記憶色を採用することも多い 明るい：未来的 暗い：過去的 デザインをやるんだったら、美しさにとにかく敏感にならないとだめ。 最終的にはゴミを見ても美しいと思わなければだめ（SHU UEMURAとかそう）ゴミを見ても美しいと思えたら一流 色の分野 ・色彩学（どうやって色が見えるのか、そもそも色って何？） ・配色 ・カラーイメージ・色彩心理 ・流行色 流行色には仕掛人がいる。2年前に流行色は決まる。 日本ファッション協会→流行色情報センターが世界会議に出ていて（20カ国くらい出ている）、色を売る。
素晴らしいロゴをデザインするための45の法則 | CREAMU
ロゴをデザインしたい。 そんなときにおすすめなのが、『45 Rules for Creating a Great Logo Design』。素晴らしいロゴをデザインするための45の法則だ。 以下にご紹介。 3つ以上の色を使わない。 絶対に必要というわけでないものはすべて除外する。 文字はあなたの祖母でも簡単に読めなければならない。 ロゴとはっきり認識できなければならない。 ロゴにユニークな形やレイアウトを取り入れる。 あなたの親や配偶者がデザインについて思うことを徹底的に無視する。 3人以上の人にロゴが魅力的に見えるかを確認する。 有名なロゴの要素を使ってオリジナルだと主張しない。 どんな場合でもイラスト集を使わない。 ロゴは白黒でもかっこよく見えるべき。 逆さにしても認識できること。 リサイズしても認識できること。 ロゴがアイコンやシンボル、テキストを含む場合、それぞれ良さが引き立つよう
まじで使えるJavascriptライブラリ75選 | CREAMU
Javascriptで優れたインターフェースを実装したい。 そんなあなたにおすすめなのが、『75 (Really) Useful JavaScript Techniques』。まじで使えるJavascriptライブラリ75選だ。 以下にいくつかご紹介。 » Lightview スムーズに画像を拡大してくれる » FancyUpload アップロード中のプログレスを表示してくれる » SWFObject Javascriptを使ったFlashプレーヤ » JavaScript tabifier 簡単にJavascriptで切り替えられるタブインターフェースが作れる » FancyZoom 1.1 簡単なエンベッドでスムーズに画像を拡大してくれる » SimpleModal オーバーレイするクールなモーダルダイアログ » A Mac OS X-style Dock In JavaScript
写真をうまく撮るためのTips – creamu
さて、デジカメについての本を読んで結構知識がついたのでまとめておきます。 撮影モードを「プログラム（P）」にする。 絞り値とシャッタースピードを自動で組み合わせてくれる機能ですね。 ピント設定は中央1点のスポットAFにする。 マルチよりも真ん中1点で合わせるのが基本だと。そしてシャッターを半押ししたあとにフレーミングする「AFロック撮影法」を使います。 プログラムモードにしたあとはプログラムシフト 「ここはシャッタースピードを速くしたい」というときに、コマンドダイヤルを回す。絞り値とシャッタースピードはシーソーの関係で、自動で適正になってくれる。「シャッタースピード優先」と「絞り値優先」を選べるんですね。これを「プログラムシフト」といいます。 流し撮り（追い写し） カメラを被写体の動きに合わせて動かしながらシャッターを切る撮影技法。シャッタースピードが速ければくっきりと、遅ければ躍動感のあ
Mac OS XにLeopardと一緒に入れたい便利アプリ20選『Rebuild Your Mac with 20 Useful Downloads』 – creamu
Diary Mac OS XにLeopardと一緒に入れたい便利アプリ20選『Rebuild Your Mac with 20 Useful Downloads』 Leopardへのアップグレードを考えている。 そんなあなたにおすすめなのが、『Rebuild Your Mac with 20 Useful Downloads』。Mac OS XにLeopardと一緒に入れたい便利アプリ20選だ。 以下にいくつかご紹介。 » Adium マルチチャットクライアント。MSNメッセンジャー、gTalkなどを統合 » Caffeine ワンクリックでメニューバーからスリープ状態に » DiskInventoryX どのファイルが一番容量を食っているか調べられる » InstantShot! グラブよりも多機能なスクリーンキャプチャ » MagiCal メニューバーからドロップダウンで表示できるカレ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
