週刊Webテク通信

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

ネットで見かけた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 動的サイトを静的サイトに変換するサービス

おすすめ記事

記事・ニュース一覧