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

1. 7 common mistakes made with responsive mockups | UX | Creative Bloqhttp://www.creativebloq.com/web-design/common-mistakes-responsive-mockups-111517922

1. 画面サイズではなくデバイスのためにデザインする
2. デバイスに合わせてブレークポイントを設定する
3. タッチ操作を考慮しない
4. モバイルに対応していないコンテンツへのリンク
5. 大きなスクリーンへの対応がお粗末
6. 画面サイズが違っても一貫したナビゲーションを使用する
7. コンテンツを非表示にする

6は「一貫したナビゲーションを使用する」のが間違いということです。

リンクやボタンのラベル、フォント、色は一貫性を持たせるべきですが、ボタンサイズ、レイアウト、ナビゲーション機能については画面サイズによって変更するべきということでした。

2. Consistency In Web Designhttp://www.designyourway.net/blog/design/consistency-in-web-design/

Webデザインにおける一貫性の重要さを解説した記事です。

以下の項目に分けて説明してあります。

• 構造とインタラクション
• ユーザーインターフェイスのパターン
• 一貫性の重要性
• デザインに一貫性を持たせる
• Webサイトに一貫性を持たせる

重要なナビゲーションとリンク色とで同じ色を使う、要素間の間隔を一定量にする、同じファミリーのアイコンを使うなど、一貫性を持たせる重要性が紹介されています。一貫性を維持するために、Bootstrapのようなフレームワークを使うという手もあるとのことでした。

3. テキスト周りのスタイリングに使えるCSSプロパティやスニペット | NxWorldhttp://www.nxworld.net/tips/useful-css-properties-and-snippets-for-text-styling.html

テキストをCSSで調整するためのリファレンス的なまとめです。

テキスト選択時のハイライトカラーを変更したり、強調文字にマーカーで線を引いたような効果を加えるなど、CSSで簡単に適用できて効果的なテクニックがまとめられています。

また、同じブログの「text-shadowを使ったテキストのデザインサンプル」も、良いまとめで参考になります。

4. 11 Responsive Web Design Tutorials | SmashingApps.comhttp://www.smashingapps.com/2015/11/23/11-responsive-web-design-tutorials.html

レスポンシブWebデザインに関するチュートリアル記事をまとめた記事です。

レスポンシブなメニューやアコーディオン、拡張する検索窓のテクニックなどが掲載されています。

5. Animated SVG vs GIF [CAGEMATCH]http://sarasoueidan.com/blog/svg-vs-gif/

SVGアニメーションとGIFアニメーションとを徹底的に比較した記事です。

画質、ファイルサイズ、パフォーマンス、メンテナンス性、ブラウザの対応などについて細かく比較した結果が掲載されています。

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

• dTV、4Kコンテンツの配信を開始--テレビ向け環境強化など3つの進化へ - CNET Japan
  Nottvは終了するということで、今後ドコモはよりdTVに力を入れていくのでしょう
• Microsoftに続いて容量無制限を終了：Adobe、写真用クラウドサービス「Revel」を終了へ 月額980円のプランへの移行を推奨 - ITmedia ニュース
  容量無制限で画像を保存できるサービスでしたが、終了とのことです
• 「Facebookでログイン」がApple TVでも使えるようになった | TechCrunch Japan
  今のところ専用コントローラーしか使えない新型Apple TVにとっては便利ということですね

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

Tabbie - Material, customizable and hackable new tab replacementhttps://tabbie.io/

厳密にはWebサービスではありませんが、今回はChrome拡張機能の「Tabbie」を紹介します。新規タブを開いたときに、各種Webサービスのニュースや新着、自分がよくアクセスするサイトやブックマークなどを表示できるようになります。

惜しまれつつ終了してしまったiGoogleのような、「⁠スタートページ」を提供するサービスです。ページに追加できるWebサービスはそれほど多くはありませんが、Dribbble、GitHub、Designer Newsなど、英語圏でWebデザインに関わる人なら納得できそうなラインナップです。

個人的に気に入ったのが、登録してあるChromeアプリの一覧を出せることです。Chromeで新規タブを開いたときにアプリ一覧が出なくなって不便に思っていたのですが、これで解決できそうです。なお、一旦項目を追加したあと、鉛筆マークのエディットボタンを押してから、レイアウトの変更やリサイズができます。