週刊Webテク通信

2019年8月第1週号1位は、 2019年のウェブデザインのトレンドを19個、気になるネタは、PC-8001誕生40周年、NECがオマージュを込めた「特別モデル」発売か

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

1. Top 19 Web Design Trends 2019 | Nice, Very Nice!https://niceverynice.com/blog/web-design-trends-2019/

2019年のウェブデザインのトレンドをまとめた記事です。

  1. 感情を引き出すデザイン
  2. 色は多くのことを表す
  3. 目的を持ったアニメーション
  4. 音声コマンドへの対応
  5. シングルページへの回帰
  6. 超現実主義のデザインへ
  7. 古めかしいタイポグラフィのデザインへ
  8. UXに焦点を移す
  9. バリアブルフォント
  10. 分割スクリーンは次の重要なトレンド
  11. より多くのテキストが必要
  12. データの視覚化にもっと焦点を当てる
  13. より多くのグラデーションを追加
  14. モバイル向けアニメーションを使う
  15. 3Dフラットデザインを使う
  16. より深くリアルなデザイン要素を目指す
  17. 自然な形の要素へ
  18. マイクロインタラクションを使う
  19. もっとモバイルにも動画を
図1 2019年のウェブデザインのトレンドを19個
図1 2019年のウェブデザインのトレンドを19個

2. Why Toggle Buttons Are Confusinghttps://uxmovement.com/buttons/why-toggle-buttons-are-confusing/

トグルボタンが混乱を招く理由を紹介しています。

選択・非選択の状態を色の反転で識別させるのは、ユーザーを混乱させるのでよくないとのことです。

選択状態のときに、通常状態のものに対して以下の変化を加えるのが良いと解説していました。

  • 薄い背景色
  • ラベルテキストを太く
  • 暗く、太い枠線
図2 トグルボタンが混乱を招く理由
図2 トグルボタンが混乱を招く理由

3. Gradient Magichttps://www.gradientmagic.com/

CSSグラデーションを使って生成するいろいろな模様のギャラリーです。CSSコードをコピーできます。

普通のグラデーション、ストライプ、チェック模様、角度を変えた図形を重ね合わせたような模様などが用意されています。

図3 CSSグラデーションを使って生成した模様のギャラリー
図3 CSSグラデーションを使って生成した模様のギャラリー

4. Delesign - Free Designshttps://delesign.com/free-designs/

ロイヤリティフリーのデザイン素材、テンプレートなどを配布しているサイトです。

ランディングページデザインとメールテンプレート(PSDファイルとHTML&CSSコード⁠⁠、イラスト、アイコン、ソーシャルメディア向けグラフィックのテンプレートなどがあります。

イラスト、アイコンは色をカスタマイズできます。

図4 フリーのデザイン素材などを配布しているサイト
図4 フリーのデザイン素材などを配布しているサイト

5. The Top 13 Sites For Downloading Completely Free Sound Effectshttps://speckyboy.com/free-sound-effects/

BGMや効果音として使えるフリーのサウンドファイルを配布しているサイトをまとめた記事です。

YouTubeなどの動画制作や、ポッドキャスト制作などに役立ちそうです。

図5 フリーのサウンドファイルを配布しているサイトのまとめ
図5 フリーのサウンドファイルを配布しているサイトのまとめ

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

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

Versoly - SaaS Landing Page Builderhttps://versoly.com/

Versolyは、ランディングページを作るためのウェブサイトビルダーです。初心者は簡単に使え、上級者はより細かくコントロールできる設計になっています。

いつでもコードエディタを開いて、HTML、CSS、JavaScriptを直接編集できるのが、大きな特徴だと思いました。要素を選んでコードエディタを開くと、その部分のHTMLが表示されます。

もちろんコーディングができなくても使えるよう、カード型レイアウトや価格表などのよく使う要素が用意されています。有料のプロ版にすると、独自ドメインを設定できますし、サイトをエクスポートできるようになるのも便利なところです。

図6 ランディングページを作るためのウェブサイトビルダー
図6 ランディングページを作るためのウェブサイトビルダー

おすすめ記事

記事・ニュース一覧