週刊Webテク通信

2020年5月第2週号 1位は，成功するワイヤーフレームの作り方，気になるネタは，ビデオ会議ツール「Google Meet」が個人でも無料で利用可能に／Facebookがビデオ会議機能「Messengerルーム」発表

Webテク, Webデザイン, Web広告, ワイヤーフレーム, CSS, ビデオ会議

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

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

1. How To Succeed In Wireframe Design — Smashing Magazinehttps://www.smashingmagazine.com/2020/04/wireframe-design-success/

成功するワイヤーフレームの作り方をまとめた記事です。

なぜワイヤーフレームを使うのか，ワイヤーフレームのベストプラクティス，ワイヤーフレームデザインツール，ケーススタディを紹介しています。

ワイヤーフレームのベストプラクティスは以下。

  1. 最小限の色数に抑える
  2. シンプルなデザインのコンポーネントを使う
  3. 一貫性を維持する
  4. 実際のコンテンツを使用する
  5. 注釈を入れる
  6. 忠実度の低いものを基準に必要に応じて高いものに
  7. ワイヤーフレームをプロトタイプに拡張

図1　成功するワイヤーフレームの作り方

図1　成功するワイヤーフレームの作り方

2. Common webpage design mistakeshttp://blog-en.tilda.cc/articles-website-design-mistakes

よくあるウェブページデザインの間違いについてまとめた記事です。

一般的なランディングページデザインと記事デザインに分けて，それぞれの避けるべき間違いを細かく解説しています。

図2　よくあるウェブページデザインの間違い

図2　よくあるウェブページデザインの間違い

3. 3 Essential Design Trends, May 2020 | Webdesigner Depothttps://www.webdesignerdepot.com/2020/05/3-essential-design-trends-may-2020/

ウェブデザインのトレンドを3つまとめています。

  1. アンバランスな空白
  2. 新たな概念の画像スライダー
  3. コロナウィルスのデータを視覚化したサイトが急増

図3　ウェブデザインのトレンド3つ

図3　ウェブデザインのトレンド3つ

4. Selection in CSShttps://ishadeed.com/article/selection-in-css/

選択されたテキストをCSSでスタイリングする方法を解説した記事です。

文字の下半分くらいの高さで背景色が付くようにしたり，カーソルが外れるとアニメーションして背景色部分の幅を変えるなど，実験的なノウハウが興味深いです。

図4　選択されたテキストのCSSスタイリング

図4　選択されたテキストのCSSスタイリング

5. CSS Section Separator Generator | wweb.devhttps://wweb.dev/resources/css-separator-generator

セクションの区切りを斜めやギザギザにするCSSのジェネレーターです。

6つの形をベースに，サイズや角度などを調整できます。

図5　セクションの区切りを斜めやギザギザにするCSSのジェネレーター

図5　セクションの区切りを斜めやギザギザにするCSSのジェネレーター

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

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

A static site for your dynamically-generated website - Sitesaucehttps://sitesauce.app/

CMSなどで生成した動的サイトを自動で静的サイトに変換するサービスです。バックアップ目的ではなく，静的サイトとして公開し続けることを目的としています。

ローカルでCMSを動かし，このサービスで公開することもできます。静的サイトジェネレーターのように使えるということですね。

月19ドルでサイト数は無制限です。コスト的にはクラウドのCMSサービスに比べて優位性はそれほどありませんが，履歴やリンクチェックなどの機能もあります。

図6　動的サイトを静的サイトに変換するサービス

図6　動的サイトを静的サイトに変換するサービス

今週の気になるWebネタ

ビデオ会議ツール「Google Meet」が個人でも無料で利用可能に 5月初旬から順次 - ITmedia Mobilehttps://www.itmedia.co.jp/mobile/articles/2004/30/news085.html
Facebookがビデオ会議機能「Messengerルーム」発表，50人まで利用可能 | マイナビニュースhttps://news.mynavi.jp/article/20200428-1025041/

Googleがビデオ会議ツール「Google Meet」を無料で提供すると発表しました。9月末までは会議の時間も無制限です。会議の録画など高度な機能を使うにはG Suiteが必要ですが，G Suite Essentialsというお手軽なプランも登場しました。

FacebookのMessengerは以前からビデオチャットができましたが，Zoomのようにアカウント登録なしでビデオ会議ができる「Messenger Rooms」というサービスを開始しました。今後機能強化していく予定です。

Zoomのセキュリティ面が問題になっているところで，強力なライバルが揃ってきました。ユーザーにとっては選択肢が増えるのはいいことですね。なお，Zoomの無料で3人以上の場合の時間制限40分は，会議を早く終わらせる効果もあるので必ずしもデメリットではないと思います。

Webテク, Webデザイン, Web広告, ワイヤーフレーム, CSS, ビデオ会議

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote