意思を形にするWebのデザイン: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 ひさしぶりにWebの話を。 みなさん、Webサイトのデザインするとき、どうしてますか？ ちゃんと意思を形に落とし込むようにしてますか？ クライアントのサイトをデザインする際に、クライアントがユーザーに届けたいと思っている意志をデザインしようとしてるでしょうか？ 意思があるのに表現できない場合と言われても困ってしまう方も多いのではないかと思います。 困るのは、きっとクライアントが意思を明確にしてくれないからではないでしょうか？ 困ると思った人のなかで、クライアントの意思ははっきりしてるけど、どう表現したらいいかわからないと思ってる人はちょっと努力や勉強が足りないですね。 マーケティングや企業コミュニケーションに関する本を読んで、企業と顧客をはじめとするステークホルダーとのコミ
実用的！レイアウトで悩んだときに頼れるツール
計算された余白やレイアウト。見えない線に沿って揃えることが大切な要素ですが、美しいと感じるものには何か法則があるはずです。 そこで、簡単にバランスの取れた美しいレイアウトができる頼れるツールをふたつご紹介します。 黄金比、白銀比を活用 ひとつめは、わたしも頼りにしている黄金比や白銀比のレイアウト計算が簡単にできるツールです。美しいレイアウトを計算してくれるツール でも紹介しましたが、またまたデザインも一新してリニューアルしました。 レイアウトの小技 Ver2.0 電脳狂想曲 WEBデザインの小技 黄金比は名刺やタバコ、白銀比はA判サイズの用紙など身近にある比率なのでバランスよく見えるんでしょうね。画像をトリミングするときや、ロゴやバナーを配置するときなどに取り入れてみてはいかがでしょうか。 （サンプル：横幅 780px を黄金比で再分割してみました） こちらの記事もレイアウトの参考になりま
顧客の機能要求に折れないこと!
Kathy Sierra /青木靖 訳 2006年5月10日 製品やサービスが成功するほど、ユーザの要望を受け入れるようにというプレッシャーは強くなる。ユーザが多くなるほど、要望の範囲は広がっていく。あるユーザにとっての ｢それがないんだったら買わない｣機能が、別のユーザには取引をぶちこわすものになる。そしてあなたの製品やサービスが人気になるほど、そういった要望は、要求と最後通牒へと変わっていき、ついには痛烈な批判になる。 私たちになしえる最悪のことは、それに折れるということだ。しかし要望/要求や批判が強く、怒りを帯びたものになるほど、誘惑に抵抗するのは難しくなる——｢この1個だけ付け加えれば･･･きっとあの連中もおとなしくなってくれる｣ しかしあらゆる色を1つに混ぜ合わせて泥色のしみを作るなら、誰も私たちのすることを嫌わなくなるが、同時に誰も喜びも、興奮も、魅了もされなくなる。そうして私
画像で使われているフォントを調べる方法 | POP*POP
今回の「諦めている不便利」はこちらの投稿をご紹介（企画の詳細はこちら）。 ロゴを作る時に、クライアントから希望のフォントが使われている印刷物やビットマップ画像を示されて「このフォントで」と言われることがあります。その字形からフォント名(もしくは形が近いフォント)を検索する手はないものでしょうか？（ルミエールさんありがとうございます！） 個人的にも「このフォントいいな。何というフォントだろう？」と思いながら、わからなかった経験があります。 この解決方法を調べてみました。 「WhatTheFont」というサイトを使ってみるのはいかがでしょうか。画像で使われているフォントを調べてくれるサイトです。残念ながら日本語フォントには対応していませんが便利ですよ。 » WhatTheFont 使い方を簡単にご紹介します。 ↑ 調べたいフォントが描かれている画像をアップロードします。URLを指定しても取り込
拡張子別にダウンロード先を指定できるFirefox拡張『Download Sort』 | POP*POP
ウェブから画像や資料などをよくダウンロードする人には便利なFirefox拡張をご紹介。 この「Download Sort」を使うと、拡張子別にダウンロード先のフォルダを指定できます。「画像はここ、動画はここ、文書はここ」と決めておくと整理がしやすいですね。 » Download Sort 下記に使い方をご紹介。 ↑ こちらが設定画面。どの拡張子をどのフォルダにダウンロードするか設定します。 ↑ ダウンロードごとに自動でサブフォルダを作成することもできます。日付別やドメイン別にファイルを保存できて便利ですね。 ↑ 同じ名前のファイルがあった場合の対処法も設定できます。連番をつけることもできます。至れり尽くせりですね。 いつもデスクトップ上にダウンロードしてしまって整理がつかない・・・という人におすすめなFirefox拡張でした。 » Download Sort
シゴタノ！ - 判断ミスを防ぐための34の質問
何らかの判断を下して、結果が出てから 「なぜ、このような結果になることを事前に予測できなかったのか？」 と後悔することがあります。結論を急いでしまったがゆえに望ましくない結果を招いてしまうのです。 『なぜ、それを考えつかなかったのか?―最高の結果を生む聡明な思考法』という、まさにその名の通りの本をひもときながら、これを防ぐための方法を考えてみます。 「ソクラテスの問答法」と呼ばれるテクニックは、現在でも最も質の高い思考方法と考えられています。 彼の質問は、自分の考えを明確に示し、不正確なものを排除し、より包括的に考え、より道理にかなうようにし、その考えが高潔であることを要求しました。弟子のメノは、ソクラテスの質問を、突き刺さると神経が麻痺するアカエイの尾の鍼にたとえました。彼の厳しい質問は、真実を突き止め、自分の考えを再評価することを求めましたが、そういったことを避けたい人はいるものです。
「ユーザビリティ＝使いやすさ」なんて誤訳をいつまで放置するのか？: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 さてさて、ここ最近のエントリー（「答えはユーザーが知っている」など）では、奥出直人さんの『デザイン思考の道具箱―イノベーションを生む会社のつくり方』、トム・ケリーの『発想する会社! ― 世界最高のデザイン・ファームIDEOに学ぶイノベーションの技法』を読み進みつつ、デザインによって「イノベーション」を生み出す「デザイン思考」「デザイン戦略」という考え方、それを実現するための「創造のプロセス」、そして、実際のプロセスの中で使われる「フィールドワーク」「プロトタイプ」「ユーザーテスト」「ブレインストーミング」などの手法を紹介してきました。 社会に新しい価値をもたらすイノベーションを技術ではなくデザイン思考で創造することを目指し、そのためにユーザー中心のデザイン・プロセスで、観察
グラデーションを使ったデザインのやり方 - GIGAZINE
Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか？」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基本的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ
ITmedia Biz.ID：失敗しないプロジェクトマネジメント――Appleやはてな、Googleに学ぶ3つのヒント
失敗しないプロジェクトマネジメント――Appleやはてな、Googleに学ぶ3つのヒント：デジタルワークスタイルの視点 プロジェクトが失敗する要因は「計画」「やる気」「変化」の3つ。これらを管理しようとすればするほど悪いスパイラルに落ち込みます。Appleやはてな、Googleなど、注目企業ではどのようなマネジメントを行っているのでしょうか。 「完璧に管理しようとすればするほど、プロジェクトは失敗する」という悪いスパイラルが存在します（2月21日の記事参照）。そこで今回は、どのようなプロジェクトマネジメントをすれば、プロジェクトを失敗させないようにできるのか考えてみたいと思います。 プロジェクトが失敗する要因は「計画」「やる気」「変化」の3つ。前回はそれぞれを完璧に管理しようとしていましたが、今回は考え方を180度変えてみましょう。それぞれの要因を最初からなくしてしまうのです。 失敗しない
HugeDomains.com
Captcha security check luv2help.com is for sale Please prove you're not a robot View Price Processing
ユーザー・インターフェイスの設計に大切なのはデザイン・ポリシー
何かの「ユーザー・インターフェイス」を決める時に大切なことは、自分なりのはっきりとした「デザイン・ポリシー」を持って、誰が何と言おうと最後までそれをしっかりと押し通すこと。そういう「柱」をしっかりと持たないで作ったものは、往々にして「妥協の産物」になってしまう。 私が常に心がけていること（つまり、私のデザイン・ポリシー）は、「ユーザー・シナリオを８０：２０ルールで切り分け、常に８０の方（つまり多くの人が使うだろう機能）を最優先にした設計にし、２０の方（あった方が良いかもしれない機能、一部の人が必要とするかもしれない機能）は思い切って犠牲にする」こと。 典型的な良い例が、Youtubeを見るためのサービス、Rimo と oreseg。 機能的には、カテゴリー分けはしてくれているし、サムネールから自分で見たいものを選べるし、oresegの方が上である。しかし、「ただだらしなく面白そうなビデオを
次のYouTubeはこれだ！簡単に文書が共有できる『Scribd』 | 100SHIKI.COM
次のYouTubeはこれだ！簡単に文書が共有できる『Scribd』 March 7th, 2007 Posted in 便利ツール（ウェブ） Write comment これはすごい。 各所で話題になりつつあるが、とにかくご紹介。 Scribdはいわゆる文書共有サイトである。しかしユニークなのはアップされた文書をFLASHに変換し、簡単に見れるようにしてくれている点。 このサイトに文書をアップして貼り付け用のコードを埋め込めば瞬時にFLASHで文書が見られるようになる。 しかも見ている人はそれをPDFやWordやテキストでダウンロードまでできるという親切さ。さらにNuanceを使って音声変換までしてくれる。 YouTubeがすごかったのはさまざまなフォーマットの動画をFLASHで簡単に見られるようにした点である。面倒なプラグインとかそういうのはもうやめよう、という時代なのである。 今後はセ
過去のものがかすれていくというインターフェース | S i M P L E * S i M P L E
過去のものがかすれていくというインターフェース March 2, 2007 10:00 PM written by watanabe 以前読んだ三宅氏のコラムに、こんなことが書いてありました。 最近書き込まれた記事は普通に表示されるのに対して、古い記事になればなるほどフォントの色がセピア色にあせていき、最後には記事が消えてしまう機能があればいいかもしれない。 この記事での文脈とはちょっと違うかもしれませんが、指定したURLのFaviconを画像に自動変換できるFavicon APIでは、そんなアイデアの一つの実装例を見せてくれているのではないでしょうか。 » Favicon API ここの「最新の20件」のところにご注目。 ↑ 過去のものがだんだんかすれていってます。 「下にいくほど過去のもの」とは頭ではわかっていますが、かすれてくれると視覚的にわかりやすいですよね。ぱっと見たときの情報
行き詰まったときに役立つウェブデザイン8つのノウハウ | Web担当者Forum
ウェブデザイン作業には、びっくりするくらいイライラすることがある。 何をどこに表示するか無限の可能性があるのだから、真っ当なデザインがいとも簡単にできあがると思うじゃないか。でも、正常に表示できないデザインに何時間も手を焼いたり、今どき流行らないピクセル調整をするはめになったりとか、誰でも何らかの形で行き詰まった経験がある。 これから紹介する8つのノウハウは、そうした厄介な状況から抜け出すために、私が取る作戦だ。 先に中身からデザインする これは、今までに聞いたウェブデザインに関するアドバイスの中でも、最良の部類に入るものだ（Cameron氏に感謝を）。 多くのデザイナーが、まずヘッダーに力を注ぐ。でもたいていの場合、見映えのするページになるか否かは、ページの中身で決まる。ヘッダーは付け足しだ。とりあえずヘッダーのことは忘れて、中身の要素に取り組んでみよう。すると、しっかりした中身があれば
なつみかん＠はてな - 便利な文房具＆文房具の使い方 まとめ
便利な文房具など ITmedia Biz.ID：重要書類に穴を開けずにファイリングする ITmedia Biz.ID：説明書ファイルで机周りを整理する ITmedia Biz.ID：本のページを開いたまま固定する ITmedia Biz.ID：ホワイトボードがポストイットに ITmedia Biz.ID：210円でも書き味は本格派「プレピー万年筆」 ITmedia Biz.ID：通常のホッチキス針で簡易製本ができるマックスの中綴じホッチキス ITmedia Biz.ID：あれ、どこまで読んだっけ？ を解決する ITmedia Biz.ID：スマートにしまう、メモのタイミングを逃さない――を両立するペンホルダー コクヨ 人間工学に基づいた新サイズノート「SlimB5」 自分の読書時間が計れるデジタルなしおり | Excite エキサイト : ニュース となりのインテリア この画鋲は、壁に穴を
JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ:phpspot開発日誌
JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ。 バリデートするライブラリも沢山でてきました。とここら辺で一度まとめておきました。 Really easy field validation (デモ) - 入力値がおかしいと、エラーメッセージをフェードインさせながら超クールに表示できます。 ※ ページの最後で使い方紹介（これは良いです） Remember the milk風の登録フォームも作れそう prototype.js依存。 Realtime validation using Ajax (デモ) - Ajaxなどを駆使して、入力値を動的にチェックするライブラリ Validate.js (デモ) - リアルタイムではないけど、入力値をチェックするためのライブラリ Tooltip for forms - 入力チェックではないけど、フォームの入力ヒントを出して
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
ウェブデザインコンプレックスは克服できるか - GIGAZINE
幽霊の正体見たり枯れ尾花。これが結論である。 デザインセンスや技術力は努力だけで90％まで到達できる。後残りの10パーセントがその人の持って生まれた才能やセンスの問題、後は好み。あるいは、生まれ育った生活環境や諸々のもの。とにかく、努力では変えようのないものが残り10パーセントを占めている。 だが、努力だけで到達可能な90パーセントまで達すれば、一流のプロとして通用するレベルである。今から定年までにこの技術を磨いておけば一つの芸として成立するし、あなたの老後はバラ色だ。そのためには、ほふく前進で努力をすることが必要となる。一体、デザインの現状というものはどのようなものなのか？以下、述べてみよう。そして、ウェブデザインコンプレックスを克服する方法を教えよう。 なんとなく、目に触れる美術環境が戦後の日本は貧しくなっている。大量生産で画一的なデザインがいっぱいになっている。日本の生活風習で「ひと
Firefoxでウェブの画像やテキストをクリップする機能拡張「Clipmarks」 - ネタフル
Download of the Day: Clipmarks 2.0 (Firefox)というエントリーより。 Firefox only (for now): Clip, save, share and organize just about anything on a web page, including video, with Clipmarks 2.0. ウェブページの画像やテキストをクリップして保存することができる「Clipmarks」というFirefox機能拡張がありました。 ウェブを見てイメージしにくかったのですが、デモ動画がありました。 ああ、なるほど！ 画像、動画、テキストなど、ページ単位ではなくそれぞれのコンテンツ単位で保存し、さらにそれをウェブに投稿したり友だちに送ったりすることができるのだそうです。 手順もものすごく簡単そうで、ウェブページのクリッピングに良さそうだ
Firefoxで長いページにマークしておく機能拡張「Dog Ears」 - ネタフル
Download of the Day: Dog Ears (Firefox)というエントリーより。 Windows/Mac/Unix (Firefox): The Dog Ears Firefox extension lets you mark (or “dog ear,” if you will) sections of long web pages so you can easily find an important passage or pick up where you left off. Firefoxで長いページを読んでいるときに、簡単に重要なポイントを見つけられるようにマークしておく「Dog Ears」という機能拡張がありました。 ブックマークはページをマークしますが、「Dog Ears」はページ内のある場所をマークしてくれるので、あとでページを見返して「どこが重要でブッ
【謝罪と修正】 『CSSと一枚の画像だけで・・・』の記事について | SiMPLE*SiMPLE
【謝罪と修正】 『CSSと一枚の画像だけで・・・』の記事について February 20, 2007 10:52 AM written by Gen Taguchi 先日ご紹介した『CSSと一枚の画像だけで透明感のある角丸パーツをつくる方法』ですが、重大なミスがありました。ここに謝罪して修正します（ご指摘いただいた匿名希望さん、ありがとうございます）。 間違いがあったのはこちら。 PNG画像を縮小したりしているみたいですね。もちょっと複雑なデモページはこちら。スクリプトのダウンロードもできます。 まずはじめにPNG画像を縮小などしていませんでした・・・申し訳ありません。それから「スクリプトのダウンロード」というのも誤解を招く表現でした。「CSSとHTML、画像が入ったファイル群」が正しい表現です。 速く書こうと思って中途半端な理解で書いてしまいました・・・以後気をつけるとともに、ここで修正
無料で使えるベクターデータを配布しているサイト27選 | S i M P L E * S i M P L E
拡大縮小しても画質が劣化しないベクターデータは何かと便利です。 Tutorial Blogで無料で使えるベクターデータを配布しているサイトが紹介されていました。全部で27あります。 ふきだし風のパーツやアクア風のボタン、国旗やトランプなど、さまざまな用途に使えそうです。 ↑ こうしたサイトデザインに使えるようなものや・・・。 ↑ ちょっといいのかな、これ？というものとか・・・。 ↑ 自分ではとっても作れなさそうなやつとか・・・。 形式はAIやSVG、PDFなどさまざまですね・・・それってただのアイコンでベクターデータではないのでは？というのも若干混じっていますがそこはご愛嬌。 よろしければ下記サイトからどうぞ。 » Free Vector Downloads – Photoshop Tutorial
第1回 PHP 開発で Zend Framework を知らないだなんて嘘ですよね？
第1回 PHP開発でZend Frameworkを知らないだなんて嘘ですよね？：「Zend Framework」で加速するPHP開発（1/2 ページ） Zend Frameworkは、MVCアーキテクチャを構成し、各種コンポーネントを組み合わせることで効率的なPHPアプリケーションを構築できるフレームワークで、PHP用フレームワークの本命と呼ばれている。本稿では、Zend Frameworkについて、その機能と各種コンポーネントの使い方を解説する。 はじめに 2006年3月にイスラエルのZend Technologiesによって公開された「Zend Framework」はプレビュー版ながらも多くの機能が備わっています。Zend Frameworkは、MVCアーキテクチャを構成し、各種コンポーネントを組み合わせることで効率的なPHPアプリケーションを構築できるフレームワークで、PHP用フレー
AJAXでやってしまう間違い:Geekなぺーじ
「Ajax Mistakes」という面白い記事がありました。 AJAXを使ってWebアプリを作る時に陥りがちな間違いを列挙していました。 以下、要約してみました。 かなり削っているので、詳細は原文をご覧下さい。 AJAXを使うためにAJAXを使う AJAXはカッコイイ技術です。 しかし、AJAXはツールでしかありません。 AJAXはオモチャではありません。 実験的にAJAXを使うために、不必要なところにAJAXを無理矢理使っている場合が多いです。 戻るボタンの動作を妨げる 戻るボタンはWebインターフェースで重要な役割を果たしていますが、JavaScriptとの相性は良くありません。 戻るボタンの機能を維持できない場合があることは、JavaScriptのみで構成されているページをお勧めしない理由の一つです。 ただ、使い勝手の良いサイトというものは、そもそも戻るボタンに依存しなくてもユーザが
小粋なDHTMLとAJAXのスクリプトが36種類！『mixiAjax.com』 | S i M P L E * S i M P L E
小粋なDHTMLとAJAXのスクリプトが36種類！『miniAjax.com』 February 27, 2007 3:39 PM written by Gen Taguchi これは覚えておくとちょっと便利そう。 miniAjaxではちょっと小粋なインターフェースをつくるためのDTMLやAjaxを紹介しています。 » MiniAjax.com / A showroom of nice looking simple downloadable DHTML and AJAX scripts 提供されているのは今のところ36種類。 タブでのナビゲーションを実現したり、インラインでの編集を可能にしたり、☆での評価ができたり、先進的なウェブでよく見るインターフェースばかりですね。 ただ、このサイトがすべて準備したわけではなくて、それぞれ他のサイトへのリンクになっています。 おっと、リンク集かよ・・・
『色の決まりを知っていれば「センス」がよくなる』
システム会社に「色はとりあえず適当にお願いします」と言ってあがってきたものを見ると「えーっ」という配色になってあがってくることがよくある。「適当に」と指定していない自分が悪いのだが色をすべて指定しないと使ってはいけない色の組み合わせを使ってきてしまうのだ。 という私も初めて自分でチラシのデザインを作った時は「韓国風の色遣いだね」とつっこまれたが、緑や赤の原色を多様してしまった。（韓国の色づかいが悪いと言っているのではありません）そこでデザイナーさんに進めてもらったのは配色辞典。そこにあげられている色を使えばたちまちセンスの良い色遣いができるようになるのだこれホントに。 たとえば参考サイトは http://www.colourlovers.com/ これを見ると３色とか５色の色があげられているのでその色の組み合わせを使ってあげるとセンスがよくなる。 ああ、なんと便利な。ちょっと知ってるだけで
【コラム】そろそろきっちりJavaScript 第1回 "Firebug"の導入〜関数リテラルとは? (MYCOMジャーナル)
多彩な演出効果をカンタンに導入できる事で脚光を浴びたprototype.jsの登場を皮切りに、インターネットで公開されているJavaScriptライブラリの数は、この一年で急激に増加した。何かやりたいことがあったときはWebで検索すれば、大抵、どこかにライブラリが転がっている。便利な世の中になったものだ。 一方、Webを通じて提供されるサービスは多様化の一途を辿っている。JavaScriptライブラリは整ってきたが、当然、置くだけでは機能しない。ライブラリのサポートページには簡単なサンプルが載っているものの、サンプルがそのまま適用できるケースはごくわずかだ。しかたなく、他の誰かが似たような事をやっていないかとWeb検索するはめになる。 思えば、これまでJavaScriptを言語としてとらえ、きっちり向き合う機会は少なかったのではないだろうか。 1995年の終わり、Netscape Navi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Logo Design Portfolio - Logoorange
lllcolor.com
https://addons.mozilla.org/firefox/3649/
無料で使える日本語フォント11選 - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
なつみかん＠はてな - ユーザビリティ関連記事 まとめ
un-q.net
Wii向けFlashゲーム用の十字キー操作API - Engadget Japanese
Collection of Sites Providing Free Web Icons and Buttons | Technacular | Technology news, tech startups, tech humor, SEO Tips | Home for all things technical