【4日目】jpg,png,gifどんなふうに使い分けるべき？
まずはUIの復習。
ジャムの法則：人は選択肢が多いと何も選ばなくなる。
3・4種類以上の選択肢がある場合は、カテゴリ－表示。
各段階で最適な情報量を提供すべし。
では、今日の本題。
色々ある画像形式の最適な使い分けについて。
大まかにまとめてみる。
・写真、グラデーションのある画像 →jpg
・アイコンやロゴなど比較的解像度の小さい写真、色数が少ない画像 →png
・アニメーションgif、pngが使えない状況下でのベタ面の多い画像 →gif
シーン別にもう少し細かくまとめてみる。
●JPEGを使うシーンを考える
jpegは圧縮画像形式だけど、24ビット（1670万色）まで扱えるため、写真など多くの色数を必要とする表現に向いている。
グラデーションのような色調が連続して変化する画像もJPEGに向いている。
圧縮方式が不可逆圧縮のため、データを捨てることで圧縮するタイプ。もちろん捨てたデータは元に戻らないので、圧縮のたびに劣化するので気をつけること。必ず元画像のバックアップを残すように。
●PNGを使うシーンを考える
イラスト系画像はPNGに向いている。透過で書き出せるのも特徴。
png-24は画質は良くて綺麗名反面、容量は大きい。
写真のような画像も結構キレイにいけちゃう。
png-8は色数が256色のため容量は抑えられるし、イラスト系ならば結構キレイに書き出せるので、容量を軽くしたい時はng-8が向いている。
仕上がりを見て、png-8かong-24かを使い分けるといい。
●GIFを使うシーンを考える
gifもpng同様イラスト系の画像が向いているが、その場合はpngを使うのが主流。
使うならば、gifでアニメーションを使いたいとき。
今日はここまで！！
【３日目】UIとは
まずは、２日目の復習から。
早く的確にクオリティー高く作成するバナー手順。
１．端的に伝わるコピーを考える
２．構成要素すべて書き出す
３．２のすべての要素から優先順位を付ける
４．手描きでレイアウトを考える
５．PC上でモノクロレイアウト
６．配色
７．再度モノクロで視認性チェック
では今日の本題。
なんとなくわかっているようで、深く考える機会がないままの課題「UI」について。
まずは、辞書を調べてみる。
UI(user interface)とはユーザーに対する情報の表示様式や、ユーザーのデータ入力方式を規定する、コンピューターシステムの「操作感」。とある。
「操作感」ね。
もう少し調べてみよう。UIデザインの心理学について興味深いサイトを見つけた。
ジャムの法則で「人は選択肢が多すぎると何も選ばなく」と実証されているらしい。
実験内容は、ジャムの試食ブースで試食できるジャムの種類を変えて、お客様がどう反応するか。というもの。
結果は驚くべき！
24種類のジャム 試食60％ 購入3％
6種類のジャム 試食40％ 購入30％
24種類のほうが試食する人が20％も多いにもかかわらず、購入率は低い。
選択肢が多いとドーパミンが出るので立ち止まるが、選択肢が多すぎて数種類だけ試食して購入しない。
逆に、選択肢が少ないと、全種類試して購入に至る。
という結果のよう。
じゃあ、このジャムの法則をデザインにどうやって落としこむの？
３～４種類以上の情報を提供する場合は、要素わけをしてカテゴリー表示。
そしてユーザーに選ばせる構造にする。
重要なことは、
１．情報を一度に大量に与えないこと
２．クリック回数を減らすことが重要なのではなく、各段階で必要な情報を的確に出し、クリックさせること。
最後にもう一度、
「人は選択肢が多すぎると何も選ばなくなってしまう」
【2日目】バナー作成の流れ
まずは、昨日の復習から、
デザイン4原則
近接、整列、反復、コントラスト（対比）。
では、今日の本題。
デザイン4原則の勉強をして、ふむふむ。と理解する→いざデザイン！→4原則できてないやん。
を繰り返す。
そこから脱出するために、コレまで我流で進めてきたデザインの流れを見直すため（そして早く上手く慣れれば最高！）
「バナー作成の流れ」をテーマにgoogleくんに聞いてみた。
本当はサイトデザインの流れを知りたいけど、まずは小さくバナーから。
まずは、私にかけていた重要なポイント、「レイアウト」と「配色」を分けて考えること！
では、流れ。
１．訴求コピーを考える
バナーはユーザーが一瞬で意味を理解し、更に"当事者意識"を持ってもらうことが重要。端的にメリットを伝えるコピーが必要。
２．とりあえず１で考えたコピーをおいてみる
まずは、一旦必要な構成要素を全て置くことが大切。すべて置かずにデザインを初めてあとから要素を追加することがないようにね！あと、ココで配色とかレイアウトとか余計なことを考えない。無心で置く！
３．全ておいた要素の優先順位をつける
「一番伝えたいことはなにか」を考え順位を付ける。そして、一番伝えたいことの文字を大きく目立つようにする。あくまで、一番伝えたいことは「ひとつ」。訴求を明確にすることはとても大切。
４．まずは手描きでレイアウトを決定
優先順位が決まったらまずは「手描き」でレイアウトを考える。いきなりPCへ向かうと要素をどこに配置するか考え過ぎたりするので。
５．PC上でまずはモノクロでレイアウト
PC上でのレイアウトはまずはモノクロで。フルカラーで進めてしまうと、配色とレイアウトで迷い無駄な時間がかかるので。まず、配色は考えず、レイアウトのみを組んでいく。
※要素が多い時はグルーピングすべし。
６．サイトイメージに合わせて配色
モノクロでレイアウトが組めたら、配色。サイトのカラーや、リンク先のサイトで使われている色を何種類か抽出して配色するとよい。実際に使用している配色を使用することで無駄に配色が増えるのを防げるだけでなく配色に悩む時間も減らせます。また、ユーザーが全く違う配色で戸惑うことも防げます。
７．最後のモノクロで視認性チェック
完成後、モノクロにして再チェック。モノクロで読みづらい場合は、フルカラーでも視認性が低い可能性が高い。
という感じ。この流れで大体４５分。
次回作成の時に早速実行してみよう！
【１日目】デザイン４原則のお勉強
※初回なので、このブログの目的を少し※
webデザインの基礎力を身につける為、自分でテーマを決めて、それについて勉強。
そのまとめを書き留めるためのメモ的なブログ。
では、本題。
デザインの４原則
１．近接
関連する要素は近くに配置して、関係が薄いものは遠ざけるという原則。
きれいなデザインは、見た目ではなく、視覚的な配置関係から組織化。
私なりの表現で言うと、関連するデザインをグループ化して配置。って感じ。
２．整列
整列の原則は近接の原則に従いグループ化したものの「見た目を統一」すること。
位置・大きさ・色を揃えることで、グループ同士でも同じグループの属性だと見る人にわかる。
ポイント
１.ページ上のすべてのものを意識的に配置する。
２.整列の基準になる線を探してそれにこだわる。
３．ページ上のすべてのものが視覚的に繋がりを持つように意識する。
３．コントラスト（対比）
色の濃淡、フォントの大小、線の太さ、余白の大きさなどで強弱をつけていくこと。
コントラストのコツは「２つの要素をはっきりと違わせる事」で、
２つの要素とは、もちろん強調した要素と強調していない要素のこと。
４．反復
反復の原則とは、同じスタイルのものを全体を通して繰り返すこと。たとえば「見出しはフォントを大きくして、文字色は赤色」というようなことを決めたら、あとはそれを継続して使っていきます。色や形、テクスチャやレイアウトなど、
視覚的に認識できるもを繰り返すことでページに一貫性が生まれる。
反復のポイントは、デザインの中から特徴的な何かをポイントとして効果的に使う。
以上４原則のまとめでした。
この原則を理解してしっかりデザインに落とし込めるようにしてみよう。
