Perfume（パフューム）について、もう少しだけ考察を続けたい。 やはり気になるのは、あのエフェクト加工された「フィルター・ヴォーカル」のことだ。何故ああいったものが受けたのか？　しかも、これは筆者の周りだけなのかもしれないが、1970年前後の生まれの男性たちがPerfumeに萌えている。完全おやじ世代となったしまった筆者よりひと周り弱だけ下の、いわば「プチおやじ」世代に大受けなのである。これは一体何故なのか？ そもそも、テクノ─ハウス・サウンド（またはそういった意匠のダンス／ロック系サウンド）とハイ・トーン・ヴォイスとの組み合わせの相性が非常に良いことは、昔から知られていた。ヴォコーダーやトーキング・モジュレイターといった機材で歌声にエフェクトをかける時の目的は、合成音声的なロボット・ヴォイスか中性的─女性的な音声を作り上げるため（または二つの混合）だった。したがって、最初からハイ・ト

追記 2007-09-11 まとめWikiへのリンクを追加 2007-09-11 cremaさんの資料追加 FrontPage - デザイン勉強会まとめサイト - livedoor Wiki（ウィキ） デザイナーでない人のデザイン入門 ベジェ曲線で行こう 簡単に名刺を作ろうぜ！ Webサイトのあり方と考え方 総括 Twitter繋がりのまめこが主催するデザイン勉強会に行ってきました。 という訳でまとめです。 この勉強会は、デザイナー向けではなく、デザイナー以外に向けたデザイン勉強会です。 会場は今回も株式会社ノッキングオン様に提供していただきました。 いつもありがとうございます！ なお、まだ資料とか公開されていないセッションもあると思うので、タイトルとか微妙に間違ってるかもしれません。 間違ってたらごめんなさい。 デザイナーでない人のデザイン入門 資料 トップバッターは先生もされているcr

追記：2007-08-28 何を思ったかチートシートのフィードを配信してみました。 MTが吐く物を改変しただけなので、追々調べて修正していくかも。 これまでも何度か書いているんですけど、僕はez-HTMLというエディタを使っています。 各種補完機能やタブ表示があって、かつ設定項目が豊富にある事が気に入ってます。 ちなみにバージョンは7.20を使っています。 このez-HTML、使い出してから1年半も経っていて、それなりに自分色に染まってきました。 なので、自分で設定したショートカットなどをまとめた、個人的なチートシートを作ってみました。 「ez-HTMLは使っているけど、設定はほとんど素のままだよ！」という人には参考になるかもしれません。 なんて言うか、エディタに限らずなんですけど、同じ物を使い続けて段々となじんでいく感じが凄く好きです。

概要 益子さんのセッションは大人気で、当初の予定を変更して、二部屋をブチ抜いて行われる事になりました。 内容はXHTML+CSSのガイドラインを、みんなで作っていこう！ というものでした。 スライドを中心に進んでいく形式だったので、セッションを受けていない人も、公開されるスライドを見ればかなり理解できると思います（スライドはもう公開されてるんでしたっけ？ 現在探し中です。） なので、この記事では僕がメモした内容を整理して公開しています。 ガイドラインを作る目的 仕事を楽にする事が大切 無理無駄ムラを解消する クオリティの保障 ノウハウの共有 スキルの均一化 製作側と運用側の引継ぎをスムーズにする ガイドラインを作る際の注意点 あんまりキツく決めすぎないように 人間的な作業なので、モチベーションが大事 ガイドラインはVer,UPする物。 作って終わりでは無い 更新履歴や改変者を残す 変更点な

IE5.xやIE6の互換モードがidやclass名の大文字小文字を区別しないのは、わりと知られています。 これとラクダ式id、class名を使えば、cssの振り分けができるなーとか思いつきました。 ちなみにラクダ式とは、「mainContent」や「subNavi」など2単語以上からなるid、class名を、ハイフンではなく2単語目を大文字にして可読性を上げる書き方の事です。 camelと英語で呼ぶ人もいるとか。 個人的には結構好き。 HTMLとCSSのソース /* for modern brow */ #sampleA { color: blue; } /* for IE5 6 */ #samplea { color: red; } <p id="sampleA">ほげほげ</p> これで、IE5.xとIE6互換モードでは文字が赤に、Firefoxなどでは青になります。 なお、他の人が見

