コンテンツ
この記事は、ウェブデザイナーと開発者向けの世界で最も売れている雑誌である.netマガジンの229号に最初に掲載されました。
HTML / CSSでページをレイアウトする際に焦点を当てることができる最も重要なことの1つは、垂直リズムです。これは、ページをスキャンするときにタイプのブロックまたはタイプの行が形成される視覚的なパターンです。
見出し、リストアイテム、画像など、他のものがこのリズムに影響を与える可能性があります。ページの読みやすさとスキャン能力に役立つため、垂直方向のリズムを良くすることが最も重要です。
ウェブ上にはかなりの数の素晴らしいチュートリアルがあり（たとえば、こことここを参照）、ラインの高さにemsを使用し、タイプを「同相」に保つ方法を学ぶことで、適切な垂直リズムを技術的に達成する方法を見つけることができます。手段。
階層
細心の注意を払うべき基本的なことは、要素間の行の高さとページ上の全体的な視覚的階層です。適切な線の高さの比率を設定することは、複雑な設計演習になる可能性がありますが、習得することが重要です。画像とテキスト要素が視覚的に互いに調和している必要があるという点で、階層も重要です。最も重要なものは一般に大きく、ページの最初に表示されます。
印刷デザイナーは何年もの間垂直リズムのアイデアを扱ってきました、そしてそれはウェブデザイナーが本当にこのことに取り組まなければならなかったのは最近の過去の中でだけです。グリッドレイアウトを使用してWebサイトを構築し、複数の画面幅に対応するためのレスポンシブ実装に注意を払う必要性がますます高まっているため、視覚的なデザインの観点から、おそらく技術的な観点から、これまで以上に重要になっています。
チェックアウトする5つの例
1.活版印刷スタイルの要素 ロバートブリングハーストによるこの本は、タイポグラフィ研究の標準です。それを読んで、それを消費して、あなたができる方法であなたの脳にそれを注いでください。
2.フランク・キメロ デザイナーのフランク・キメロの個人ウェブサイトの最近の再設計は、一般的に絶対に驚くべきことであることに加えて、素晴らしい垂直リズムを示しています。彼は視差効果を使用して、ページを下にスクロールするときにリズムをホームに戻すのに役立ちます。
3.ダン・セダーホルム 素晴らしい活版印刷の垂直リズムの良い例については、DanCederholmのブログをご覧ください。コピーと見出しの行の高さは完全に比例しています。
4.フォーカスラボ Webデザインおよびブランディング会社のFocusLabは、階層を巧みに使用して、訪問者にとって最も重要なことを伝えるのに役立てています。
5. Typofonderie Typography Studio Typofonderieのウェブサイトには、画像とテキストの素晴らしい垂直リズムがあります。要素間の間隔はウェブサイト全体で比例しており、メイン画像とセカンダリ画像/セクション間の階層は完璧です。
CreativeBloqで実験計画の10の驚くべき例を発見してください。
