CSS Nite LP11を妄想する

2010/10/9にCSS Nite LP 11が開催されました。“ビジュアルデザイン”にフォーカスした内容。

仙台から馳せ参じられなかったのでTwitterやブログから妄想。

to-Rの西畑さんの速報？から妄想する

西畑さんのブログ

矢野りんさん

UI向けビジュアルデザインの基礎　by　矢野 りん [CSS Nite LP11]

Webサイトは何次元デザイン？

• 2D（点／線／面＞平面）
• 3D（面／奥行き／高さ＞空間）
• 4D（面／空間／時間＞モーション）

ウェブの種類もいろいろ・デザインもいろいろ

• 変わらないもの 情報をわかりやすく整えること
• つまり、Webデザインとは 「人間に情報を伝えること」が最低条件

2Dデザインの基本セオリー

• 優位性・ヒエラルキーの法則
  • 大きさ（大きいほど重要・重要な情報を絞り込む）
• コントラストの法則
  • 大小・明暗・遠近（表現の差）
  • 背景色と前景色の差
• リズムの法則
  • 情報を法則性を持って配置する
  • 余白・サイズ・目安
• 構造の法則
  • モジュール
  • グリッド
  • ガイドライン

講演は全く聞いていないのですが、端的に出された単語を追うだけでもかなり良い情報にたどり着けそう。

なんとなくやっている事だけれどもWebを2D・3D・4Dと改め定義されると頭の中がかなりスッキリします。授業とか、誰かに説明するときにも参考になりそう。

鷹野さん

Webデザイナーのためのタイポグラフィと文字組版　by　鷹野 雅弘

画像フォント

ベタ組み
ツメ組み

和文フォント

基本的に正方形の仮想ボディ内に文字が配置されている。

オーソドックス（仮想ボディーに対して小さ目・文字間が大きく感じる）
モダンスタイル（仮想ボディーに対して大き目・文字間を感じない）

イラストレーターで文字詰め
自動（フォントの情報から詰める）
オプティカル（字面から詰める）
その後、手動で詰める

MSPゴシックとMSP明朝だけ仮想ボディを持たないプロポーショナルフォント。

欧文フォント

プロポーショナル（文字ごとにサイズが違う）

欧文向け(ベースラインに余裕がある)
line-height:1.2

和文向け(ベースラインに余裕がない)
line-height:1.5 – 1.9

全角カッコ（文字の中央に配置）
半角カッコ（少し下にずれている）

これも普段なにげに感じてる事を、改めてリストアップされているのを見てスッキリ。
半角カッコが少し下にずれる、というのも常に経験していて、

これって、調整するもの？
フォントのせいにしてそのままが普通？
全角で打つべき？

とか、ちょっと疑問も持ちつつ頭の片隅に追いやってたものです。

これを具体的にどうするみたいな話になってたら、ぜひ聞いてみたかった内容でした。

デザインとひとことで言っても奥が深いわけですが、自分が今まで感じてきた疑問の再確認や、解消として凄く良い機会だったんではないかとうらやましがりつつ、単語から個人的に色々構成してみたいと思います。

今回のようにまとめられたモノがあるとものすごく重宝します。

『CSS Nite LP11』の続編として、『CSS Nite LP12』があるので、こちらも要チェックですね。