2014年11月04日

フォント選び。文字組

媒体、ターゲット、トレンドなどの状況、またデザイナーによって、
選択されるフォントの選択や文字組の方法は変わると思うので、
あくまでもローカルルールについて、基本的なことを述べていきたい。
(テーマが壮大なので、今後も加筆・修正の予定)


最初に「見出し」と「本文」について考えてみる。

フォント選びは、単にどのフォントを使うかではなく、
字間・行間・段落の大きさ・本文と見出しの大きさの差といった
パラメータの設定も同時に必要となる。

それぞれのパラメータは最初から「これ」って決め込めたらいいのだけれど、
実際には、調整を繰り返しながらモアベターを追う感じで、
ある程度の決めごとをしておいてから、
文字組全体を意識しながら、試行錯誤もまじえつつ
テキストを配置しながらレイアウト作業の中盤位まで変化・調整を繰り返す。

印刷物やWEBなど、参考になるものがあれば
その共通項を探しながら、より相応しい表現を求めたいところだ。




ある程度の決めごとの指針とするのは、

1)ゴシック系か明朝系か。
まるっきりどちらかにするか、ハイブリッドにするか。
ハイブリッドにする場合はどちらの割合を多くするか。

2)本文と見出しの大きさ
本文の文字サイズを基本に、見出しのサイズを決めていくのだけれど
チラシのような、見た目のインパクトが必要な媒体の場合は
その差はとても大きく、また、一定サイズにならないことも多く
そういった数値で決めにくい場合は、
本文との大きさの差をどれくらいの段階をつけていくか、を考える。

3)ライトかヘビーか。
一般的には見出しは、太いフォントを使うけれど、
細いフォントを使って、あしらうこともある。
本文は可読性をどこまでもたせるか、がポイントになる。
とても細いフォントを使った本文だとしても、大きさが一定以上有れば良い選択になるかもしれない。
手書き文字のように、多少読みにくい文字でも、表現によっては相応しい選択になる。
ライトかヘビーかは、そのことだけを考えるのではなく、
2)の大きさと同時に考えることで、その時々の最適解へ近づきやすい。

















posted by CSSベースでのHTML(XHTML)レイアウト入門講座<polka> at 10:26 | Comment(0) | TrackBack(0) | CSSベースのHTMLコーディング | このブログの読者になる | 更新情報をチェックする

人気ブログランキングへにほんブログ村 デザインブログ Webデザインへ

2014年10月15日

買って頂くために。

通常、キャッチコピーや文章を作成するときは、
暑苦しく迫ってくるような感じになるのを避けている。

それは、文章だけでなく,デザインについても言えることだろうと思うけれど、
短いながらも営業の経験があることに大きく影響されていると思う。



良さを分かって頂くためには
初対面で相手の立場から考えることが難しい状態であっても、
とりあえず話しを聞いて頂かないと、文字通り話にならない。

最初から主張が強すぎると、
相手が聞く態勢になる遙か手前でシャットアウト。門前払い。

興味を持って頂けるように、
シンプルで控えめに、楽しく語ることが好ましい。



自分のウリを明確にすることは大切だけれど、
相手の立場をおもんばかる控えめな態度、
それに、相手の話を聞ける態勢があると感じて貰えるだけの余裕さがないと、
入口は開かれない。当然、理解なんてされるはずもない。

それどころか、悪い印象を残してしまって、
次からはマイナススタートだ。




当方自身、最初何しゃべっていたか分からなくなる枝葉トークになりやすく、
自分のことを話すのがとっても大好きな暑苦しい奴だ。

けれど、広く世間に知らしめる必要がある表現=広告となると別。

自分のこと、自分の側からのことばっかり言う営業からは
誰も買わないだろうってことはわかっている。




好感がもてる広告用表現とは、以下のようなものだと思っている。
似たような事柄をあげているなぁと思うけれど^.^;

1)控えめ。
2)表現する側のまごころを感じる。
3)押しつけ、自慢話は論外。
4)売りつけようとしていない。
5)信憑性のあるデータや実績・経験に裏打ちされている。
6)数字のマジックを極端に使っていない。
7)クスっと笑える。


折込チラシや、ランディングページのように、キャッチーにするために、
暑苦しい(かもしれない)表現を意図的にとるケースもあるけれど、
全体を通して「控えめで、配慮を感じる、見て読んで楽しい」表現を
基本においていきたい、と思う。

posted by CSSベースでのHTML(XHTML)レイアウト入門講座<polka> at 11:27 | Comment(0) | TrackBack(0) | CSSベースのHTMLコーディング | このブログの読者になる | 更新情報をチェックする

人気ブログランキングへにほんブログ村 デザインブログ Webデザインへ

2013年06月13日

