年末にどうすればデザインスキルをもっと簡単に楽しく上達できるか？なにか方法はないかなと考えていました。
自分のブログを活用し楽しめるもので、お昼休みや休憩中とかちょっとした時間を使って勉強できるものです。
そしてひらめいたのが1問だけのクイズです。
これだったら子供のお世話で毎日が慌ただしいママさんや、今の仕事がハードでWebデザインの勉強が進まない人でも気軽に楽しめかなと思いました。
Webデザインとフォトショップのクイズについて
Webデザインとフォトショップのクイズの流れはこんな感じです。
①1週目はクイズを1問出題。
Webデザイン全般の事やフォトショップの使い方に関するちょっとした事を中心に出題します。
超簡単だけど、超勉強になる内容をがんばって考えますね。
②2週目は解答と次のクイズを1問出題。
クイズの解説に加えて余裕があれば豆知識的な情報を共有したいと考えています。
同時に次回クイズを出題してそれを毎週1問づつ繰り返します。
どのような達成感があるの？
楽しく知識を身につけることが出来る！というのをゴールにしてWebデザイナーを目指すみなさんが成長できればと思っています。
第1問
Q1.猫の画像とテキストを使ってより訴求が高まるデザイン構成は、次のAとBのどちらか？
A.左に画像を配置、テキストは右に配置して調整する
B.右に画像を配置、テキストを左に配置して調整する
第1問のヒント
クイズで求められている事は訴求を強める事です。
訴求は画像を指しているのか、テキストを指しているのかを考えてより強く訴求するのはどちらに何を配置すればベストなのか考えてみましょう。
なぜその構成にしたのかも一緒に考えておくと、私とあなたの考え2通りの知識を身につける事ができますね。
第1問の解答を見てみよう！
猫画像とテキストを組み合わせてデザインしてみました。
訴求はテキストの「猫キック」にあるので、猫画像の動きを活用してテキストにユーザーの目がいくように構成できます。
なので、今回なら正解はBです。
ちなみに反対に構成を反対にすると、
どうでしょうか、一瞬訴求が弱まりますよね。しばらくすると画像とテキストの情報を頭の中で整理できるので理解できますが、実際のWebサイトやタイムラインで表示されたコンテンツだと素早いスクロールに対応していない構成になっています。
猫キック画像のみたいに与えられた素材やテキストを最大限に活用する事で訴求を強くもできるし、思った以上に弱くなる事も十分考えられるのです。
このような構成やデザインの勉強はtwitterの中でもアドバイスを発信しています。
どんな活動をしているのかは「新しいチャレンジ」の記事を確認してください。
さらに深堀解説
さらに
画像の高さ
を調整した場合はどのような印象をうけるでしょうか？
なんと！下に余白ができ猫キックの迫力が気持ち増しましたよね。
不思議な事ですが、訴求する部分の余白やバランスをちょっと変えるだけ印象が強くなったり弱くなったりするのです。
ちょっとまめ知識
画像とテキストの配置には心理的な影響もあります。
私のブログを経由してクイズの見ているという事は、私という中の人が関わって訴求を発信しているということです。
クイズを見ているあなたもユーザーという人です。
人と人が情報交換できるWebデザインを考えてデザインを追求するとさらに正解の構成になるのではと思います。
たとえば、画像とテキストと吹き出しのマージン調整をもっと調整したり読みやすい文字間にしてみるとかです。
このように見ているユーザーを想像して、ユーザーが最大限体験できる構成を考えてみるとよいと思います。
さらにテキストの文字間を調整する事でも心理的に読みやすくできます。カーニングと呼ばれる文字組みの技術ですが、「気持ちよい文字組み」の記事でやり方を紹介しているので一度覗いてみてください。
さいごに
私の記事はヘタクソなので上手くノウハウを受け取ってもらえないかもですが、最後まで読んでいただいて感謝いたします。
今年もがんばってみるcoffeebreakの中の人（@ra_cer_X）です。