週刊Webテク通信

2019年6月第1週号1位は、 もう終わったウェブデザインのトレンド、気になるネタは、アップル、約4年ぶりに「iPod touch」新モデル--6色展開で2万1800円から

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

1. 10 Web Design Trends We’re Already Over | Design Shackhttps://designshack.net/articles/graphics/5-web-design-trends-were-already-over/

もう終わったウェブデザインのトレンドをまとめています。

  1. 全てがビンテージ
  2. 近日公開ページ
  3. とても細いタイポグラフィ
  4. ソーシャルメディアフィードの埋め込み
  5. メインイメージのスライダー
  6. 重いビデオ
  7. ページ読み込みのアニメーション
  8. 過剰なアイコン
  9. メガメニュー
  10. ゴーストボタン(枠だけのボタン)
図1 もう終わったウェブデザインのトレンド
図1 もう終わったウェブデザインのトレンド

2. 6 Ways Digital Illustration Improves User Experience for Web and Mobilehttps://yourstory.com/mystory/6-ways-digital-illustration-improves-user-experien

デジタルイラストが、ウェブ&モバイルのユーザー体験を向上する6つの方法を紹介しています。

  1. イラストはUIを必要な情報とともにいっぱいにする
  2. イラストはスタイルと芸術性とのバランスを調整する
  3. イラストはユーザーにしてほしい行動への動機を与える
  4. イラストはユーザーを喜ばせ、感情にアピールする
  5. イラストはユーザーのイライラを抑えられる
  6. イラストはブランドのアイデンティティを伝える
図2 イラストがユーザー体験を向上する6つの方法
図2 イラストがユーザー体験を向上する6つの方法

3. Automation for Designers: An Introduction - UXcellencehttps://uxcellence.com/2019/automation-for-designers-intro

デザイナーのための自動化について解説した初歩的な記事です。

自動化に役立つ以下のツールを紹介していました。

  • Zapier
  • IFTTT
  • TextExpander
  • Hazel
  • Siriショートカット
  • Automator
図3 デザイナーのための自動化のすすめ
図3 デザイナーのための自動化のすすめ

4. Zdog · Round, flat, designer-friendly pseudo-3D engine for canvas and SVGhttps://zzz.dog/

ZdogはcanvasとSVGのための3D JavaScriptエンジンです。シンプルな3Dモデルをウェブ上でレンダリングし、ドラッグで動かせます。

以下のような特徴があります。

  • 軽量
  • ポリゴンのジャギーが出ず滑らか
  • モデリングは単純明快な宣言型APIで行われる
図4 ベクターベースの3D JavaScriptエンジン
図4 ベクターベースの3D JavaScriptエンジン

5. SEO Suite - 100% Free SEO Toolshttps://seosuite.net/

SEO Suiteは、SEO関連のツールをいろいろ取り揃えています。

  • メタタグのジェネレーター
  • XMLサイトマップのジェネレーター
  • バックリンクのチェッカー
  • ドメインの年数チェッカー

など、ちょっとした便利ツールが無料で使えます。

図5 SEO関連のツールを多数提供しているサイト
図5 SEO関連のツールを多数提供しているサイト

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

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

CodeDragon : Learn web development with simple drag-and-drop blocks!https://codedragon.org/

CodeDragonはオンラインで使えるHTMLとCSSのコードエディタです。ドラッグ&ドロップ操作でブロックを配置することでコーディングできるのが特徴です。

子供向けのプログラミングツールのようなUIで、逆コの字型のブロックを入れ子にしながらコーディングしていきます。HTMLの構造上、入れられない場所にはブロックを配置できません。テーブル、リストなどあらかじめセットになったブロックも用意されています。

ブロックを組み立てていくと自動でコードが生成されます。ウェブページとしてのプレビューもリアルタイムで可能です。タグを入力する必要がなく、初心者の勉強用に良さそうです。チュートリアルはこのツールを学ぶとともに、HTMLの初歩を学ぶのにも役立つはずです。

図6 ドラッグ&ドロップ操作で使えるHTMLとCSSのコードエディタ
図6 ドラッグ&ドロップ操作で使えるHTMLとCSSのコードエディタ

おすすめ記事

記事・ニュース一覧