週刊Webテク通信

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

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

ネットで見かけた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 モバイルサイトのパフォーマンスをチェックするツール

今週の気になるWebネタ

Snapchat,Twitterをデイリーアクティブユーザー数で超える--Bloomberg報道 - CNET Japanhttp://japan.cnet.com/news/service/35083692/

Snapchatは1日あたり約1億5000万人が利用しており,Twitterを超えたそうです。Twitterは1日あたりのアクティブユーザー数を公表していませんが,アナリストの予測では1億4000万人以下とのこと。どちらもすごい数字です。

Snapchatは送信した画像やメッセージが相手の受信後消えることが特徴のチャットアプリで,特に若者に人気のようです。まあ,ふざけた画像やいけない画像などを送り合ったりするのに使われているんでしょう。

Snapchatを脅威に思ってかFacebookが似たようなチャットアプリを出したこともあります。しかし,日本ではあまり話題になることはありません。とはいえ,海外からずいぶん遅れて日本でブームになったInstagramの例もありますし,これから流行る可能性もないとは言い切れないですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入