週刊Webテク通信

2017年7月第4週号1位は、モバイルサイトのデザインを改善するナビゲーションのヒント、気になるネタはGoogleアプリのカードがよりパーソナルに 「フォロー」ボタンで機械学習

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

1. Improving Your Website’s Mobile Design: Crucial Navigation Tips - Onextrapixelhttps://onextrapixel.com/improving-your-websites-mobile-design-crucial-navigation-tips/

モバイルサイトのデザインを改善する、重要なナビゲーションのヒントを解説しています。

  1. シンプルにする
  2. キーボード入力をさせない
  3. アイコンに注意する
  4. 明確にする
  5. フィルタリングオプションを考慮する
  6. モバイル検索を改善する
図1 モバイルサイトのデザインを改善するナビゲーションのヒント
図1 モバイルサイトのデザインを改善するナビゲーションのヒント

2. The Newest Email Design Trends of 2017 – Really Good Emailshttps://explore.reallygoodemails.com/2017-email-design-trends-5911f819e7b2

メールデザインのトレンドをまとめた記事です。

  1. 可愛い背景にする
  2. 思い切ったフォントの扱い
  3. 絵文字
  4. テトリスのようにコンテンツを組み合わせる
  5. GIFアニメで宣伝する
  6. ボタンを振動させる
  7. 商品をミステリアスに見せる
  8. ネオンサイン
  9. インスタグラムのようなデザインにする
  10. タイトルとテキストとを横並びにする
  11. 印象に残る名言などの引用
図2 メールデザインのトレンド10個+おまけ1つ
図2 メールデザインのトレンド10個+おまけ1つ

3. Best Practices For Minimalism In Web Design. 15+ stunning exampleshttps://webdesignledger.com/best-practices-for-minimalism-in-web-design/

Webデザインにミニマリズムを取り入れるためのヒントを解説しています。

  • 見事なビジュアル
  • 大きく大胆かつ鮮明な写真
  • 美しいコントラスト
  • 効果的なタイポグラフィ
  • シンプルなナビゲーション
  • 余計なものをそぎ落とす
図3 Webデザインにミニマリズムを取り入れるためのヒント
図3 Webデザインにミニマリズムを取り入れるためのヒント

4. 12 Fun CSS Text Shadows You Can Copy and Paste | Design Shackhttps://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/

CSSのテキストシャドウによる面白い効果を多数紹介しています。

複数のシャドウをかけることで、3D文字やエンボスのように見せる例を、コードとともに掲載しています。

図4 CSSテキストシャドウの面白い効果いろいろ
図4 CSSテキストシャドウの面白い効果いろいろ

5. Showcase of Parallax Scrolling Effects in Web Designhttps://line25.com/articles/showcase-of-parallax-scrolling-effects-in-web-design

視差スクロール効果の実例をまとめたショーケースです。背景が微妙に変化するものから、特別なユーザー体験を与えるものまで、いろいろなサイトが解説付きで掲載されています。

CSSとjQueryで視差効果を実装するためのチュートリアル記事も2つ紹介しています。

図5 視差スクロール効果のショーケース
図5 視差スクロール効果のショーケース

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

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

RSSUnify - Combine multiple RSS feeds for freehttps://rssunify.com/

RSSUnifyは、複数のRSSを1つのRSSにまとめて配信できるWebサービスです。最大20までのRSSを指定できます。

MailChimpのようなニュースレター(メルマガ)配信システムで、RSSからメールを自動配信する際に利用する目的で開発されたようです。IFTTTを使ってRSSからTwitterなどに投稿する場合にも便利なはずです。

オプションでタイトルや件数を設定できます。複数のRSSに同じ記事があった場合に、重複したものを削除する機能があるのもうれしいところです。

図6 複数のRSSを1つのRSSにまとめて配信できるサービス
図6 複数のRSSを1つのRSSにまとめて配信できるサービス

おすすめ記事

記事・ニュース一覧