トップページ > ロジックオブデザイン【目次】 > レイアウト【目次】 > グリッドシステムの変則的活用法
グリッドシステムの変則的活用法
このトピックスではグリッドシステムを変則的に活用することで、 レイアウトにちょっとした変化、インパクトやリズムを与える方法を紹介します。 グリッドシステムの簡単な説明はグリッドシステムを活用しようを、 少し突っ込んだ話はグリッドシステムの詳細を参照してください。
グリッドシステムは整然とした美しいレイアウトを実現します。 しかし時としてレイアウトは整然とした美しさよりも、 インパクトやリズムを求められる場合もあります。 そんな時はグリッドシステムにほんの少しの工夫をほどこしましょう。 グリッドシステムという型から少しはずして要素を配置すればいいのです。
グリッドシステムによってレイアウトすると 縦に横に要素がきっちり並べられたレイアウトになります。 その並び具合が美しく見える鍵なんですが、ちょっと発想を変えて、 特定の要素を傾けたりグリッドから要素を意図的にはみ出させたりしてみてください。 すると全体の中で要素が浮き上がり、 演出の仕方によってはページ全体にインパクトを出したり、 リズム感を出したりといった効果が得られます。
リズム感を出す
リズム感を出すためには反復の原則を利用する必要があります。 ただ要素をかたむけた場合ではユーザの目を引くことはできても、 リズムを感じさせることはできません。
下の図では1つずつ間隔をあけて画像(グレイの四角)を傾けています。 これだけでだいぶリズミカルな表現になりますよね。
リズム感を出す
インパクトを出す
インパクトを出す場合はグリッドからはみ出すような表現が最も簡単だと思います。 画像によっては傾けるだけでも充分インパクトは出るので、 いろいろ試してみてください。
注意しなければならないのは、 これらの表現をHTMLやCSSで行う場合はブラウザや環境によってレイアウトが 崩れないような対策が必要不可欠だということです。 難しければ、画像によって表現してもよいでしょう。
下の図ではグリッドによって四角に分けられたテキストの一部を画像にし、 グリッドからはみ出させて表現することでユーザの目を引くようにレイアウトしています。
インパクトを出す
