PingMag - 東京発「デザイン＆ものづくり」マガジン » Archive

ウェブデザイン：8つのいい感じ

2006年3月23日カテゴリー: インターナショナル, グラフィック, テクノロジー, 特集

ウェブデザイン：8つのいい感じ

んー　いい感じ

ウェブデザインとその開発は、必ずしも高級車を乗り回し、何キロものキャビアを食べ、大きなウォーターベッドの上でハーレム状態…なんて意味とは限らない。コンピューターの前でイラつきながら、キレイにレイアウトして、“ちゃんと動くサイト”のために仕事する。何時間も、そして何時間も…。でも、そんなことばかりじゃないんだ。時には、完璧なものを作った達成感で得意気になったり、最新の技術を駆使したものが成功してホっとしたりするような場面もあるんだよね。（ここでは、これをWarm Fuzzy Feeling =WFFと略すとしよう）今日は、そんな8つの“いい感じ”を紹介しよう。

作：ジョン

1) コードが人によって読まれるとき

すでに終わった仕事を数ヶ月後にもう一度振り返って、ちょっと修正を加えるためだけに、もう一度何かを勉強しなくちゃいけなくなったことってない？勉強熱心な人でもない限り、これってちょっと面倒だよね。これを解決する方法のひとつは、意味をなすコードを作ること。例えば、1ぺージの構成を視覚的じゃなく“意味が分かるように”作ることなんだ。でも「div1」「div２」というような訳の分からない名前をつけてXHTMLページを作ったとしたら、この効果は失われてしまう。

じゃあ、どうすればいいのか？まずは、人が読めるような名前をコードに付けてみよう。これにはいくつもの方法があるけれど、例えばcamelCase（複数の単語を、先頭を大文字にして繋げて綴ること）とか、ちょっと古いけど、アンダーバーを使った「Main_Container_Top」みたいな感じはどうだろう。

CSSファイルにあまり頼りすぎるのもまた危険だ。だって、それによって訳が分からない文字だらけになって、後で余計に仕事が増えたりするかもしれないんだから。僕が最近よく使っているLokesh Dhakarの方法は、上部のコンテンツのテーブルを使って、CSSファイルをタイプによって振り分けることができる。つまり、レイアウトベースのスタイルから文字ベースなスタイルを分けてしまうことで、見て心地よいスタイルシートを作ることが可能になる。あと僕はよくハック用ボタンの為に真下に分かれた部分を作るんだよね。ハックは、ちゃんと動作しないブラウザの避けられない予備対策として使うんだけど、必ず必要な訳じゃない。このコードは見た目も悪いしね。なぜハックの為に、僕の美しいスタイルシートをぐちゃぐちゃにしなきゃいけないのかって？でも真下に置いておけば、別の予備対策が見つかって、後で動かしたり、消さなきゃいけなくなった時に見つけやすいんだよ。

自分自身が確実に理解できるようなウェブサイトを作れば、なんとも言えない満足感を得られることは間違いない！

WFF満足度：10点満点中「6点」

2) 自慢の機能がいい感じに動かないとき

近頃のフラッシュ・オンライン・ゲームで気づいたのが、理由なく動作しないようにされてるブラウザがあること。なんとなく理由は分かる。でもそれが、ベンチャー企業の資金提供なんかが背後で絡んでいるからって、Safariみたいに完璧なブラウザが締め出しをくらう理由はないと思うんだ。WritelyとRiyaが良い例で、「あれ、Safari使ってるんの？ごめん、じゃダメだ。またね〜」的なことを言ってくる。もしキミの最新機能が僕のブラウザで動かないのなら、初めからいい感じにダメに作ってみてくれないかな。違うブラウザのダウンロードを勧められるより、少なくとも優雅に崩壊しているページを楽しむことができる方が全然いい。これはこのリストを成し遂げるための最も難しいWFFのひとつだろうね。これをやってくれる人は、本当に尊敬するよ。

