Webデザインでやりがちなミス

In the Woods - Common Mistakes in Web Design （別窓）

Webデザインにおいてやりがちなミスが紹介されています。
こちらでもいくつか紹介。

フォントの乱用

デザインを始めたばかりの頃なんかは特に、つい色々なフォントを使ってみたくなるもんです。
しかしあまりに多くのフォントを使うと統一性が薄れたり、ユーザーがどこに目をやるべきか混乱するなどの問題が生じます。

フォントサイズを正しく割り振る

デザインと読みやすさの両方を考慮し、正しいフォントサイズ指定をしましょう。
見出しなどの区切りとなる部分は特に気を配る必要があります。

適切な行間を指定する

行間が詰まりすぎていると、もちろん文章が読みづらくなってしまいます。
適切なサイズを指定するようにしましょう。
著者はフォントサイズ12pxに対して、16px、18pxを指定しているとか。

フォントに読みやすい色を指定する

これはかなり初歩的ですね。
背景色をしっかりと意識し、読みやすい色を指定しましょう。
背景とフォントの色が近い場合や、上の画像のようなカラーバランスが悪い場合はユーザーに悪い印象を与える可能性があります。
COLOURloversやkuler、あとはEasyRGBなんかが役立つのではないでしょうか。

このほかにもWebデザインでやりがちなミス、その改善方法が多く掲載されています。

GoogleChromeの実力を体感できる「ChromeExperiments」

グーグル、JavaScript作品を集めたサイトを開設--Chromeの高速性をアピール:マーケティング - CNET Japan （別窓）
Chrome Experiments - Home （別窓）

GoogleはChromeのJavaScriptの動作における高速性を主張し続けてきました。
このChromeExperimentsでは、それの真偽を確かめることが出来ます。

Chrome以外のブラウザでも閲覧は可能ですが、「We recommend you launch this experiment in Google Chrome. It may run slower, or not at all, in other browsers.」と表示されます。
「俺らはChromeの使用を勧めるよ。他のブラウザで実行したらどうなっても知らないぜ。」みたいな感じですね。

試しにBall poolをFirefox3.0で試したところ、動きはするもののボールが増えると動作が遅くなってしまいました。
ならばと思い、Chromeで試したところ画面いっぱいにボールを埋め尽くしてもまだ軽快でした。

じゃあChromeをデフォルトブラウザで使うかっていうとノーですが、JSをふんだんに活用したWebアプリケーション用のブラウザとしては使えそうです。
まだChromeを使ったことがない方はこれを機にダウンロードしてみてはいかがでしょうか。
Google Chrome - ブラウザのダウンロード （別窓）

Firefox3.1にはTraceMonkeyという新しいJSエンジンが搭載されていたと思うので、アップデートすればもしかしたらChromeに見劣りしない動作をしてくれるのかも。
気が向いたら試してみようと思います。

あなたを立派なPhotoshop使いにするビデオ22選

22 Photoshop Videos To Turn You Into An Expert | Creative Nerds （別窓）

文字と画像ベースのPhotoshopチュートリアルも嬉しいですが、初心者としてはすべての工程を端折ることなく見たいと思うことがあります。
そんなときに役立つのがこの記事。様々なPhotoshopのテクニックを紹介する動画がまとめられています。

Photoshopでロゴを加工する方法から、iPhoneを描く方法、写真をコミック風のポップアートにする方法など、バリエーションは非常に豊富です。

CSS初心者のための役立つTips

20 Useful CSS Tips For Beginners | How-To （別窓）

順番が結構滅茶苦茶な気もしますが、CSS初心者のための役立つTipsが20点まとめられています。
ClassとIDを理解する、tableじゃなくてdiv使おうぜといった非常に初歩的なことが中心になっています。
ブラウザ間の解釈の違いなどに関しても述べられているので、初心者に対するまとめとしては悪くないかもしれません。

ロールオーバーでボーダーを適用したときレイアウトを崩さない方法

Image Rollover Borders That Do Not Change Layout （別窓）

hoverに対してボーダーを適用するとき、何も考えずにコーディングしてしまうとレイアウトが崩れてしまうことがあります。
そんな問題を解消する方法が二つ紹介されています。

まずは一つ目。
borderとネガティブマージンを用いる方法です。

#example-one a img, #example-one a { border: none; overflow: hidden; float: left; }
#example-one a:hover { border: 3px solid black; }
#example-one a:hover img { margin: -3px; }

hover時のボーダーを同じサイズのネガティブマージンによってレイアウトのずれを解消しています。
次にアウトラインを用いる方法。

#example-two a img, #example-two a { border: none; float: left; }
#example-two a { margin: 3px; }
#example-two a:hover { outline: 3px solid black; }

