週刊Webテク通信

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

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

ネットで見かけた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で新規タブをスタートページにする拡張機能

今週の気になるWebネタ

Apple Pencilの使い心地を試す。短期間でも精度の高さは実感,問題はやはりApple Pencilに対する入手困難さか - Engadget Japanesehttp://japanese.engadget.com/2015/11/26/apple-pencil-ipad-pro/

iPad Proのレビューを見かけることが増えましたが,Apple Pencilは入手困難のようです。一般のブロガーの記事を見ていると,本体しか手に入れられていないという人が目立ちます。

Apple PencilがなければただのデカイiPadとも言われるiPad Proですが,でもあれだけの大きさがあれば指でも十分快適に絵が描けるでしょう。あえて,iPad Pro + 指で絵を描くというのもいいかもしれません。

今後は,iPad Pro + Apple Pencilだけで完結させるイラストレーターや漫画家も登場してくることでしょう。iPad Pro + Apple Pencilに最適化した絵を描くプロ向けのアプリがこれから充実してくると思うので,それも楽しみです。個人的にはAdobe Animate(Flashから改名)がiPadアプリになるとうれしいですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入