週刊Webテク通信

2015年4月第5週号 1位は,レスポンシブデザインの3つの失敗とそれを防ぐ方法,気になるネタは,国内メーカーが「ガラケー」を生産終了へ,Android搭載「ガラホ」に集約

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

ネットで見かけた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などのフレームワークを使いレスポンシブイメージのクラスを適用する
要素のゆがみ(デザイン上の優先順位などが変わってしまう)
  • 要素の高さ,幅,余白などを個別に調整する

図1 レスポンシブデザインの3つの失敗とそれを防ぐ方法

図1 レスポンシブデザインの3つの失敗とそれを防ぐ方法

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デザインに問題が生じてきているが,それは解決することができると書いてありました。

図2 レスポンシブデザインの問題点と解決策

図2 レスポンシブデザインの問題点と解決策

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

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

ワイヤーフレーム
  • デザイン要素を簡素化して記述
  • コミュニケーション,資料のために使う
プロトタイプ
  • インタラクティビティ
  • インタラクティブなユーザーテストとUIデザインの確認のために使う
モックアップ
  • 静的な視覚化,ブランディング
  • 関係者からのデザインの了承を得るために使う

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

図3 ワイヤーフレームとプロトタイプとモックアップの違い

図3 ワイヤーフレームとプロトタイプとモックアップの違い

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,コミュニティといったカテゴリに分けて,厳選されたサイトが載っていました。

図4 Webデザインの参考になるサイトいろいろ

図4 Webデザインの参考になるサイトいろいろ

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

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

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

図5 CSSのシャレやジョーク

図5 CSSのシャレやジョーク

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

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

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

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

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

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

図6 CSSによるセンター揃えのコードの生成サービス

図6 CSSによるセンター揃えのコードの生成サービス

今週の気になるWebネタ

国内メーカーが「ガラケー」を生産終了へ,Android搭載「ガラホ」に集約 | アプリオhttp://appllio.com/20150424-6401-japan-maker-discontinued-garakei-phone

「ガラケー」が生産終了と報じられ話題となっていました。二つ折りや物理ボタンを持つ携帯電話は残るものの,OSはAndroidに統一されるそうです。Firefox OSなどOSの選択肢は他にもあると思いますが,ともかくいわゆる「ガラケー」終了は本当のようです。

Webサイトやサービスを制作する側の視点だと,ガラケーのブラウザの利用者が減っていくのは朗報です。⁠ガラホ」のメーラーがどんな感じになるのか分かりませんが,HTMLメールがすんなり表示できることに期待します。HTMLメルマガが本格普及していくきっかけになるかもしれません。

使い勝手がいいからとガラケーを使い続ける人も多いようですが,スマホにすると料金が高くなるところもネックになっていると思います。これを機に格安スマホを使う人が増えていくと,キャリアメールの利用者も徐々に減っていくかもしれません。キャリアメールはいろいろとやっかいですからね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入