00:01
いつものデザインのはなし
このラジオは、フリーランスのデザイナー、鶴とバチ子がお送りするデザイントーク番組です。
普段のデザインの話から日常のことまで、ザックバランに語り合っています。
はい、始まりました。いつものデザインの話。今回は第13回目になります。
バチ子さん、よろしくお願いします。
今回のテーマは、Webデザインあれこれ。
あれこれ?
あれこれです。
あれこれなの?
ちょっと変なタイトル。
いいのよ。
あれこれというか、Webデザインのいろんなことを話そうかなと思って、あれこれというタイトルにしてみました。
僕とかバチ子さんって、グラフィックデザインもやるし、Webデザインも結構やったりするんですけど、
人に聞かれたときに、Webデザインって何やってるんだっけ?
結構Webデザインって説明しづらいなと思うところがあって、
めっちゃ聞かれる。
グラフィックデザインの方を説明するときは、ロゴ作ったりとかチラシ作ってるんですってのは多分想像しやすいと思うんですけど、
Webデザインってなるとどういう業務やって、何を使って、どうホームページを作ってるのかっていうのは、
実際のところあんまりうまく説明できないというか、うまく伝わらない気がしてて、
今回それをちょっと具体的に話してみようかなと思って、Webデザインあれこれとしました。
あれこれ話しましょうね。
よろしくお願いします。
何から話そうかな。
そもそもね、Webデザイナーなんですね。
なんて説明してんの?いつも。
そうですね、ざっくりいっつもホームページ作ってますって言ってて、
ホームページ作ってますっていうのは伝わるっていうか、作ってる成果物としての伝わり方としては普通に伝わってるんですけど、
それはどうやって作られてるのかっていうのはうまく説明してもなかなか伝わりづらい部分なのかなって思います。
確かに聞かれることも少ないかもしれない。
分かんなさすぎて。
多分向こうの質問してる人も何聞いていいかも分かんないと思うし、
グラフィックデザインとかだったらソフト使って、絵を描くように作るっていうイメージが多分湧くんですよね。
絵描いてるでしょって言われる。
ある意味確かにそれは正しくて、グラフィックデザインにおいては。
でもウェブデザインってなると、具体的な作業みたいなところ。
そうだね、作業。動くからね。
そうなんですよね。ウェブデザインってのは動かしてスクロールするってことを前提に作られたりしてて。
03:06
本とか紙物とは全然違う視点で作らなきゃいけないもんね。
何から説明するってなるんですけど、とりあえずウェブデザインって基本的にはテキストエディターを使ってる。
そうだね。
テキストエディターを使ってコーディングしてるんですよね。
グラフィックデザインとの一番の違いはコードを書いてるってところなんですよね。
そうだよね、それじゃバリバリコード書けんだもんね。
バリバリコード書けるって言ってもね、そこもいろいろデザイナーの人とかエンジニアの人とかで住み分けとかがいろいろ違うじゃないですか。
あるあるある。
どういうコードを書いてるかっていうのがあると思うんですけど、まずウェブデザインってそもそも何なのかみたいなところ。
そうだね、先生教えてください。
先生ってバチ子さんが僕より前からウェブデザインを一緒にやってるわけじゃないですか。
やっちゃいるけど、ある時からもう時代が違う気がする。
そうなんですよね。ウェブデザインもここ10年、15年くらいですごいいろんな技術がバタバタバタバタ変わっていってるんですよね。
そう、なんかもっと分業制が進んでるようなイメージなんだけど。
分業制も進んでますよね。
分業制っていうのを説明する前にまずウェブサイトってどうやって作られてるのかみたいなところなんですけど、
それがコードでできてる。
そのコードっていうのがHTMLなんですよね。
HTMLっていうのはハイパーテキストマークアップランゲージの略なんですけど、
それはもうインターネットができた当時からすでにあるHTMLという技術は。
要はハイパーテキストマークアップランゲージっていうのはテキストとテキストを超えていくみたいな意味なんですよ。
リンクとリンクを繋いでいくをマークアップするっていうのはコーディングする言語っていう意味なんですよね。
今初めて知った。
インターネットそのものが多分HTML的っていうか、そのリンクとリンクがネットを介して繋がっていくのをHTMLって言ってるんだと思う。
ちょっと裏声なんですけど、多分そういうことなんですけど。
なんでHTMLがHTMLなのか気にしたことなかった今まで。
たぶんかなり原始的な説明から始まっちゃうんですけど。
ありがとうね。すごい。
ホームページっていうのはインターネット例明記からリンクとリンクを繋いでいく言語として生まれたもので、それをざっくり僕ウェブデザイナーは書いたりしてるんですよね。
納得だわ。
それがやっぱりその時代とともに技術っていうのはどんどんこうした方が便利だよねっていうので、HTMLの中でもこういうコードを実装しますとか、もっと便利な書き方を追加しますみたいなのがどんどん変わってたんですよね。
06:12
ここ6年かな10年くらいだいぶ変わりましたよね。
変わりすぎてもうわかんない。
それこそ昔はテーブルコーディングってやつだったからね。
テーブルコーディングっていうのをまた説明するのが難しいんですけど。
テーブルコーディングっていうのがまたすごい癖物というか。
癖物だよあんなの。
今はだいぶ変わりましたね。
バグも起きにくく、説明も起きにくく、しかもスマホでも対応しやすく。
対応しやすく、そうなんですよ。
HTMLっていうだけはあくまで骨組みなんですよね、ホームページの。
要はここに何が配置されて、順番通りに見出しがあって、説明文があってみたいなのを、
ただ素の文章というか、それをウェブブラウザーに認識してもらうための言語なので、
それだけでは見栄えは整っていない。
ただの文章になっちゃうんだね。
それにCSSっていう見栄えを追加してあげる、違う言語を合体させてホームページを表示しているっていうのが、
大まかなホームページの説明なんですね。
いや、そんな拍手することじゃないでしょ。
私ね、そこを理解しないでずっとやっちゃってたから、理解した、今。
CSSっていうのが、カスケーティングスタイルシートの略。
滝状というか、なだれ状というか、そういう意味のスタイルがどんどん下に流れていくみたいな、
その様子を多分描いてCSSって言ってるんですけど。
そうなんや。
ちょっと説明がすごく長かったらしくなって申し訳ないんですけど、
HTMLっていうのは骨組みなので、一個一個タグがあるんですよね。
H1とか、Pとか、Aとか、THとか、テーブルとか。
そういうのに対して、H1にはこういう色をつけて、こういう線をつけてあげて、みたいなことを指定するのがCSSなんですよね。
そのCSSっていうのも昔はすごい曖昧だったというか、まだ全然定義がちゃんとされてなかったから、
テーブルコーディングとかで全部ガッチャンコでぐちゃぐちゃやるみたいな時代があったんですよね。
そうなんだよね。まじで懐かしい。
今はそこが分かれてきて、定義は定義、見栄えは見栄えっていう風にパーツとして分かれてきてる。
それでさらにHTMLの仕様もバージョンアップどんどんされて、
HTMLバージョン4だったのが5になって、
09:02
すごいよりユニバーサルっていうか定義がきちんとして整備されてきたんですよね。
っていう、すごい、そんな歴史から話すの?って自分でも今話してて、長ったらしくなっちゃったなって。
すごい聞きたかった。誰に聞いていいかも分からなかったからありがとう。
でも今のは歴史のすごい、めちゃくちゃ端折って説明したんで。
でも要はHTMLっていう骨組み、土台に対してのCSSっていうのがあって、
そこにJavaScriptとか、そういう仕組みっていうか仕掛けみたいなの。
こういうことしたら、こういう条件が整ったらこういうのを発動しますよみたいな違う言語をさらに交えて、
そうすることでインタラクティブな動きのあるウェブサイトを作ったりするんですよね。
変わった動きとかね。よく見る写真のスライダーとかそうだよね。
そうそう。よく見ますよね。スライダー、写真がどんどん。
JavaScriptで発動条件が来たらこういう処理しますって言って、
じゃあCSSがこれ聞きます。で、HTMLがこう動かしますみたいな。
そういう中側でギアが回ってるような状態なんですね。
いろんな歯車がぐるぐるしてるんだよね。
そうそう。そんな感じなんですね。
うわ、なんて分かりやすいのかしら。
で、ウェブデザイナーっていうのはそういうのを書いてますと。
書いてるね。書いてるんだよね。
僕の実務的なところで言うとそういうのをめちゃくちゃ書いてます。
言葉が詰まっちゃうくらい今つい書いてます。
そうだよね。めっちゃ頑張って書いてるんだよね。
でも昔に比べたら書くための補助とかもいろいろあるので。
補助とは?
だからこういうのを例えばH1とか書いたら
その続きになるようなタグの続きみたいなのを自動補完してくれるとか。
ちゃんと綺麗に終わらせてくれるとか。
そういうのを書いたりとか、うまく綺麗に成形してくれたりとかっていうのはしてくれるんで
だいぶ楽にはなってるんですよね。
だって閉じてなかっただけで偉い子ちゃんになることが多かったもんね。
そういうのを経て今に至ってるんです。
ウェブデザインって、でもさっきまちこさんも言ってたんですけど
結構文業も進んできてる業界ですよね。
大きな会社とかだとウェブデザインとコーダーっていうのが分かれたりしてるんですよね。
コーダーっていうのがコーディングする人。
ウェブデザインなの人は絵だけ作るっていうか
動きとかもそうなんですけど、作れ作ったりするんです。
それをコーダーの人に渡して、コーダーの人がコーディングするっていう文業性みたいなのも最近進んでる。
12:03
ありがたい。
どうも使う脳みそが違うんよね。
絵を作るのとコーディングする脳みそってこと?
全く違う。
正しいことを正しくしなきゃいけないじゃん。
まちこさんの場合はグラフィックデザイン歴が長かったから
そういうのも多分影響してるんじゃないかなと思いますね。
絵は絵っていうので。
一時期あったフラッシュ。
フラッシュはちょっとまた別の話なんですけど
でもフラッシュでホームページ作ったりとかもしてましたもんね。
あったあった。
ちょうど専門学校卒業したぐらいの頃は
フラッシュでホームページを作るっていうのがめっちゃ流行ってた時代。
そうですよね。2000年前後ぐらいの。
あれもフラッシュでアニメーション作ったやつでリンク貼るみたいな。
そうそうそうだよな。
そう。からのテーブルコーディングの落ち着いたページで
ちゃんとしなきゃいけなくなってきたページ。
そっかそっかそこか。ちゃんとしなきゃいけないところ。
そうそうそう。で、ちゃんとしなきゃいけないのしばらくやってたんだけど
やっぱり時間かかっちゃうから
もう絵を描くだけに割と専念し始めたっていうのが最近かもね。
あ、そうですね。
でも鶴ちゃんそこが絵をやるのもやるし
コーディングもバッチアチにやるよってことだよね。
そうですね。僕の場合は。
強いわー。
強いっていうか多分僕がバチ子さんとはやってきたことがちょっと違うというか
僕の方は割とウェブデザインの方から最初結構多くやってたので
そういう意味で、あとは僕がウェブデザインを始めたのが
割とちゃんと構造をしっかりしなきゃいけなくなってきた時が最初ぐらいだったので
そこを最初に学ぶしかなかったので
余計な知識がないままちゃんとしたものを覚えてこられたんだね。
一応そうですね。
会社員だった時とか先輩がテーブルコーディングのやっぱり辛さというか
今だいぶ楽になったよってのをよく言われてましたね。
そうそう。
でもたまに昔の案件のちょっと修正とかの時にテーブルコーディングのやつがあって
マジかよこれやんのかみたいな感じの時はありました。
そういうのあんの?
ありましたありました。
宮尾美まででこここうすんのかなってやったりとかしてたことありましたね。
ちょっと待ってテーブルのやつを守らなきゃいけないの?
そうですよ。そうじゃないと崩れちゃう。
やばいやばいやばいこれかテーブルコーディングとはっていう感じもやったりとかしてました。
おもろ。それはやばいね。
15:00
お疲れ様です。
でもね最近はノンコーディングっていうかな
ノンコードで作るウェブサイトっていうのはもう技術の発展というか
いろんなそのテンプレートとかサービスとかの充実で実現されてきていて
一昔前とかだと自動で生成されるそのノンコードっていうのは
つまり絵を描けばそのままそれがコーディングもされるっていうやつなんですけど
前はねその絵を描いて出力されたコード見るとすごいぐちゃぐちゃで
実用性はあんまりなかったんですけど
最近はやっぱ違うんですよね。
僕もあんまり試してないからわかんないんですけど
結構最近はちゃんとしてるようですごいな。
逆にノンコードは触らないってこと?
そうですね。ほとんど触ったことないですね。
そっか。
でもねそれ多分ねちょっと頭が固いんだなって思ったりします。
どういうこと?
なんか一から自分でコーディングしたいみたいな
そこ職人気質っていうか職人っぽくやりたくなっちゃうんですよね。
ちゃんと一からね。でもそっちの方がいいもんね。
突き詰めていくとね。
本当に突き詰めていくとちゃんと綺麗なコードは描けるんだけど
スピード重視でなくてやっぱりノンコードの方が最近使った方がいいのかな
とか思ったりはしますね。
そういうことか。
私は逆に組めないからノンコードにばっかり行ってるみたいな。
いやでもそこはね分けてっていうか案件によって使い分けていいんじゃないかな
って思ったりするし。
そっかそっか。
なるほどね。
そこら辺の積み分けをどうしてるのかなって結構気にはなってるところだった。
そっかそっか。
こんだけいろいろノンコードはいっぱいあるじゃん。
WixとかWordpressでもそういうプラグインもあるし
いっぱい蔓延してる中で
じゃあつーちゃんがウェブデザインをやりますってなったときに
どうしてるのかなみたいな。
そっかそっか。
それで言うとあんま使ったことないんですよね。
なんかねちょっとファイルが肥大化しちゃう可能性もあって
ノンコードだと余計なファイルとかも入ってきちゃうというか
だから自分で書いた方が軽量化できるんですよねサイトを。
そこは結構要件としてあったりするんで
軽くすぐにスピード?表示速度とか求められたりするんで
求められる案件か。そっかそっか。
それは組んだ方がいいね。
そう。だからそういう意味で自分で組んじゃった方が早いなって思ってるんですけど
セキュリティ面の部分でも違ったりするの?それは。
そうかもしれないですね。
HTMLっていう話でいくとそこまでなんですけど
例えばまた最近Wordpressっていうの聞いたことある人もいるんじゃないかなと思うけど
WordpressっていうCMS。コンテンツマネジメントシステムっていう
18:01
さっきからよく出てくるよね。そんなさらさらとコンパクトにしてるの。すごいよね。
一応これで食ってるので。説明の時とかに出るようにしないといけないんで。
すごいよ。
Wordpressっていうブログのようにウェブサイトを更新できるシステムみたいなのがあるんですけど
それはまたPHPっていうまた違う言語とかが使われて
それはなんかその脆弱性というか結構歴史の長い言語なので
それもちょっと何か不備があるとそこがセキュリティホールになるっていうので
脆弱性の元になったりするんで
自分で書いたりとかしてないとやばい可能性もありますね。
PHPもやるの?
PHPもやりますね。PHPで何かサービスを開発するみたいなのはできないんですけど
でもそのWordpressを組む時にPHPを触る程度では使えますね。
プロフェッショナル。
でもやっぱり上には上がいるというかもっといろんなことができる人はできるんでね。
それどういうこと?何かどこで基準があるの?それ分かんないけど。
さっき言ったJavaScriptとか動きをつけるための言語というか
そういうのをたけてる人ってすごいんですよ。
書き方とか使い方が全然違うんですよ。
レベルが違う人がいてですね。
要はもっとページがインタラクティブみたいな感じ?
それをできちゃう人がいる。
そこまでちょっと僕は手を伸ばせてないというか勉強しきれてなくて
日々勉強というか追いかけていかないとなと思ったりとかしてるんですけどね。
それこそね、どういうページを作ってみたいとかあるの?
勉強をうんの時間が取れますよってなった場合。
どういうページか。
理想とする。
それで言うと、3Dとかを交えたウェブサイト。
最近結構その3Dを作ってそれをウェブサイトに組み込むみたいなのが結構流行りとしてあって
それはやっぱり少しコードとかそういうのを理解してないと動かせないんですよね。
あれもそうなんだ。
他のソフトとかが優秀で書き出せばそのまま動いたりもするんですけど
やっぱりそこら辺のJavaScriptとかの知識もあった方が
より繊細に動かせるというかきちんと動かせる部分なので
そういうのはね、いずれというか案件があったらやらなきゃいけないのかなと思うけど
現状はそこまでないんですけどね。
どっちかというと、実用的なサイトの方が多いんで
インタラクティブというよりはスピード重視で簡単な、簡素に、シンプルにというのが多いから
逆にスマホで見なきゃいけない時もある。
21:02
ていうかそっちの方が集中してるから今。
割とシンプルにしなきゃいけないんだよね。
そうですね。
いつものデザインの話
ごめんなさい、奥の解説がすごく長くなっちゃったんですけど
いや、何言ってんの?聞きたかったよ。
もう少し話すと、ウェブデザインってこの4,5年でモバイルファーストと呼ばれるようになって
今言ってくれたよね。
今言ってくれたことなんですけど
4,5年前くらいまではホームページはパソコンで見たりもあったけど
みんなスマートフォン持ってる今の時代はスマホで表示する回数が多い。
多い。
8対2かな。
そうね。
8対2、よくて7対3くらいの割合で
7、8でスマホで見るっていうウェブサイト。
そうすると、専門用語で言うとレスポンシブデザインって言うんですけど
ウェブサイトがこのウィンドウの幅で形が変わっていくっていう作り方があるんですよ。
それもウェブデザインの歴史の中で作られていった技術っていうか仕様なんですけど
だからホームページ、パソコンで開いてるときは1000ピクセル以上あるからこの表示
タブレットで見るときはそれより900何ピクセルとかだからこの表示みたいな感じで
スマホだと700以下、640以下だからこの表示みたいな感じで
2列表示だったものが1列になっていくみたいなそういうのをレスポンシブに動かしていく
そのレスポンシブデザインって言うんですけど
それがモバイルファースト。
要はもうスマホを前提にまず作るっていう感じになってきちゃってるんですよね。
なってきちゃってるっていう言い方にはちょっとあれがあった。
まあまあでもユーザーがそうなってるからね。
だからモバイルファーストってことはスマホで見たときにシンプルに見やすいっていうのを前提だから
おのずとパソコンで見たときもシンプルにするってことになってくるんですよね。
だからそういう意味でなんかなってきちゃったって言ったのは
ちょっとそのデザインがシンプルになりすぎてきちゃってるというか
差異がなくなってきてるっていうのかな。
そうね。たまにさパソコンで見たとき
なんかパソコン背景はパソコンのなんかちゃんとあるんだけど
真ん中にだけスマホと同じ幅でなんかこうあるやつあるよね。
もうあれは本当にねパソコンを捨ててますね。パソコンビューを
PCの見ることを捨ててる。そこまで割り切っちゃってるサイトとかもあるから
合理的っちゃ合理的なのかな。
多分そう思います。多分ユーザーとかのあれ見て
ユーザーエージェントというかユーザーがどういう端末でアクセスしているかとか
解析できるから。そういうの見て
24:00
じゃあもうこれPCいらないなみたいな感じはあるんだと思うんですよね。
逆に言えばそうすることでちょっと予算削るとかもできるのかな。
きっとそうですね。そうだよね。だから予算次第ってことだね。
そうですね。
そうかそうか。
デザインだから僕はウェブデザイン
ウェブデザイナーのエゴとしてはやっぱりちょっとかっこよくしたりとか
工夫したりとかしたいんだけどどうしてもスマホを前提にすると
そこまで装飾とかできなかったりとか
あんまりインタラクティブに動きつけすぎたりとかしないようにっていうのが
多くなるからそういう意味でちょっと寂しいなと思った気がするんですね。
そうそうそう。
あったあった。また開古中みたいな話するけどさ
柄系にも沿わなきゃいけない時期あったからね。
そっかそっか。それちょっと忘れてた。柄系ね。
柄系きたーって。
僕も会社員の時やってましたよ。柄系のコーディング。
柄系やってた?やりましたやりました。
めっちゃシンプルだよね。あれこそ。
でも独特のルールとかがあって
使わなきゃいけないものとか
テーブルコーディングみたいな感じで
いにしえですね。
いにしえのコーディング。
だってあれキャリアごとに違うやつやらなきゃいけなかったじゃん。
そう。だからキャリアの端末ごと用意しなきゃいけなかったんだよね。
やばいっす。
NだのPだの。
強セラーとか。
だいぶやばいっすね。今考えるとね。
考えるといい時代になったね。
なりましたね。
上手いことね。そこはバランスなんだろうけど。
てことはまたこれからだね。きっとね。
そうですね。
スマホ以外のものがもしかしたら。
そうそうそう。
今度からアイウェア的なやつとかさ。
ですよね。
もっとそういうところにきっと変わってくるんだとしたら
また変わってくるよこれ。
そうですよね。
逆に画面がでかくなるってことを想定できますよね。
そういうこと?ピッピピャンみたいな?
ベタバースもそうだし、アイウェアとかかけたら
画面が大きくなると思うんですよね。
そしたらまたPCみたいなデザインが復元するというか。
そうね。
大きい画面を前提としたデザインみたいなのが
今後また考えるところになってくる可能性はありますよね。
そうだね。
そうなってくるとさ、今までまっすぐこうだったものがさ
今度はこう。
そうですね。360度とか180度みたいなのも考えなきゃいけないみたいな。
そういうことになってくるんだろうね。きっと。
確かに。
ってなると今やってることも古いになっちゃうかもしれない。
ありうるありうる。
UIですかね。UIは日々やっぱりデバイスによって変わっていきますよね。
うんうんうん。
うわー大変だ。
そう考えるとね、今やってることも実に素晴らしいことだってことだよね。
そうですね。
今の時代で。
本当に。
ウェブデザインってざっくりだけど
ベタバースとかもウェブの世界ではあるから
ベタバースとかになった時の中のデザインもウェブデザインではあるんだよね。
27:02
ウェブデザインだね。
だからウェブデザインあれこれということで
未来のことも考えてウェブデザインっていうのをちょっと考えてきてるっていう感じかな。
だね。
いやーこれはもう鶴先生。
いやいや。
これはありがとうございますもう。
とんでもないですよ。
素晴らしい講義でした。
ちょっと解説が長くなっちゃったし。
そんなことないよ。
まだまだね、例えばUI、UXとか深掘っていくともっといろいろあるんで
それはまた別の機会にということで。
とりあえずはちょっと自分のやってることを少し深掘って
細かくご説明しました。
素晴らしい。
ありがとうございました。
長々とありがとうございました。
いやーよかった。いろいろ解決できた。
そうですね。
またよろしくお願いします。
また別の機会であるかわかんないけど。
またあれこれを教えてください。
それではウェブデザインあれこれでした。
ありがとうございました。
また次回もよろしくお願いします。
