DotsDomino

無料で使うハイクオリティ

  • Full Screen
  • Wide Screen
  • Narrow Screen
  • Increase font size
  • Default font size
  • Decrease font size

日本語ミニマルデザインへのインスピレーション "30 Light and Sleek ..."

日本語ミニマルデザインへのインスピレーション Webデザインでのミニマルデザインは、CSS3で現実になったタイポグラフィーと密接にからんでいます。
CSS3では欧文フォントフェイスの制約が無くなりつつあり、デザイン性も高くなります。CSS3を使ってタイポグラフィカルなデザインをすると、ライトでクリーンなHTMLが出来上がるのです。

最近Webでも多くなってきたミニマル(minimal)なデザインは、余計な要素をできる限りそぎ落とし、シンプルでい て洗練されたデザインを狙っています。
ここで紹介する海外のデザインは、まだまだタイポグラフィカルとは言えませんが、30のライトな輝きデザインのサイトを集めた記事を紹介します。

CSS3を使ったタイポグラフィーをもっと強力にやってしまうサイトがありますが、日本語表示では難しいこともありますね。ここで紹介しているデザインが日本語ページの分岐点なのかもしれません。

紹介先のサイトは英語ですが、グラデーションで輝きを加えたライトでシンプルなデザインを中心に紹介していますので、まずは、その幾つか見ましょう。

■■■

JUNECLOUD
JUNECLOUD
これは最近多くなっているレイアウトパターンです。見出し文字をFLASHテキストに置き換えたくなるものですが .....、ムリをすると重いページになってしまう、日本語ページの悩みどこです。
情報提供をしているページなのか、それとも、プロモーションなのか。ページやコラム記事の位置づけを明確にすることで、軽快な日本語ミニマルデザインになります。
JUNECLOUD

Interactive Partners
30-light-sleek-03
写真が多いページの例です。サイトはFLASHで構成されているためHTMLを見ると好ましい状況にはありません  ..... 。
しかし、このように縦割り3つコラムはアイデアですね。
また、写真の品質はデザインの品位を左右するのですが、紹介のページにあるそれぞれの写真は、カラーやトーンが同じ調子に仕上げられています。
Interactive Partners

clandrei
clandrei
メッセージが明確でコンテンツがしっかりしていると威力を発揮するパターンです。過去、日本のクライアントには受けが悪いパターンでした。
表現したいことをタイポグラフィーとしてタイトル文字のデザインにまとめることで、ミニマルなデザインができていきます。

更に、このデザインではロゴマーク、製品、本文の背景、それぞれのカラーを統一することでボリューム感ある力強いデザインになっていて、色で関連付けされたコンテンツは、説明なしに、そのリレーションを読み取ることができます。シンプルだから成立するデザインですね。
clandrei

この他にも30のデザイン例が紹介されています。日本語のミニマルデザインを考えるときの参考にしましょう。
紹介のページ:30 Light and Sleek Web Designs for Inspiration

 

 


CSS3 タイポグラフィーのお手本の1つは、これです。

Kari Jobe
Kari Jobe
このサイトは、トップページ本文中に、imgタグがありません。
ヘッダのロゴと、フッタにあるポートレート写真以外の全てを背景画像にしていて、本文中では、見出しは大きなサンセリフ文字、本文にはCourierのセリ フ文字が指定され、合わせてオールドなヴィンテージの世界を表現しています。
このようなCSS3のフォーマットを使うと、画像処理が少なくなり、ページ追加がサクサク進みます。

注意:このペー ジは紹介の「30 Light and Sleek Web Designs for Inspiration」 には含まれていません。参照は下記から。
Kari Jobe

Tags: iPhoneとiPadミニマル