#26「2021年のミツエーテックラジオを振り返る」
2021年最後のミツエーテックラジオは、これまで公開してきたエピソードをいくつかピックアップして1年を振り返りながらアップデート情報などをお伝えします！
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 橋本
- こんにちは！ ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのポッドキャストです。
2021年もそろそろ終わりますね。年末が差し迫る今回のテーマは「2021年のミツエーテックラジオを振り返る」 ということで、1年を通して人気だったエピソードをピックアップしながら話していきたいと思います。
今回は司会の橋本と、加藤さんと古川さんの3人でお届けします！本日はよろしくお願いします！ - 加藤・古川
- よろしくお願いします！
- 加藤
- まずは今年1年の振り返りということで私の方から、毎月の集計データをもとに人気のあった回などをご紹介したいと思います。
- 古川
- お願いします。
- 加藤
- はい。エピソード別の再生回数TOP3を見てみると、第3位がエピソード10の「AWS Amplify + Nuxt.jsで実現する静的Webサイトのサーバレスアーキテクチャ」で、第2位がエピソード18「2021年のデザイントレンド」、第1位がエピソード17の「新技術から見る次世代のレスポンシブWebデザイン」でした。
- 古川
- TOP3を見てみると、業界動向とかトレンドにまつわる話が人気がある感じがします。
- 加藤
- たしかにそうですね！やっぱり話題になっている技術は皆さん気になるところですよね。
プラットフォーム別にみると、Spotify上での再生数が圧倒的に多くて、ついでApple Podcast、YouTube、Google Podcastという感じでした。 - 橋本
- Google PodcastよりもYouTubeのほうが多いのは配信のタイミングから考えるとちょっと意外ですね…！
- 加藤
- そうなんですよね。やっぱり全体のユーザー数としてはYouTubeのほうが多い印象があるので、そう考えると自然な結果かもしれないです。ちなみに今では200名以上の方に番組のフォローだったり、チャンネル登録いただいています！ありがとうございます！
- 橋本
- いつも聞いていただいている皆様、ほんとうにありがとうございます！
- 古川
- ありがとうございます！
- 橋本
- ではここからは、今年とくに人気だったエピソードについて振り返りながら話していきたいと思います。
まずは「AWS Amplify + Nuxt.jsで実現する静的Webサイトのサーバレスアーキテクチャ」について話したいと思います。このエピソードでは加藤さんと古川さんが、AmplifyとNuxt.jsを用いた静的Webサイトの構築方法や、サーバレスアーキテクチャの利点についてお話されてましたね。 - 古川
- 一言で言うと自分がめっちゃAmplifyすごい！って言ってる回でした（笑）
- 加藤
- Nuxt.jsで作成したサイトを、セキュアで高速なホスティング環境上で配信するのをコマンドひとつで実行できるっていう話でしたね。
- 古川
- いわゆるJamstackアーキテクチャの話だったんですが、この後Jamstackに焦点をあててさらに深堀りしまして、「政府統一Webサイト構想が「Jamstack」に注目している理由とは？」というエピソードと、「Jamstackの技術構成と技術選定のポイント」という2つのエピソードを公開しました。こちらもぜひ聞いていただきたいなと思っています。
- 加藤
- はい。よろしくお願いいたします！ちなみに、エピソード10では昨年2020年のAWS re:Inventで発表されたAmplifyのアップデートについて話してくれていましたが、今年のre:Inventではなにか注目のアップデートはありましたか？
- 古川
- Amplify Studioっていう、もうやばくてめちゃくちゃ熱いのがありました。
これは平たく言うとローコード開発ツールです。海外で超人気のデザインツールのFigmaで作ったコンポーネントを、Reactコンポーネントに自動で生成してくれたり、あとはブラウザ上で視覚的にコンポーネントとデータをバインドしたりと、動的なWebアプリケーションをより簡単に、さくっと作れるようになりました。さらにこのサービスによって、デザイナーと開発者の距離がぐっと縮まって、開発スピードとか、フィードバックループの回しやすさの向上が期待できるのかなと思っています。 - 橋本
- 言葉だけ聞いてもかなりすごそうですね。ちなみにFigmaは2021 Design Tools Surveyを見ても圧倒的な人気でしたよね。
- 古川
- そうですよね。これまでもローコードツールってたくさんあったと思うんですけど、デザインデータの取り込みからバックエンドのつなぎこみまでを一気通貫でできるツールは今までになかったんじゃないかなと思います。
- 加藤
- デザインデータをそのままコンポーネント化できるってすごいことだと思うんですけど、逆に言うとデザイナーさんがこれまでよりも「コンポーネント」という単位をさらに意識してデザインする必要がありそうだなーという感じはしますね。あとコンポーネントの見た目と、コンポーネントの機能をどう分離させていくのかっていうところがちょっと気になってます。
- 古川
- そうですね…。ちょっと簡単に触ってみて、具体的なところはまたテックラジオでお話ができればと思っています！
- 橋本
- 続いては2021年のデザイントレンドですかね。このエピソードはアートディレクターの遠藤さんをゲストに呼んで話していただきました。
- 加藤
- デザイナーさんから見たWebデザインのトレンドの話を聞いたり、開発者視点で感じるトレンドがどんな影響をデザインに与えるのかという話をしました。
- 橋本
- その中で話題に上がっていた、バリアブルフォントについてはのちの「Webフォントと表示パフォーマンス」というエピソードで深堀りしましたね。
- 加藤
- タイポグラフィーは引き続きWebサイトの重要な役割をもっていくと思うので、気になった方はぜひ聞いてみてください。
ちなみに、エピソードの中でトレンドというのは単純に見た目がいいから流行っているわけではなくてOSだったりその他のツールなど、いろんな外部要因も関係しているんですね、という話をしたんですよ。
なので、さっき話していたFigmaのようなデザインツールが、デザインシステムやローコードツールの発展を後押しして、それがさらに新しいトレンドになって…みたいなことも考えられるので、今度はその辺りのツールのアップデート状況とか踏まえながら、これからどんなトレンドがきそうですかねー？みたいな話をしてみたいなーと思いました！ - 橋本
- おー面白そうですね！ちなみに無茶ぶりするんですが加藤さんは、2022年以降のデザイントレンドは、何が来そうだと思いますか？
- 加藤
- そうですね…トレンドを左右する外部要因としてはまず「サステナビリティ」がひとつ挙げられるかな、と思います。
- 古川
- 脱炭素化っていうワードはニュースでよく見る言葉になりましたよね。企業の取り組みが本格化してきていて、環境省の調べによると、世界的に見ても日本企業の脱炭素化に対する取り組みはトップレベルっていうデータも見たことがあります。
- 加藤
- はい。今年3月に当社取締役CTOの木達さんと話した「サステナブルWebデザイン」というエピソードの中で木達さんが仰ってたように、各企業が脱炭素化に向けて「自分たちがやれること」を模索しているっていう現状の中で、Web制作も今後脱炭素化への取り組みを強化していくっていう流れはあるかなと思います。
たとえばGoogleは10月に「Carbon Footprint」っていうサービスを公開していて、Google Cloud Platformのサービスを使用したことで排出された炭素量を測定できるようになったんですよね。サステナブルWebデザインの回でも話していた通り、何かを改善するにはまず計測することが必要になると思うので、逆に言えばこういった計測しやすいところから少しずつ取り組まれていく、ということはあるかもしれません。 - 橋本
- なるほど。サステナブルWebデザインのアプローチは表示パフォーマンスやアクセシビリティ、UXなどの観点がありますが、見た目に影響がありそうな面で言うと、ダークカラーをより多く使うとか、画像やアニメーションが少ないっていう、低い消費電力を意識したデザインとかになるんですかね？
- 古川
- 開発者目線でパッと思いつくのはそうですかね。このあたり、デザイナーさんたちに聞いてみたら面白そうですね。
- 加藤
- そうですね！来年のエピソードのネタリストに加えておきたいと思います！
- 橋本
- 最後は「新技術から見る次世代のレスポンシブWebデザイン」について話したいと思います。このエピソードでは、Google I/Oで取り上げられたセッションをもとに、これまでのレスポンシブWebデザインの幅が広がってきているということをお話ししました。
- 古川
- 親コンテナのサイズに基づいてレイアウトを切り替えるContainer Queriesや、prefers-color-schemeなどのユーザー設定ベースのメディアクエリ、Viewport Segments Media Queriesのようなフォームファクターに対応するためのメディアクエリなど、さまざまな要素がレスポンシブWebデザインの軸として追加されてきているというお話でした。
- 橋本
- そうですね。その後のアップデートについていうと、11月に公開されたGoogle Chromeのバージョン96でprefers-contrastがサポートされ始めたりとか、あとはデュアルスクリーンの検出に使用するメディアクエリの仕様も大きく変わっていて、以前は2つのディスプレイが縦に並んでいるか、横に並んでいるかを判定する仕様だったのが、縦と横にディスプレイがいくつ並んでいるかによってスタイルを変更できるようなメディアクエリになっていました。
- 古川
- それってつまり、将来的に2つ以上のディスプレイが登場しても対応できるようにってことですかね？
- 橋本
- そうですね。あとはVRやARで複数のディスプレイを並べたりすることも想定されているのかもしれません。
この画面のまたがりを検知するViewport Segments Media Queriesは現状Chromium製のブラウザのみに試験的に実装されている段階のため、正式にリリースされるまでには仕様が変更されるかもしれませんので、その点はご注意ください。 - 加藤
- レスポンシブ周りでいうと、やっぱりContainer Queriesの動きが気になるところなんですけど、そのあたりでは何か動きがありましたか？
- 古川
- Container Queriesに関してはまだどのブラウザでも正式に実装されてないですね。ただ、仕様周りは結構変更があって、Container Queries用の単位が追加されました。たとえば、ビューポートの幅とか高さを指定するときは「vh」や「vw」を単位として使うと思うんですけど、コンテナの幅や高さを指定するときは「cqw」や「cqh」っていう単位を使うよう想定しているみたいです。
- 橋本
- なるほど。Container Queriesもまだ試験的に実装されている段階なので、今の仕様がそのまま採用されるかどうかは未定だと思うんですけど、着実に仕様策定は進んでいるんですね。
- 加藤
- なるほど。ありがとうございます。やっぱりこれまで画面幅だけを考えて設計してきたので、このエピソードを聞いたときは、正直考慮すべきことがどんどん増えていってて管理や検証が大変そうだな、という印象はやっぱりありましたね。まだ答えは出てないですけど、これから運用に耐えうるWebサイトを作っていくには、デザインシステムなどを活用してデザイントークンだったりコンポーネントをしっかり管理していく必要がありそうだなぁと感じました。
- 橋本
- はい、ということで今年最後のミツエーテックラジオは以上になります。何かお二人からありますか？
- 加藤
- 私のおすすめである「Portalsの回」と、「Web Storiesの回」と、「Web XRの回」はどれも再生回数が伸び悩んでいるので、ちょっと悲しいですね笑
- 古川
- まあ、内容がニッチすぎるかもですね笑
自分は、今日話した内容含めて、これまで公開したエピソードを振り返ってみて、やっぱり少し時間が経っただけでいろいろアップデートがあるんだなぁと実感しました。 - 橋本
- そうですね。ぜひみなさん、各種配信プラットフォームでフォローして頂いて、更新されたら鮮度が落ちる前にすぐ聞いていただけたらなと思います！
- 加藤
- そして、いつも聞いてくださっている皆さま、本当にありがとうございます！2022年もミツエーテックラジオではニッチなネタからトレンドまで、幅広いトピックを話していく予定ですので、引き続きのご愛顧と、同僚・上司・ご家族・ご友人にもシェアいただけると嬉しいです！
- 橋本
- はい。よろしくお願いします！
最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。
また、このPodcastはこれまでの配信プラットフォームに加え、Amazon Musicでも同様に配信をスタートしたので、Amazon Music使ってるよという方はぜひフォローお願い致します！ 「#ミツエーテックラジオ」でご意見、ご感想、こんなことを話してほしいというリクエストなどお待ちしております。
それでは今日はこの辺で！ - 橋本・加藤・古川
- みなさんよいお年を～！