Webdesign

FacebookのWindows用フォントが変わった件への対策

お気付きでしょうか。
FacebookのWindows用日本語フォントが「メイリオ」になりました。

これまでは英字フォントのみが指定されていたので、実質指定なし=ブラウザの初期設定フォントになっていました。通常、ブラウザでは「MS Pゴシック」となっている(Windows7も!)ので、ほとんどの人はアンチエイリアスなしの文字で見えていたはずです。


Windows版Firefoxでの表示

Facebookページはインラインフレームで表示されているので、CSSの指定は独立しています。
このままではUIとの間に違和感が出てしまうので、早速、WebbingStudioのFacebookページもメイリオに対応しました。

この記事には続きがあります

Webdesign

エイプリルフールサイトを作ってみました


WebbingStudioの開業届を出してから、昨日で丸三年になりました。

三年間、いろいろな方にお世話になって続けてこれたことにほんとは胸がいっぱいなのですが、日本が大変なご時世、敢えて今年は笑いを取ることにいたしました。
で、作ったのがこれです。

この記事には続きがあります

Webdesign

フォントが変わるとアイコンがずれる問題の対策

要素の先頭にアイコンを表示するときには、CSSの「padding」と「background-position」を使うのが一般的です。

a.pdf {
padding-left: 24px;
background: url(../images/parts/pdf_ico.gif) no-repeat 0 0;
}

ですが、対象がテキストリンクなどのインライン要素で、かつアイコンの大きさがフォントサイズギリギリだった場合

「フォントが『メイリオ』や『ヒラギノ角ゴ』だとちゃんと表示されるのに、『MS Pゴシック』だとアイコンの下が欠ける」

という現象が起きてしまいます。

これはWindowsのMS Pゴシックとそれ以外でテキストの開始位置が異なっているために起こる現象らしく、ブラウザ別のCSSハックでは回避できません。
また、最新OSのWindows7でも、ブラウザのデフォルトフォントは「MS Pゴシック」なので、閲覧者のOSやブラウザの設定によっては今後も引き続き対策をしなければいけません。

現状考えられる回避方法をまとめます。

1:アイコンの高さをフォントサイズより小さくする

当たり前っちゃあ当たり前なんですが…現状最も確実な方法ではあります。
だいたい3ピクセル以上小さいと、ずれはしますが欠けないようです。

2:background-positionのY値をem単位で配置する

background-positionは、二つ目の値が上下(Y)になります。
ここの単位を「em」にすると、「px」「%」よりはずれが少ないようです。文字サイズ変更にも追随します。

a.icon {
padding-left: 12px;
background: url(../images/parts/icon.gif) no-repeat 0 0.2em;
}

ただし、変動値になるのでCSSスプライトを使ってサーバーへのリクエストを節約するテクニックが使えません。
インライン要素のリストマークに対してはCSSスプライトは使わない方がよさそうです。

CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス

下にpaddingを取る

本来、インライン要素はpaddingが無効になるはずですが、Internet Explorerでは有効になります。
それを利用してずれそうな分だけ下に余白を取ります。

a.icon {
padding-left: 12px;
padding-bottom: 2px;
background: url(../images/parts/icon.gif) no-repeat 0 0.2em;
}

ただし、有効なのはIEだけで、FirefoxやOperaだったりすると効果がありません。

4:要素をインラインブロックにする

現状で、最も確実に回避できる方法がこれです。

  1. a要素をインラインブロックにする
  2. アイコンの高さ分の行高さを取る
  3. テキストを縦中央にする
a.icon {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
line-height: 16px;
padding-left: 12px;
padding-bottom: 2px;
background: url(../images/parts/icon.gif) no-repeat 0 0.2em;
}

要素がインラインではなくなるので、アイコンをフォントに関係なく中央に寄せることができます。
Internet Explorer 6にも対応しています。
ただし、行高さを指定してしまうため、二行以上のリストに対応することができません。


私が把握してるのはこれくらいです。他にないですか…(’д`)

インライン要素の行高さは、メイリオが特に顕著なようです。
bodyのline-heightを「1.5」などにすると、この辺の回避が難しくなります。
デフォルト値は「1.1」としておいて、要素別に都度line-heightを指定するのが、面倒ではありますが無難だと思います。

Webdesign

WebオペレーターのためのWebデザイン勉強会(2)実技編

デザイナーの市村さん(@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の原点は左上/文字は左上から読む
…なので、左上を光源にするとバランスがいい

  1. 1px内側に食い込ませるように、上と左に明るい線を引く
  2. 1px内側に食い込ませるように、下と右に暗い線を引く(縁ギリギリに引くとはっきりしない)

ボタン上の文字に立体感を出すコツ

飛び出して見えるようにする

透明度を下げたドロップシャドウをかける

凹んで見えるようにする
  1. ぼかしを0、色を明るくしたドロップシャドウを右下に向かってかける
  2. ぼかしを0、色を暗くしたドロップシャドウを左上に向かってかける
フラットだけど読みやすくする

ボタンの縁に明るい境界線を細く引く or 光沢を出してみる

上から下のグラデーションのTIPS

上:白っぽい色
→ 真ん中:基準色
→ 下:彩度を少し高く
下から光っている印象になる

定番の矢印などの装飾

+ " + >
を横に倒す

PhotoShopのオートシェイプに太い矢印があるので調整する手も

※今見ているブログの、右のメニューの矢印を見てみてください^^;
※矢印のベクターグラフィック素材は、検索をかけるとけっこう手に入ります

グローバルナビゲーションに応用してみる

横並びのパターンがほぼ主流→誘導リンクの集約

  1. メイン枠と同じ幅、ボタン高さのグラデーションの棒を作る
  2. シェイプをコピーして「段組設定」で均等に分割する
  3. 分割点に区切り線を引く/二本引いて、左を少し暗く、右を少し明るく

Σ(°Д°; 段組設定知らなかったーーーーーーーー!!

※CS4以降だと上メニューの「編集」→「パス」の中にあります

市村さんのおすすめの本

WEBデザイン 不朽の表現(MdN刊)

今回の内容がだいたい網羅されている
DTPのデザイン本も買った方がいい。Webデザインの本はサンプルがしょぼい。


レポートは以上です。

「今回はどのくらい来るかわからなかったので初歩的なテーマにしたが、好評ならもう少し突っ込んだ話をするかも」ということでした。

イラレやフォトショの基本的な機能までは専門学校や勤め先で教われるものの、いわゆるTIPSであったり、理論であったりは実務経験を積まないことには身につきません。
私もコーディングのお仕事が多くなり、きれいなデザインカンプに触れることはできるのですが、なかなかそのテクニックを勉強することができない状況です。
デザイナー寄りの勉強会も定着して欲しいと思います。

@MarlboroLand 普通にReplyくれたらいいですよwwwwwwwwwww

Webdesign

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

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

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

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

>> 実技編につづく