gihyo.jpサイトのロゴ

週刊Webテク通信

2019年10月第2週号1位は、なぜプログレッシブウェブアプリがモバイルウェブの未来なのか、気になるネタは、Microsoftは正しかった。Surface Neo/Duoの2画面はフォルダブルよりも賢い選択

2019-10-10

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2019年9月30日～10月6日の間に見つけた記事のベスト5です。

1. Why Progressive Web Apps Are The Future of Mobile Web [2019 Research]https://ymedialabs.com/progressive-web-apps

なぜ、プログレッシブウェブアプリ（PWA）がモバイルウェブの未来なのかを解説した記事です。

  1. プログレッシブウェブアプリがすべての適切なビタミンを摂取したウェブサイトである理由
  2. PWA vs ネイティブアプリ vs モバイルウェブサイト
  3. 主要コンポーネント
  4. 実際のプログレッシブウェブアプリ
  5. プログレッシブウェブアプリの参考リンク集
図1　なぜプログレッシブウェブアプリがモバイルウェブの未来なのか
図1　なぜプログレッシブウェブアプリがモバイルウェブの未来なのか

2. Design Systems for Developers | Storybook Tutorialshttps://www.learnstorybook.com/design-systems-for-developers/

開発者のためのデザインシステムを作るためのガイドです。全9ページに渡って解説しています。

以下、デザインシステムについての開発者の視点を学ぶための、デザインシステムの3つの技術的なパーツとのことです。

  • 再利用可能な一般的なUIコンポーネント
  • デザイントークン：ブランドの色や空白などの値
  • ドキュメントサイト：使用方法、説明、するべきこと・してはいけないこと
図2　開発者のためのデザインシステムを作るためのガイド
図2　開発者のためのデザインシステムを作るためのガイド

3. Adaptive Photo Layout with Flexbox | CSS-Trickshttps://css-tricks.com/adaptive-photo-layout-with-flexbox/

写真を隙間なく敷き詰めて表示する、シンプルで軽量なCSSテクニックです。

flexboxとobject-fitを使うのがポイントです。スマートフォンのサイズでは、写真は1カラムで縦に並びます。

図3　写真を隙間なく敷き詰めて表示するCSSテクニック
図3　写真を隙間なく敷き詰めて表示するCSSテクニック

4. 15 Best CSS Libraries for 2019 | Webdesigner Depothttps://www.webdesignerdepot.com/2019/10/15-best-css-libraries-for-2019/

CSSライブラリを15個紹介した記事です。

Bootstrapのような大規模のものではなく、アニメーション、フォーム、シャドウなど特定の用途向けのシンプルで小さなライブラリが中心です。

nova-skeletonsという、プロトタイプ用に画像や文字の入るところをグレーのブロックで表示するライブラリは面白いですね。

図4　CSSライブラリを15個紹介
図4　CSSライブラリを15個紹介

5. 20+ Cutting-Edge Personal Website Designs to Inspire You | Design Shackhttps://designshack.net/articles/inspiration/personal-website/

最先端の個人ウェブサイトを20個以上紹介した記事です。

サイトを開くといきなり絵が描けるもの、円形のオブジェクトを動かして四角形を変形させられるものなど、インタラクションに凝ったものが目立ちます。

図5　最先端の個人ウェブサイトを20個以上紹介
図5　最先端の個人ウェブサイトを20個以上紹介

そのほか、最近の記事の中から、気になるニュース記事を紹介します。

先週の気になるWebサービス

n8n.io - Workflow Automationhttps://n8n.io/

n8nは無料で使えるオープンソースの自動化ツールで、IFTTTやZapierの代わりになるサービスです。IFTTTでの「レシピ」にあたる自動化処理の手順をまとめた「Workflow」は、自分で作ることはもちろん人が作ったものも利用できます。

使用例が動画で掲載してあり、フォームサービスのTypeformでの入力内容をGoogle スプレッドシートに連携させて、フォームの入力内容による条件分岐でSlackかメールに内容を送信するWorkflowを作る手順を見ることができます。

対応しているサービスがちょっと少ないようにも感じましたが、PDFの内容によって処理したり、ウェブサイトのスクリーンショットを撮ったり、画像加工もできるようです。この手のサービスはいくつあっても使い分ければいいので、知っておくといつか役立つかもしれません。

図6　オープンソースの自動化ツール
図6　オープンソースの自動化ツール

おすすめ記事

記事・ニュース一覧