ウェンブ

フロントエンドエンジニア うぇびんのよしなし語り

WebオペレーターのためのWebデザイン勉強会(1)理論編

デザイナーの市村さん(@MarlboroLand)がWebデザインの勉強会を開かれたので、参加してきました。
市内のレストランの一室にモニターを持ち込んでの、ごく小さな勉強会です。

WebオペレーターのためのWebデザイン勉強会開催 | くずWebデザイナーのなれの果て

”くずWebデザイナー”とか”ネガティブおやじ”とか名乗られてますが、市村さんはプロのWebデザイナーで、SaCSSでも日本のWebデザイントレンドについて、ライトニングトークをされてます。

初回ということで比較的初歩的な話になりましたが、かなり密度の濃い内容だったのでレポートします。
この記事は前半の、理論に関するまとめです。

勉強会の目的

Webデザインがうまく行かない悩みをみんなで考え解決していこう

コーダーに求められるスキルは?

  • 専門的な知識が必要
  • 最低でもXHTML+CSSが必須
  • プログラムは習得に時間がかかる
  • サイト構成などの知識も必要

→要求されるレベルが上がり何でもできないといけない

では、デザイナーに求められているスキルは?

  • デザインに答えはない/センス(感性)が必要
  • DTPスキルが希望されている
  • サイト構成からの知識が必要
  • アイコンなどの装飾技術

→時代に合わせたデザインを作り出せる感性や発想が必要

デザイン習得のための原則

  1. やってみること
  2. 感じること
  3. 調べてみること
  4. 創ること
  5. 観ること
  6. 続けること

→とにかく思い立ったら行動してください(市村さん談)

制作時必要なソフト

  1. Firewoks スライスの書き出しが早い
  2. PhotoShop 画質が高い
  3. Illustrator 文字組がきれい

Illustratorでテキスト作り、PhotoShopで調整、Firewoksでスライス…という流れだったが、各ソフトの向上で変わってきている

Webデザインの変遷

※記事冒頭のモニター写真を参照

制作ソフトが普及してなかったり、画像形式テーブルレイアウトなど制限が多かったため、デザインにもその影響が出ていることが分かる

→モニタの肥大化による詳細なデザインの実現
→(ユニクロなど)DTP寄りのデザインが要求されはじめている

見ておいた方がいいサイト

Webデザインの基本

モニタ横幅=1024pxが最も多い

コンテンツ幅=960px
様々な数で割れ、グリッドシステムを組みやすい

メインコンテンツの幅は一行何文字入ればいいのか?

この問題に答えはなくまちまち/幅から算出するしかない

最近のデザインの傾向

  • フッターにサイトマップが入っているデザインが非常に多くなっている
  • サイトの肥大化に伴いグローバルナビの役割が変わってきている(後述)
  • 特に誘導したい、必要とされるリンク/最上層のカテゴリー一覧
    それより下層のサブカテゴリーを全てフッターに掲載する

Webデザインでつまづきやすい場所

装飾の方法
ボタンやバナーなどの作り方を覚えよう
サイトレイアウト
ヘッダやフッタなどの必要なコンテンツの配置方法を覚えよう
レイアウトバランス
配色による影響や見出し、文字の組み方を考えよう
コンテンツの組み立て方
コンテンツ情報をまとめサイトマップを作ってみよう

その他:重要だけど学ぼうとすると時間のかかるもの

文字の形式やウェイト
カラーキーワードや色に関する人への影響
画像の加工方法 etc…

グローバルナビから先の構成の変化

  • むかし: 1ページに全て載っている
  • 少し前: 最初の1ページが載っている
  • 現在: 子ページのインデックスが掲載されている

→キーワード細分化によるSEO的な利点
→腹黒い話見積がちょっと増(ry

市村さんが最近作ったサイト

ブレインワークス
最近のサイトデザインのトレンドを踏襲してみました

  • 直線的なデザイン
  • 整理されたグローバルナビ
  • フッターにサイトマップ

>> 実技編につづく