1つのタグに複数のclassで条件分岐っぽい指定

スタイルシートのセレクタは、いうなればタグのグループ化で、
このグループの中のこのグループ、さらにその中のグループと指定できるのですが、
1つのグループだけでなく、複数のグループにまたがってする指定が結構重宝します。

【例】上下に二つのメニューバーを並べる場合

[HTML]
<ol class="menubar header">
<li><a href="pageA/index.html">リンクA</a></li>
<li><a href="pageB/index.html">リンクB</a></li>
<li><a href="pageC/index.html">リンクC</a></li>
</ol>

<ol class="menubar footer">
<li><a href="pageA/index.html">リンクA</a></li>
<li><a href="pageB/index.html">リンクB</a></li>
<li><a href="pageC/index.html">リンクC</a></li>
</ol>

[CSS]
ol{
margin: 0px; padding: 0px;
}
ol.menubar li{
display: inline;
}
ol.menubar.header{
border-bottom: 3px solid #000; padding-bottom: 10px;
}
ol.menubar.footer{
border-top: 3px solid #000; padding-top: 10px;
}

ol.menubar.headerで
上のメニューバーには3pxの罫線を下に付け、
ol.menubar.footer
下のメニューバーには同じく3pxの罫線を上に付ける
といった、(半角スペースを入れずに)「.」で繋ぐ指定です。




続きを読む
posted by CSSベースでのHTML(XHTML)レイアウト入門講座<polka> at 09:07 | Comment(0) | TrackBack(0) | CSSベースのHTMLコーディング | このブログの読者になる | 更新情報をチェックする

人気ブログランキングへにほんブログ村 デザインブログ Webデザインへ

2012年12月13日

clearfix(float解除のハック)

clerafixと呼ばれるfloat解除の方法は
本やネットでたくさん紹介されているので今さらではあるけれど、
一番シンプルな方法を覚え書き程度に書いておきたいと思います。

:afterの疑似クラスを用いて、5つのスタイルシートを記述して、
さらにIE対策でzoom: 1;を記述します。

.clearfix:after{
content: "."; clear: both; display: block; height: 0px; visibility: hidden;
}
.clearfix{
zoom: 1
}


上例はclass名として「clearfix」を使っていますが、
id名でも、タグ指定でも、大丈夫です。

▽例えばこんな感じ
p:after{
content: "."; clear: both; display: block; height: 0px; visibility: hidden;
}
p{
zoom: 1;
}

#hogehoge:after{
content: "."; clear: both; display: block; height: 0px; visibility: hidden;
}
#hogehoge{
zoom: 1;
}


深い階層付けをしたセレクタでも大丈夫。

▽例えばこんな感じ
#hoge .hogehoge table.hoge th div:after{
content: "."; clear: both; display: block; height: 0px; visibility: hidden;
}
#hoge .hogehoge table.hoge th div{
zoom: 1;
}


<br />にclearをさせる方法も使いますが、
このclearfixで重宝するのは、<br />が挟めない<ol><ul>(<dl>も)です。
よく使うのは<li>をfloatで横並びさせるときに、<ol>(<ul>)にclearfixしておいたりします。

.clearfixでCSSファイルに記述しておいて、
必要時HTMLに、<div class="clearfix">とかでclass名を付与するもよし、
特定の箇所にだけ、局所的にclearfixさせるもよし。

ハックなんて変則的なことは絶対いやだーーーって方には、おすすめはしませんが、
一度使うとあまりの便利さに、きっと逃れられなくなると思います。






posted by CSSベースでのHTML(XHTML)レイアウト入門講座<polka> at 10:17 | Comment(0) | TrackBack(0) | CSSベースのHTMLコーディング | このブログの読者になる | 更新情報をチェックする

人気ブログランキングへにほんブログ村 デザインブログ Webデザインへ

2010年05月29日

フロートをクリアしてるのに余計な余白ができる。

ページタイトル用の<div></div>の中に
<h1>と<p>を左右にフロートさせ、
そのやや下側に10pxの余白をあけて、
3pxのボーダーをつけるデザインをしていたところ、
意図しないくらい大きな余白(50pxくらい)になってしまいました。

▽こんな感じです。
<div>
<h1>左:タイトル画像</h1>
<p>右:説明テキスト</p>
<br style="clear: both;" />
</div>

(確認 Windows IE6)


...続きを読む
posted by CSSベースでのHTML(XHTML)レイアウト入門講座<polka> at 14:52 | Comment(0) | TrackBack(0) | CSSベースのHTMLコーディング | このブログの読者になる | 更新情報をチェックする

人気ブログランキングへにほんブログ村 デザインブログ Webデザインへ

×

この広告は90日以上新しい記事の投稿がないブログに表示されております。