おまえなんか、訳してやる!

どんどん一言で 訳していくサイトです。 今567語くらい。

デザイン変更前の覚え書き(結局まだ変えてない)

じ・しょ・は・ず・と・そ・そ・ぐ
だったかな。ちょっと本屋で雑誌のレイアウトの本を立ち読みしました。そこにレイアウトの基本要素がうまくまとめてあったので覚えてきたのですが、それをこのウェブ日記のほうに応用して考え、役立てていきたいと思います。

ジャンプ率

同じ画面上にある図版や文字の、大きさの比率です。
ジャンプ率が大きければメリハリのある紙面となり、ジャンプ率が中途半端・無計画だとスッキリしない画面になってしまいます。
パソコンの画面では、それほど多くの文字サイズが選べるわけではありませんし、大きな文字をきれいに表示するブラウザも少数派ですから、制限は大きいです。
最小の文字サイズを決めて、ボディーとなる通常のサイズを決めれば、あとは文字画像を使ってバランスをとっていかなければならないことが多いでしょう。

書体

文字の大きさと太さで、印象はかなり決まります。次にゴシック、明朝、角丸といった書体の要素が重要です。

ただブラウザ上で文字は印刷物のような高い解像度では表示できません。またきれいに読める書体も少ないです。さらに、機種によって同じ書体を表示できないわけです。

文字の大きさ、太さ、書体を「だいたい」でしか決められないのは、私がウェブデザインをやってみてとても難しく感じたところでした。塩加減を決められない状態で料理を完成させるような感覚です。

ある程度以上の書体の差異にこだわるならば、文字を画像にするしかなくなってくるでしょうが、重くなるというジレンマが。ご利用は計画的に。

版面率

画面上ですきまがない状態が、高い版面率ということになります。版面率が低いのは、文字や図版がなく空間が多い画面。
版面率はパソコンの画面でも意識しやすいです。
版面率が低いと上品な感じになり、版面率が高いと情報をつめこめるし活気が出てきます。
サイトの目的や雰囲気を考えて、特に最初に目にする状態の版面率は計画しておきたいところ。

図版率

画面に占める図版(画像)の面積の割合です。
図版が多いほど好感度が高まるといいますが、8割以上が図版になると逆に好感度が急激に下がるそうです。ロゴやタイトルを図版と見なし、画面を和らげることもできます。
ウェブサイトではアクセシビリティの関係からそれほど画像ばかりにしにくいですし、ブログで雑誌並の図版率を保つのはなかなか大変。
また図版率が高いと情報をつめこめないという問題もあります。パソコンの画面は可読性が低いので書籍ほどの文字量をなかなか読ませられない事情もあり、図版を多くすると文章は本当におまけ程度になってしまうことも。
ただそれだけに、図版率はそこに気をつけるだけでけっこう人気が出る要素でもあると思います。

ジャンプ率を活かすトリミング

人物の載った大小の図版があったとして、「大」のほうに人物のアップの写真を使い、「小」のほうに引いた写真を使ってみようという話。風景などでも同様です。面積の大きい方にフォーカスも寄った画像を使うことで、画面がより劇的に、メリハリの効いた状態になります。

でもウェブサイトの「小さい画像」はいよいよ小さいので、引いた絵を載せると言ってもなかなかできないかもねむ。大きい方にアップはできそうかな?

訴求力(そきゅうりょく)

使う図版が、読者にアピールする力。レイアウト以外のことも考えれば、もっとも目を引くコピーの訴求力も大事です。
「訴求力」は自分の感覚だけではなく、無意識を意識する経験や、他人の意見を聞く体験、広告制作の経験から判断できるようになるもの。
と言いつつ趣味で作るブログでなら、自分の判断でかまわないと思いますが。(参考リンク:Aiming to be Web Designer - 画像の訴求力

そろえ

文字揃え。これは重要ですがウェブサイトは左揃えでないとかなり読みづらいので、たいした応用は考えつきません。
右揃え・左揃えよりも「両揃え」のほうがカッチリして見える特性はあり、わざと「両揃え」にならないようにひんぱんに改行すれば文章はやわらかく見えます。
でもスタイルシートの「両揃え(text-align:justify)」が効かないブラウザがありますし、これは自然な左右揃えじゃなくて最後の行が強制割り付けになっちゃうんですよね。左揃えでは右端がガタガタしますし、テキストできっちり見せることには限界があります。

グリッド拘束率

画面に方眼用紙のような、縦横に走る線(グリッド)があったとして、その線にきっちり沿うような画面作りをすると、かっちりします。
真面目な内容なら拘束率を上げたほうが効果的。拘束を下げるほどラフでダイナミックになりますが、レイアウトに「馴れ」が要求されますし難しくなってきます。

ブログは通常グリッド拘束率が非常に高い画面構成。現行のスタイルシートによるレイアウトは、画面を四角い要素に分割していく行程がベースにあって、意図的に「崩す」労力がどうしても大きくなります。

また普段更新する文章は、ほとんどグリッドに沿ったものになってしまうでしょう。その条件を最初から加味しておいて、どこでグリッド拘束を緩めるかといった画面計画する必要が出てきます。

ただし、逆にグリッド拘束を完璧に、気持ち良いほどそろえるのも難しいのがサイトデザインではないでしょうか。文章の左右をそろえにくかったり、文中に長いURLがあると改行されずグリッドから飛び出ちゃって台無しだったり。そもそも文字の解像度が低すぎてテキストのブロックがガタついて見えるのかもしれません。また気持ちいいグリッド拘束を感じさせるほど文字量があるテキストブロックは、可読性が低くなってしまいそうです。


おま訳のサイト設計に続く