gihyo.jpサイトのロゴ

週刊Webテク通信

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

2016-04-21

ネットで見かけた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の豊富なテンプレート

おすすめ記事

記事・ニュース一覧