Appleのウェブデザインから学ぶ、ディテールを強化する9つのポイント

Designer Dailyの記事を参考に、Appleのウェブデザインからディテールを強化する9つのポイントを紹介します。

Creating beautiful web designs: 9 details that matter

サイトのキャプチャ

Apple

[ad#ad-2]

下記は各ポイントを意訳し、Appleのサイトを例にしたものです。

ドロップシャドウ

ドロップシャドウは、デザインに深さを与える素晴らしいテクニックです。しかし、計画的に使用しないと、とても素人くさい外見になってしまいます。
良いドロップシャドウを作るには、2つの重要なポイントがあります。

  • シャドウは繊細にする。
  • ページ内の光源は一貫したものにする。
サイトのキャプチャ

Apple -iPhone 4

グラデーション

グラデーションもドロップシャドウと同様に、使いすぎには注意が必要で、繊細に使用します。また、2色以上のグラデーションは重い印象与えがちなので、避けるようにします。

サイトのキャプチャ

Apple -iPhone 4

揃え

ページ内の各エレメントに適切な揃えを与えます。並べられたエレメントはウェブページ上で整然とし、組織的に見えます。また、ホワイトスペースを作るのにも役立ちます。
この揃えは、グリッドシステムを利用すると、簡単に実施できます。

サイトのキャプチャ

Apple -iPhone

out of box

一つ前の「揃え」とは矛盾したものになりますが、これはボックスの外にエレメントを出したデザインです。グリッドは確かに整然としており素晴らしいものですが、しばしば退屈な印象を与えます。こういったボックスの外にエレメントを出すことは、ダイナミックでウェブデザインを活発にします。
このエフェクトは特に多くの注目を必要とする重要なイメージに使用するとよいでしょう。

サイトのキャプチャ

Apple -iPod touch

アイコン

アイコンはユーザーがインフォーメーションを探す際に、視覚的に役立ち、ユーザビリティを改善するためにも重要なものです。アイコンを使うことで、あなたのコンテンツはもっと読みやすくなるでしょう。
アイコンを使用する際、見た目が素敵なものにすると、デザインをいっそう優雅なものにします。

サイトのキャプチャ

Apple -iPhone

ハイライト

このテクニックはここ数年のデザインのトレンドです。白いラインを二つのカラーの間に配置し、コントラストを際立たせて明るくし、美しい外見を与えます。
また、アウトラインを際立たせるだけでも、非常に美しいコントラストを得ることができます。

サイトのキャプチャ

Apple -iPad

タイポグラフィ

フォントの大きさと階層を調整することで、テキストをより読みやすくすることができます。リストや引用文のような箇所は垂直のリズムを用いてより均衡がとれたように配置します。
良いタイポグラフィというものは、一般のユーザーには気づかれないものでしょう。しかし、サイトのリーダビリティ、優雅さを改善することはいっそう品質の高いデザインになります。

サイトのキャプチャ

Apple -iPad

テクスチャ

あなたは今までに何回、ページを圧倒する巨大な木のテクスチャを背景に使ったサイトを見たことがありますか? これらのサイトは背景に注意をひきつけすぎており、ページはあまり読みやすいものではありません。
テクスチャを使用する際は、ページの雰囲気を作るためのものであり、若干のスタイルを加えるためだけに使われるべきです。まさに、テクスチャは気づかれない状態でいるべきです。

サイトのキャプチャ

Apple -iPod
thanks:@blkrdr

call to Action

セマンティックは、あなたのウェブサイトのデザインにおいて非常に重要なものです。例えば、検索ボタンには「GO」やアイコンではなく、「検索」を使うべきです。紛らわしいものは、避けてください。
「call to Action」ボタンは、クリックすることでユーザーは何を得られるのかというコンテクストを明示する素晴らしいテクニックです。

サイトのキャプチャ

Apple -iTunes

[ad#ad-2]

sponsors

top of page

©2018 coliss