00:03
ManaのWebクリエイターカフェからのお知らせです。
現在、リスナーの皆さんへ番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
ManaのWebクリエイターカフェ
WebデザイナーでWebクリエイターBOXを運営しているManaです。
Web制作を勉強中の駆け出しちゃんです。
この番組では、Webコンテンツ制作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、レスポンシブデザインです。
iPhoneが生まれてから、結構いろんなデバイスが出てくる度に問題になっているこのレスポンシブデザイン。
最近だとモバイルユーザーが増えたので、モバイルのみに対応した方がいいのかなとか、いろんなデバイスに対応しなきゃダメだよとか、
そういう時にレスポンシブのお話がいつも話題になっています。
今回はそんなレスポンシブデザインについて語っていきたいと思います。
駆け出しちゃんは今回のテーマにはどんなイメージを持っていますか?
そうですね。レスポンシブデザインって聞くまで、そういえば全然意識したことなかったなって思いまして、
よくよく考えれば、最近はほとんどのサイトがパソコンで見てもスマートフォンで見ても、
どちらでも違和感なく見られるようなデザインになっているなと思いまして、
ただ実際実装する側になると面倒くさかったり大変だったりするんだろうな。
私も課題でこれ今からやるのか?みたいな気持ちになってました。
そうですよね。ちょうどレスポンシブデザインについて学び終わった?
課題が一段落終わってっていうところなので、ある程度レスポンシブデザインについて知識がついてきたかなと思うんですが、
今のところ、じゃあそうですね。レスポンシブデザインがわからない人に説明するって思ったら、どういうふうに説明しますか?
パソコンでもスマホでも見やすく表示されるサイトのデザインのことです。
素晴らしい。100点満点ですね。
はい、その通りですね。スマホとかパソコンだけじゃないんですが、いろんなデバイスに対応して見やすく実装しましょうとデザインしましょうっていうのがレスポンシブデザイン。
あとはレスポンシブ対応なんていうふうに言います。
今まで制作したことない人にとってはもうどうやってやるのか、まか不思議な感じかもしれないんですが、基本的にはCSSだけでまずは幅を設定ができるので、この幅まではこういう風なスタイルを実装しましょう。
03:00
この幅以上になったらこういう風に実装しましょうっていう風な指示ができるので、そういう風にCSSでは指定していきます。
レスポンシブデザインはメリット、デメリットあったりするんですが、メリットの方が多いかなと思います。
デメリットで言うとちょっとめんどくさいかなっていうのが一つあると思うんですが、メリットはやっぱりどのデバイスでも見やすいので、どんな環境でもどんな状況においてもウェブサイトで閲覧できますよっていうところですね。
レスポンシブデザインの課題が終わって、今合格になったところなんですが、難しかったなとか、ここどうなのかなっていうところありました?
それはもうありましたありました。まずパソコン版のデザインから作ったので、その時にはいい余白だ、いい並びだと思っていても、スマホ版で見てみるとなんかずれてしまったり、謎の余白ができていたり、逆にいいなと思ったはずの余白が広くなってたり狭くなってたり、
何だか微調整するところがいろいろ多くて大変だった記憶があります。
そうですね、余白周りは結構苦戦してましたよね。あれ何でだったのかな。予期せぬ余白がモバイル版にはあって、PC版にはなくてみたいなのがいろんなところであったんでしたっけ。
いろんなところでありました。
そうですよね、そういったところが難しかったですよね、最初は。
はい。
何で起こるかっていうと、まず最初PC版で今回デスクトップサイズで作っていったんですよね。
はい。
はい、そうなった時にデスクトップ版では完璧に作っておいて、モバイル版だったらこうっていう風にモバイル版だったらの指定しかしないようにすれば影響は出ないはずなんですね。
おっ。
メディアクエリーっていうのを使ってモバイル版だったらっていうのを後から書き足していったと思うんですが、その中にしか書かないようにすれば影響は出ないはずなんです。
多分それを指定する場所を違うところにもしちゃったとかいうのが続いて、あれこれあれあれみたいな感じで、なんかこうなっちゃったんかなと思います。
かもしれないですね、いろんなところにマージンを足したりマージンを削ってみたり。
やってましたね。
はい。
はい。
ごちゃごちゃと。
ごちゃごちゃ、でマージンがないなと思ったらパッディングが悪さしてたりね。
ちょっとマージンとパッディングがまだちょっと難しいですかね。
実は使おうってなると難しいですね。
ここを広げたいって思った時にマージンを使うべきなのかパッディングを使うべきなのか、あんまりまだ区別がついてないですね。
そうですよね。そういった時はデベロッパーツールを使ってもらって、メンタリングでもお話ししたんですが、どこにどんな余白がついてるのかっていうのをまず知ることが大切なので、なんか変だなって思ったら常にデベロッパーツールを起動して確認するっていうのが大切ですね。
06:07
レスポンシブデザインで大事なこととしては、そういう風に余白がとかここで予期せぬスタイルがついちゃったとかいうのももちろんあるんですが、それ以上にちゃんと見やすくなってるかっていうのが一番大切なんですね。
かけだしちゃん、漫画を描いてるのでスマホで見た時にどういう風に表示されるかなっていうのを確認するって以前お話ししてたんですが、それもちゃんと見やすく漫画が表示されるかっていうのを確認してるはずなんですね。
ウェブサイトももちろんそうで、デスクトップ版からモバイル版のサイズに変更しました。変更してちゃんと表示はされるけどタップがちゃんとできてるのかとか、文字読めるのかとか、その辺ですね。
けっこう初心者の方は思ってる以上に文字サイズを小さくしがちなので、それだと読みづらいよねっていうそういう基本的なところからチェックしていかないと、どっちつかずの、どのサイズで見ても見づらいみたいなことになっちゃったりするので、その辺は注意しておいたほうがいいですね。
分かりました。
あとはメディアクエリを使ってモバイル版とデスクトップ版で書き分けたと思うんですが、そこで出てきたブレイクポイントですね。ブレイクポイントの説明もあったと思いますが、じゃあブレイクポイントって何ですか?
突然の理解度チェック。
幅を一つ決めて何ピクセルって、この幅以上だったらこういう表示にしてください。だったり、この幅以下でしたらこういう幅にしてくださいと指定する幅?指定するピクセル?
そうですね。そのポイントですね。ブレイクポイントでポイントって言ってるのはあれなんですが、切り替えポイント、切り替え点っていうふうに言いますね。表示を変える、スタイルを変える切り替えしの地点となる部分ですね。ちゃんと理解できてると思います。素晴らしい。
説明はできなかったです。
ちゃんと伝わりましたよ。これが課題とかだったらブレイクポイントを何ピクセルにしてねっていうふうにあるので、その通り実装すればいいんですが、実際は結構細かく分けてるところもあります。タブレット版とかもそうですね。
実案件だったら、多いところだったらスマホ縦横、タブレット縦横、デスクトップみたいな感じで5個くらい用意するところもあったりします。
縦横ってスマホの向きを回転させると?
その通りです。なかなかスマホを横にしてウェブサイトを見ることってあんまりないんですが、一応それでもちゃんと見えるようにっていう配理は必要ですかね。
そうなんです。実はあるんですよ。
09:00
タブレットの横にしたときのサイズと、基本的なノートパソコンと呼ばれる小さいサイズのものですね。同じくらいのサイズなので、そこは考慮しなくてもいい場合もあったりするんですが、どのサイズで見ても変じゃないっていうのは目指したいところです。
細かくしてしない方がより良い書き方ではあるとは思うんですが、あんまりごちゃごちゃ10ピクセル単位でブレークポイント作ってたらもう本当にわけわかんなくなっちゃうので、あんまり細かく書きすぎてもっていうところはあるんですが、そういう切り替えのポイントの作り方っていうのは多々あります。
課題ではタブレット版は指定がなくて、スマホ版とディスクトップ版だけだったと思うんですけれども、今のお話聞いてると、実際のお仕事ではタブレット版は普通に当たり前のように実装するものなんでしょうか。
そうですね。実装というか、見て見て崩れてなかったら別に新たにブレークポイントを作る必要はないんですが、確認は必ずしますね。
ありがとうございます。タブレット持ってないんでどうしようかなって。
そうなんですね。そういった場合もデベロッパーツールで確認する幅とかを指定できるんですね。なのでそこでタブレットサイズ768×1024とかだったと思うんですが、そこで設定して確認っていうのは昔からよくやってましたね。
よかったらそれでも見てみると思いのほか崩れてたりするんですね。
また変な余白が。
そうありますね。それは私もあるあるですね。タブレットを結構忘れがちというか、実装し忘れていて、あれそういえば見てみたらなんか全然違うぞみたいなことがあったりします。
はい。
気をつけましょう。
ちなみになんですけども、タブレットって小さいのだったり大きいのだったり結構いろいろあるじゃないですか。
タブレット用のブレイクポイントはどの幅がよく使われてるんでしょうか?
そうですね。一概にタブレットって言ってもアンドロイドだったりiPadだったりとかいろいろ種類があるので、この数値っていうのが決めない方がいいと思ってるんですね。
それスマホもそうなんですけど、いろんな幅が出てきて全部に対応するのは難しいので、ある程度このくらいの幅っていうのを決めておくとやりやすくなります。
タブレットだったら最近のだと縦に持った時の横幅がだいたい834ピクセルくらいが基準になってますので、この辺の840ピクセル前後で切り替えたりとか、スマホだったら縦に持った時の横幅がだいたい380ピクセルあたりが無難なので、
大きいもの、スマホだったら最近MAXとか結構大きいサイズが出てきていて、それがだいたい420ピクセル以下になるので、だいたい私は420ピクセルあたりと840ピクセルあたりで分岐点を作ってブレークポイントとして作っていってます。
12:08
ありがとうございます。
はい。あとは画像の切り替えについてもよくあるもので、例えばデスクトップって横長の画面が主流で、スマホって縦長に見ることが主流なので、画像自体を切り替えるってことはよくあるんですね。
はい。
この実装って今までしたことはあります?
ありますね。すごく昔、ランディングページ作っていた時に、ファストビューの画像をデスクトップ版とモバイル版の2つを用意して、それぞれが表示されるようにしていた記憶があります。
それどうやってやってたんでしょうね。覚えてます?
すみません、そこが覚えてなくてですね。もしかしたら、仕組みを何もわからないままブレークポイントを使っていたのかもしれないです。
なるほど、なるほど。
画像貼り付けするだけのランディングページ作っていた時もですね、テンプレートじゃなくてテンプレートを改造したやつを使っていた時だったかな。
コンテンツを横に並べた画像と、スマホ版では縦に並べた画像で切り替えていた記憶もあります。
なるほど、なるほど。画像自体も変わってるんですよ、じゃあ。
そうですね、画像自体を変えて。ただやっぱり文字も画像なので、画像でやってたので。
文字も画像だったら、スマホ版にしたらすごく小さくなったりしません?
小さくなってた時期もありました。
時期も。
時期も、はい。
それはしょうがないかなっていう感じでする。
そうですね、そういうもんですって。
そうか、そうなっちゃいますよね。さっきも申し上げた通り、文字サイズって結構スマホ版では気をつけないと本当に読めなかったりするので。
そうですね、かなり小さくなってしまいますね。
ですよね、そういったところは注意しなきゃですね。なので画像自体を変える、文字が画像になってるっていうのもしょうがないところもたまにあったりするんですが、そういった場合でも本当にスマホで見てちゃんと文字が読めるかっていうのは大切ですね。
はい。
あとはレイアウトを変えすぎたら情報が探しにくいっていうこともあって、例えばデスクトップ版だったら横に並べてたものをスマホ版だったら縦に並べるっていうことはよくあるんですが、そういった時にレイアウトががらっと変わって見えるんですね。
ユーザーがそれだと分かりにくいと、右側にサイドバーにあったはずのボタンがどこを探してもない、一番下にあるとかよくあるので、その辺どこまで変えるかとか、変えすぎてもちゃんと分かるかどうか、クリックされやすいしてほしいようなボタンは見やすいところにあるかどうかとか、そういったところを考えながらコンテンツ内容はそのままでレイアウトも分かりやすくっていうのを意識しなきゃいけないので、難しいですよね。
15:08
そうですね。私よくハンバーガーメニューのボタンの存在忘れてて、パソコンで見たサイトをスマホでも見ようってなった時に、あれ、どこにも飛べないじゃんって慌てることが時々あります。
メニュー問題は本当に大変ですよね。デスクトップだったら常にメニューが、内容が全部書かれてるので、ここをタップすればこのページ行くなっていうのが分かりやすいんですが、スマホ版だったらそのメニュー自体が隠れてるので、パニックなりますよね。
これがさっき言った通り、コンテンツ内容を揃えるっていうところにもつながるんですが、そこがちょっと難しいところではありますよね。
ハンバーガーメニューって今出たんですが、ハンバーガーメニューって三本線である関数字の3みたいなアイコンなんですけど、それだけでメニューって分からない人も中にはいるので、できればメニューってカタカナで書いて三本線とかいう感じにした方が親切なのが親切ですね。
たまになんですけれども、三本線ですらないハンバーガーメニューってありませんか?何回か見かけたことがありまして。
日本線とかってことです?
日本線だったり、おしゃれなアイコンだったり。
はいはいはい。ありますね。
分からなかったです。
そうですよね。ありますよね。確かにそういうところが難しいですよね。
私、何かのハンバーガー屋さんのウェブサイトで、ハンバーガーアイコンが本当にハンバーガーだったっていう。
なんかどっかで忘れましたけど、あって。
それはちょっと、これはハンバーガーアイコンだなっていうのがよく分かりました。
見てみたいです。
そうなんです。ちょっと後で探しておきます。
で、あとは最近の流行りで言うと、流行りなのか分からないですけど、日本のサイトでよくあるのが、モバイル版のみ対応するみたいな形で、幅がものすごく狭くて、デスクトップで見てもその狭い幅のまま背景画像が結構おしゃれな感じでバーっと大きく表示されてるっていうものも増えてきてます。
なんかツイッターで見たことあるかもしれない。紹介されていたのを。
そうですよね。私もブログの方で紹介したことがあって、ブログの記事の方を見ていただければわかりやすいかなと思うんですが、真ん中にね、コンテンツ内容が狭い幅で真ん中に表示されていて、背景画像がドーンとあるような形ですね。
これ見た時どう思いました?
ちょっと違和感がありましたね。最初は。今でも見かけるたびちょっとした違和感というか見づらさですかね。パソコンの大きな画面でドーンと見るのに慣れているので、どうしても端の余白と言いますか装飾部分が気になってしまって、あんまり真ん中のコンテンツに集中できないなっていうのは今でもあります。
18:14
確かにそうですね。圧倒的にコンテンツ内容よりも背景の面積の方が広いので、大体1対2とか1対3ぐらいで3が背景みたいな形になっちゃうので、どうしても背景の方に集中して見てしまったりとかあるんですよね。
こういったサイト、最初見た時すごい面白いなって思ったんですけど、実際はモバイルユーザーが圧倒的に多いので、こういうレイアウトになってるんだと思うんですね。なので、制作の工数を削減するとか、そういったことを考えるのであれば、こういうやり方もありかなと思いますね。
どのくらいモバイルユーザーがいるのかっていうのをあらかじめ把握してないと、ここまでの思い切ったレイアウトっていうのはやりづらいと思うので、その辺は本当にサイトによると思いますね。誰もがやっていいものではないとは思ってますので、この辺はどんなサイトにするかによって変えてみたらいいかなと思います。
はい。あとは、デザインがすごく作る側としては難しそうだなと思ってました。
ふんふん。どういったところでそう思います?
はい。前に見かけた通販サイトでは、右側にはメニューですかね、が載っていて、左側は模様があったんですけれども、そこの部分考えるの、なんでしょう。えぇ、ごめんなさい。これなんて説明していいかわかんないです。
そうですね。難しいところで言うと、その開いた部分、背景になる部分に何を載せるかによると思うんですね。なので、人によってはものすごいキャンバスが広くなったぞと。なので、表現の幅が広がるぞっていう人もいらっしゃると思うんですね。
それが例えば写真家の方だったりとか、何か作品を載せたいイラストレーターの方だったりとか、そういう方には見せる範囲がすごく広くなるので、作りやすいサイトになるんじゃないかなとは思うんですが、そうじゃなくて、情報を掲載したいと。
新しい美術館ができましたと。美術館の情報を載せたいですってなった時に、背景にドーンと写真を載せるっていうのはいいんですが、じゃあその美術館までの行き方だったり、どういう経緯でこの美術館できたのかっていうような説明は、ちょっとしづらくなりそうなんですね。なので、その辺のバランスは難しいと思います。
でも、かけだしちゃんはね、漫画描いてますので、漫画を思いっきりドーンと描いてます。かけだしちゃんのキャラとアヒルちゃんと、アヒルちゃんでしたっけ?
アヒルちゃんです。
名前があったのかなと思ったんですけど。
名前ないですね、アヒルちゃんです。
21:00
アヒルちゃんで、アヒルちゃんのイラストドーンと載せて、ちょっと一言コメント載せてとか、いうサイトはパッと作れそうな気がしますが、ここはね、どんなサイトになるかによりますよね。
あとは、私よく思うのがですね、思考の広さは画面のサイズに比例するって、勝手にちょっと思っていて。
そうですね、スマホでちまちま見ていると、考え方がすごく狭まるような気がしてきて。
例えば、ECサイトでお買い物するってなった時も、この商品絶対に買うっていう風になってるんだったらいいんですけど、見比べるのってなかなか難しいと思うんですね。
デスクトップとかで見ると画面が広いので、いろんな風に見比べたりとか、いろんな考えを見聞きしたりとかしやすいと思うので、そういった形でこの商品だけを売りたいっていうのが決まってるんであれば、狭い幅で決めてもいいかなと思うんですが、
いろんな考え方があるよって見せたい時とか、いろんな商品があるよって見せたい時は、結構広くデスクトップだったら画面いっぱいに広げてっていう風なやり方の方が見せやすいかなと思いました。
そういう形で使い分ける作戦もありなのかもしれないですね。
ありだと思います。一つの商品に集中させたい。これだけを買ってくれって言うんだったら、そんなに広くしなくてもいいかもしれない。もしかしたら。
ということで、今日のテーマはレスポンシブデザインでしたが、かけだしちゃんいかがでしたか?
レスポンシブデザイン。私はコーディング的にまだまだ苦労していて、可能であれば避けたいな、みたいに思っているところなんですけども、やっぱりスマホとパソコンの画面は大きさや縦長横長まで違いますし、
スマホが普及しているからパソコンはなくなるなんてことも今のところは考えられないので、絶対に学んで、さらにですね、さっきマナさんがおっしゃったように、見せたいコンテンツによって使い分けるのもありだということなので、頑張って学んでいきたいと思います。
はい、そうですね。コーディング的には最初は苦労するかもしれないんですが、基本的な書き方は一緒なので、一回覚えてしまえば、どのサイズにも対応できると思います。はい、いろんなサイトを作りながら、少しずつ表現の幅を広げていきましょう。
はい。さて、この番組では感想や質問、リクエストなどをお待ちしております。番組詳細欄にあるリンクよりお気軽にご投稿ください。TwitterではカタカナでハッシュタグWebカフェをつけてツイートしてください。そしてApple PodcastやSpotifyのPodcastではデビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。Tech Academyはウェブデザインやプログラミングをオンラインで学べるスクールです。現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。副業案件の提供を保証するTech Academy Worksもあるので、ぜひTech Academyと検索してチェックしてみてください。またお会いしましょう。
24:21
Webクリエイターボックス マナとかけだしちゃんでした。
