見出し画像

Webデザイン解説のムーテレがすごい

youse_jp

ムーテレとは

皆様はムーテレというYouTubeチャンネルをご存知でしょうか？
ムーテレは、株式会社クオートワークスの代表を務めるムラマツヒデキさんが運営している、業界最前線の目線で主にデザインの考えを発信されているチャンネルです。

デザイン歴15年の東京の会社社長が、
「教えるプロからではなく、実績からモノを語れる現役のプロたちを巻き込みながら、有益な情報をシェアする番組。」です。
隔週で色々配信しています📺

MUUUUU.TV(ムーテレ) YouTubeチャンネル概要 より
https://www.youtube.com/@muuuuu_tv/about

百聞は一見にしかずなので、未見の方はとにかく動画を見にいっていただけますと私が記事を書く励みになりますのでお願いいたします！
デザイナーやディレクターだけでなく、エンジニアも含めWebに携わる方は特に色々な発見があると思います。


ココがすごい！

すごいとしか言えないほど語彙力が吹っ飛ぶくらいにすごいのです。
一度には語れないのでいくつかピックアップしてご紹介します。

業界内外で有名なサイトを分析

超一流になるには超一流のサイトをベンチマークにするということで、その道の超一流のサイトがなぜ使いやすく惹かれるのかを分析されています。

テキストとビジュアルで伝わる解説

テキストのみの解説では実際のUIやグラフィックは想像で補いますが、ムーテレでは実際にサイトの見た目や動きをテキストと併用して解説されるので、抽象的な概念とそれを落とし込んだものが具体的に伝わります。

腑に落ちる深い考察

解説されているサイトを見て、私がその良さを説明しようとするとイマイチな推測なってしまいますが、ムラマツさんの実績や経験を元に時には心理学や科学の引用を用いて、「なるほど、そういう事か！」ととても腑に落ちる考察を言語化されています。

親近感のあるオープニングとエンディング

淡々と解説だけしていくだけでなく、遊び心のあるオープニングやエンディングがあることで親近感が湧き、敷居の高さを下げて門戸を広げていると思います。個人的には意外と重要な要素だと感じています。

いくつかの動画紹介

ここで、いくつかの動画を感想を交えて紹介しようと思います。
チャンネルではこれだけでなくもっと動画が投稿されているので是非ご覧いただけますと幸いです！
また、ブレイキングデザインというめちゃくちゃ面白くて勉強になる企画があるのですがここでは書ききれないので、別で記事を書いてみようと思っています。

Webデザイン歴15年のおじさんが、よくある業界の悩みを切りまくる編

ムーテレの初回ライブ配信を編集した、業界の悩みに答えていく動画です。
実務でよく遭遇しているけど、結局どうすればいいの？という悩みに対してアドバイスされています。デザインと実装の齟齬やアクセシビリティ、さらにはクライアントへのプレゼンなど悩みは多岐にわたります。
私は特にプレゼンテーションに興味があり、課題解決のロジックをベースに惹かれるような格好良い雰囲気で発表するというのを掘り下げてみようと思いました。

【サイト分析】「阿部守商店編」秀逸なウェブサイトをプロ目線で超徹底解説分析します【Webデザイナー必見】

株式会社ユニットベース の宮内さんをゲストに阿部守商店というサイトを分析されている動画です。
機能美を保ちつつ購買欲を高めるようなバランスの取れた表現の考察から、細やかな動きまで意見を交わして、その表現に至る理論をわかりやすく咀嚼して解説されています。
私は、単純な見た目だけでなくECサイトとしてユーザーの購買前から購買後までの体験をこんな風に設計されているのだと興味深くなりました。

デザイン力を最速で高める高負荷訓練「トレース訓練」の正しいやり方を経験15年が紹介します

Webデザインの模写について、真に実力を上げる手法が分かる動画です。
模写するサイズから写真の選定、言語化や思考の大切さがわかります。
模写と言えど重ねて上からなぞったり横にならべたりするのではなく、見本を見てから自分なりに作成して、完成した時に見本と何が違うのかを発見して言語化していけるようにすることが大事だと身に染みました。
私は写真についてはついつい見本から引用してしまいそうだったので、ちゃんと一から作成や選定ができるようにならなければと感じました。

iPhone14サイトから学ぶWebデザイントレンド2022

iPhone14のサイトを分析して、最先端な表現を学べる動画です。
他のサイトでは見かけない様々な表現に対して論理立てて考察されていて、応用するとしたらどこで使うかまで紹介されています。
私は考察したものの根拠を掴んだりどう言語化したり応用すれば良いのかが手探りなのでとても勉強になりました。

現場で戦えるWebデザイン配色テク。本当に使えるものだけ紹介します。

Webデザインで使う色を、論理立てて選択できるようになる動画です。
色相・彩度・明度といった基礎からロジック立てた配色方法や印象から具体的にどこで何色を使うか、写真自体の印象や視覚的なアクセシビリティの注意点など様々な点を網羅されています。
私が意外だと思ったのが、Twitterのサイトのモノトーンの中に少し青みが入っているところでした。このテクニックで雰囲気を統一しているのかと新しい発見がありました。

ムーテレを見て感じたこと

ムーテレを見て、こんなにデザインって面白くて奥深いのだと驚きました。そして業界の最前線の目線で論理や考察を聴けるというのはとても貴重で、他の動画でここまで踏み込んでいるものはほぼ無いのではと個人的に感じました。また、多くの発見や学びがあると同時に、実務のデザインフィードバックでもこれほど贅沢なものは中々もらえないかなと思いました。
私は過去に少しデザイナーをやっていたのですが、ムーテレを見てデザインの楽しさや奥深さを再認識して、もう一度デザイナーをやってみようと決心しました。今の業務であるプログラミングの勉強や、AIの台頭や業界の変化から生き残る術を身につけるなど他にもやることはたくさんあるのですが、少しでもデザインを継続して続けていきます。やることは既に筋道立てており、タイポグラフィからレイアウトなど具体的に何が足りていれば良いかを逆算して具体的に必要な知識を学んでいきます。動画を見て満足ではなく、アウトプットして自分なりに言語化して応用できるようにすることが大事だと思いました。その中で、判断に迷ったり正解が出ない時にムーテレを見返して勉強していければと思います。


この記事が気に入ったらサポートをしてみませんか？