週刊Webテク通信

2016年4月第3週号 1位は,コード共有サイトCodePenにデザインパターンごとにコードを探せるコーナーが登場,気になるネタは,LINEに水滴が…… LINEのアイコン変更で水滴を拭き取ろうとする人が続出

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

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

1. Design Patterns on CodePenhttp://codepen.io/patterns/

コード共有サイトのCodePenに,デザインパターンごとにコードを探せるコーナーができていました。 アコーディオン,タブ,パンくずリスト,スライダー,などのデザインパターンで,コードを探すことができます。

CodePenのユーザーはデザインパターンごとにフォローできますし,ユーザーでなくてもRSSでチェックできるようになっています。

図1 デザインパターンごとにCodePenのコードを探せるコーナー

図1 デザインパターンごとにCodePenのコードを探せるコーナー

2. 8 of the Worst Design Mistakes Impacting Your Website's SEOhttp://www.webydo.com/blog/our-community/education/8-of-the-worst-design-mistakes-impacting-your-websites-seo/

SEOに影響を与えるWebデザインの間違いを8つ紹介しています。

  1. テキストの代わりに画像を使っている
  2. 無関係なポップアップ
  3. 不親切なナビゲーション
  4. 不適切な見出しタグ
  5. デザイン要素の間違った使い方
  6. 重たい画像
  7. Flashの使用
  8. レスポンシブじゃないデザイン

図2 SEOに影響を与えるWebデザインの8つの間違い

図2 SEOに影響を与えるWebデザインの8つの間違い

3. 5 Tips for Designing Personalization | Design Shackhttp://designshack.net/articles/ux-design/5-tips-for-designing-personalization/

Webサイトのパーソナライゼーションのための5つのテクニックを解説しています。

  1. ユーザーがプロフィールを作れるようにする
  2. 個人情報の保護
  3. 位置情報を利用する
  4. 季節で考える
  5. 個々のユーザー向けページを作る

5は,Amazonのアカウントサービスのような,自分の情報を確認できるページのことです。

図3 Webサイトのパーソナライゼーションのための5つのテクニック

図3 Webサイトのパーソナライゼーションのための5つのテクニック

4. 15 Interesting JavaScript and CSS Libraries for April 2016 | Tutorialzinehttp://tutorialzine.com/2016/04/15-interesting-javascript-and-css-libraries-for-april-2016/

JavaScriptとCSSのライブラリやフレームワーク,プラグインの中から,最近公開された面白いものを紹介しています。

テキストをクリックするとツイートするリンクに変える「InlineTweet.js」や,画像をぼかす「Image Blur」など,便利なものが揃っています。

図4 最新のJavaScript&CSSのライブラリやフレームワーク

図4 最新のJavaScript&CSSのライブラリやフレームワーク

5. 7 (Must See) Creative & Awesome Animated GIFs | SmashingApps.comhttp://www.smashingapps.com/2016/04/11/7-must-see-creative-awesome-animated-gifs.html

優れたGIFアニメーションを多数紹介した記事です。フラットデザイン/マテリアルデザインと親和性の高いものばかりです。

GIFアニメーションは動画よりも軽く,Web上で興味を引くクリエイティブな手段とのことでした。

図5 優れたGIFアニメーションいろいろ

図5 優れたGIFアニメーションいろいろ

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

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

Carrd - Simple, free, fully responsive one-page sites for pretty much anythinghttps://carrd.co/

「Carrd」は,レスポンシブなシングルページWebサイトを無料で作れるサービスです。ログインなしで作成できますが,公開にはユーザー登録が必要です。

ブラウザいっぱいにコンテンツが展開し,基本的にはスクロールなしの1画面完結サイトを,テンプレートをもとに作成できます。ソーシャルメディアやブログに誘導するための個人ページや,アプリの紹介ページを想定しているようです。

テンプレートをベースに作るのですが,画像や動画,テーブル,アイコンなどを自由に追加できるので,カスタマイズ性は意外と高そうです。UIも非常に良くできており,ストレスなく作っていけます。iPhoneのSafariでテストしてみたのですが,スマートフォンでも問題なく作成可能でした。

図6 レスポンシブなシングルページWebサイトを無料で作れるサービスCarrd

図6 レスポンシブなシングルページWebサイトを無料で作れるサービスCarrd

図7 Carrdの豊富なテンプレート

図7 Carrdの豊富なテンプレート

今週の気になるWebネタ

LINEに水滴が…… LINEのアイコン変更で水滴を拭き取ろうとする人が続出 - ねとらぼhttp://nlab.itmedia.co.jp/nl/articles/1604/15/news090.html

地球環境について考える「アースデイ」を4月24日に迎えるのに関連して,LINEのiPhoneアプリのアイコンが,葉っぱに水滴がついたものに変更されました。

アイコンでメッセージを伝えるというのはなかなか素敵だと思うのですが,いつも見慣れたアイコンが変わったことで,戸惑った人が多いようです。ツイッターなどで,水滴を拭き取ろうとしたという報告が続出しているんですね。

別な記事で,自動アップデートにしていることで,急にアイコンが変わって驚いたパターンが多いんじゃないかと指摘されていました。そういえばLINE社は,⁠LINE Camera」の名前を,LINE Camera→aillis → LINE Cameraと変更したこともありましたね。アップデートでアプリ名が変わるのに比べれば,アイコンの変更はかわいいものです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入