neiver

素敵なwebサイトのデザインを研究してみる(NEVER、LINE編)

  • このエントリーをはてなブックマークに追加

素敵なwebサイトのデザインを研究してみたり、研究してみたりしてみるとなにかいい発見できたり、勉強になるかもしれない!ということで自分の主観なのですが、素敵だなーと思うサイトのデザインを研究してみようということです。
今回はNEVERLINEのサイトが綺麗だなーということで研究&分析したいと思います。

NEVER

1pxのライン


ヘッダーのメニューを見てみると、ラインが引かれています。
しかし、そのラインですが、1pxのラインではなく、濃い色の1pxのラインと薄い白色のラインが1pxひいてあるんです。

拡大してみますとよくわかります。
濃色ラインと薄色ライン
このちょっとの工夫で、ペタっとならずに少し立体感が生まれますね!

テキストにドロップシャドウ

 
ヘッダーメニューのテキストにドロップシャドウが少しだけかかっています。

シャドウあり、なし
こうみるとドロップシャドウがかかっている方が立体感がでてますね。
強くかけないで少しだけシャドウをいれるのがポイントですね。
こちらはCSS3で実装可能です。簡単にコードを書いておきます!

css

shadow{
      text-shadow:1px 1px 0 #23A400;
      color:#fff;
}

cssはとっても簡単!
さらに詳しくは「CSS3 text-shadow box-shadow の使い方

LINE

LINE

不透明なヘッダーメニュー


ヘッダーのメニューが半透明になってスクロールすると固定しているのはあまり見かけませんね。面白いなー!

実装方法はこちら
CSSでヘッダーを固定にしたサンプル
トップに固定するヘッダーをCSSのみで作る方法(IE6対応)

ノイズパターン


ノイズパターンが至る所で使われています。
ベタ塗りにするより、パターンを使うことによって質感を高めてくれますね!

パターンに作り方、素材はこちら
単調な背景にノイズをのせて繊細なテクスチャにするチュートリアル
継ぎ目のない背景デザインに使える無料パターン素材800枚まとめ

これからも、素敵なwebデザインをどんどん研究していきたいとおもいます。
1回目ということでなんだかまとまりの無い記事になってしまいました、、、

おすすめ記事

  1. 縦や横の動きが面白いパララックス効果を用いたwebサイト
  2. 宇宙を用いたwebサイト、webデザイン
  3. 色々なサイトを参考にボタンを作ってみました【psd付き】
  4. 国内の素敵なwebデザインをまとめてみました【赤色編】
  5. 色んなwebデザイナーの方の勉強方法まとめてみました

関連記事

PAGE TOP