特に難しいことをしているわけではありませんが、もし行き詰ったら参考にどうぞ。

簡単にボタンが作成できる「Da Button Factory」

Da Button Factory - Create shiny buttons online, quickly! （別窓）

簡単にクールなボタンを作成できるジェネレーターの紹介です。
フォントの種類・サイズなどはもちろん、豊富な背景、角の半径などの細かいカスタマイズによって様々なボタンを作成することができます。
また、以下のページに作成例も紹介されているので、これを参考にするのもいいと思います。

Da Button Factory - Create shiny buttons online, quickly! （別窓）

画像として出力、CSSを用いた背景画像＋テキストとして出力の両方に対応しているところも嬉しいですね。
マルチバイトに対応していないことだけがネックですが、なかなか使えるジェネレーターだと思います。

CSSで知っておくべき10のこと

Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know （別窓）

CSSに関する知っておくべきことが10個紹介されています。
具体的な項目は以下の通り。

1. CSS Reset
2. IE6 CSS Bugs and Fixes Explained
3. Block and Inline Elements Explained
4. 100% Height using CSS
5. CSS Equal Height Columns
6. CSS Fixed Footer
7. CSS Rounded Corners
8. CSS Image Replacement
9. Float and Clear: A Comparison of CSS Clearing Techniques
10. Creating FAQs using a definition list

IE6のバグ、フッターの固定、複数のカラムの高さを揃えるテクニックなど、基礎的な知識がまとまっています。

CSSだけで三角形を描画！

Image-free CSS Tooltip Pointers - A Use for Polygonal CSS? | Filament Group, Inc. （別窓）

CSSだけで描画した三角形を利用したツールチップです。

もしかしたらポピュラーなテクニックかもしれませんが、自分は知らなかったので紹介。
具体的な実装方法は以下の通り。

div.hoge {
width:0;
height:0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 30px solid red;
border-bottom: 0;
}

あとは<div class="hoge" />のように書けば出来上がりです。
いずれか一つのborderの値を0に保ちつつ、他の値を変えてみると様々な三角形を作ることができます。
空の要素を入れないといけないのが難点ではありますね。

以下のページには同じ手法で様々な図形が描画されていますので、あわせてどうぞ。
A Study of Regular Polygons （別窓）

ラーメン好きなアナタヘ「ラーメンマスターβ」

ラーメンマスターβ - goo グルメ&料理（ラーメンマスターβ） （別窓）

ラーメンマスターβはユーザー参加型のラーメンデータベースです。
エリア、キーワード、ラーメンの種類などで検索が可能となっています。

ユーザーが自由に店の登録・編集することができます。
麺の種類・スープの濃さ・出汁、トッピングなど非常に細かく編集できるのが魅力です。
また、店にあったキーワードの設定も出来るので、これら設定されていると検索が非常に便利になります。
採点も店の登録同様、値段・ボリューム・待ち時間など多くの項目が記入できます。

まだ登録数が少ないものの、ユーザーが増えればラーメン好きにはたまらないサービスになりそうですね！流行れ！

リンク要素から離れた要素のhoverを実現する方法

Remote Linking （別窓）

このRemoteLinkingという手法では、リンク要素から離れた要素のhoverを実現することが出来ます。
デモは以下から。
Remote Link （別窓）

リンク要素から離れた要素のhoverを実現と書きましたが、実際は要素同士は一つのaタグで囲まれています。
具体的には以下のような感じです。

<div class="people">
<a href="#toby" id="toby">
<span class="name">Toby Yong</span><br />
Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table. Young is a British journalist and the author of How to Lose Friends and Alienate People.
<img src="画像のURL" alt="Toby Pic" class="photo" />
</a>
</div>

これに対して以下のようなCSSを適用します。

.people { position: relative; }
a { text-decoration: none; color: #222; display: block; margin: 0 0 0 270px; outline: none; padding: 5px; }
a img { border: 1px solid #ccc; display: block; position: absolute; }
a:hover { background: #ffefcd; }
a:hover img { border: 5px solid #222; margin: -4px; }
#toby img { top: 0; left: 0; }

何をしてるかというと、まずdiv.peopleにposition:relativeを指定し、位置を絶対指定したときの基準を決めます。
次にa要素に対してmargin:0 0 0 270を指定し、デモでいうところの名前と説明が表示される場所を指定します。
270という数字はこのデモでは画像が125px、borderが5+5で10px、それを横方向に二つ並べるので270pxが確保されています。
なのでこの値はご自身の用意する画像に合わせて調整してください。
そして最後にa要素の中のimg要素に対してdiv.peopleを基準とした絶対位置を指定して完成というわけです。

CSSだけで実現出来るなかなかスマートな方法だと思います。おためしあれ。