週刊Webテク通信

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

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

ネットで見かけた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 ランディングページを作るためのウェブサイトビルダー

今週の気になるWebネタ

PC-8001誕生40周年,NECがオマージュを込めた「特別モデル」発売か - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1907/25/news141.html

NECのパソコンPC-8001の誕生40周年を記念した発表会が開催され,PC-8001用のBASICプログラムが動作するハードウェアが登場するそうです。

当時はパソコンよりもマイコンという呼び方が主流で,パーコンという言い方もありました。ゲームを遊ぶために,雑誌に載っているプログラムを見ながら手入力する写経のようなことをしていたのも,歴史を感じますね。

PC-8001の登場からしばらくたって,日本のマイコン界はNEC,シャープ,富士通が御三家的な存在となりました。今はNECのパソコン事業はレノボと事業統合して,NECパーソナルコンピュータ(NEC PC)という別会社になっていることにも時代を感じます。

著者プロフィール

芦之由(あしのよし)

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

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

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