ご注意 この記事は、実用度は余り高くないような気がします。 わりとネタ的？ 4つの要素でグラデーション角丸＋リキッドレイアウト 前回の記事では、6つの画像と要素を使って、グラデ角丸＋可変幅を存在する要素を駆使して実現する、という考え方を書いてみました。 今回はそこから更に踏み込んで、1枚の画像と4つの要素で同じデザインを実現してみたいと思います。 今回もサンプルを用意しました。 対応ブラウザはIE5.5以上・Firefox・Opera・Safariで、MacIEはdl付近がちょっと怪しいかもしれないので、週明けに会社で確認します（自宅にMac無いんす）。　あとIEで幅を極端に狭めると、文字の折り返しが若干おかしいです。 HTMLは前回とほぼ同じ物ですが、余計なdivが1つ減っています。 コンテキストメニューなどから背景画像表示すると分かるんですが、一枚の大きな画像を用意しています。 これを

JavaScriptとかjQueryとか勉強中なので、勘違いしている部分があるかもしれません。 もし誤りがあったら、ご指摘頂けると嬉しいです。 4つの要素でグラデーション角丸＋リキッドレイアウト 前回と前々回では、CSSで半ば無理やりグラデーション角丸＋リキッドレイアウトを組んでみました。 この種類の角丸デザインはCSSを書く上で必要な要素の数が多くなってしまうので厄介、というのがこれまでのあらすじ。 今回はCSSだけにこだわらず、スクリプトを使ってみたいと思います。 jQuery使用 jQueryを使います。 jQueryの特徴は色々あるんですが、ノードの取得にCSSセレクタみたいな書き方ができるのがとても気に入っています。 普段CSSを書いている人にはとても使いやすいです。 今回のサンプルでは使ってないですけど、jQuery越しにCSS3のセレクタが使えたりするのも魅力です。 しかもI

関連リンク アクセシブルなコンテンツ、ナビゲーション、フォーム のまとめ JavaScriptを利用した動的なWebのアクセシビリティ のまとめ 前回の記事同様、Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~の出版記念セミナーのまとめです。 11章と12章を翻訳されたのはインフォアクシア代表の植木さんです。 内容はPDFとFlashのアクセシビリティについてです。 なお、便宜上この記事では音声支援技術をスクリーンリーダーと呼んでいます。 資料へのリンク イントロダクション FlashやPDFを取り巻く環境はコンテンツ、オーサリングツール、UAの3つに分けられる。 そしてそれぞれに対応するのがWCAG、ATAG、UAAGの3つのガイドライン（ちなみに作っているのはW3C）。 コンテンツは仕様とWCAGに準拠し、オーサリングツールは仕様通りに生成し

関連リンク アクセシブルなPDFとFlash のまとめ JavaScriptを利用した動的なWebのアクセシビリティ のまとめ 先月の事になってしまいましたが、Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~の出版記念セミナーに行ってきました。 という訳で遅まきながらまとめです。 6章～8章の翻訳をされた梅垣さんは、「アクセシブルなコンテンツ、ナビゲーション、フォーム」という内容でした。 実装寄りでアクセシビリティを考える時は、HTML、CSS、JSと、別々で考える必要がある、との事でした。 資料へのリンク 著者について 原著を書いたJim Thatcherは、情報科学を専門とする博士で、IBMスクリーンリーダーを作った人。 だからなのか、視覚障碍者やスクリーンリーダーを強く意識した内容になっている。 なお、便宜上この記事では音声支援技術をスクリ

関連リンク アクセシブルなコンテンツ、ナビゲーション、フォーム のまとめ アクセシブルなPDFとFlash のまとめ 前回、前々回の記事同様、Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~の出版記念セミナーのまとめです。 10章の翻訳をされたのは中村精親さんですが、セミナーでは渡辺さんが話をしてくれました。 内容はアクセシブルなJavaScriptについてです。 なお、便宜上この記事では音声支援技術をスクリーンリーダーと呼んでいます。 資料へのリンク JavaScriptはアクセシビリティ的にも誤解されている JavaScriptは、アクセシビリティを妨げる使われ方が多かった。 例えば、右クリック禁止やポップアップ・ウィンドウなど。 また、アクセシブルでないスクリプトにより、JavaScriptをオフにすると利用できなくなってしまうコンテンツが

