週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけた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 オープンソースの自動化ツール

今週の気になるWebネタ

Microsoftは正しかった。Surface Neo/Duoの2画面はフォルダブルよりも賢い選択 - Engadget 日本版https://japanese.engadget.com/2019/10/04/microsoft-surface-neo-duo-2/

米Microsoftは2画面ディスプレイを搭載したWindowsデバイス「Surface Neo⁠⁠,同じく2画面式の折りたたみスマートフォン「Surface Duo」を発表しました。発売は2020年です。

最近流行りの折りたたみ(フォルダブル)画面ではなく,2つの画面をヒンジでつないだというのが現実的な最適解ということですね。スマートフォンのDuoは,マイクロソフトがAndroidを搭載したマシンを出すことでも話題になっています。

Neoは片方の画面の上にキーボードを置いて,余ったところをトラックパッドとして使ったり,MacBookのTouch Bar のように使ったりできます。NeoもDuoもペンでの操作もできるそうで,Neoのペンはマグネットで本体に装着できます。いろいろとライバルを真似てる感じもしますが,なかなか面白いマシンだと思います。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/