デザイナーの市村さん（@MarlboroLand）がWebデザインの勉強会を開かれたので、参加してきました。
市内のレストランの一室にモニターを持ち込んでの、ごく小さな勉強会です。
WebオペレーターのためのWebデザイン勉強会開催 | くずWebデザイナーのなれの果て
”くずWebデザイナー”とか”ネガティブおやじ”とか名乗られてますが、市村さんはプロのWebデザイナーで、SaCSSでも日本のWebデザイントレンドについて、ライトニングトークをされてます。
初回ということで比較的初歩的な話になりましたが、かなり密度の濃い内容だったのでレポートします。
この記事は前半の、理論に関するまとめです。
勉強会の目的
Webデザインがうまく行かない悩みをみんなで考え解決していこう
コーダーに求められるスキルは？
- 専門的な知識が必要
- 最低でもXHTML+CSSが必須
- プログラムは習得に時間がかかる
- サイト構成などの知識も必要
→要求されるレベルが上がり何でもできないといけない
では、デザイナーに求められているスキルは？
- デザインに答えはない／センス（感性）が必要
- DTPスキルが希望されている
- サイト構成からの知識が必要
- アイコンなどの装飾技術
→時代に合わせたデザインを作り出せる感性や発想が必要
デザイン習得のための原則
- やってみること
- 感じること
- 調べてみること
- 創ること
- 観ること
- 続けること
→とにかく思い立ったら行動してください（市村さん談）
制作時必要なソフト
- Firewoks スライスの書き出しが早い
- PhotoShop 画質が高い
- Illustrator 文字組がきれい
Illustratorでテキスト作り、PhotoShopで調整、Firewoksでスライス…という流れだったが、各ソフトの向上で変わってきている
Webデザインの変遷
※記事冒頭のモニター写真を参照
制作ソフトが普及してなかったり、画像形式テーブルレイアウトなど制限が多かったため、デザインにもその影響が出ていることが分かる
→モニタの肥大化による詳細なデザインの実現
→（ユニクロなど）DTP寄りのデザインが要求されはじめている
見ておいた方がいいサイト
Webデザインの基本
モニタ横幅＝1024pxが最も多い
コンテンツ幅＝960px
様々な数で割れ、グリッドシステムを組みやすい
メインコンテンツの幅は一行何文字入ればいいのか？
この問題に答えはなくまちまち／幅から算出するしかない
最近のデザインの傾向
- フッターにサイトマップが入っているデザインが非常に多くなっている
- サイトの肥大化に伴いグローバルナビの役割が変わってきている（後述）
- 特に誘導したい、必要とされるリンク／最上層のカテゴリー一覧
それより下層のサブカテゴリーを全てフッターに掲載する
Webデザインでつまづきやすい場所
- 装飾の方法
- ボタンやバナーなどの作り方を覚えよう
- サイトレイアウト
- ヘッダやフッタなどの必要なコンテンツの配置方法を覚えよう
- レイアウトバランス
- 配色による影響や見出し、文字の組み方を考えよう
- コンテンツの組み立て方
- コンテンツ情報をまとめサイトマップを作ってみよう
その他：重要だけど学ぼうとすると時間のかかるもの
文字の形式やウェイト
カラーキーワードや色に関する人への影響
画像の加工方法 etc…
グローバルナビから先の構成の変化
- むかし： 1ページに全て載っている
- 少し前： 最初の1ページが載っている
- 現在： 子ページのインデックスが掲載されている
→キーワード細分化によるSEO的な利点
→腹黒い話見積がちょっと増(ry
市村さんが最近作ったサイト
ブレインワークス
最近のサイトデザインのトレンドを踏襲してみました
- 直線的なデザイン
- 整理されたグローバルナビ
- フッターにサイトマップ