週刊Webテク通信

2014年6月第3週号1位は、2014年のWebデザインのトレンドまとめ、気になるネタは、Googleマイビジネスは「御社の情報を無料でGoogleに掲載」するダッシュボード

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

1. Web制作者が捗る!知識が増える2014年トレンドまとめ | コムテブログhttp://commte.net/blog/archives/4495

最近のWebデザインのトレンドをまとめた、ボリュームたっぷりの記事です。

  • ファーストビューで使いたいエフェクト
  • 脱ビットマップ画像
  • 配色・フォント
  • 効果
  • コンテンツ
  • レイアウト

というカテゴリに分けた、全26項目のトレンドが、関連リンクトとともに紹介されています。

図1 2014年のWebデザインのトレンドまとめ
図1 2014年のWebデザインのトレンドまとめ

2. What’s new for designers, June 2014 | Webdesigner Depothttp://www.webdesignerdepot.com/2014/06/whats-new-for-designers-june-2014/

Webデザインのためのツールや素材を多数紹介しています。

Webアプリケーション、フレームワーク、グリッドシステム、ゲームプラットフォーム、インスピレーションを得られるもの、Photoshopプラグイン、テキストエディタ、フォントなどの最新のものが揃っています。

図2 Webデザインのためのツールや素材いろいろ
図2 Webデザインのためのツールや素材いろいろ

3. 20 underrated web design tools | Web design | Creative Bloqhttp://www.creativebloq.com/web-design/underrated-tools-513154

「過小評価されているWebデザインツール」というお題目で、20個のツールやサービスを取り上げています。AdobeのコードエディタBracketsや、MacでCompass+Sass環境の人にはオススメなCodeKitなどが掲載されていました。

オンライン上でコードをテスト&シェアできるCodePenやJSFiddleなど、それなりに知られているツールが多いですね。知名度はあるけど、もっと評価されてもいいということなんでしょう。

図3 過小評価されているWebデザインツール20選
図3 過小評価されているWebデザインツール20選

4. Share: The Icon No One Agrees On - BOLD by Pixelapsehttps://bold.pixelapse.com/minming/share-the-icon-no-one-agrees-on

シェア(共有)アイコンはいろいろな種類があって混乱気味なことについてまとめた記事です。

AppleがiOSやOS Xで使っているシェアアイコンと、GoogleがAndroidなどで使っているアイコンとは違っていて、そのコンセプトも全く別ものです。マイクロソフトがWindowsやWindows Phoneで使っているものも含め、大きく3つのパターンが共存している状態ということですね。

保存アイコンがフロッピーディスクのマークというのは古いしメタファとして今は成り立たないという議論も以前ありましたが、そもそもシェアについてはメタファーとすべき現実世界のモノがないのが難しいところです。

こんなアイコンはどう?といった例として、飲み物にストローが2本ささっているアイコンがこの記事に掲載してあります。普及しないとは思いますが、メタファとしてなかなか面白いですね。

図4 共有(シェア)アイコンを考える
図4 共有(シェア)アイコンを考える

5. How to Create Shareable Posts on Social Networks | Social Media Todayhttp://socialmediatoday.com/irfan-ahmad/2504931/science-creating-shareable-post-facebook-googleplus-twitter-instagram-linkedin-i

ソーシャルメディア毎に、シェアされやすい投稿を解説したインフォグラフィックスです。

YouTube、Facebook、Twitter、Google+はもちろん、Pinterest、Instagram、Vineといったサービスに対してのテクニックも紹介されています。

また、投稿するのにベストな時間と悪い時間がサービス毎に載っているのもヒントになりそうです。

図5 ソーシャルメディア毎のシェアされやすい投稿のアドバイス
図5 ソーシャルメディア毎のシェアされやすい投稿のアドバイス

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

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

Bounce.jshttp://bouncejs.com/

Bounce.jsは、CSS3アニメーションを簡単に作れるサービスです。その場でパラメーターをいじってプレビューでき、CSSとして書き出せます。また、アニメーションごとに個別のURLが存在するので、それを共有することも可能です。

あらかじめ10種類の動きのパターンが用意されているので、それをベースにカスタマイズするのが簡単そうです。もともと用意されている動きが、⁠tasty」と謳っているだけあって味のあるものなので、そのままでも十分使えることでしょう。

このサービス自体のデザインやUIもシンプルながらしっかり作られていて、使っていて気持ちのいいサービスです。

図6 CSS3アニメーションを簡単に作れるサービス
図6 CSS3アニメーションを簡単に作れるサービス

おすすめ記事

記事・ニュース一覧