原因とかよく解らないんですが、IE6とIE7で謎の挙動に悩まされたのでメモ的にエントリしておきます。 症状 IEでウィンドサイズの変更を行うと、position: relative;を使用した要素がズレます。 お気に入りバーを出しても同様。 CSS div { position: relative; width: 300px; margin: 0 auto; height: 300px; /* 見やすくするための指定 */ background: skyblue; /* 見やすくするための指定 */ } h1 { position: relative; top: 10px; left: 20px; } HTML <div> <h1>Test Title</h1> <p>hogehogehogehoge</p> </div> ウィンドサイズ変更前 ウィンドサイズ変更後 例えば上記のコードで表

僕はFirefoxをメインブラウザにしているんですが（ふぉくすけ人形欲しい！）、会社のPCではブラウジング用、製作用、ニコ動用の3つのプロファイルを使い分けています。 その中でブラウジング用が最近重くなってきたのでプロファイルを作り直したんですが、いい機会だったのでアドオンを整理してみました。 その結果残ったのが以下です。 Tab Mix Plu LDRを使いこなすのに必須とも言えるアドオン。 livedoor Readerパーフェクトガイド - livedoor ディレクター Blogにおすすめの設定が載っています。 FaviconizeTab 任意のタブをファビコンサイズにしてくれます。ブクマやタスク管理など常時開いているタブに使うと便利です。 Drag de Go 画像をドラッグで保存できます。 PrefButtons 会社のPCという事でこれを入れてます。 チェックボックスのオンオ

追記 2008-04-03 言及を頂いたので質問コーナーに追記しました CSS Nite in Ginza, Vol.23に行ってきました。 今回のゲストはあの大藤幹さん。 大藤さんの名著CSSプロフェッショナル・スタイルは、コーディングの勉強を始めたばっかりの頃に買って物凄く役に立った本だった事もあって、かなり期待していました。 開演前 19時開演なので18時30分に到着したんですが、既に座席は満員でした。 さすがに凄い人気です。 テーマ 大藤さんは雑誌Web Designingに『CSS Analysis』という連載をしていて、その内容は世界のWebサイトを取りあげて色んなテクニックを紹介するという物。 今回のテーマはそれの特別版みたいな感じで、『CSS Analysis Live!』でした。 なお、内容はあくまで解析したサイトの結果であり、それが正しいとか、或いは大藤さんの意見である

ご注意 なにぶん超ざっくりなので、あえて説明不足な記述もあります。 その辺は最後の質問で聞いてください。 ご注意2（公開時に追記） このスライドは社内勉強会用に公開したので、最後が「続く」となっていますが続きません（次の人へのバトンでした）。 ご了承ください。

ヤスヒサさんに「プレゼンのワークショップやるので来ませんか」とお誘いいただいたので、行ってきました！ 講師的な人が一人で喋るセミナー形式のイベントにはよく参加しているんですが、みんなで考えて意見を交換するワークショップは新鮮で、集中力を保ったまま参加する事ができました。 会場 会場はミツエーリンクスさんが貸してくれました！ 太っ腹！ なにげにミツエーに行くのはこれで3回目なんですが、マジックミラーの向こう側が毎回気になってしまいます。 向こう側には何があるのだろうか。 内容 今回は技術的な事とは少し離れていて、プレゼンに関する物です。 なぜプレゼンの勉強なのかと言うと、最近、面白くないプレゼンが多いのだそう。 どういった物が面白くないプレゼンなのかと言うと、例えばスライドを読み上げるだけのプレゼン。 まあこれは資料だけ配布すればいいじゃんと思ってしまいますね。 それから、ハンズアウト（配布

Column Layout Generator 使用方法は簡単で、左側のスライドバーを操作して、各カラムの幅を好みのサイズに設定するだけです。 設定したカラムは、リアルタイムにプレビューでき、右側のパネルにスタイルシートが生成されます。 Column Layout Generatorでは、1、2、3カラムのレイアウトを作成することができます。 1カラム用 2カラム用 3カラム用

Welcome! This page is used to test the proper operation of the Apache Web server after it has been installed on this server, with the InterWorx Web Hosting Control Panel. If you can read this page, it means that the Apache Web server installed on this server and is working properly. If you are the server administrator Login to InterWorx-CP by navigating to the NodeWorx Login Page. If that does not

The Usability Postのエントリーから、押さえておきたい、タブ型ナビゲーションの5つのポイントを紹介します。 5 Steps for the Perfect Tabbed Navigation Menu キャプチャ画像は、使いにくいタブ型ナビゲーションのサンプルです。 現在位置は「Site Details」と「Statistics」のどちらに見えますか？ タブがより大きく、下のグレーと同じ色だから「Site Details」ですか？　タブのすぐ下の白色が同じだから「Statistics」ですか？ 下記は、使いやすいタブ型ナビゲーションを実装する5つのポイントです。 アクティブなタブとコンテンツの接点 アクティブなタブと他のタブの色 アクティブなタブのテキストの色 タブのリンクエリアの大きさ タブの来訪時の状態 アクティブなタブとコンテンツの接点 アクティブなタブは、そのコンテ

