00:03
ManaのWebクリエイターカフェからのお知らせです。
現在、リスナーの皆さんへ、番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
ManaのWebクリエイターカフェ
WebデザイナーでWebクリエイターBOXを運営しているManaです。
Web製作を勉強中の駆け出しちゃんです。
この番組では、Webコンテンツ製作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、Webデザインの原則、です。
原則?
Webデザインの原則っていうのを、今ちょうどテクワアカデミーでも学んでいるところかなと思うんですが、どんな印象、どんなことを覚えてますかね?
そうですね。四大原則っていうのはおそらく有名ですよね。
そうですね。
昔ですね、ノンデザイナーズデザインブックっていう本を持ってました。
素晴らしい。じゃあその四大原則っていうのは何ですか?
えーと、整列、反復、まとめる、余白、近接で近づけてグループ化する、近接っていうのとコントラストですね。メリハリをつけるっていう。
はい、その四つでしたね。これ覚えてなきゃダメっていうわけでもないんですけど、覚えてた方がデザインはしやすいかなっていうのがありますかね。
はい。
はい、じゃあこの辺もですね、併せて今日のお話やっていきましょう。
ウェブデザインを勉強したての方でよく聞かれるのがですね、センスがある、ないとか、才能がある、ないとか、なんかそういうことを聞いたりするんですね。
かけだしちゃん、ウェブデザインに芸術的なセンスとか才能とか必要だと思いますか?
少しは必要なのかなって思います。ただ、センスって何なんだろうなっていうのがわからなくてですね、ある程度は知識や理論で補えると思うんですけれども、その知識をどうやってデザインに生かすことができるのかってあたりがセンスなのかなとも思うんですが、正直よくわからないです。
そうですよね。今おっしゃってた感じで、知識とか理論とかそれを持っていること自体が私はセンスだと思っているので、天性のものではないと思ってますね。
で、それをどう生かすか、今おっしゃった通りどう生かすかっていうのもセンスっていう形になると思うので、生まれもって私はデザインのセンスがあるからとかないからっていうのはもう言い訳だと私はずっと思ってますね。
03:06
才能があるからないから。もう多少は本当にビビったるもので、もしかしたらあるのかもしれないですが、ほとんどの場合は経験だったり、これからの勉強していく中で補えるものだと思いますので、それを言葉にすると才能があっていいなっていうのは、私はですね、その人の努力を無下にしてるんじゃないかと、ちょっと逆に嫌な気持ちになっちゃうんですね。
マナさんセンスありますね、マナさん才能ありますねとか言われると、私頑張ったのに最初からあるもんだって思われてる。ちょっとしょんぼりしちゃうので、なんか人によってはそういうふうに捉える方もいるかなと思うので、センスっていうのは後付けで勉強できる範囲かなと私は思ってます。
一つ聞いてもいいですか?
はい、どうぞ。
SNSなどで他の方のデザインをパーツごとにストックして、それを組み合わせることをデザインスキルという方も見受けられるんですけれども、マナさんはどう思いますか?
そうですね、パーツごとにデザインしてるので、業界的にトンマナって呼ばれる全体のデザインが合わなくなったりとかしないのかなと思いますね。それをパーツごとに部分ごとに作ったものを後から当てはめて、合致する確率の方が多分低いかなと思うので、
ある程度は全体のイメージはつけておかないと、なかなかマッチするものは作れないかなとは思いますが、ある程度のものまでは作れるかなと思いますけどね、なかなか組み合わせるっていうのも難しかったりするので、その辺も確かに必要なスキルの一つかなと思いますね。確かにちょっとその辺も難しいですよね。
ありがとうございます。この流れに対して他のSNSで知り合いのデザイナーさんがチグハグになると思うでしたり、見る人が見れば違和感が出るとおっしゃってたので、どうなのかなと思って。
そうなんですよ。本当に全体像を見ないと、なかなか今言ったみたいにチグハグな感じにはなりやすいんですね。なので、パーツごとに寄せ集めてやるとしても、後でやっぱり微調整は必要になってくると思いますね。全体を見て。
はい。ということで、パーツごとにデザインしていくとか、コーディングの練習していくっていうのはすごく大切なので、全体を作れないとデザインにならないとか勉強にならないというわけではないですね。パーツごとにやるからこそ見えてくるものもあると思うので、その辺を混同しないようにはしてほしいかなと思います。
06:00
はい。今お勉強してる感じで、色の勉強だったり、フォント、タイポグラフィーの勉強だったり、この辺デザインの基本的なところを勉強してるところなんですが、今のところ気になることとか不安なところとかそういうのないですか?
そうですね。ないわけではもちろんないはずなんですけれども、実際に手を動かしてからじゃんじゃん出てくるんだろうなぁと。
そうですよね。やってみないとわからないですもんね。
はい。わかったつもりの段階です。
そうですよね。色ってこういう原則ありますよとか、そういう知識を並べられてもはぁはぁというだけですので、実際に配色を自分で作ってみないと何が合うのか合わないのかちょっと難しいかもしれないですね。
はい。じゃあデザインの中でもすごく大切な要素であるレイアウトについてですね。見やすいレイアウトだとか、レイアウトを作っていく上で必要になってくるのがワイヤーフレームと呼ばれるもので、基本的にデザインカンプって言われるデザインですね。
全体のこういう見た目になりますよっていうものの一歩前に画像とかを使わず色も使わず線と図形とかですねを組み合わせてウェブサイトに必要なコンテンツの優先順位をつけたりとか必要なパーツ何があるかっていうのをまとめる設計図みたいなものを作ります。
このワイヤーフレームの話に前回メンタリングの時にこういう話になったんですが、ワイヤーフレーム自体は作ったことってありました?今まで。
ほとんどありません。そのほとんどっていうのが過去に1回だけ、それこそそれまではほぼ完成形デザインカンプですかね。で作って見てもらっていたんですけれども、なかなか時間がかかっちゃうし修正が入ったらほとんど作り直しということも多かったので
一度ワイヤーフレームという概念は知らなかったんですけれども、近いものを作ってコンテンツの並びだったりそういったものを確認してもらうために出したことがあったんですけれども、クライアントさんにですね修正のイメージがこれだとわかないからちゃんと画像なども当て込んで色も入れてそういった形で出してくださいと言われて以来、ワイヤーフレームは作ってないですね。
なるほどなるほど。その時はその都度このコンテンツじゃない別のに変えてって言われたらデザインカンプで丸ごと変えてたってことですよね。
丸ごと変えてました。
すごく時間かかりますよねそしたら。
はい。
そこなんですね。ワイヤーフレームが必要なのがそうやってデザインができた段階でここのコンテンツ入れ替えるってなるだけで結構労力がかかったりするので、そうなる前に必要な家で言うと間取りを作っておくと。
先に作っておいてそれがokってなってから実際に作り始めるって形になるので、家で考えると本当にねすごい労力ですよね。
09:05
そうですね。
2LDKを3LDKに変えてとか後から言われてもいやもう2LDKで間取り作ってますけどってなっちゃうので、その設計図の段階で本当に3部屋必要なんですって言っとかないと本当に後戻りができなくなっちゃうんですね。
はい。
デジタルなのですぐできるでしょとかデザイン幹部ここちょっと変えるだけじゃんって思うかもしれないんですけど意外と一つの要素を動かすだけでこれも余白また変えなきゃとか文字サイズ調整しなきゃとかいろんなことがおそらく出てきたと思うんですね。
はい。
なので一番そういうふうに言われて大事なのがクライアントにそのワイヤーフレームの大切さをわかってもらうっていうのが第一で必要なんですね。
なんでこれが必要か。イメージが湧かない、湧く湧かないじゃなくてみたいな。今そういう段階じゃなくてまずは必要なもの洗い出しておきましょうね。これ配置にしましょうねっていうのができてからイメージを膨らましていきましょうってなりますのでそこの説明がうまくできるのが一番いいんですけどね。
なるほどですね。
そうなる前に制作の流れみたいなのをまとめておいて最初の段階で説明こっちからですね言っておくとクライアントさんの方もいやこんなん聞いてないとかいうこともなくなりますので先手先手に動けると一番いいんですがなかなかねそうは言ってもデザイン作ってよって感じになっちゃったりするのでこの辺は難しいとこですね。
ちょっと聞いてる方にもですねリスナーの方にもどういうふうに切り返せばいいのかっていうのをハッシュタグウェブカフェをつけてあのメッセージいただければと思います。
ぜひ聞かせていただきたいです。
ここはねちょっといろんなやり方があると思うのでぜひ聞いてみたいですね。
ワイヤーフレームの話になるとどこまで作り込めばいいのかとかワイヤーフレーム通りに必ずしもその通りにデザインを作っていかなきゃいけないのかとかそういう話も結構出てくるんですね。
ワイヤーフレームそうですね今まであんま作ったことなかったらその辺はあまり経験したことない感じですかね。
そうですねワイヤーフレームの概念もほとんど知らなかったので。
そうですよね。
そうなんですあのワイヤーフレームを作ったものをどこまで再現すればいいのかっていうのは結構聞かれるものなんですが、
私以前多分ブログの記事書いたかなと思うんですけどワイヤーフレーム通りにするっていうのをどう解釈するかによると思うんですね。
例えば大事なコンテンツを最初に大きく表示させるっていう感じのワイヤーフレームがあったとしてもその大きく表示するっていうのが面積なのか色なのか配置の順番なのかによってまたちょっと違ってくるですね見せ方も変わってくると思います。
12:04
ワイヤーフレームで四角で用意してた画像の入れる部分を丸にしてもいいのかとかそれはもちろん ok だと思いますね。
なので配置とその意図するもの優先順位だとかそういうのがきちんと伝わっているのであればある程度の変更は可能だと思いますね。
ただそれをちゃんと説明できるかっていうクライアントのものだったらワイヤーフレームでこうやってたんですけどこっちの方が目立つと思うのでこういうふうにちょっと変えてますとかそういう説明は必要にはなってくるかもしれないんですが、
自分で作るものであればある程度は保管できると思いますので、ワイヤーフレーム通りきっちりしなきゃいけないというわけではないと私は思ってます。
ワイヤーフレームはですね、かけだしちゃんはこれから作っていくっていう形になると思うので、
ウェブ制作するときにはぜひどんなものになるのか私は今から楽しみにしておきます。
IT・インターネット業界に強い転職アプリグリーンは今話題のテック企業、プロダクト開発、DX案件などグリーンだけの良質な求人を数多く揃えています。
正式応募前に企業の中の人とカジュアル面談ができるので、仕事内容やメンバーのことをしっかり理解した後に先行に進めます。
カジュアルに始める転職活動にグリーンをご活用ください。
あとはレイアウトで言うと、余白だとか配置だとかいろんな要素があるんですけど、どういうのが大事になってくると思いますか?レイアウトを組んでいくにあたって。
見やすさというか、情報の取りやすさですかね。
どういうのが情報が取りやすいんでしょう?
私の好みになっちゃうんですけれども、例えば歯医者ですと、トップページの最初の方にアイコン、イラストなどで、例えば虫歯のイラストとかホワイトニングのイラストが等間隔で配置されていて、クリックすると虫歯についての詳細な情報が出るとか。
ものすごく具体例が出ましたね。
最近ちょっと調べまして。
歯医者さん言ってるんですか、今。
はい。
実際に自分が使っていると見えてくるというのはよくありますよね。
このサイト使いやすいなんとか、これすごく分かりませんというのも実際にサイトを使っている側で見えてくるのはあると思うんですが、そうやって分かりやすさというのがどこに現れるかというのは注目して見てみるといいですね。
今ちょうど歯医者さんのお話になったのであれなんですけど、ちょうど別の生徒さんがクリニックの病院系のサイトを作っているところで、トップページに結構いろんなもの詰め込んでたんですね。
15:11
ワイヤフレームの段階で検診内容だったり、最初どういう流れで診察するのかとか、持っていく必要なもの、スタッフについてみたいなのをトップページでだーっとあって、その都度クリックしたら詳細飛べるという形にはしてたんですけど、果たしてそのクリニックの病院のサイトでスタッフ紹介を最初に必要かとか。
特に歯医者さんでだったら、今指し歯が取れましたとか、今すぐ病院行かないと、見てもらわないといけないですという時に、歯科衛生士の紹介とかそこはあんま見ないと思うんですね。
今まさにやってるのかとか、今どこにあるのか、予約は電話なのかウェブなのかとか、そういう本当に今行きたい人が見たい、欲しい情報をトップページにまとめておいてほしいんですね。
で、そういうスタッフ紹介とか院内の様子とか、そういうのはおそらく余裕のある時にどんな感じかなーっていう選んでる段階で多分見るものだと思うので、そういうのは別のページ、仮想ページとかに置いといて、トップページでは本当に今必要な情報っていう感じで分けておくと見やすい感じになるかなと思いますね。
ちょっとその辺も意識しながらレイアウトを考えていけるといいかなと思います。
あと見やすさで言うと、余白の取り方とかもよく聞くかなと思います。
そうですね、余白の取り方が大事とはよく聞きます。実際にどんな風に取ればいいのかっていうのは全然ピンとこないですし、私はおそらく実際に制作すると、余白は埋めたいタイプになっちゃうと思うので、大きな課題になると思ってます。
それは私、昔から不思議なんですけど、なんで埋めたいんです?
落ち着かない。
落ち着かない。
テトリスみたいな。
ずっと思ってたのが日本、本当に国土が狭い日本なので、狭い部屋、狭い敷地内でいろんな情報を詰め込んでとか、そういう環境にいたからなのかなってちょっと思ったりして。
もしかしたらあるかもしれないですね。
いろんな国で私ちょっと働いてた経験があるんですけど、国土が広いと広告の余白も広くなってるような、本当にこれ気のせいかもしれないんですけど、カナダとかオーストラリアとか行ったときは本当に余白しっかりとったデザインのポスターとかがよくあって、
で、ヨーロッパの方になると多少情報はあったりするんですけど、それより配色にすごくこだわってたりとか。
え、面白いですね。
そうなんですよ。いろいろ見えてくるんですね。派手な配色を好む国があったりとか。フランスとかだったら本当にちょっと落ち着いたような色合いじゃないとポスターに出せないっていうこともあったりするんですね。
18:08
パリの制作であまり派手なものを外に出せない、広告として出せないとかいうのもあるらしくて、そういうのも関係してくると思うんですけど、配色の仕方も国によって全然違ったりして、その辺も面白いんですが、それのせいなのか日本のポスターとか見ると結構キュッと詰まってますよね。
そうですね。
模写元にするサイトというのはもう自分で見て、あ、余白が綺麗と思ったサイトでいいんでしょうか。
そうですね。自分で見ていいなって思ったのでいいと思いますし、あとは今ギャラリーサイト、素敵なウェブデザインを集めたサイトみたいなのがたくさんあるので、それを自分でランダムでやってみるっていうのもいいかもしれないですね。
ランダム?
ランダムで今日はこのサイトみたいな、一番左上に来てるサイトを模写しますみたいな感じで、もう自分で選ばないっていうものですね。
自分で選ぶとやっぱり好き嫌いが無意識のうちに出たりするので、余白がどうのとか、ちょっとこれめんどくさそうだから模写しないとかいうこともなっちゃうんですね。
なので本当にパッと開いたページのギャラリーサイトの右上にあるものを模写しますっていう感じで、ランダムにしてみるとまた違った感じでできるかなと思いますね。
でも模写自体はやったことあるんでしたっけ?
ありますあります。難しいですね。
難しい。
それこそ昔入っていたスクールが、ランディングページを丸々一本模写して講師でしたりお客様の声、個人情報になる部分ですね。
お写真とかも変えて、それを携えてメールしようとかやってました。
覚えてます?どんなだったかなって。
結構覚えてますし、ぶっちゃけ当時のデータも残ってます。
そこから学ぶものとかって今思えばありました?
ツールの使い方。そのスクールでもそのトレースから何を学ぶというのはあまり出されてなくて、
ツールの使い方を覚えましょうか、もしくは営業に持っていくためのものを作りましょうだったので、
この模写元のサイトはここがポイントです、ここがいいところなので学んでくださいとか、そういった指示は受けてなかったですね。
21:05
きっと言われなくても学び取るのができる人なのかなとは思うんですけれども。
そうですね。言われなくてもできる人はもちろんいるんですけど、そういう人ばかりじゃないので、そこはしょうがなかったのはあると思うんですが、
ツールの使い方っていうのももちろん大事なんですけど、模写する、ただ手を動かすだけだと本当に作業になってしまって、そこから学びは得られないかなと思うので、
無駄ではもちろんないと思うんですが、もし次やるんであれば、なんでだろうっていうのを合言葉にしておくと学びは深くなると思ってます。
なんでこの色なんだろうとか、なんでここでこのフォント使ってるんだろうとか、なんでここに余白があるんだろうとか、ちょっとそこを意識するだけで、
ここが同じグループだから余白をたくさん使って他の要素と話してるんだなとか、そういうのも見えてくると思うので、
常になんでだろう、なんでだろうっていうふうに思いながらやってみるといいかもしれないですね。
そうですね。
次回またやることがあったら、模写だけじゃなくてウェブサイト見た時にもですね、そういうふうに意識してみるといいかもしれないですね。
よくいろんな方が見てるもので言うと、天気予報とかニュースのサイトとか、それ一つ取るだけで週間天気と今日の天気をちょっと分けてるなとか、
そういうのがあったりするので、よく見るサイトからちょっと意識してみると面白いと思います。
完全に模写するだけじゃなくて、大事なこととしてはカスタマイズしてみるっていうのも私は大事かなと思っていて、
出来上がったものの配置を少し変えるとどうなるかなとか、英語のサイトだったら日本語にしてみるとどうかなとか、色を変えるとどうかなとか、
こんな感じで作ったものをある程度変えてみると、良くなったっていうこともあるかもしれないですし、逆に元のサイトの方が絶対良かったっていうこともあるんですね。
そうなったら、じゃあなんで元の方が良かったかなとか、というふうにまた考える研究材料のネタになるので、
その辺もご自身でカスタマイズしながら学んでいけると一番いいかなと思います。
エンジニアちゃんが言ってたことをちょっと思い出しました。
彼女は昔、他のサイトを見ながら検証をして、色んな数字を変えて遊んでいるっていうのを結構やっていたみたいでして、
真似するだけじゃなくて、自分で色々と数字やデザインを変えて、その結果を見てっていうのが大事なのかなと思いました。
その通りです。今出てきたワードの中で本当に大切なのが、遊んでみるっていうのが本当に大切で、
なんかもう学ぼう、学ぼうってなると自分に圧をかけてる感じになっちゃうので、
やってみたらちょっと変えたら、あ、変なのになっちゃった。
24:02
あはは、みたいな感じでももちろん最初はいいので、遊んでみる。そこから自分で気づけると一番いいと思いますね。
はい。
はい。じゃあ今日のテーマ、ウェブデザインの原則でしたが、いかがでしたか?
4大原則も知ってたつもりでいたんだけれども、いきなり思い出せなくて非常に悲しいです。
そうですね。これも知ってる知ってないで、また見方が変わってくると思うので、
木下さんが読んだ本が何だったっけな?
ノンデザイナーズデザインブックという感じの本だったと。
そうですね。この本本当にいい本で、何年前かな?すごく昔からあるものですね。
西語版から読んだものなんですけど、ぜひ興味があったら読んでみてください。
さて、この番組では感想や質問、リクエストなどをお待ちしております。
番組詳細欄にあるリンクよりお気軽にご投稿ください。
Twitterではカタカナでハッシュタグウェブカフェをつけてツイートしてください。
そしてApple PodcastやSpotifyのPodcastではレビューもできますので、
こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech Academyはウェブデザインやプログラミングをオンラインで学べるスクールです。
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
副業案件の提供を保証するTech Academy Worksもあるので、
ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。
Webクリエイターボックス マナとかけだしちゃんでした。
