ミニマルなウェブデザインで使用される特徴的な12のエレメント
Post on:2010年6月9日
ミニマルデザインでよく使用される特徴的なエレメントとそれを効果的に使用したウェブサイトを1stwebdesignerから紹介します。

Modern Element Trends In Minimal Webdesign of 2010
ミニマルデザインの特徴的な12のエレメント
参考として当サイトで紹介した関連記事を記しています。
- 多くの効果的なネガティブスペース
参考:ウェブデザインにおけるネガティブスペースの活用ガイド - グリッドベースのウェブデザイン
参考:グリッドシステム -サイトへの有効活用方法 - クリアで大きなタイポグラフィ
- 繊細なテクスチャとパターン
- 小さいアイコン
- 軽いシャドウ、グラデーション、レタープレスのエフェクト
参考:ドロップシャドウとグラデーションの使用を的確にするためのチュートリアル
レタープレスエフェクトのチュートリアル - リボン、スケッチ、点線、ルーラー、半透明な背景
- キープレスナビゲーション
参考:Keypressナビゲーション | よりリッチで、よりフレンドリーになったウェブデザインの現状 - クリアな形状
- HTML5, CSS3, jQueryの組み合わせ
- アニメーションするマウスオーバーのエフェクト
- カラー:リンクとタイトルを少しだけ強調し、通常は一つの明るいカラーでモノクローム
ミニマルデザインのウェブサイト
元記事よりいくつか紹介します。

Roger Burkhard
情報をシンプルに伝えるために、明確な形状とカラーとタイポグラフィを巧みに利用したサイト。

Thomas Maier
スライドするナビゲーション、小さいアイコン、レタープレス、ライトとシャドウなど、すべてのエレメントが直感的で使いやすいサイト。

Inspect Element
マウスホバーのエフェクトが楽しい、CSS3を使用したサイト。

Veerle's Blog
デザインも秀逸ながら、記事にもたくさんのデザインアイデアがつまったサイト。

Project Fedena
力強いグリッドとホワイトスペースが特徴的で、カラーには暗いレッドと印象的なグレーを使用し、繊細なテクスチャと手描き風のエレメントが面白いサイト。
sponsors