WFF満足度：10点満点中「8点」

3) 文字をちょっとだけ大きくしてもレイアウトが崩れないとき

完璧なレイアウトは、ウェブ・デザイナーならいつもゴールとするところ。必ずしも見る人全員が、デザイナーが設定した文字サイズで見たいとは限らないだろうし、また同じサイズで見ることも実際無理。忘れちゃいけないのは、スクリーンサイズや視力って、人によってまちまちってこと。だから当然「文字の拡大」を押す人もいる。でも、デザインが複雑になればなるほど、これをこなすのは大変だ。僕たちデザイナーは、たった一つの要素のために決まったサイズの文字を使わなければならないことがある。そして、そんな時に「文字の拡大」ボタンを押すと、レイアウトがぐちゃぐちゃになったりする。これに付け加えて言うと、Internet Explorerの最小文字のサポート不足は、ボックスごと高さを指定したい時にものすごく大変なんだ。でも、テキストがはみ出して、大きくなったとしても気にしないことだね。どうしても解決策を知りたい人は、時間がある時にでもスチュ・ニコルズのIE min-height CSS hack を見るといいかもね。

WFF満足度：10点満点中「7点」

4) 自分のサイトが何もしなくてもIEで見れたとき

はは！ほとんどのウェブ・デザイナーや開発者が、ウェブの知識が豊富な人だと思うけど、だからこそ優れたブラウザを使っていて、製作中もそれを使い続けている。ということはつまり、MozillaやFirefox、Safariではすごく良く出来たサイトに見えるのに、IEで見るとヒドイことになってたりする。IEの問題は、フロートとIEがそのボックス・モデルを扱っていること。IEを喜ばせるためには、忍耐が必要だ。OdeoのデザイナーでSimpleBitsのダン・セダホムは、Web2.0 Showの「（Internet Explorerは）好きじゃないのに、つき合わなければならない家族」と題された最近のインタビューでうまく説明していたっけ。

WFF満足度：10点満点中「9点」
（努力せずにIEでちゃんと見えるサイトを作るって、ウェブデザインおたくにとっては、ある種のオーガズムなんだ）

5) スタイルシートなしでもサイトがキレイに見えるとき

何もしなくてもうまくいくという、さっきの例と似ているね。CSSはものを動かしたり、フロートさせたりするのにとても適しているけれど、CSSを取り除いてもサイトはキレイに見えるのだろうか？ナビゲーションはちゃんと上にくる？ヘッダータグ（h1, h2など）の順番はあっている？ちょっと退屈かもしれないけど、そうやって検索エンジンはキミのサイトを見ている。そして、ページの流れがちゃんとしているサイトは、検索エンジンに理解されて、より良いページ評価やインデックスを得るんだ。

WFF満足度：10点満点中「6点」

6) キミのURLが意味をなしたとき

Wordpressみたいなブログ・エンジンには本当に感謝だよ。“無駄のないURL”は、誰でもできる一番いい技だ。無駄のないURLって、どういうことかって？例えば、PingMag。http://www.pingmag.jp/2005/08/みたいなURLを見れば、そこにアーカイブがあるってことが分かるでしょう？ということは、つまり、サイゴの08を09に変えて、http://www.pingmag.jp/2005/09と打てば、次の月のページが見られる、ってことだと思うよね。そして、その予想は正解。無駄のないURLは、ユーザーに説明しなくても、どこに何があるかを分からせることができる。じゃあ、次世代のウェブ開発ツールの話をしようか。システムにすでに埋め込まれた機能、例えばRuby on Railsによるアプリケーション・フレームワークは、無駄のない分かりやすいURLをつけてくれるんだよ。

WFF満足度：10点満点中「7点」

7) すごいフォームが出来たとき

