960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。

960 Grid System
デモページ

960pxを基準にする理由としては、下記の2つが挙げられています。

最近のモニターは1024×768の解像度をサポートしており、960pxを表示するには十分である。
960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。
デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることができます。

またサイトでは、資料としてHTML+CSSをはじめ、PDFファイル、PSD・PNG・VSDファイルが一式でダウンロードできます。

グリッドシステムの機能
情報の反復
グリッドシステムを用いて、一定の場所に一定の情報・機能・サービスの要素を繰り返し配置することにより、反復機能を生み出します。

情報の構造
グリッドシステムを用いて、さまざまな情報・機能・サービスの要素を一定の間隔・空間で配置することで、情報の構造を明確にします。

情報の伝達
グリッドシステムは、情報の受け手である利用者に、意味のある情報を気軽に取得できるよう伝達します。
配置する情報同士の空間を適度に設定することにより、視覚的な誘導効果を生み出し、情報の分類・区別、見出しや図版・テキストの可読性を確保します。

グリッドシステムをサイトに導入するメリット
アイデンティティの確立
ブランドロゴなどのCI（コーポレートアイデンティティ）の要素は、一定の場所に繰り返し配置します。
こうしたレイアウトの統一をはじめとする反復を利用したデザインは、サイトの全ページを通じて一貫したビジュアルアイデンティティを確保することができます。

また、この反復の存在自体がサイトのアイデンティティとなり、サイトの全体感・信頼感を利用者に対して感じさせる基盤となります。

利用者の学習効果
上記のようなスタイルガイドを設けることにより、利用者はサイトのどのページへ移動した場合でも、どの場所にどういった情報・機能・サービスが配置されているかを無意識のうちに認知・学習できます。
一度、サイトの配置ルールを認知・学習してしまえば、利用者はサイトでの行動において迷いを持たなくなります。

制作者の思考支援
グリッドシステムは、制作者にとって場所ごとにあらかじめ決められた情報・機能・サービスを考慮したデザインをするため、自由に配置する場合と比べ短時間で行うことができます。
グリッドシステムは、制作者の体系的な情報の整理思考を補助する効果を持っています。

制作品質の維持
グリッドシステムを採用すると、複数の異なる制作者がかかわる場合でもサイトのデザインに一貫性を保たせることができ、デザインクオリティが維持されやすくなります。
また、異なるコンテンツ同士のデザインクオリティのばらつきをなくし、新たなコンテンツの制作に要するデザイン作業を軽減し、サイト管理の省力化にもなります。

nccはクリエイターのためのクリエイティブ・ポータルサイトです。ニュースやtips集、お仕事情報などのお役立ち情報から、クリエイター同士の出会い、ここからはじまるお仕事まで。使い方はあなた次第で無限大に拡がります。

Quoted: Blog and Portfolio of Kyle Meyer.

Quoted: Squawk is the portfolio and weblog of Dominik Lenk, a graphic arts student and freelancer based in Southampton, England.

Quoted: Online Archive of Amsterdam Graphic Design Unit Experimental Jetset

yamazakiです。毎度毎度技術系なこのウノウラボには馴染まない話題を振りまいているわけですが、さてはてどの程度お役に立てているものか…。 今回のテーマは「視線」です。例えばWebサイトは「見てもらう」ことが大事ですし、また、UI設計の場面などでも、「視線をうまく導いてやる」のは使い勝手をよくする上でも大切なことだと思います。といったわけで、ユーザの視線をうまく捕まえてみたり導いてみたりする上で役に立つかもしれない情報を簡単にまとめてみます。 １．視線をつかまえる Web上にも街にも広告だの何だのと情報が氾濫しています。その中で「見てもらう」ためには何かしらの工夫が必要になることがあります。というわけでまずは「人の視線をつかまえる」ための方法論を少し。 「人の顔」を使う まずはこの画像を見てみてください。 01 posted by (C)フォト蔵 最初に、どれを「見てしまいました」か？ 「人の顔」が最初に目に入った、という方が多いのではないでしょうか。 たとえばずらりと色々な写真が並んでいて、その中に人の顔の写真が1枚混じっていると、なぜかそれが最初に目に入りやすいです。 人が生きていくうえで「人の顔を見る」ということは大事なことなのでできるだけ早く認知するようになってるのかな、と思うのですが詳しい理由はよくわかりません。 とりあえず、ふらふらした視線を最初にキャッチしたいときには、人の顔の写真を使うとわりとつかまえやすい、というのを覚えておくと、広告などを作る際に役に立つことがあります。 その他目立たせる方法 UIなどを作る際に、「このボタンは特別だからちょっと目立たせたい」とか、「この部分はよく理解してほしいから読んでほしい」とか、他よりも優先的に見てもらいたい部分を作りたい、といったことは結構あるものです。そんな時に「他と区別して目立たせる」方法としてたとえばこんなやりかたがあると思います。 04 posted by (C)フォト蔵 他にも視線をキャッチする方法として「目立つ」ために「派手な動き」や「点滅」なんていうのもあるのでしょうが、この辺りは嫌がられるような事も多いので割愛。 ２．視線を導く 続いて、視線をどこかに導くための方法です。 広告寄りのWebサイトでは文章などを読んでもらうために。また、UIなどでは操作に関わるものが自然と目に入るとよいと思いますし、そういったことを実現する視線をうまく誘導してやるための方法論です。 ...

先日、バランスのよさ気なグラデーションの比率を考えていたところ、以前このブログでご紹介しました、『身近にちらばる黄金比のデザイン』を思い出しました・・・

グラデーションの比率を黄金比（1：1.618...）に設定してみたら、しっくりくるかな？っと思いまして。。。

実際に試してみたところ、結構いい感じだったのでご紹介。。

上部から中央に、中央から下部に垂直にグラデーションを2段階に分けてかけてみました。で、上部と下部のグラデーションの比率を黄金比に設定してみました。。（といっても、38%と62%と大雑把ですが・・・） いろんな色で作ってみました。。。

っちゅうわけで、同じように日本で古くから使われている白銀比でも試してみました。。 こんな感じ↓。。

せっかく作ったのでPhotoshopのグラデーションファイルをアップしておきました。。ダウンロードして試してみてくださいねぇ～。