DESIGN NOTE

@dublco-blog

74 posts

文字サイズと行間

http://crossborderleadership.org/magazine/event20160219/

font-size: 14px／line-height: 28px

アンシャープマスク

ピクセル間の色の差を強調するフィルタの一種。色と色の境目に、エッジを効かせることで局所的なコントラストを高めることで輪郭をはっきりとさせることができる。

・量　画像の境界線の明るさの違いの度合いを示します。大きいほどより輪郭線を強調。・半径　輪郭線の強調を適用する範囲を示します。数値が小さいと輪郭のみを、大きいと画像全体を強調することに。・しきい値　ＵＳＭフィルタ適用範囲の設定。数値が大きいとピクセル間の色差が大きくてもシャープネスの適用対象からはずれてしまう。

基本的には「量」のパラメータを調整して行う。「半径」は０．１～１の間で。「しきい値」は基本は０で使用。　「半径」を小さく保つ意味は「輪郭線以外には極力手を加えない」こと。　しきい値が０なのは、僅かな差の輪郭にも（例えば、芝生と木の葉っぱの差）シャープネスを有効にする。という意味がある。　そして最終的にシャープネスの「量」で微調整する。　ただし場合によって、より強力に輪郭線を強調しようと思うなら「半径」を上げる必要もあり、　あるいは、画像の滑らかさを損ないたくない（が、輪郭は強調したい）場合などには「しきい値」を上げると良い。

フォトショップ：アンシャープマスクの使い方 : Retouch WebLaboratory

テキストの色

ベース：#555か#333

タイトル：#262626

プロセス

いつでもイメージ固めて、参考サイト探してっていうプロセスは同じ。これを怠ると中途半端なものになる。その参考サイトを探す数とか、その内容の濃さが違うだけ。

ルール

線の細さ揃える、フォントのルール

EC CUBE

EC CUBE使うときは、基本的にレイアウトを変えないようにデザインする。一回それでしてみて、変って思うとこだけ変える。

リニューアル

リニューアルで、漠然と変えたいって言われたときは、一回全然違うのを出してみる。それを見せることで、お客さんは、そういうのを求めていたのか、そういうのじゃないのか、これよりはもっとこんな感じかなとか、次への道筋が見えやすい。今までと同じのを出しても誰も何も見えなくてずるずるいくだけ。

レイヤー感

影をつけて立たせる、凹ませるときに、要素の重なり方を考えて、矛盾のないように作る。

参考サイト

参考サイト探すときは

全然違う業種とかでも自分がやりたいサイト、いいと思うサイト(余白感、ジャンプ率など・・・)

スタンダードな、求められているサイト(みんながいいと思うもの)

そのサイトのポイントとなるところが参考になるサイト

の3つの軸で探す。

人に響くもの

人に響くものの9割は理論、あとの1割は五感に訴えるもの。

レイアウト

レイアウトは関係性

#レイアウト

英語＋日本語のタイトル

日本語＋英語でタイトルなどを置く場合、日本語と英語を中途半端に同じ大きさにせず、思い切って大きくすると、英語を読ませずに図として認識させることができ、日本語に目がいくようになる。

情報の優先順位

情報の優先順位を忘れずに、一つ一つの要素に根拠を持って作る。あしらいにとらわれすぎないで、基本的な文字などの強弱の付け方でまずはメリハリをつけていく。

ディレクターとの共有

最初にターゲットが誰なのか、どういう用途で使われるサイトなのか、このサイトで何をしようとしているのか、情報の優先順位、などをしっかり確認しておく。

アイコン＋文字

安心感がありすぎるとさっと通り過ぎてしまうので、アイコン+文字で置く際に強弱をつけておくと文字に目がいきやすい。アイコンで目をとまらせて、文字を読んでもらうことができる。

イラレ→フォトショ

イラレデータをのせるときは修正あるときのことを考えて、一気にコピペせずにある程度わけてコピペするとあとあと楽。

小さい文字を読みやすくするには

ロゴなどで小さい文字と大きい文字組み合わせるときは、レイヤーわけてアンチエイリアスの処理をわけられるようにする。小さい文字は鮮明にすると細すぎて読みづらいので、シャープにして薄くしたい場合は色で調整する。

DESIGN NOTE @dublco-blog - Tumblr Blog | Tumgag