Recent Posts

ユーザーが、どのような知識や経験を持っているかによって、そのデザインの受け取られ方や印象は異なります。
誰でも、それまで見たデザインの経験に応じて、そのデザインを判断するからです。

Webデザインも同様に、それまで使用したWebサイトを元にページをブラウズします。

Webサイトをデザインする際は、「どのように見せるか」だけでなく、「どのように使って貰うか」を考慮する必要がある。
クリックされやすさやタップされやすさなど、使いやすさを考慮したデザインが求められます。

Webページの各エリアの名称

詳しくは、以前書いた下記リンクで見て欲しいのですが、大まかに分けて、上部のヘッダー領域、コンテンツ領域、フッター領域、サイド領域が存在し、そこに、グローバルメニューとローカルメニューが存在するという形を取る。

Webデザイナーは、各々の領域の役割をキチンと把握した上でデザインするようにする。

Webレイアウトの構成要素

余白は、デザイナーらが「けっきょく、よはく。余白を活かしたデザインレイアウトの本」などの本を取り上げることから見られるように、余白を上手に使う事は、レイアウトする上で大切です。

ここでは、そんな余白の上手な使い方をごく簡単に説明します。

ここでは、文章の内容を印象的に見せる、文字サイズ、余白を利用した文字レイアウトの方法を説明します。

情報を正確に効果的に伝えるには、文字の読みやすさは重要である。
文章をスムーズに読んでもらうには、字間や行間、レイアウトの知識が必要となって来る。

フォントを効果的に使うには、意識的である必要がある。

フォントに対するビジュアル・スキルを高める方法は、自分が見ているフォントをカテゴライズし、そのカテゴリーに当てはまるフォントのサンプルを集めることが有効である。

色相環を活用して色を選ぶ

デザインの印象は、用いられている色の印象だけでなく、どのような組み合わせの色を使っているかによって、大きく、見ているものの印象が異なる。

ここでは、色相環を利用した色をピックアップする方法を説明します。

類似色で組み合わせる

類似色とは？

色相環上で近くに配置されている色。

類似色は、色相の変化が少なく、類似色をピックアップして組み合わせると、自然な色の組み合わせとなる。

類似色は、違和感なく受け入れられるが、変化が少ないことから、画面が退屈になりやすいデメリットがある。

補色で組み合わせる

補色とは？

色相環上で対角線にある色。

補色は、互いを引き立て合う性質がある。

配色設計

いずれかの色をメインに使い、補色をアクセントカラーに利用すると、全体を引き締め、画面に緊張感を与えることができる。

色相環の角度から組み合わせる

色相環上の等間隔にある色を選び出す方法がある。

色相の変化の割合が等しいため、バランスの取れた配色となる。

テトラード

色相環を４等分して選択した色。

トライアド

色相環を３等分して選択した色。

彩度、明度を揃えて、同じトーンで組み合わせる

トーンを揃えて配色することで、トーンが持つ共通のイメージを表現することができる。

使用する色の面積で印象が変わる

同じ色を使っていても、その使用する色の面積で大きく、印象は変わる。

配色設計

色の組み合わせを考える際は、どの色をどれくらいの面積で使うか、それぞれの色をどれくらいの割合にするかも考えておく必要がある。

＜参考書籍＞

Webデザインとコーディングのきほんのきほん

暖かみを感じる「暖色」、冷たさを感じる「寒色」。
色は、それぞれ特有のイメージを持つ。

色相と色の三属性

色相

赤、青、緑など、いわゆる色味の違いをいう。

色相にどのような種類があるのか、その全体像を把握したい場合、「色相環」が便利である。

色相環