ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2015年4月20日～4月26日の間に見つけた記事のベスト5です。

1. 3 responsive design disasters (and how to avoid them) | Webdesigner Depothttp://www.webdesignerdepot.com/2015/04/3-responsive-design-disasters-and-how-to-avoid-them/

レスポンシブデザインの3つの失敗とそれを防ぐ方法をまとめた記事です。

水平メニューが改行されてしまう

• カテゴリ分けするなどして数を減らす。カテゴリを選んだときドロップダウンでサブカテゴリのメニューを出現させる
• ブレイクポイントを小さくしてギリギリまで改行しなくする
• デバイスによってスライドメニューなどの違ったメニューを用意する

固定幅の画像を使ってしまう

• 画像の横幅を可変するように設定する
• Bootstrapなどのフレームワークを使いレスポンシブイメージのクラスを適用する

要素のゆがみ（デザイン上の優先順位などが変わってしまう）

• 要素の高さ，幅，余白などを個別に調整する

2. We're Doing Responsive Web Wrong, But We Can Fix It | Social Media Todayhttp://www.socialmediatoday.com/marketing/2015-04-23/were-doing-responsive-web-wrong-we-can-fix-it

こちらの記事も，レスポンシブデザインの問題点と解決策について考察したものです。

• 通常使用する機能は指の届くエリアに配置する
• フォームの入力フィールド内にラベルテキストを入れるのは，項目の少ないフォームの場合だけにする
• ファイルの読み込みを制御して，スマートフォン用には大きなファイルを読み込まないようにする
• 何かを販売するサイトの場合，不要なナビゲーションや目移りする要素を表示しない
• テストして最適化することを繰り返す

スマートフォンの画面サイズが大きくなったことでレスポンシブWebデザインに問題が生じてきているが，それは解決することができると書いてありました。

3. Wireframing, Prototyping, Mockuping ? What's the Difference?http://speckyboy.com/2015/04/20/wireframing-prototyping-mockuping-whats-the-difference/

ワイヤーフレームとプロトタイプとモックアップの違いについて解説した記事です。

ワイヤーフレーム

• デザイン要素を簡素化して記述
• コミュニケーション，資料のために使う

プロトタイプ

• インタラクティビティ
• インタラクティブなユーザーテストとUIデザインの確認のために使う

モックアップ

• 静的な視覚化，ブランディング
• 関係者からのデザインの了承を得るために使う

以前も同じような記事を紹介しましたが，プロトタイプとモックアップとを混同していたわたしです。

4. 26 inspirational web design resources to boost your creativity | Econsultancyhttps://econsultancy.com/blog/66356-26-inspirational-web-design-resources-to-boost-your-creativity/

Webデザインの参考になる情報や素材などを掲載しているサイトを紹介しています。

Webサイトのデザインギャラリー，フリーのグラフィック素材，カラーパレット，モバイル関連，UX，コミュニティといったカテゴリに分けて，厳選されたサイトが載っていました。

5. CSS Puns & CSS Jokes ~ Curated by Saijo Georgehttp://saijogeorge.com/css-puns/

CSSのシャレやジョークの数々を楽しめます。CSSのジョークって何なのか想像がつかない人が多いと思うのですが，実際に見てみるとすぐに分かるので是非ご覧ください。

CSSが分かる人なら，なるほどねと感心するネタに出会えるはずです。

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

• GoogleがGoogle Mapsのいたずら/悪ふざけ対策に着手…やはり人海作戦か | TechCrunch Japan
  Googleマップに対するいたずらは世界的に流行っているようですね
• ライブ動画の配信画面からチケット購入 ツイキャスがコマース事業に参入 - 週アスPLUS
  ライブ配信を見るためのチケットではなく，リアルなライブなどの電子チケットが販売できるということでした
• キングジム，子どもの迷子防止アラーム「デジタルまいごひも」発売 - CNET Japan
  荷物に付けて置き忘れ防止にも良さそうです

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

How to Center in CSShttp://howtocenterincss.com/

「How to Center in CSS」は，CSSによるセンター揃えのためのコードを生成するサービスです。水平方向または垂直方向，あるいは両方のセンター揃えのCSSが作れます。

CSSでやろうとするとひっかかることの多い，垂直方向センター揃えのコードを生成してくれるのが便利です。サイズが決まっている領域の場合は，数値で指定するのが確実な方法なのですが，このツールを使うと親要素と子要素のサイズから余白の値を自動で計算してくれます。

Flexboxによる記述にも対応すると，もっと便利なツールになりそうです。