週刊Webテク通信

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

Webテク, Webデザイン, Web広告, イラスト, SVG, 3D, SEO, HTML, CSS, Apple

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

ネットで見かけた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のコードエディタ

今週の気になるWebネタ

アップル，約4年ぶりに「iPod touch」新モデル--6色展開で2万1800円から - CNET Japanhttps://japan.cnet.com/article/35137637/

実に4年ぶりに新型iPod touchが登場しました。2万1800円からと最も手軽に手に入るiOS端末ですし，小型で軽量なところもニーズがありそうです。

やはり，ゲームのサブスクリプションサービス「Apple Arcade」で遊んでもらうための「ゲーム機」との見方が多く，ゲームを楽しむためのスペックは十分のようです。子供に与える端末としてもよさそうですね。

安価でスペックも十分ということで，SIMを挿して通信できるセルラーモデルが欲しいという声も出ていますが，それがiPhoneだろうというツッコミもされています。各種レビューの評判もいいですし，かなり売れるんじゃないでしょうか。

Webテク, Webデザイン, Web広告, イラスト, SVG, 3D, SEO, HTML, CSS, Apple

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote