週刊Webテク通信

2015年12月第1週号1位は、レスポンシブWebデザインでのありがちなミス7つ、気になるネタは、Apple Pencilが入手困難

ネットで見かけた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

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

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

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

図1 レスポンシブWebデザインでの、ありがちなミス7つ
図1 レスポンシブWebデザインでの、ありがちなミス7つ

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

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

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

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

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

図2 Webデザインにおける一貫性の重要さ
図2 Webデザインにおける一貫性の重要さ

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

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

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

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

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

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

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

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

図4 レスポンシブWebデザインのチュートリアル記事いろいろ
図4 レスポンシブWebデザインのチュートリアル記事いろいろ

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

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

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

図5 SVGアニメーションとGIFアニメーションとの比較
図5 SVGアニメーションとGIFアニメーションとの比較

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

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

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

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

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

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

図6 Chromeで新規タブをスタートページにする拡張機能
図6 Chromeで新規タブをスタートページにする拡張機能

おすすめ記事

記事・ニュース一覧