ホームページの冒頭で、視線を引きつけて大きく印象づけるためにヒーローと呼ばれる画像とキャッチコピーを添えた見せ方をする部分があります。
通常、ヒーロー部分に限らず、多くの区切り目部分を平行に区切っていきますが、あえて四角形のように直線的に区切らずに、曲線や斜めの線などを使って区切っていくデザインが徐々に増え始めています。

今回は、最近よく見かける非平行ヘッダーの実装の仕方を、チュートリアル形式でご紹介します。
長方形で囲むヒーローヘッダーは比較的作りやすいのですが、非直線のヘッダーはどのようにして作られるのでしょうか。
作成手順を見てみましょう。

非平行ヘッダーとは？

非平行ヘッダー(Non-paralleled header) （非長方形ヘッダー(Non-rectangular header)とも言います）とは、その名の通り2つの平行線で囲まれていないヒーローヘッダーのことをいいます。
通常、ヒーローヘッダーは長方形で区切ることがほとんどです。
というのも、従来のデザインはグリッドシステムを採用したレイアウトが多かったので、デザインも自然と縦・横での区切りで分割することが多かったからです。

しかし、*「ブロークングリッド」*という言葉がWebデザインの世界でも取り沙汰されているように、闇雲にグリッドデザインに従属するのではなく、もっと自由にレイアウトしたい、したほうがいいという流れが、だんだんと現れてきました。
実は、非平行ヘッダーはそうした「ブロークングリッド」の流れを汲むものとして考えることもできます。

参考：
あえて壊す？思わず視線が奪われる「ブロークングリッドレイアウト」とは

非平行ヘッダーが採用されている事例

それでは、実際に非平行ヘッダーが採用されているデザインを見てましょう。
典型的な例が、*台形ヘッダー(Trapezoid header)*と言われるヒーローヘッダーです。

台形ヘッダーは、長方形の一番下の辺だけを斜めにする、もっとも典型的な非平行ヘッダーのひとつです。
しかし、単に長方形を使うのではなく、一箇所斜線を用いるだけでスタイリッシュに見えるのではないでしょうか。

決済システムを提供しているstripeも台形ヘッダーを使っています。
直線を利用した台形ヘッダーは、モダンなイメージを想起させるため、最先端のテクノロジーと相性がいいようです。

stripe_top_page.png
出典：
インターネットビジネスのためのオンライン決済処理 - Stripe

Plutioと呼ばれるタスクマネジメントツールのランディングページでは、ヘッダーの青い部分と白背景の区切り目が、くぼみのある特徴的な曲線になっています。

plutio_top_page.png
出典：
Plutio - One app to manage your entire business.