webデザインの基本

こんにちはそーまっちです。

paizaラーンニングでエンジニアでも知っておきたいwebデザインの基本の学習ログ残します。

ノンデザイナーが身につけるべきデザインスキル

エンジニアがデザインスキルを身に付けることで、デザイナーとのコミュニケーションを円滑にできるようになります。

デザインセンスがなくてもデザインの基本を抑えることで、ダサくないデザインが簡単にできます。

余白、文字(フォント)、色を意識するだけでクリエイディブなサイトになりましたね^^

コンセプトとターゲット

スタイリッシュでかっこいいものがいいデザインではない。

ターゲットのユーザビリティを考えてデザインする必要があります。

子供や若年層向け

ポップでカラフルなサイト、レイアウトもキッチリするより自由度のあるレイアウトがよい。乱れなく揃ったレイアウト

病院や銀行などの信頼度向け

ネイビーやブルー系、白などを使う傾向にある。文字はセリフ体(明朝体)を使うとベター

高級感のあるデザイン

余白が多い、メインビジュアルが多くを占める、文字はセリフ体、色は単色がベター

情報が多い系

ぎっしり文字を詰める(新聞のようなレイアウト)で情報を多く伝えるのが目的

色の基礎知識

デジタルデーターではRGB、紙媒体はCMYKの色をつかう。

RGBというのは、R(Red)、G(Green)、B(Blue)の3色で構成されたカラーモデル。

CMYKは、C(Cyan)、M(Magenda)、Y(Yellow)、K(Black)の4色で構成されたカラーモデル。

色相は「青」「黄色」「赤」のような「色の違い」のことを指します。

色相環とは色を円状にならべたものがありますが、近い色相の色を類似色、反対側の色を補色と呼びます

明度とは色の明るさ・暗さの度合いのことです。
明度を上げれば明るくなり白に近づき、下げれば暗くなり黒に近づきます。

彩度は鮮やかさを意味するものです。
彩度が高いと原色にちかづき、彩度が低いと灰色が足されていくように、くすんだ色になります。

色の組み合わせ

色の組み合わせパターンを知ることで、統一感のあるカラーリングをすることができます。

キーカラー

キーカラーはサイトなど制作物の基準となる色になります。

キーカラーを元に類似色やアクセントカラーを決めます。

トーン

トーンは、「色調」とも言いますが、明度と彩度を複合して捉えた概念です。

色の割合の基本

ユーザビリティを考えて配色を決める。

目がチカチカするハレーション配色にも気をつける。

タイポグラフィとは

タイポグラフィとは文字の書体や字配り、配置をよみやすく、美しく体裁をととのえる表現手法のこと。

カーキング

カーニングとは、文字と文字の間のスペース、字間の調整をすることです。
日本語では字詰めといいます。

トラッキング

トラッキングは、行や段落全体の調整のことを言います。
日本語では、字送りとも呼びます。

レディング

文字列の行送りのことで、いわゆる行間です。

ウエイト

ウェイトとは、文字の幅、太さです。

ジャンプ率

隣接、または近い文字(たとえば大見出しと小見出しや本文)との文字のサイズの比率のこと。

タイポグラフィーを意識するだけでデザインがぐんとよくなります。

フォントデザイン

欧州フォント

セリフ
セリフのある書体です。
小説のように長くよませる文章や、高級感をだすときはセリフ体をよくつかいます。

サンセリフ
セリフがない文字です。読みやすく視認性が高いフォントになります。

ハンドライト
手書きでかいたようなフォントです。
やわらかい、ルーズなイメージを作ることができます。

スクリプト
筆記体です。格調高いイメージをだすときなどに使います。

ディスプレイ
いろいろとデザインされたフォントで、その他多数という感じです。

日本語フォント

明朝
筆でかいたような書体です。
やわらかい、少し高級感のあるイメージをだすことができます。

ゴシック
角ばった、直線で構成されたフォントです。セリフ体に近いものになります。サンセリフに近い

丸ゴシック
ゴシック体を角丸にしたものです。やわらかい、やさしいイメージ作りをすることができます。

WEBフォント

ブラウザで表示できるフォント
現在、Googleが提供しているGoogleFontsをはじめ、無料から有料まで、多くのWEBフォントが提供されている

1つのサイトで使うフォントは多くても3種類までが基本

余白(ホワイトスペース)で決まるデザイン

デザインをする上であまり気にされない余白ですが、
余白の面積や取り方によって、デザインイメージを大きく変えることができます。

アクティブホワイトスペース

視線誘導などのために、意図的に作ったスペースです。

パッシブホワイトスペース

文字やロゴなどの要素のまわりにあるスペースです。

マージンやパディングとも呼ばれる

マクロホワイトスペース

大きなホワイトスペースのことを指します。
具体的には、文章や画像など、主要な要素同士の間隔のことを指します。

マイクロホワイトスペース

小さなスペースのことを指します。具体的には項目同士や行間、文字間のことを指します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です