週刊Webテク通信

2016年6月第2週号1位は、スタイルガイドに必要な項目や運用のヒント、気になるネタは、Snapchat、Twitterをデイリーアクティブユーザー数で超える

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

1. What Needs to Be in Your Style Guide? (And How Do You Enforce It?) | Design Shackhttps://designshack.net/articles/business-articles/what-needs-to-be-in-your-style-guide-and-how-do-you-enforce-it/

Webサイトのデザインや文章表現に一貫性を持たせるために重要なスタイルガイドについて、必要な項目や運用のヒントを解説した記事です。

以下の項目に分けて説明しています。

  1. ブランドの概要
  2. 声とトーン
  3. 「ルール」と使い方
  4. シンプルで具体的なコンセプト
  5. スニペットと例
  6. スタイルガイドを守らせる

スタイルガイドには責任者が必要で、その人(あるいはグループ)が、改定したり質問に答えたりする必要があるとのことです。

図1 スタイルガイドに必要な項目や運用のヒント
図1 スタイルガイドに必要な項目や運用のヒント

2. The Newest Email Design Trends of 2016 — Email Industry News — Mediumhttps://medium.com/email-industry-news/the-newest-email-design-trends-of-2016-f8d038e56396#.h2k23xv3a

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

  1. ソーシャルメディアでシェアできる部分を用意する
  2. フィードバックを要求する
  3. プロからのヒントの紹介
  4. 最後に最近のInstagram写真を披露する
  5. Z型の目線の移動時に一呼吸できる要素を入れる
  6. 長いグラフィックで前年の年次報告をする
  7. iPhoneにアプリの画面をはめ込んだ画像を使う
  8. 2つのカラムを作る
  9. 独自のアイコンを作る
  10. ボタンには青色か緑色を使う
図2 メールデザインのトレンド
図2 メールデザインのトレンド

3. Smoke Transitions: Beginning of a Trend? - Designmodohttp://designmodo.com/smoke-transitions/

最近流行りはじめているのではないかという、煙のような効果を使ったサイトをまとめています。サイトの実際の動きが分かるように、動画も掲載されています。

煙のような効果を実装するCSS&Javascriptも紹介されていました。

図3 煙のような効果の実例と実装のヒント
図3 煙のような効果の実例と実装のヒント

4. 20 Great Websites That Use The Power of SVGhttp://www.webdesigndev.com/websites-use-power-svg/

SVGをうまく使ったWebデザインのギャラリーです。

様々な画面サイズできれいに表示できるベクターベースのSVGを、ロゴや図形、イラストなどに使った実例が多数紹介されています。

図4 SVGをうまく使ったWebデザインいろいろ
図4 SVGをうまく使ったWebデザインいろいろ

5. One Page Websites – 50 New Web Examples | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2016/06/one-page-websites-design/

1ページ完結型のWebデザインをまとめています。シングルページのWebサイトは、一時的な流行ではなくすっかり定着しましたね。

スクロールに合わせた効果がいろいろあって参考になりますが、ここに紹介されているサイトくらいの効果じゃないと、もうインパクトはないのだろうなと実感しました。

図5 1ページ完結型のWebデザインのギャラリー
図5 1ページ完結型のWebデザインのギャラリー

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

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

Mobile Website Speed Testing Tool - Googlehttps://testmysite.thinkwithgoogle.com/

今回は、モバイルサイトのパフォーマンスをチェックするツールを紹介します。以前からスマートフォン向けにサイトを最適化することを推奨している、Googleが提供するものです。

URLを入力すると、モバイルへの対応状況とモバイルでの速度、デスクトップでの速度とが100点満点で採点されます。評価の詳細や解決のためのヒントを見ることができ、参考になりそうです。

チェックしたサイトの画面がはめこまれたスマホやラップトップが表示されたり、動画が背景に使われていたりと、サイトデザインに注目してもよくできているサービスだと思いました。

図6 モバイルサイトのパフォーマンスをチェックするツール
図6 モバイルサイトのパフォーマンスをチェックするツール

おすすめ記事

記事・ニュース一覧