2011年8月3日水曜日

タイトル文字へのこだわり:実例

スポンサーリンク

今回、縁あって@pacificusさんのブログ「パシのSEOブログ」のヘッダーをデザインさせていただきました。
その時にちょっとこだわった点を少々。


タイトルの文字にこだわる


結論から言ってしまえば、一番時間をかけてこだわったのはタイトルの文字の部分です。

シンプルでカッコいいものをコンセプトにした場合、もっともシンプルなのはサイトのタイトルだけのデザインだと考えました。色々な装飾要素を取り除くと、タイトル文字だけが残るからです。

今度別の機会に記事にまとめる予定ですが、タイポグラフィの勉強をする過程で得た情報を実践しています。実際にはそれほど大した事では無いのですが、知ればワンランクアップ!かもしれません。


書体の選定

明朝とゴシックのどちらを使うかをまず考えました。

基本的に明朝は女性的で繊細、格調が高く信頼感があります。ゴシックは男性的で力強く、重みのある安定感があります。今回の@pacificusさん(以降「パシさん」と呼称)のサイトでは以下の理由から明朝体を提案しました。

  • 情報の信頼感を表現
  • 他のSEOブログよりも品格がある事を表現
  • 文章中心のサイトであることを暗示

文章中心のサイトを暗示という点は、大抵の書籍が明朝で書かれているからです。もちろんWEB上ではゴシックが多いのですが、ゴシックより明朝の方が活字のイメージを持ち文章を連想させ易いと考えました。

なお、他のSEOブログよりも品格がある事を表現というのはパシさんのご依頼ではありません。私の印象が、そうだからです。

欧文書体の選定

和文のフォントにはたいてい欧文フォントがついてます。これを従属欧文と言います。従属欧文がおかげで、普通に使う分にはアルファベットを使う際に欧文フォントを用意する必要はありません。

ですが、従属欧文は必ずしも和文と馴染んでいるとはいえませ。最近では質が上がったらしいですが、以前は和文書体にあう欧文書体を厳選して使っていたそうです。これを和欧混植といいます。

和欧混植のために、今回は手持ちの数少ないフォントの中から使用する明朝にあったフォントを時間をかけて選びました。その甲斐あって、従属欧文では出せなかったタイトルのまとまりを出せたと思います。

文字の大きさ

見栄えを良くするためと意味を明確にするために、文字の大きさを調整します。

実物を見れば一目瞭然ですが接続詞を小さくする事で前後の単語を強調しています。また、欧文は和文より小さく見えやすいため、欧文のみサイズを少し大きくしています。

カーニング(字詰め)

文字を入力したままの状態だと、文字と文字の間に隙間が空きます。とくに和文と欧文を混ぜると顕著に現れます。

このままでは見栄えが悪いので、カーニング(字詰め)を行い違和感を無くします。ここで重要なのは目視でそろえる事。数値でそろえても目視でおかしければ意味はありません。

カーニングがうまくいけば文字のならびに違和感は無くなります。カーニングを行った部分は、固まりとしての印象が強くなります。タイトルの場合これは重要です。

結び


実際にはもっと細かい調整を行い他の必要なパーツも作っていますが、基本はタイトルの文字に力を入れました。

さて、ここまで肝心のヘッダー画像を表示していませんがこれには意図がありまして。意図をストレートに言えば、パシさんのブログにアクセスして確認しいただきたいと思います。

なお、今回のリニューアルに関連するWordpressのいろいろを書いておられますのでそちらも大事な情報ですのでご覧下さい。Wordpressをバージョンアップの間隔が空くとどうなるのかが分かると思いますので。

たまにはこんな形で記事を締めくくらせていただきます。

スポンサーリンク

0 件のコメント :

コメントを投稿