00:01
どうも、はりぃです。
ヤマです。
今日は、グラフィックデザイナーのためのウェブデザイン入門。
聞きたかった。ずっと聞きたかったやつや、これ。
普段イラストレーターっていうソフトを使っているけど、
のっぴきならない事情でウェブサイトを作らなければいけないということが結構あると思うんですけど、
そういう時に考えなきゃいけないことが多くて、知らないまま作ってしまうと、
後の工程が大変になっちゃったりすることがあると思うので、
気をつけなきゃいけないところがどこかというのをお話ししていこうかなと思います。
いいですね。俺も聞きたいっすわ、これ。
こやまさんもそうですよね。グラフィックの人ですからね。
まあ、対象はあんまりウェブ系のデザインやったことないよというぐらいの人ですね。
もう超入門です。最初はこれだけはやっちゃいけないことと、
こういうことを考えておくと、後の工程のコーディングするとか、
そういう時に助かるっていうところの話とかをしていこうかなと思いますので、
よろしくお願いします。
まずこれだけはやっちゃいけないこと、ベスト3、第1位。
いきなり1位行くんですね。
これ特に順番とかない。
No.1、要素が少数点ピクセルになってる。
そもそもピクセル表示で作ってないってやつね。
そうですね。これ見た瞬間にそっと閉じますね、ソフト。
これはやばいやつだと。
それぐらい萎えさせる威力を持つのがこの少数点ピクセルですね。
なるほど。ちゃんといられてもめちゃめちゃ拡大したピクセルのマスが出てきますもんね。
マスとマスの間に線とかが入ってたらどっち?みたいなね。
そうそう。っていうのが1つ。
なるほどね。はいはいはい。
次は、これは多分大丈夫だと思うんですけど、カラーモードRGBになってない。
これは結構知っていることが多いと思うんで、ただやっぱり稀にある。
CMYKで来た場合どうするんですか?もう無理くりRGBに変換するんですか?
変換しなきゃいけないんですけど、変換したらちょっと暗くなるんですよね。
ですよね。
なので、作り直してもらえるのが一番いいですけど。
逆もしっかりですよね。印刷物のデータがRGBのままとかになってたら、
無理くりCMYKにしたら変な色になるんですよね。
しかもちょっとくすんだ色になるっていう。
その辺は要注意ですね。
あとはですね、フォントがプレーンテキストっていうのかな。
マジで出力すべきところまで森沢フォントで作られてるみたいな。
基本やっぱ、ひらぎのとかで作ってた間違いないんですか?
Macならひらぎの、Windowsならメイリオ。
メイリオって僕最近知ったんですけど、日本語の明瞭っていう言葉から来てるらしいですね。
そうなんや。確かにちょっとシンゴシックに似てる、読みやすい感じはしますけどね。
ちょっと丸っこい感じの。
そうそう、ふっくらしたね。
あとさ、単純な疑問なんですけど、いまだに。
ウェブサイト作る時って、横の幅何ピクセルで作るのがベストなんですか?
作り方によると思うんですけど。
モニターのシェア率っていうのを調べたら出てくるんですよ。
03:03
インターネット使う人たちはどのサイズのモニター使ってるのかっていうのがあって、
一番多いのが、確か1920の1080だったんですよ。
フルHDってやつですか。
その次が、ちょっと忘れちゃったんですけど、1300いくつかける800とかそれぐらいの、
たぶんノートパソコン13インチぐらいのやつだと思うんですよ。
それがパソコンの荷台シェアだったんで、1300、ちっちゃい方に合わせないとしんどいと思うんで、
1300とかで見た時にいい感じに見えるやつと考えたら、1000から大きくても1200ぐらいまで。
結構考えること多いですよね。
そうなんですよ。グラフィックはデザイン作ったところで完成だと思うんですけど、
ウェブの方はその後の工程が結構あるっていう。
その後の工程のことをあまり情報が共有されてないと、何を考えればいいのかっていうのも分からないと思うんで、
とりあえずさっきのやってはいけないことリストは、最初イラリの環境設定で新規ドキュメントが作るときに、
ウェブっていうのを選ぶといい感じに設定されるみたいですね。
最近のアドビはありますね。
少数点ピクセルもその設定しとけばならなかったんで、どんな形作ろうと思う。
なんでそれで一挙解決ですね。
タイズ自体200ピクセルで作ってても、座標が100.5ピクセルとかの位置にあるとぼやけるんですよね、書き出した時に。
そうですね。線が消えたりしますもんね、あれね。
プロファイル設定でウェブを選べば大丈夫。
なるほどなるほど。
なんかね、僕一回イラリで作るよりも、フォトショップで作ってくれる方が楽ですみたいなことを言われたことあるんですよ。
それってどっちなんですか。やり方次第だと思うんですけど。
基本的にはフォト書の方が楽だと思いますね。
書き出しとかがイラストレーター結構大変なんですよね。
フォト書はウェブ用の設定が結構あるんで書き出ししやすいですね。
だから最近だとスマホの解像度めっちゃ高いじゃないですか。
スマホ側のモニターが綺麗すぎてぼやけちゃうんですよ、普通に作ると。
そういう時用に2倍の大きさで書き出すとか3倍の大きさで書き出すっていうのをしたりするんですけど、
それがしやすい。
イラリもできるんですよね、最近は。
できるんですけど、なんかね、アセットの書き出しっていうのを使ってるんですけど、僕はイラリで。
なんかね、余白がめっちゃ出るというか。
ああ、いらん部分ね。
正方形でマスクした写真とかを書き出すと元の写真のサイズで出てきたりして、結局フォト書開いてその部分消してみたいのをすることが結構あるんで、
痒いところに手が届きにくいのがイラリですね。
イラリで作った時もレイヤーでちゃんとスライスで切って納品するとかね、すごい楽ですよね、作る時。
デザイナーが作ったデータを元にコーディングしたり、実装していくじゃないですか。
06:03
その時に、ここどうするんだろうっていうのを思うんですよ、実装していく作業の中で。
それがね、結構いろんなところがあって、クリックできるボタンがあるけど、そこにマウス乗った時に何が起こるかっていうのが作られてないとか、
変化する可能性のある要素に対して何もされていないと一個一個確認しないといけないっていうのが結構あって、
ボタンとかリンク系はそうですし、フォームも普通の時のフォームと入力中のフォームとデザイン変わったりするんですけど、
そういう時どうするかとか、フォームにエラーが出たらそのエラーはどう出すかとか、分岐があるんですよね。
それを考えられていないと結構きついっていう。
一番よくあるのが、デザイン作る時って一番理想的な状態で作られてるんですよ。
でも場合によってはそんな綺麗にいかない時があると。
例えばお知らせ部分とかもいい感じの文字数でいい感じの写真で収まってるけど、
実際に運用したらタイトル短い時もあればめっちゃ長い時もあるとか、
写真もいい感じの写真やけどめっちゃちっちゃい写真入る可能性あると。
その時に拡大して表示させるのか、元のサイズのまま出すのかとか、
作る時は考えなきゃいけないんですよね。
どう処理しようかなっていうのが。
自分で構築、HTML書くなりするのが一番こういうところを考えるんだっていうのがあるんで、
作ってみるというのが一番。
今なんかでもAdobeですごい便利なの出ましたよね。
XDですか。
XDか、イラレでデザインするみたいにウェブでデザインしていける。
あれ便利ですね。
便利ですね。
Adobe今一番力入れてるんじゃないかなと思うんですけど。
使ったことないですけどあれむちゃくちゃいいみたいですね。
Photoshop、イラレっていうのはデザインツールと呼ばれるやつなんですけど、
AdobeのXDとか最近だったらSketchとかFigmaとか、
ああいうやつはUIデザインツールというような感じで言われてて、
アプリとか作る時主にそうなんですけど、
大体パーツを使い回したらそのページ作れるんですよ。
で、そのパーツを管理しやすくなってるのがUIデザインツールと呼ばれるようなやつらですね。
だからフォームのテンプレみたいなやつ、ボタンのテンプレみたいなやつとか、
見出しのテンプレとかがいっぱいあって、
それを組み合わせていったらページが作れるとか、
さっき言ったボタンもマウスが乗った状態と普通の状態と、
クリックできないときのとかいろんな状態があるんですけど、
それを一括管理できるんで、
一個変えたら他のところもバーっと反映されるとかっていうのがあって、
普通のHTMLだけで作るような静的なサイト、
静的ってあれですよ、エッチじゃない方に。
分かっとるわ。
とかは別にフォトショーだろうがいいんですけど、
アプリとかウェブサービスっぽいやつは、
XDとかスケッチとかフィグマとか使った方が便利ですね。
09:03
CSSで書き出しとかもできるんで。
そうなんや。
イラレとかに慣れてる人は一回XDっていうのをアドビでダウンロードして使ってみてもらうのはいいかもしれないですね。
俺は使ったことないけど。
周りのデザイナーはむっちゃ便利って言ってますね。
ウェブはどんどんこうやって便利なソフトが出てくるんでしょうね。
僕も今スケッチメインで使ってるんですけど、
今フィグマに乗り換えようかなと思ってて、
フィグマだったらブラウザでも操作できるんですよ。
共同作業ができるんで、同時に編集ができるんですよ。
こういうミーティングとかをしながら、
ここはこうしよっかっていうのを、
みんなで同じファイルを見ながら作れるっていうね。
めっちゃ便利っすよ。
これからもうそういう時代っすもんね。
前も言ったけど、会社に行くのがちょっとアホらしくなってきたもんね。
だって今まで出力とかしてさ、めちゃくちゃ準備して、
わざわざクライアントの会社までアポ取って時間調整して会議室通されて、
それで見せて、
すごい細かいこととか、いろいろ言われてまた持って帰って、
修正して、またアポ取ってみたいなやり取りが、
離れて画面見ながら一緒に考えれるっていうのをね、
どんだけ生産性上がるかっていうね。
前にこの番組にゲストで来てくれたキモさんのツイッターを見ていると、
赤書きって読むんすか、手書き?
手書きかな。
赤ペンでチェックが入ったやつが送られてくるらしいじゃないですか。
送られてきますね。
紙やってる人はね、手書きはね、必ず見てますね。
そんなん絶対にファイルに直接残せたらそれがいいし、
なんならね、簡単なちょっとした編集だったらそんなに難しくないんで、
デザイナーの人じゃなくてもできたりするんで。
まあね、もう原始的なやり方に慣れちゃってるんでね、
その方がミスが少ないと信じてやってるんですけど、
多分もっといい方法なんてね、ゴロゴロあるんですよね。
そう。なんでね、何の話でしたっけね。
グラフィックデザイナーがウェブデザインを作るときのやってはいけないことみたいな。
要するにいろんな状態があるんで、そこ考えましょうねと。
で、そこでよくあるのがボタンとかフォームとか、
記事がいっぱい入ってる前提なんですけど、リリース直後記事ゼロとかもあるんで、
記事ゼロとか1とかだったらどうするかとか、
まあ一回作ってみるというのが一番いいと思いますけど、
そういうところを考えなきゃいけないということだけ知っておいてもらえたらいいのかなとね。
まあなんか偉そうに言いましたけどね。
いやいやいや、めちゃくちゃ参考になりますよ。ほんまに。
なんかあと紙系グラフィックデザイナーに物申したいみたいなことないんですか。
物申したいもん別にないですけどね。
でも、なんか最近UIとかUXとか言うじゃないですか。
あれね、結構意味わからずに使ってる人多いなと思ってて、
僕なりの解釈なんですけど、ステップで言うと、
12:00
まず何かしらサービスあるじゃないですか。物を売るとか何か作るとかっていうのがあって、
で、UXがあってUIがあって、個別のデザインっていうのが主に4段階あるなと思ってて、
例えばじゃあAmazonだったら物を買えるところじゃないですか。
それがそういうサービスだと。
で、UXっていうのは価値の提供の文脈というのかな。
価値の提供の文脈?
AmazonだったらAmazon使う前と使った後で変化があるわけじゃないですか。
例えば欲しい本があって、Amazon開いて何かしたら本を買えたという状態になるわけじゃないですか。
で、この変化をいい感じに作ってあげるのがUXなんですよ。
どういう時にアプリ開くのかって言ったら、この本欲しいと思って本のタイトル入れたり、
漫画の作者の人の名前入れたりってするじゃないですか。
それがよくある使い方なんで、そこを強化すべきなんですけど、
例えばじゃあ500円以下の本が欲しいって思うことってないじゃないですか。
500円以下の本が欲しいって思うことはないですね、あんまりね。
そういう探し方ってあんまりしないじゃないですか。
あんまりしないですね。
タイトルとか作者とか何か。
キーワード入れるよね。
なんで、じゃあそういう時に500円以下で買える本特集とかしてもあんまり意味ないわけですよね。
それよりは本のタイトルとかを検索しやすい状態がすぐ見つかるっていうのが大事じゃないですか。
で、そこで探して検索結果出てきて買うまでをストレスなくつなぐという設計がUXですね。
で、UIは検索フォームはどういうフォームが使いやすいのかとか、
検索したい時にここにこうすれば絶対検索できるだろうと予想して使うじゃないですか、我々も。
まあUXを促進するための要素。
こういう使い方をしたいなという時にそれ通りの使い方ができるように作ってあげるのがUIですね。
それが第3ステップですな。
ちなみにUXがユーザーエクスペリエンス?
そうです。
なのかな。ユーザーが体験することってことか。
UIがユーザーインターフェースですもんね。
これはなんかいっぱい聞いたことあるけど。
それプラスウェブデザインの要素としてバナーのデザインをこういう感じで統一させるとかテーマカラーはこれでとかそういう要素があると。
できれば全部わかった上で作っていけるといいサービスができると思いますので。
なるほどね。
グラフィックデザイナーがウェブデザイン作るときはじゃあUXとUIはどうやねんっていうのを考えながらやらなきゃいけないってことだよね。
使う人の気持ちになってというか。
確かに。
グラフィックデザイナーってやっぱり2次元でずっとやってきてるからそういう見た目とかすごい優先しちゃうんですよね。
優先しちゃうっていうかそこメインで考えちゃうんですよね。
それがどういう使われ方するのかとかそれがどういう状態になるのかみたいなのはなかなか考えることに慣れてないんですよね。
まあでもそれはちゃんと考えましょうということですね。
結構ね難しいと思うんですけどね。
何をすればいいのか。
15:00
いやでもめっちゃ大事だと思いますわ。
いやなんかウェブデザインだけじゃないなと思いながら聞いてたんですよね今。
例えば俺とハリーさんが団子屋さんやるとするじゃないですか。
あー団子屋さんいいっすね。
テイクアウトね。こんなご時世だからテイクアウト。
ってなった時にいやもちろん味とか見た目とか団子屋さんのロゴマークとかそのブランディングとかどんな梱包とか
グラフィックデザイナーってそういうこと考えるんですよ。
どういうビジュアルでこの団子を伝えるかっていうことを考えるんですけど
さっきハリーさんが言ったそのUXとかUIってどういう食べ方してほしいのかとか
食べてる時にどういう気持ちになってほしいのかとか
なんかそっち側の部分いってんなと思って
なんかその辺なんか料理に行かんとダメですよねやっぱり。
そうですね買い食いするんだったら食べやすいように袋なしで渡してくれるようなスピードとかが大事になってくるし
なんか昔R25っていうフリーペーパーがあってもう今webだけになってんのかな
リクルートが出してるやつなんですけど
今なんかサイバーエージェントの子会社かな
そっかそっか今サイバーエージェントの子会社になってるのか
新R25として
なんかあれも昔フリーペーパーある時は各駅のラックに刺さってて
一つの記事コンテンツが600ワードやったんですよ
でなんで600ワードなのっていうと
だいたい一駅で読める文字の量っていう設定らしいですよ
中途半端にならないっていう
みたいなことを昔リクルートの人がやってました
なんかそれってグラフィックデザイナーがあんまり考えないことやなと思って
どちらかって言ったらディレクターとかプロデューサーとか
ちょっとマーケティングっぽい
エディターとかが考えるようなことなんですけど
でも実際それってめっちゃ重要で
それがあるからデザインが決まるみたいなところもあるんですよね
その見た目だけなんか先行して
何がしたいの何が言いたかったのってわからんパターンも結構あるんでね
そうそうそう
だから僕も最近なんか会社でよく言ってるんですけど
細かい細部の最適化を結構しがちなんですけど
全体の最適化をしないといけないなというのがあって
なんかかっこいいじゃないですか
それらしいこと言ってるでしょ
全体の最適化とかマジ言ったことないわ
団子屋さんで言ったら団子をいかに綺麗に見せるかにこだわるよりも
こういう理由があって団子を綺麗に見せた方がいいみたいなのが
ない状態で作っちゃうとただの自己満足なんですよね
綺麗に団子作るとインスタ映えして
どのコーナーみたいなことを考えてやるんだったら
それはいい輝かせ方なんですけど
でも結局ブランディングするって
結局なぜっていう問いかけを繰り返していくんですよね
その一つのことに対して
例えば団子屋さんで言ったら
なんで団子なの?みたいな質問から始まるんですよね
でそれを深掘りしていったら
その団子ができるまでのストーリーができてくるんですよね
例えば昔すごい貧乏で食い物がなかった時に
18:02
おばあちゃんがすげーうまい団子を作ってくれたとか
いう話が出てきたとした場合に
それが団子ブランドのストーリーになるんですよ
じゃああなたが作る団子は
お客さんにこういう食べ方してもらいましょうとか
根本でこういう提案をしましょうとか
そういうのが見えてくるんですよね
一本の筋に全部つながってるような気がして
これがいわゆるハリー先生が言う全体の快適化ですな
ようやく私も見えてきました
いやーなんか意識高そうでやだな
別に求められてないんでね
僕にあんまり意識高いことは
ゴロゴロトーキングなんで
そうやねゴロゴロしながら喋って聞く番組だからね
なんでね
じゃあデザイナータルモの全体のストーリーを理解して
作っていこうと
そうだね
最後のアウトプットだけにとらわれずに
どういう使い方とかどんな体験をしてもらいたいか
みたいなところも一緒に考えると
より素敵なデザインになるんじゃないでしょうか
どんどんデザイナーとしての幅を広げていって
もらえたら嬉しいなと
今日意識高いなちょっと
次回はIQ下げようと思うんで
ぜひチャンネル登録のほどよろしくお願いします
コメントなどもお待ちしておりますので
ぜひよろしくお願いします
ということで
さよなら