最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph

JaLC IRDB Crossref DataCite NDL NDL-Digital RUDA JDCat NINJAL CiNii Articles CiNii Books CiNii Dissertations DBpedia Nikkei BP KAKEN Integbio MDR PubMed LSDB Archive 公共データカタログ ムーンショット型研究開発事業

「適応障害になってしまって退職をしたい…。でもこれってただの逃げなのかな」   適応障害は人によって症状が違うため、なかなか周りに理解がされにくく、苦しいですよね。 「このまま仕事を続けられそうに…

「適応障害になってしまって退職をしたい…。でもこれってただの逃げなのかな」   適応障害は人によって症状が違うため、なかなか周りに理解がされにくく、苦しいですよね。 「このまま仕事を続けられそうに…

写真画像をレタッチして、見栄えをよくするPhotoshopのチュートリアル集のPart 5です。 Makeup makeover Recover detail from highlights and

シンプルでミニマルだけど、インパクトのあるサイトデザインを収集したポータルサイト「minimalsites」から、レーティングの高い10のサイトを紹介します。

teehan+laxから、iPhoneのボタンやバーやキーボードなどグラフィカルユーザインタフェースが揃っているPSD素材を紹介します。 iPhone GUI PSD ※Appleの提供ではないので、公式なものではありません。 ダウンロードできるPSDファイルは、ボタンなどの各エレメントやテキストはレイヤーに分かれているので、編集も行えます。 他に、iPhoneのPSD素材は下記でも配布しています。

プロジェクト 10100 では、世界のできるだけたくさんの人々の役に立つ画期的なアイデアを募集します。

面白いとは何だろう？「知識」のプライオリティは下がっている町山智浩さんのブログを読んでいたら、興味深い一節に突き当たった。 オイラはものをあまりよく知らない。昔はそれを恥ずかしく思っていたし、よくバカにされてきた。でも、今はなんとも思わない。なぜなら、ネットの時代、知識は誰でも簡単に拾えるようになったので、知識そのものに価値がなくなったからだ。いや、それは言い方が違うな。本当に物知りなのか、ネットで拾っただけの知識なのか見分けることが困難になったからだ。ちょこちょこっと検索して、それを散りばめれば物知りに見える文章は作れる。「鎮」という漢字が読めない知ったかぶり「雑学王」 - ベイエリア在住町山智浩アメリカ日記 なるほどこれは確かにそうかも知れない。インターネットやIT機器の発達で、情報というものはこれまでと比べて格段と調べやすく、また引き出しやすい環境になった。だから、以前のようにそれを

digital Photography Schoolのエントリーから、パターンやシンメトリー、ライン、フレーミング、パース、スペースなど写真を上手に撮るために重要な10の構成要素を紹介します。 5 Elements of Composition in Photography 5 More Elements of Composition in Photography [ad#ad-2] Pattern（パターン）

Dezignus.comのエントリーから、何かを紹介しているポーズをしている人物のシルエットのPhotoshopのカスタムシェイプを紹介します。

Tutorial9のエントリーから、矢印や吹き出しなどのいたずら書きのようなPhotoshopのブラシを紹介します。

Scribble Scratchから、かわいくて、ラブリーな、フリーのWordPressのテーマファイルを紹介します。

About The Author P.J. is a design technologist by trade. Check out his thoughts, work and findings at somerandomdude. You can follow him on Twitter. More about P.J. Onori…

Often when we think of commercial design work, we imagine 3 color logos and simple illustrations… but not all commercial work is so plain. Here are 20 commercial designers who create stunningly colorful work. Matthew Curry | Imagefed imagefed.com Tamer Koseli www.tamerkoseli.com/ Javier Segovia www.javiersegovia.com Un.titled www.un.titled.co.uk ONY www.ony.ru Pixelgarten www.pixelgarten.de RedKed

About Contact Is A Dating App Designed to be Deleted the Answer to Modern Online Dating?Hinge, an app created for online dating which is designed to be deleted after meaningful connections are made, offers a fresh concept of digital courting. This distinct approach was engineered with the idea that once users build special bonds via this platform, they no longer need it in their lives and can dele