デザイン初心者の方が気をつけると良いポイントあれこれ - DesignWalker
デザインってスゴイんだってことをもっと本気で言わなきゃダメだと思う：DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 デザインというものを小さく捉えすぎてはいませんか？ 見た目を美しくするのもデザインだし、それを自分が持っていることに喜びを感じさせるような愛着を生み出すのもデザイン。 もちろん、そのモノとしての機能性を生み出すのもデザインだし、人々の暮らしの中で使い勝手のよいモノをなるようにするのもデザインです。 また、既存の技術にこれまでなかった用途を生み出すイノベーションを実現するのもデザインだと思います。 デザインというのは、そうした諸々を統合的、包括的にまとめあげる作業だと思うんです。 PowerPointで提案書を書くデザインがいかに包括的な作業で、統合力が必要なものか。例えば、PowerPointで提案書を書くことを例にとって考えて見ましょう。 提案書を書くという行為は、まぎれ
10のアプリケーションロールパターン ― ＠IT
インタラクションデザインパターン（2） アプリケーションロールデザイン、 基礎の10パターン ソシオメディア 上野 学 2007/3/19 前回の「80年代のAppleに学ぶUIの部品化とガイドライン」では、インタラクションデザインの作業にパターンを活用することの有用性について説明しましたが、今回からは、実際にどのようなデザインパターンがあるのかを考えていきたいと思います。 私はこれまでの連載（ユーザビリティのヒント、Webアプリケーションのユーザーインターフェイス）を通して、インタラクションやユーザーインターフェイスのデザインはプログラムが出来上がってしまってから最後に付け加えるというものではなく、システムの基本的な品質を決定する重要な要素として設計の初期段階から考えなければならないものであると主張してきました。なぜなら、そのシステムが提供しようとしている機能を、画面の見た目や操作の流れ
デザイン・プロセスにおいて知らないことを発見することの重要性：DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 いま読んでいる『デザイン言語2.0 インタラクションの思考法』のなかで、グラフィックデザインなどをやられている原研哉さんが書かれた「HAPTIC」という文の中に「なるほど」と感じるところがありましたので、ご紹介。 足裏で感じる石畳の情報量原さんが仕事でバリ島に行ったときのことだそうです。 原さんはバリ島の古いホテルに滞在されたそうですが、そのホテルでは広い敷地にコテージが点在していて、そのあいだには古い石畳が敷き詰められていたそうです。客は裸足で石畳の上を歩くのだそうですが、それが非常に気持ちよかったと原さんは記しています。 何十年も人がその上を歩いた結果、石畳の表面が磨り減り、それが気持ちよかったのだそうです。原さんは人が歩いて磨り減った石畳を大変デリケートだと感じ、その
グラデーションを使ったデザインのやり方 - GIGAZINE
Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか？」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基本的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ
過去のものがかすれていくというインターフェース | 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件」のところにご注目。 ↑ 過去のものがだんだんかすれていってます。 「下にいくほど過去のもの」とは頭ではわかっていますが、かすれてくれると視覚的にわかりやすいですよね。ぱっと見たときの情報
『色の決まりを知っていれば「センス」がよくなる』
システム会社に「色はとりあえず適当にお願いします」と言ってあがってきたものを見ると「えーっ」という配色になってあがってくることがよくある。「適当に」と指定していない自分が悪いのだが色をすべて指定しないと使ってはいけない色の組み合わせを使ってきてしまうのだ。 という私も初めて自分でチラシのデザインを作った時は「韓国風の色遣いだね」とつっこまれたが、緑や赤の原色を多様してしまった。（韓国の色づかいが悪いと言っているのではありません）そこでデザイナーさんに進めてもらったのは配色辞典。そこにあげられている色を使えばたちまちセンスの良い色遣いができるようになるのだこれホントに。 たとえば参考サイトは http://www.colourlovers.com/ これを見ると３色とか５色の色があげられているのでその色の組み合わせを使ってあげるとセンスがよくなる。 ああ、なんと便利な。ちょっと知ってるだけで
XHTML CSSの書籍を執筆しました - 3ping.org
(Amazonから買えるようになったもようです) 九天社より出版される「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」の執筆をさせていただき、まもなく発売となるので宣伝させてください。 本書籍はhxxk.jpの真琴さん、lucky bag blogのe-luckさんとの共著で、それぞれが連携しながら得意なパートを担当して書き上げました。大まかな構成は次のようになっています。(詳細なアウトラインは記事下部にあります) XHTML, CSSの基礎知識と管理方法 レイアウト編 Tips&Tecnique ずっと作りたかった構成ができた! CSSはまず『(X)HTMLありき』であり、(X)HTMLの正しい知識を覚えた上で学ぶものです。そこで、まずレイアウトや実線編となるまえに、Web Standardsの考え方や(X)HTMLの基本、プレ
「実践 Web Standards Design」という本を書きました - lucky bag
お知らせというか宣伝。九天社より出版される「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」の執筆をさせて頂きました。3ping.org の wu さんと hxxk.jp の真琴さんとの共著です。2007 年 2 月 23 日頃 から書店に並び始めるみたいです。Amazon にはまだ載っていないようです。ちなみに、カバーデザインを見せて頂いた瞬間から執筆者の間では通称「ホップ本」（真琴さん命名）ということになってます。たぶん。 書籍名 : 実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips ページ数 : 436 ページ 定価 : 3,200 円 最初に wu さんから共著のお誘いを頂いたのが 2006 年の 5 月頃。6 月に行った打ち合わせ後の著者 3 人での飲みは、気のせいか
hxxk.jp - 実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips が発売となります
記事データ 投稿者 望月真琴 投稿日時 2007-02-20T23:01+09:00 タグ CSS HTML XHTML お知らせ アソシエイト 出版 実践 Web Standards Design 概要 拙著「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips 」の発売に関する情報のページです。 リプライ 14 件のリプライがあります。 hxxk.jp ( のごく一部 ) が書籍化されます ! ブログ 書籍化で Google 検索すると何十万件もヒットするという昨今、時流に乗ってか乗らずか、お誘いを受けて書籍を出すこととなりました ! ......とは言え取り扱う話題がまとまっておらず、また純粋な文章としての完成度も低い hxxk.jp の記事を丸々書籍にパッケージングしたものではありません。 というか単著ではありませんし、あくまで
分裂勘違い君劇場 - 絵の描けない人もベジェ曲線で強力なプレゼン資料が作れる
プレゼン資料は、字よりも図で説明した方が分かりやすいです。 そして、図で何かを表現するとき、ちょっとした絵を部品として使うだけで、劇的に分かりやすくなることがあります。 そのため、図に必要な画像部品を、Googleの画像検索で探しまくるのですが、なかなかぴったりの絵が見つからないことは、よくあることです。 そういうときは、絵を描く専門家(グラフィッカー)に、必要な絵を描いてもらうように、依頼するしかありません。 しかし、グラフィッカーのスケジュールの都合があるので、急ぎの仕事のときなどは、なかなか必要なタイミングで絵を描いてもらうことができません。 また、依頼したとしても、なかなかぴったりのイメージの絵には仕上がってこないことがあります。 そもそも、絵ができあがって、プレゼン資料に組み込んでみて、はじめて違和感が出て、絵がイマイチであることに気がつくことなど、よくあることです。 こういう問
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
徐々に消える感じの角丸コーナー - sta la sta
Free Fading Corner Images - Bittbox ブログやWebのデザインでは角丸コーナーの人気が高いですね。 こちらのサイトでは、徐々に消える感じの角丸コーナーのイメージファイルとPhotoshop用ファイルを提供してくれてます。 それぞれコーナーの半径やドロップシャドウの有無などの違いによって9種類を用意。太っ腹ですね。 早速このブログでも各エントリごとに導入してみました。 使用したのは6番の角丸コーナー。 あまり主張しすぎない点、ブログに立体感を持たせてくれる点なんかが気に入っています。
jmblog.jp - Web2.0っぽいグラデーションのコツ
そろそろ「Web2.0的デザイン」という言い回しが恥ずかしくなってきましたが、それはそれでおいといて。グラデーションは今っぽいデザイン（ちょっと言い方を変えてみた）では外せない要素と言えるかと思いますが、プロのデザイナーの方はさておき、素人が挑戦すると、色の選択に失敗してイマイチ・・・なんてことになりがちです。 » A Gradient Tutorial » 9rules Network Official Blog こちらのサイトでは、グラデーションを作る際のポイントが説明されています。 さて、どれが一番きれいでしょう？1 は彩度（鮮やかさ）が足りません。上のサイトでは「a classic problem」と紹介されています。2 はマシですが、ちょっと素人臭さを感じます。まぁ好みは人それぞれだと思いますが、やっぱり 3 が一番きれいだと思います。 ちなみに僕は、次のようにしてグラデーション
半角スペース入れてますか？
ちょっとブログを書き慣れた頃から、悩むことがあるんですよねー。日本語の文中で半角英数字を入力するとき、前後に半角スペースを空けるかどうかです。僕はあるときはスペース入れたり、あるときは入れなかったり。書体に一貫性がありません。でも他の人のブログを読んでいても対応は様々。スペースを入れる人もいれば入れない人もいるみたい。半角スペース入れるべき、入れないべき？ 欧文では単語と単語の間にスペースを空けるのが当たり前です。一方で日本語ではそういう習慣はない。むしろそんなことをやると文章が非常に見づらくなる。大学入学直後の初めてレポート書くとき、悪い例として教えられましたよね。全角スペース入れまくりで縦書きなのか横書きなのか判別不能な頭の悪い文章。こういう文章だと、音声読み上げブラウザなんかも正しく読み上げられないでしょうね。じゃあ日本語と欧文が混在したときどうすれば良いのか。 欧文といってもですね
タグクラウドの表現はどうあるべきか？ | SiMPLE*SiMPLE
タグクラウドの表現はどうあるべきか？ December 26, 2006 9:26 AM written by watanabe GiftTaggingのタグクラウドが綺麗です。タグクラウドって便利そうだけどあんなに文字が並んでもねぇ・・・という方は参考にされてはいかがでしょうか。 ↑ タグを本当の「タグ」で表現してみました。 ↑ タグづけの表示にも、タグのアイコンが。 タグクラウドはまだ出てきたばかり。どんな表現手法が良いか、貪欲に試行錯誤していきたいですね。「タグ」を直感的に「タグ」とわからせるこうした手法もいいのではないでしょうか。 ちなみに元ネタはこちら。37signalsのこのブログでは「Screens aroud town」というコーナーがあって、参考になります。Simple*Simpleでも今後とりあげていきたいと思います。 » [Screens around town] F
フォントの色と大きさと背景色の微妙な関係 | S i M P L E * S i M P L E
フォントの色と大きさと背景色の微妙な関係 December 26, 2006 10:00 AM written by 8maki 12月1日からクリスマスまで、日替わりでウェブ制作のちょっとしたTipsを紹介する「24 ways」が今年も開設されているようです。 その24 waysから一つご紹介。 » 24 ways: Cheating Color フォントの色と大きさと背景色についてのTipsです。 わかりやすく例を出していきましょう。 架空の会社のロゴを例にしてご説明します。まず、大きいフォントで「Double Dagger」という社名があり、その下に小さいテキストが入っています。よくあるデザインですよね。さて、このデザインについて見ていきましょう。 ■ 薄い背景に明るいフォントの場合 さて、下に2つのロゴがあります。 左のロゴは色の統一感のルールに従って社名とテキストを同じ色にしてい
メールアドレス画像化ジェネレーター集 | *LOVE IS DESIGN*
スパム対策にメールアドレスを画像にしてくれる、便利なジェネレーターをまとめてみました。おしゃれなデザインなのでブログのワンポイントにもなりますよ。 きゃっとまーくめーる 可愛いネコのイラスト付き フォントもいろいろ選べます。 わたしが使用しているのは「みかちゃんFONT」です。 でざいんめーる フォントや背景色の変更・グラデーションなど 参考：でざいんめーるのサンプル一覧 E-Mail Icon Generator E-mail Sigs GMail・Hotmail・MSN・Yahoo!などに対応 Gmail Signature Generator Gmail用 Handmail 参考 HTMLエンティティ化 メールアドレス画像化以外のスパムメール対策は、エンティティコード（数値文字実体参照）に変換する方法もあります。 追加（2007/3/14） Faviconメール ファビコン＋メルアド
『ウェブ2.0 HOW-TO デザインガイド』がよくまとまっています | S i M P L E * S i M P L E
なんだか前にもこういうまとめを紹介しましたが、また良くまとまっているのがあったのでご紹介。 Web design scratchのサイトで「Web 2.0 how-to design guide」なるまとめがありました。 » Web 2.0 how-to design guide 15の項目でまとめられていますね。 Simplicity（とにかくシンプルに！） Central layout（真ん中に寄せるレイアウトで） Fewer columns（段組は少なめに） Separate top section（トップ部分は分けて目立たせよう！） Solid areas of screen real-estate（レイアウトにはメリハリをつけて） Simple nav（ナビゲーションはシンプルに！） Bold logos（ロゴは大きめに！） Bigger text（フォントも大きめに） Bold
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記