週刊Webテク通信

2019年12月第1週号 1位は，そろそろ廃れるべきデザイントレンド，気になるネタは，グーグル，読み聞かせ音声をスマスピで再生する「My Storytime」--両親が録音可能

Webテク, Webデザイン, Web広告, UI, フレームワーク, アバター, スマートスピーカー

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2019年11月25日～12月1日の間に見つけた記事のベスト5です。

1. 10 Outdated Web Design Trends to Let Go Of | Webdesigner Depothttps://www.webdesignerdepot.com/2019/11/10-outdated-web-design-trends/

そろそろ廃れるべきデザイントレンドをまとめています。

  1. 安っぽいストックフォト
  2. スライドするメインイメージ
  3. 自動再生
  4. 3クリックルール（タスク完了まで3回以内のクリックで終わらせるのが理想という目安）
  5. （外部）リンクを同じタブで開く
  6. 伝統的なスクロールを使わないスクロール
  7. キーワードメタタグ
  8. 悪いポップアップ
  9. 読み込みが遅いウェブサイト
  10. Flash

図1　そろそろ廃れるべきデザイントレンド

図1　そろそろ廃れるべきデザイントレンド

2. 10 essential UI (user-interface) design tips | Webflow Bloghttps://webflow.com/blog/10-essential-ui-design-tips

UIデザインのヒントを10個まとめた記事です。

  1. ユーザーを知る
  2. インターフェイスをどのように使うか定義する
  3. 期待される結果を設定する
  4. 間違いを予測する
  5. フィードバックを迅速に与える
  6. 要素の配置とサイズを慎重に検討する
  7. 標準的なやり方を無視しない
  8. 学習しやすいインターフェイスにする
  9. 意思決定をシンプルにする
  10. データを参考にする

図2　UIデザインの10個のヒント

図2　UIデザインの10個のヒント

3. Bootstrap vs Foundation and why you should use one over the otherhttps://www.designyourway.net/blog/resources/bootstrap-vs-foundation/

フロントエンドフレームワークとして，BootstrapとFoundationのどちらを選ぶべきかを考察した記事です。

こういうケースではどっちがいいといった記述も多少はありますが，案件に合わせて決めた方がいいと曖昧な結論でした。Bootstrapの方が有名で人気もあるけど，Foundationもどんどん進化しいているのでチェックしてねというニュアンスのことが書いてあり，わたしもそれに賛同します。

図3　BootstrapとFoundationのどちらを選ぶべきか

図3　BootstrapとFoundationのどちらを選ぶべきか

4. At All Events: Awesome Designs for Event Websites and Landing Pageshttps://design4users.com/event-web-design/

イベントを紹介するためのサイトやランディングページのギャラリーです。展示会，スポーツイベント，ワークショップ，フェスティバル，カンファレンス，コンサートなどのサイト作成に役立つ例を多数紹介しています。

動きが凝ったものが多く，動画で見られるようになっていました。

図4　イベント紹介のサイト，ランディングページのギャラリー

図4　イベント紹介のサイト，ランディングページのギャラリー

5. 10 Best Free Avatar and Character Creator Apps - Onextrapixelhttps://onextrapixel.com/avatar-and-character-creator-apps/

アバターやキャラクターを作るアプリ，素材などをまとめています。 流行りのフラットデザインのベクター系イラストが多いです。人物だけでなく，宇宙人っぽいものやロボットもありました。

図5　アバターやキャラクターを作るアプリや素材

図5　アバターやキャラクターを作るアプリや素材

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

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

Wireframer | Flawless SVG text for your wireframeshttps://www.wireframer.art/

Wireframerはワイヤーフレームに使うためのダミーのテキストブロックを生成するサービスです。テキストではなく四角形で表現されます。

左揃え，センター揃え，右揃えを選び，行間，単語間の間隔など細かくコントロールできます。角丸の大きさや色も変更可能です。作ったものはコピーするか，SVGでダウンロードできます。

ピクセルでサイズを決めて，そのエリアを埋めるようにダミーのテキストブロックが作れると便利だと思うのですが，そういうアプローチではないので欲しいサイズに作るのが難しそうです。

図6　ダミーのテキストブロックを生成するサービス

図6　ダミーのテキストブロックを生成するサービス

今週の気になるWebネタ

グーグル，読み聞かせ音声をスマスピで再生する「My Storytime」--両親が録音可能 - CNET Japanhttps://japan.cnet.com/article/35146103/

絵本などを読み聞かせした音声データをアップしておき，スマートスピーカーで再生させる「My Storytime」をGoogleが提供開始しました。スマートスピーカーを使うことで子供でも簡単に再生できるということですね。

仕組みはとても単純ですが，用途を限定することで興味深いサービスとなっています。発想次第でいろんな用途に発展できそうです。

美空ひばりが息子のために読み聞かせをカセットテープに録音していたエピソードを思い出しました。AIで美空ひばりを甦らせるプロジェクトで，その時の声のデータが役立ったのをテレビで見ました。有名人の読み聞かせを聴けるサービスも面白いかもしれません。

Webテク, Webデザイン, Web広告, UI, フレームワーク, アバター, スマートスピーカー

著者プロフィール

芦之由（あしのよし）

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

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

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

バックナンバー

週刊Webテク通信

  • 2019年12月第1週号 1位は，そろそろ廃れるべきデザイントレンド，気になるネタは，グーグル，読み聞かせ音声をスマスピで再生する「My Storytime」--両親が録音可能

バックナンバー一覧