フォームは、いつも忘れ去られがち。かわいそうに…。フォームを作ることは、ウェブ・プロジェクトをやるにあたっていつも一番最後にまわされる仕事だろうし、誰もあまり深く考えたりしない作業だろう。そしてそんな理由から、全くもってひどいフォームをあちこちで見かける。例えば…

余計なことを沢山お願いしてくるフォーム
「はい」を押すまで、何が義務なのかよく分からないフォーム
一カ所だけ間違えただけで、入力したもの全てが消えてしまうフォーム

こんなことを言い出したらキリがないけど、最近だとAJAXが広く使われているので、フォームに入力する必要がなくなったんだ。「コラ！間違えてる！はいもう一度。」なんて、言われなくてもすむんだ。例えば、“どうしても使いたいユーザー名”を入力したとする。すると、フォームがそのユーザー名が既に存在するかどうかを調べてくれる上に、同じページ上で可能かどうかを教えてくれる。入力ボタンを押した後に別のページに飛ばされて「ダメでした！」って言われてイライラさせられるより、全然ましだ。他のページの方があまりにも重要なせいで、フォームはいつも最後にまわされる部分。でも、使うのが楽しくなるようなフォームを作れるってことは、誇りをもっていいことなんじゃないかな。

WFF満足度：10点満点中「6点」

8) クライアントに「素晴らしい、これを望んでいたんだよ」と言われて、自分もそう思ったとき

とにかくサイコーな気分だよね : )

WFF満足度：10点満点中「10点」

33 コメント

宣伝ｳｻﾞｯ

Posted by: 　 @ 3月24日2006年
>宣伝ｳｻﾞｯ

なるほどね。そう捉えるのか。
それは残念です。
英語ページのコメントをみてみれば、世界中の皆さんはこの記事を結構楽しんでるみたいけどね。

今日の記事は気に入らないみたいですが、pingmagはなるべく多くの人が楽しんでいただくため、毎日（ま、週に５回くらい）更新してますので、＿さんも、またきてください。

Posted by: tom @ 3月24日2006年
デザイナが喜ぶこと

Posted by: Naotake @ 4月26日2006年
“>”が打てないフォームが使われててコメントがさっそくオカシナ事に…このへん矛盾してるね。悲しい。

Posted by: Naotake @ 4月26日2006年
[...] 僕は以前、「ウェブデザイン：8つのいい感じ」の記事の中で、使いものにならないフォームについて嘆いたことがある。でも、今日僕はまたこの場所に、あの時よりもさらに具体的な例と共に帰ってきた！ [...]

Posted by: PingMag - 東京発「デザイン＆ものづくり」マガジン » Archive » ユーザーを幸せに導く5つのデザインパターン @ 7月27日2006年
As it is true, death was merely to let Marble enjoy the changing landscape, with the remains of its alterations.

Posted by: female diaper stories @ 1月5日2007年
<

Posted by: tetsu @ 6月20日2007年
aska daır hersey

Posted by: goruntulu sohbet @ 7月22日2011年
Phenomenal brkaeodwn of the topic, you should write for me too!

Posted by: Henrietta @ 7月26日2011年
I’ve said that least 4875287 times. The problem this like that is they are just too compilcated for the average bird, if you know what I mean

Posted by: a4875287 @ 11月5日2011年
Can I just say what a relief to find someone who truly is aware of what theyre talking about on the internet. You undoubtedly know how you can deliver a difficulty to light and make it important. More people have to read this and understand this side of the story. I cant imagine youre no more common because you undoubtedly have the gift borse imitazioni

Posted by: Collezione borse Burberry @ 11月5日2011年
As I hyperlink someone i opine the proportionality concern here is noise slapdash up, prize anybody for your causes. You should confinement it up perpetually! favourable of luck.

Posted by: 775highbench @ 11月8日2011年
Attractive section of content. I just stumbled upon your web site and in accession capital to assert that I acquire actually enjoyed account your blog posts. Any way I will be subscribing to your feeds and even I achievement you access consistently rapidly.

Posted by: LymanKitterman @ 11月9日2011年
hullo, thanks since transmitting. i came crosswise your deposit in bing as a phenomenon i’m gladsome i constitute it. i determination prettify turnabout to retell often soon.

Posted by: aboutmyzimbabwe @ 11月9日2011年
This is an interesting and unique piece of writing. I think the viewpoints you have here are not only sound, but also fascinating. Thank you.

Posted by: wine Accessories Products @ 11月9日2011年
When youre concerned in having got a guest blog card please let me have sex. I MERELY gives you unique message for the reality webstie, thanks.

Posted by: alphaglobaltrade @ 11月10日2011年
I see

Posted by: Thea Bragdon @ 11月11日2011年
Very interesting points you have observed , thanks for posting . “These days an income is something you can’t live without–or within.” by Tom Wilson.

Posted by: review @ 11月12日2011年
I do agree with all the ideas you have introduced in your post. They’re really convincing and will definitely work. Nonetheless, the posts are too brief for novices. May just you please extend them a bit from next time? Thank you for the post.

Posted by: know how @ 11月13日2011年
Blog content is very good and I will come back to read it as an encouragement to the other

Posted by: buy black friday @ 11月14日2011年
nice work thanks for the share!

Posted by: Estabrooks@yahoo.com @ 11月15日2011年
I found this submit useful

Posted by: Saul Honokaupu @ 11月17日2011年
Compared with a price quite a lot of saving money.

Posted by: Kreditrechner Vergleich @ 11月19日2011年
Aw, this was a very nice post. In thought I wish to put in writing like this moreover – taking time and precise effort to make a very good article… but what can I say… I procrastinate alot and not at all seem to get something done.

Posted by: Daine Debo @ 11月21日2011年
I have recently started a blog, the information you provide on this site has helped me tremendously. Thanks for all of your time & work.

Posted by: Cut Down Belly Fat Tip Weird @ 11月21日2011年
Hello my loved 1! I wish to say that this post is amazing, outstanding written and come with nearly all significant infos. I’d like to appear far more posts like this .

Posted by: deer antler velvet @ 11月27日2011年
strongzz I was recommended this website by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my difficulty. You’re wonderful! Thanks!

Posted by: uggs cheap @ 12月2日2011年
Throughout this grand scheme of things you secure an A+ for hard work. Where exactly you lost me ended up being on the facts. You know, people say, details make or break the argument.. And it could not be more correct at this point. Having said that, allow me inform you exactly what did give good results. Your article (parts of it) is definitely rather convincing and that is most likely the reason why I am making the effort to opine. I do not make it a regular habit of doing that. Next, whilst I can see the jumps in reasoning you come up with, I am not really certain of just how you appear to connect your ideas which in turn help to make the actual final result. For now I will, no doubt yield to your position however trust in the near future you actually connect the dots much better.

Posted by: Daryl Billingsley @ 12月4日2011年
Thanks for both another bully article. Where else could the diligent get that write of collection in this perfect effectuation of penning? I ‘ve a presentment next workweek, now i but am on the crucial explore for specified substance.

Posted by: atomboygame @ 1月9日2012年
This is a great site. I like your blogs.Its usefull for me blogs in the galaxy Its usefull for me. Thanksyou.I Like to Play travel online.

Posted by: สถานที่ท่องเที่ยว @ 2月23日2012年
Pretty nice post. I just stumbled upon your blog and wished to say that I’ve truly enjoyed browsing your blog posts. In any case I’ll be subscribing to your rss feed and I hope you write again very soon!

Posted by: Karry Tall @ 3月14日2012年
I’m not sure where you’re getting your info, but good topic. I needs to spend some time learning much more or understanding more. Thanks for wonderful information I was looking for this info for my mission.

Posted by: Zachary Olmsted @ 3月24日2012年
ウェブデザイン：8つのいい感じ good post973

Posted by: air multiplier @ 4月21日2012年