デザイナーの市村さん（@MarlboroLand）による「& lt;a class=”blank” href=”http://www.kuzuhate.com/?p=440″>WebオペレーターのためのWebデザイン勉強会」
市村さんはIrrustratorを使われているので、実際にイラレを操作しながらの説明となりました。
記事中に添付している画像は、私が家で再現したものです。
ボタンのサイズ
最近のボタンは高さがどんどん短くなっている
→グローバルナビの役割が小さくなり、コンテンツを見せることを重視するようになった
配色について
※記事冒頭のスクリーンショットを参照
原色は避けるべき。色選択はRGBよりHSBの方がいい
90%くらいに落とすとちょうどいい
明度と彩度を保ったまま色だけ変えることができる
ただし緑は彩度、黄色は明度が高すぎるので調整が必要
グラデーションの調整
白→黒のグラデーションはまずない
グラデーションのトーンカーブは全体に柔らかく、いちばん下（濃い部分）のカーブを若干きつめに
→横に回転した時の様子をイメージしてみよう
文字の配置
新ゴ／リュウミンを中心に、モリサワフォントを使うのが無難
（ウェイトを細かく指定できる）
モリサワがないときは、Adobe製品なら小塚ゴシック／明朝があるのでそれで代用
文字のウェイトを細めに、文字を大きめにするとすこしおしゃれに見える
英文字が混在する場合
英語のみHelveticaかArialに、文字サイズを若干大きくすると収まりが良くなる
カーニング
古いバージョンのIllustratorは文字間隔が不安定なので
「イ」「ト」などの隙間が広くなってしまうことがある
一文字ずつの微調整が必要 文字を選択した状態でAlt(option)＋左右キー
立体感を出す作り込み
PCの原点は左上／文字は左上から読む
…なので、左上を光源にするとバランスがいい
- 1px内側に食い込ませるように、上と左に明るい線を引く
- 1px内側に食い込ませるように、下と右に暗い線を引く（縁ギリギリに引くとはっきりしない）
ボタン上の文字に立体感を出すコツ
飛び出して見えるようにする
透明度を下げたドロップシャドウをかける
凹んで見えるようにする
- ぼかしを0、色を明るくしたドロップシャドウを右下に向かってかける
- ぼかしを0、色を暗くしたドロップシャドウを左上に向かってかける
フラットだけど読みやすくする
ボタンの縁に明るい境界線を細く引く or 光沢を出してみる
上から下のグラデーションのTIPS
上：白っぽい色
→ 真ん中：基準色
→ 下：彩度を少し高く
下から光っている印象になる
定番の矢印などの装飾
○ ＋ ” ＋ >
▲を横に倒す
PhotoShopのオートシェイプに太い矢印があるので調整する手も
※今見ているブログの、右のメニューの矢印を見てみてください＾＾；
※矢印のベクターグラフィック素材は、検索をかけるとけっこう手に入ります
グローバルナビゲーションに応用してみる
横並びのパターンがほぼ主流→誘導リンクの集約
- メイン枠と同じ幅、ボタン高さのグラデーションの棒を作る
- シェイプをコピーして「段組設定」で均等に分割する
- 分割点に区切り線を引く／二本引いて、左を少し暗く、右を少し明るく
Σ（°Д°; 段組設定知らなかったーーーーーーーー！！
※CS4以降だと上メニューの「編集」→「パス」の中にあります
市村さんのおすすめの本
今回の内容がだいたい網羅されている
DTPのデザイン本も買った方がいい。Webデザインの本はサンプルがしょぼい。
レポートは以上です。
「今回はどのくらい来るかわからなかったので初歩的なテーマにしたが、好評ならもう少し突っ込んだ話をするかも」ということでした。
イラレやフォトショの基本的な機能までは専門学校や勤め先で教われるものの、いわゆるTIPSであったり、理論であったりは実務経験を積まないことには身につきません。
私もコーディングのお仕事が多くなり、きれいなデザインカンプに触れることはできるのですが、なかなかそのテクニックを勉強することができない状況です。
デザイナー寄りの勉強会も定着して欲しいと思います。
@MarlboroLand 普通にReplyくれたらいいですよwwwwwwwwwww