00:02
ManaのWebクリエイターカフェからのお知らせです。現在、リスナーの皆さんへ、番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
ManaのWebクリエイターカフェ。WebデザイナーでWebクリエイターBOXを運営しているManaです。
Web製作を勉強中の駆け出しちゃんです。
この番組では、Webコンテンツ製作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、バナーデザインの心得です。
バナーデザインって言ったら、本当に駆け出しのデザイナーは必ずするようなものなんですが、どんな印象でしょうか?
心得ですか?四大原則とかそういうアレではなく、Manaさんから心得が聞けるのを楽しみにしております。
はい、じゃあバナー製作の話、今日も楽しくしていきましょう。
まずですね、バナー製作の課題がありましたね。
このお話をしていこうと思うんですが、覚えてますか?
覚えております。
どんな印象でしたか?
うわー。思っていたより全然できなくて。
そうですか?私は逆に思っているより、こんな言い方したら失礼かもしれないですけど、ちゃんと整ってできてたなと思ったんですけど、
本当ですか?
この辺でそんな不安な感じでしたか?
余白ですかね。私はきっと冷たがりなタイプなので、隙間があると逆に不安になってしまうんですね、今でも。
なので、ここ隙間空けたけども、なんか大丈夫かなというのはすごいありました。
なるほど。そうなんですよね。最初は不安になりますし、大丈夫な隙間と大丈夫じゃない隙間もちゃんとあるので、その使い分けとかが最初は難しいですよね。
で、今回の課題、ポッドキャストなんでね、お見せすることはちょっと難しいんですけど、
よかった。
本当はね、見ていただきたいところではあるんですけどね。
なんですが、見て、ちょっと私の方からアドバイスしたもので言うと、画像があって文字があって、それがごちゃごちゃとなってた感じだったので、
テキストとして見せる部分、情報の部分の塊と、画像として見せる部分は別で分けると読みやすくなるよっていうふうにお話をしたと思います。
で、その読ませる部分と見せる部分が重なってたというか、混ざった感じになってたので、ごちゃごちゃと見えたので、その辺意識してみるといいよねっていうお話をしましたね。
03:04
で、バナーデザインをまとめたギャラリーサイトとかもあるので、その辺見てみるとやっぱりわかりやすくて、本当にどれも情報の部分と見せる部分って結構分かれて表示してたと思うんですね。
そうですね。言われて見てみると、ちゃんと顔と文字が重なっていないと言いますか、あとどちらも見えるようになってるんだなと。
そうですね。意識してみないと分からなかったかもしれないです。
そうですね。それで意識してみるとちゃんと線はないけれど、透明な線が見えてくるというか、ここから境目がありますっていうのがパッと分かるようになってくるんですね。
情報量が多くても、そういう塊を意識してまとめていくと見やすいデザインになるかなという感じです。
はい。
心得で言うと、私が気をつけているのが一瞬で分かる内容にしようっていうのは昔から思っていて、本当に限られたスペースなんですよね。
バナーっていうのが一般的には200ピクセルとか300ピクセルとかその程度のものなので、そこであれこれ情報詰めすぎると何か分からないということになっちゃうので、そういうのは気をつけた方がいいですね。
はい。
その辺、課題の時に気にしてみましたか?
そうですね。制作したバナーはなんとかアカデミー無料体験説明会開催みたいな感じだったと思うんですけれども、無料を一番伝えたかったので、確か無料の文字はかなり大きく取っていた記憶があります。
いいですね。それが強く出ているのは良かったけれど、色が見づらかったっていう感じでしたよね。
床と馴染んでいた。
そう、背景に床の画像があったんですけど、それと色がかぶってたので、結局大きくても見えづらいっていうことになってたのを注意しましょうっていう感じでお話ししましたね。
はい。
なので、大きければ目立つわけではないので、その辺、配色とか大きさとか、他の画像のあしらいだとか、この辺を注意しないとちょっと難しいです。
でも、それに気づけたので、次回やるってなったら、そういうバランスを見ながらできるかなと思いますね。
頑張ります。
頑張りましょう。
ただ、本当にバナーってクリックしてもらいたいので、結構派手に作りがちなんですけど、広告ってよく考えたら人のウェブサイトにお邪魔している存在なんですね。
はい。
広告主は別にそのバナーを選んで載せているわけではなくて、Google AdSenseとかだったら勝手に出てくるものなんですね。
はい。
なので、ガチャガチャにぎやかすぎたら、そのウェブサイトを持っている人も嫌な気持ちになるんですね。
せっかく綺麗に作ったウェブサイトに広告載せたらガチャガチャになっちゃったとかいうのも嫌なので、そういったことも考えて、あまり主張するのはいいんですが、ちゃんと周りのことも考えないといけないよねっていうのはちょっと思いますね。
06:08
はい。
それで、バナーのデザインをしました。レイアウト組みました。そんな時にですね、どういうふうにこのレイアウトいいかどうかをチェックしてますか?
チェックですか?一応文字の間隔は等間隔になっているかなどは確認しているつもりなんですけれども、自分で最終確認するとなると、どこを見ればいいんでしょうか?
そうですね。難しいですよね。自分のものだったらそうやって整列してるかとか、間隔がいいかとかいうのは見やすいんですが、そういう細かいところをもちろん見るのも大切ですし、ちょっと引いて全体像を見るっていうのも大事ですね。その辺は意識したことあります?
漫画ですとパソコンで写した画像を一旦スマホで写真で撮って確認してます。
何を確認してるんです?それは。
何でしょう。スマホ越しに見るとまた別の違和感が出てくる時がありまして。
例えば。
ちょっとこれ原稿化ができないんです。
ちょっと詰めすぎましたかね。でもその手に取って見る感じと、画面越しに大きな画面で真正面にして見るっていうのはまた違うかもしれないですね。そしたら。
そうですね。引きで見るっていうんでしょうか。
漫画とかだったらスマホ前提なので、手に取って目線を下にして見るので、真正面にして見る画像とまたちょっと違った角度になるのかもしれないですね。
かもしれないですね。
なるほど。確かにその視点もありますね。私がよくやってるのが、モノクロでチェックするっていうのを取り入れてます。これ昔からですね。
それはやったことないですね。
そうですよね。あまり知られてないのかどうかなわからないですけど、作ったデザインを一旦白黒にします。
これフォトショップとかデザインツールだったらそういった機能あると思うんですけど、モノクロにしてみると意外と文字と背景の画像とか背景の色が重なっていたりして、読みづらくなってたりするんですね。
それでちゃんと文字が浮き出て見えるかっていうのはすごく大切で、視認性って言って見やすさに繋がってきます。
モノクロにしてみて、視線の流れがわからないと結局色をつけた時、余計わからなくなっちゃうので、そういったところはすごく大切です。
モノクロでチェックしていれば課題も何かわかったかもしれないですね。
そうだ、背景色と文字が溶け込んでた。そういうのがわかりやすくなるので、ぜひぜひやってみてください。
あとはバナー制作で言うと、今回の課題だったら正方形に近いようなバナーを一つ作るだけだったんですが、実際は本当にいろんなサイズ作るんですね。
09:11
ウェブサイト見てても正方形だけじゃないはずなんですね。縦長のとか横長のとか、やけに小さいのとか大きいのとか、見たことあると思います。
それ全部同じトンマナっていって、デザインのコンセプトが同じものをバリエーションに分けて、いろんなサイズで展開していくっていうのがよくあるやり方なんですね。
なので、サイズが違うからといって色を変えるとか、そういうのはできないので、最初にコンセプトを決定してからデザインに入らないと、またサイズによって全然違うものになってきてしまうので、その一番最初がやっぱり大切ですね。
なので、デザイン一つ作るにしてもテーマを決めると。何を見てほしい、どんな人に見てほしい、どういう順番で見てほしいとか、そういうのを考えておくといいですね。
そういうのを考えてやってみました?今回の課題。
サイズが変わったらとかは全く考えてなかったです。
なるほど、なるほど。色を考える時とかはどうでした?どんな人に見てほしいからこういう色にしたとかいうのありました?
ターゲットは想定してなかったですね。
なるほど、なるほど。
使っていた画像の色を見て映えるような色でしたり、確か使った画像の人物の方に青があったような気がしたので、なんとかアカデミーにはその色を使ったぐらいしか考えてなかったです。
そうですね。その画像に合わせてっていうのもすごく大切で、全く違う色をどんどん追加していくと本当に全体がガチャガチャになっちゃうので、画像に合わせて色を選ぶっていうのもすごく大切です。
その上で目立たせたい時に色を変えてみるとか、ここだけちょっとワンポイントで変えてみようとか、そういう考えも大事ですね。
かけだしちゃん、漫画ずっと描いてますよね。漫画を描く時、レイアウトを考えて気をつけていることって何かありますか?
漫画でも視線の誘導とか、そういった見せるための、わかりやすく見せるためのテクニックはたくさんあると思うんですけれども、何分そういったスキルもなくてですね、画面が顔のアップになりすぎて単調にならないようにくらいしかできていないと思うんです。
12:16
ただ最近気がついたことがありまして、縦読みの漫画と横読みの漫画で一コマ目の位置を気にしないといけないなと思ったんです。
テックアカデミーさんでも視線の誘導についてのカリキュラムがありまして、グーテンベルグダイアグラムやZ型ですね、あれを見ていて、どちらも起点が左上なんだなと思いました。
少年誌とか、横にペラペラめくるタイプの漫画ですと、一コマ目が右上になることも多いと思うんですけれども、それそのままやってしまうと、ウェブ漫画でしたり縦読み漫画だと違和感が起こってしまう可能性があるんだなぁということに今更気づいてしまいました。
うまく描ける人は描けると思うんですけども、私は画力のテクニックはないので、そういったところを気をつけていきたいなと思います。なので今気をつけていることというと、顔のアップになりすぎないように気をつけてますぐらいしか出てこないです。
なるほど、顔のアップになりすぎないというのがメリハリをつけたいっていうことですかね。あ、なるほどなるほど。ちょっとその辺もね、私漫画描かないのでちょっとわからないんですが、引きとアップを交互にしてみちゃったり。
向井 交互にしてみちゃったり、時々頑張って役を向かせてみたり。
ああ、そうなんですね。そういうのが必要なんですね。なるほど。それも漫画特有かもしれないですね。面白いですね。今言った目線が左上から来てるよと、普通の紙面の漫画は右上から順にっていうのがあるんですけど、これ何が一番の違いかっていうと、縦書きの文字か横書きの文字かが違うんですね。
向井 えー。
向井 上から右下にっていうのは本当日本だけだったと思うんですね。すごく特殊な読み方なので、そういう違いに気づけたのですごいと思います。今後どうします?漫画のレイアウトも変わってくるんですかね?
15:01
向井 そうですよね。もしどうします?書き出しちゃんの漫画が書籍化ってなって。
向井 解像度がですね。100話の解像度が75でしたっけ?
向井 どうでしたっけ?
向井 解像度問題と、あと。
向井 はい。まず書き直しからです。
向井 書き直し。100話分。いいことですからね。書籍化もしなるんだったら。もし書籍化をしてもいいよっていう出版社がいましたら、お声掛けください。
向井 あ、宣伝のチャンス。お待ちしております。
向井 じゃあ、デザインのお話に戻しまして。デザインの幅を広げたいっていう声は結構聞くと思うんですね。どんなことをしてるとかありますか?
向井 そうですね。電車内とか駅の広告をデザインを意識してみろというのは訓練校で言われてまして、時々見ていたんですけれども、そうなると駅の壁全てが自分に消費しろ、買えと言ってきてるような気がして、ちょっと疲れてやめてしまいました。
向井 ただいろんなデザインを見て引き出しを増やそうっていうのはよく言われてますよね。あとはもうおっしゃーですかね、完成されたデザインをトレースすることによって、体感的に余白の取り方や文字の配置が学べるとか学べないとか、時々議論の対象になってる気がしますね。
向井 でもですね、パーツごとにトレースして組み合わせて作りましょうっていう格子が世の中にいるのは正直どうかと思いまして、教える側がそれ言っちゃまずいと思うんですよね。模写して個人情報ちょろっと変えただけのものを携えて営業なんて論外だと思うんですよ。すみません、史上が挟まりました。
向井 この話題は、模写関係は今でも過敏になりますね。マナさんはどうやってデザインの幅広げてこられたんですか?
向井 今言ったみたいにやっぱり模写から学べるものももちろんありますし、真似して余白の取り方とかレイアウトの感覚を学ぶっていうのもすごく大切です。なので一概に模写がダメとは言わないんですが、そういう使いどころは気をつけたほうがいいですね。
引き出しの増やし方、今おっしゃったみたいにいろんなところにある、世の中デザインであふれてますので、そういったところをちょこちょこチェックして、さっきの話で言うとですね、なんで引き込まれそうになったのかっていうのを考えてみると面白いですね。なんかポスターを見てかわされそうになるというか、なんか駆け出し者が影響されたわけですよね、そのポスターを見て。
18:06
そうですね、ポスターの中にはつい二度見してしまうようなものもあったと思います。
それがなぜなのかって考えると面白いと思いますよ。
それがキャッチコピーだったのか、共感を持てるような人物が写っていたのか、なんか好きな感じの配色だったのか、その辺を読み解いていくと、なんで自分は今この広告に引き込まれそうなのかっていうのが見えてくると思いますね。
逆に自分が同じテーマのポスターを作ろうってなった時に、それが使えるはずなんですね。
あの時の私、そういえばこういうのがあったから引き込まれそうになった。じゃあこれを使ってみようっていうのが出てくると思います。
はい、それが引き出しってやつですね。
なんかそういうふうに考えたことってありました?
あまりなかったと思います。なんかすごいなって止まっていたかもしれません。
そうですね、そこからもう一歩先を踏み込むとより世界は広がりますね。
今までですね、こう悪徳な、なんて言うんですかね、よろしくないところにですね、引き込まれそうになったとか、騙されかけたとか、騙されたのかな?わからないですけど。
そういう経験があった時に、じゃあ何がきっかけだったのかっていうふうに、結局そういう原点にたどり着いてみると、デザインだけじゃなくても人生につながりますからね。
人生ですよ。
人生ですよ。なんで私はここで立ち止まったんだろう?みたいなね。
向き合いたくない。
向き合いたくない。目を晒したい。その気持ちもね、人間ならではですね、素晴らしい。人間味があっていいと思います。
あとはそうですね、私が心がけてきたことで言うと、先ほどみたいにいろんな目の前にあるデザインを観察するっていうのも大事ですし、いろんなジャンルを見てみるっていうのもすごく大切ですね。
自分の好きなものって本当に目につきやすいので、どうしてもこうそういう方向に行っちゃう。好きなジャンルだとか得意なスタイルにばっかり行っちゃうんですが、そうじゃなくて全然これ何がいいのか全くわからないっていうようなものからでも得られるものはたくさんあるんですね。
自分ではもう絶対再現できない。嫌いではないけど難しそうだ。例えば具体的な例で言うとふわちゃんのウェブサイト見たことあります?
あります。
すごくないですかね。
すごいです。
僕は見たことない人はね、ふわちゃんで検索してみると出てくると思うんですが、本当にカラフルでどこから見ればいいのかわからないけれど、どうしても見ちゃうっていう。なんかボタン押しちゃいますよね。
ツッコミどころしかないですよね。
あれは私は再現できないですし、絶対に無理なんですが嫌いじゃないですし、そこから得られるものもたくさんあると思うので、気になる方はぜひ見てみてください。
見てみてください。
21:01
そういう色んなジャンルを見てみましょうっていうのがすごく大事です。
はい、じゃあ今日のテーマバナーデザインの心得でしたが、どんなでしたか。何か得るものあったでしょうか。
そうですね、モノクロでチェックするとか、いろいろと学べた気がします。ただ、今はできる気にはなっているんですけども、やっぱりいざ自分で作ろうってなると、
きっと頭の中のイメージ通りにならなかったり、模写をやっていた時のような綺麗なデザインにはならないのかなと思いますので、数をこなしていきたいと思います。
確かなにしてしまうとやっぱりキャッチコピーを自分のデザインしやすいように変えてしまいがちなので、こういった知識をインプットしつつ、自分の思い通りにならない環境でアウトプットをこなすのもいいのかなと思いました。
テックアカデミーさんの課題もなかなかままならなかったですね。
転作もしてもらえるのはすごくありがたかったです。その手があったかっていう感じでしたね。縦に割る発想は出てこなかったです。
最初のうちは本当に見てもらう機会がないので、転作してもらえる機会っていうのは自分で作っていかないと難しいと思います。
よかったらそういうね、バナーを見てもらうだけのメンターさんとかも世の中にいると思いますので、ちょっと探してみるといいですね。
あとはお題を出してくれるサイトみたいなのが、ちょっと英語になってしまうんですが、dailyui.coっていうサイトがあって、これ登録すると1日1個お題が来て、なんかデザインしろみたいな感じですね。
例で言うと航空券を購入するようなアプリを作れとか、何々のバナー広告作れみたいな感じで、1回お題が毎日来るので、よかったらこの辺も登録してみると面白いと思います。
知らなかった。
はい、ぜひぜひ。英語なんですけど、お題は本当に簡単なものなので、よかったら使ってみてください。
さて、この番組では感想や質問、リクエストなどお待ちしております。
番組詳細欄にあるリンクよりお気軽にご投稿ください。
TwitterではカタカナでハッシュタグWebカフェをつけてツイートしてください。
そしてApple PodcastやSpotifyのPodcastではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech AcademyはWebデザインやプログラミングをオンラインで学べるスクールです。
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
副業案件の提供を保証するTech Academy Worksもあるので、ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。
Webクリエイターボックスマナーとおかげだしちゃんでした。
