週刊Webテク通信

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

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

ネットで見かけた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にまとめて配信できるサービス

今週の気になるWebネタ

Googleアプリのカードがよりパーソナルに 「フォロー」ボタンで機械学習 - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1707/20/news043.html

Googleのモバイルアプリがアップデートして,よりパーソナライズされたニュースを見られるようになります。まだ日本では反映されていないようですが,数週間で日本を含む他地域に拡大するとのことです。

すでにユーザーの検索結果に基づくニュースを表示する機能はあるのですが,フォローや関連記事表示機能が追加されます。たとえばテレビドラマのタイトルで検索したときにフォローボタンが出てきて,フォローするとそのドラマの関連ニュースが表示されるようになるそうです。

Facebookでは友達が共有したり「いいね!」を付けたニュースが表示されるのに対し,Googleはソーシャルグラフに頼らずパーソナライズしたニュースを提供するという対比が注目されています。ユーザーはいいとこ取りして使い分ければいいので,どちらも進化していくことに期待したいと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入