こんばんは、Yamatoです。
何だか、涼しいような…。まだ暖かいような…。
明日から11月っすよ!?
さて、今回はその4つの内の3つ目を説明します。
3. 対比（コントラスト）の原則とは?
対比を作るには？
対比を作るには文字の場合は大きさ、色、フォントを変えたり、アンダーラインを引いていきます。ポイントは強調したいものを大胆に装飾することです。また、反対に視覚的に弱めるところは弱めてメリハリをつけると読みやすくなります。
対比（コントラスト）の原則を使う前
悪い例
これでは、最初にデザインと言っているのにも関わらず、デザインと名前が同等に見えてしまいます。
対比（コントラスト）の原則を使った後
いい例
原則に適用させると、「デザイナー」があって、見出しになっている部分・名前になっている部分が明確になりました。
このようなことを考えてレイアウトをしていけば、相手に伝わる情報を組み立てることが出来ます。
では、また来月〜(・v・)/
Yamato Design関係
こんにちは、Yamatoです。
だいぶ涼しくなってきましたが、9月も今日で終わりなのに、今日は真夏日手前の気温だそうです。
今年は、地震に台風に…。災害がとても多く感じました。
さて、今回はその4つの内の2つ目を説明します。
2. 整列の原則とは？
1. 見た目を統一する
2. グループ化した要素を揃える
1. 見た目を統一する
グループ化されたものでも配置すると散らかった家のようにバラバラになってしまいます。まずは見た目を統一。位置や大きさ、色を揃えます。すると、グループ同士でも同じグループの属性だというヒントを訪問者に与えることができます。
2. グループ化した要素を揃える
次にこれらを見えない線を引いて配置を整えていきます。配置を整えると、見た目が整然とした印象となって美しくレイアウトができるようになります。
整列の原則を使う前
悪い例
雑然としていて、グループ化しているのはわかりますが要素の関係がこれではわかりません。
整列の原則を使った後
いい例
まとめたり、左揃えにすることによって、整然とした印象を与えることが出来ました。
どちらの文字が、どこに属しているのかなどが解り易くなります。
このようなことを考えてレイアウトをしていけば、相手に伝わる情報を組み立てることが出来ます。
では、また来月〜(・v・)/
Yamato Design関係
こんにちわ。sugiです。
今回はスマートフォンデザインのポイントを紹介します。
PC向けのWebサイトのブラウザーには
ブラウザーのウィンドウサイズに関わらず一定の幅で表示を固定する「固定幅」
とブラウザーの幅に合わせて変化する「可変幅」があります。
webでは、ブラウザーのウィンドウサイズに関わらず一定の幅で表示を固定する「固定幅」が一般的ですが、スマートフォンの場合、特別な理由がないかぎり
「可変幅」を採用します。
スマートフォンの場合、本体の向き（縦横）によって画面サイズが変動する為、
幅を固定するのは好ましくありません。
例えば、デザインを作る際には横方向に伸縮しづらいボタンや背景画像はさけ、
伸縮しても違和感がないようにしましょう。
例）
次回は、「画面の向きに応じてデザインする」を紹介します。
Sugi Design関係
こんにちは、Yamatoです。
暑い日があまりなかった、ずっと梅雨のような夏でした。
もう秋ですねぇ〜。さて、芸術の秋！ということで、頑張ります。
前回、レイアウトの原則は4つの原則があると、記載しました。
今回はその1つを説明します。
1. 近接の原則とは？
近接の法則とは関係のある要素を近づけ、関係薄い情報同士は遠ざけるという原則です。私も初めてレイアウトをやろうとしたとき、とりあえず空きスペースができないようにと要素同士を広げて結果的に散漫な印象になったことがあります。
関連する情報を近づけることで、デザインをグループ化することになります。ページの構造と内容について手がかりを訪問者に与えることができるので、ユーザービリティに一役買うことができます。
ダメな例
このままでは写真と画像の距離が遠すぎるので、文字と写真がどのように対応しているかわからなくなります。
いい例
写真と画像の距離が近いので、それぞれ写真と文字で1セットのように見えています。これが近接の原則の基本です。
このようなことを考えてレイアウトをしていけば、相手に伝わる情報を組み立てることが出来ます。
では、また来月〜(・v・)/
Yamato Design関係 近接の原則
こんにちわ。sugiです。
毎日蒸し暑い日が続いてますね。
最近、仕事でオンラインマニュアルを作成しているのですが、
修正する画像形式をいつもPNG形式で保存しています。
なぜPNG形式がいいのかよく理解していなかったので、調べてみました。
Webサイトで一般的に利用される画像形式には、GIF、JPEG、PNGがあります。
携帯サイトではキャリアや端末によって対応している画像形式が異なるため、
画像形式の選定は悩むところです。
特に、ほとんどのキャリアや端末が対応しているGIFは
256色までしか扱えないため、色数を抑えるなどの工夫が必要です。
また、iPhone、AndroidではGIF画像の代わりにPNG画像が利用できます。
GIF形式とPNG形式を比較すると以下のようなメリットがあることがわかりました。
・フルカラー
GIF→ 256色までしか利用できない
PNG→フルカラーで利用できる
・アルファチャンネル
GIF→完全な透明色しか表現できません
PNG→アルファチャンネルを利用して半透明を表現できるのでデザインの幅が広がります。
・高い圧縮率
GIFに比べて圧縮効率がよく、画像のデータ容量を抑えられます。
こうしたメリットを考えると、スマートフォン専用のサイトを作る場合はGIF
画像の代わりにPNG画像を積極的に活用するのがよいですね。
Sugi Design関係, その他, 未分類
