今年から連載する事にしたWebデザインとフォトショップクイズの第2問です。
今みなさんは何をしていますか？
- twitterのTLを何となく見てますか？
- 検索エンジンで調べてたまたま見た事ない見出しにアクセスしてますか？
- feedを経由して定期的に情報をチェックしてるのでしょうか。
この記事は、ちょっとした空き時間を活用してWebデザインの簡単な知識を身につける為に企画してみました。
Webデザインの勉強っていざ初めてみるかなりの時間を費やしますよね？
いろんなところでWebデザインが出来る人のアドバイスが飛び交って「あれも覚えなきゃ」「このソフトも使わなきゃ」と大変です。
だから通勤時間、お昼休憩、トイレの中とか一人でスマホをポチポチできる時間でもお役に立てる環境を用意できればと思います。
「そういえばあのブログでクイズやってたな。今ひまだから見てみるか」くらいでアクセスいただけばと思います。
Webデザインとフォトショップのクイズについて
Webデザインとフォトショップのクイズの流れはこんな感じです。
①1週目はクイズを1問出題。
Webデザイン全般の事やフォトショップの使い方に関するちょっとした事を中心に出題します。
超簡単だけど、超勉強になる内容をがんばって考えますね。
②2週目は解答と次のクイズを1問出題。
クイズの解説に加えて余裕があれば豆知識的な情報を共有したいと考えています。
同時に次回クイズを出題してそれを毎週1問づつ繰り返します。
どのような達成感があるの？
楽しく知識を身につけることが出来る！というのをゴールにしてWebデザイナーを目指すみなさんが成長できればと思っています。
第2問
第1問をふまえて女性画像とテキストを上手く構成するには次のうちどちらが作りやすいか?
A.左に女性画像、右にテキストを配置してみる
B.左にテキスト、右に女性画像を配置してみる
第2問のヒント
第1問との違い画像が女性です。それと動きが少ないですよね。
あともう一つ仕掛けがあるのですがそこは伏せておきます。
それぞれの違いを見つけて、今回の問題ならAとBどちらが作りやすいのかを考えてみてください。
第2問の解答を見てみよう！
商品画像を右に配置する事でテキストを読みやすいところで改行できますが、だったら左に画像を配置してもとなります。
なので、正解はBです。
過去に検証した事があって、ある程度文字数があるテキストの場合は商品画像を右に置く傾向があるのです。
この画像は過去に調査したもので、同じバナーサイズを重ねてから透過と色相を変え要素がどこに集中して配置されているかを確認したものです。
文字数の多いテキストは左に配置して右に商品画像を配置する傾向があります。
バナー構成に関しては過去記事「バナークリエイティブの構成」でその傾向を紹介しています。
ちなみに反対に構成を反対にすると
どうでしょうか。収まる様に修正していくとどこかに余分な隙間ができてしまいます。
無理矢理改行したりいろいろ調整すると
デザイン的には納まりを見せかけていますが、他の訴求も加わえないとバランスが悪いですよね。
さらに深堀解説
例えば立て文字に組んでみる
この構成は左右どちらでもしっくりきますね。縦文字がこのまれる商材にはこっちの方が良いかもしれませんね。
もうひとつ、
画像が下でテキストが上の場合
目にとまる面白そうな構成で、やり方次第でうまく作れそうですが無理はありますね。上に加えるなら帯を付けてキャンペーンのキャッチがよいと思います。
ちょっとまめ知識
左右どちらかに画像とテキストを配置するこの構成は、私は勝手に「縦割り」と呼んでいます。
バナーデザインのお話になりますが、300×250とか四角いサイズのほとんどは「縦割り」を軸に＋αの要素を加えて構成しているのではないでしょうか？
このような構成を元にデザインすると簡単にバナーデザインが出来上がってきます。
あとは、求められるデザインイメージや訴求を変えていけばデザインの置き換えが可能になるのです。
構成のアドバイスがあればいいな
とお考えの人には、直接添削はできませんが構成やデザインの勉強をtwitterの中でもアドバイスを発信しています。
どんな活動をしているのかは「新しいチャレンジ」の記事を確認してください。
さいごに
私の記事はヘタクソなので上手くノウハウを受け取ってもらえないかもですが、最後まで読んでいただいて感謝いたします。
冬なのにアイスクリームが大好きなcoffeebreakの中の人（@ra_cer_X）です。
第１問の解答を公開しました！