週刊Webテク通信

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

ネットで見かけた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 ダミーのテキストブロックを生成するサービス

おすすめ記事

記事・ニュース一覧