Designare cafe

Pattern1　1分で完成！ラインを引く

グローバルナビで使用した同じアイコンを使います。アイコンを先頭に置き、縦2pxのグレーのラインを引きます。そして、見出しの文字を入れれば完成です！

バリエーションとしては、ラインをグラデーションにして右端を消すようなデザインにしたり、ラインに色をつけてみたり、点線にするだけでも印象が変わってきますし、ラインの下に薄く影をつけるだけで少し立体感が出てきます。

ラインをグラデーションにし、細くすると繊細な印象になるので、
上品なサイトや女性向けのサイトにおすすめです。

ラインに色をつけました。文字ばかりでページ全体に色味が少ない時などに
使用すると明るくなります。また、タイトルを目立たせたい時にもよいでしょう。

ラインを点線にすると、カジュアルな雰囲気がでてきます。
ドットの感覚を広く点を大きくするほどポップな印象になります。

ラインの下にシャドウ（影）を少しつけただけでも、立体感が出てきます。
影を濃くするとより立体感が増します。

シンプルですがデザインされたアイコンがあるため、ラインを引くだけでも十分見出しとして成り立ちます。ここでのポイントは、グローバルナビと同じアイコンと同じ書体を使っているところです。
たくさんフォントを使うと印象にまとまりがなくなってしまいますので、書体を限定し太さで強弱をつけるとよいでしょう。同じ書体を使うことによって統一感が出るため、サイト全体の印象がまとまります。

Pattern2　グローバルナビから作る

次もアイコンを使った見出しですが、形をグローバルナビに合わせたデザインです。
グローバルナビのデザインデータを変えて作っていきます。
まず、グローバルナビの文字やアイコン、ラインなどの不要な要素を消していきます。

文字とアイコンサイズを調整し、下部のラインは伸ばして整えます。

このままでも大丈夫ですが、少しサイズが大きいので手を加えてクォリティをあげます。
ベースのグラデーションを上からグレー～白を白～グレーに反転させ、薄くします。
さらに縦のサイズを縮めて、完成です。

今回も、「フリー素材でサイトを作る ～グローバルナビ編～」と同じのアイコンセットを使用しました。
商用利用可のWEB素材が無料な素材屋（http://ec-sozai.net/ecalic01.html）