週刊Webテク通信

2014年7月第2週号 1位は,ブレイクポイントとWebサイトの未来,気になるネタは,PC版LINEのセキュリティ強化のため「認証番号」の入力が必要になりました

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

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2014年7月7日~7月13日の間に見つけた記事のベスト5です。

1. Breakpoints And The Future Of Websites | Smashing Magazinehttp://www.smashingmagazine.com/2014/07/08/breakpoints-and-the-future-websites/

ブレイクポイントとWebサイトの未来と題して,新たなブレイクポイントの考え方についてまとめた記事です。

レスポンシブWebデザインでは,ウィンドウのサイズによって違ったCSSを適用させます。たとえば,PCとタブレットとスマートフォンの3つのサイズを想定して,それぞれのサイズでだけ適用されるCSSを設定するわけです。その切り替える境目のことをブレイクポイントと呼びます。

このブレイクポイントは画面サイズで決めるわけですが,これからのWebデザインでは,コンテキスト(文脈)をブレイクポイントにすべきではないかとのこと。たとえば,以下のような条件が考えられるようです。

  • ユーザーの視覚・聴覚などの能力
  • ユーザーがいつもいる場所
  • ユーザーがいつどこにいるか
  • ユーザーが使っているデバイス
  • ユーザーがそのサイトを好きかどうか

図1 ブレイクポイントとWebサイトの未来

図1 ブレイクポイントとWebサイトの未来

2. Designing for Thumbs - The Thumb Zone - The Usabilla Bloghttp://blog.usabilla.com/designing-thumbs-thumb-zone/

スマートフォン向けに,親指の届きやすい範囲を考えてデザインしようという内容です。ちょっと古い調査結果で,しかも日本の調査ではありませんが,49%のスマートフォンユーザーが親指1本で操作しているそうです。

指の届きやすさで画面を3段階に色分けした「Thumb Zone(親指ゾーン)⁠が載っていますが,あくまでも自分の指を元にした一例だとのことです。

FacebookとBBCのアプリ画面に,Thumb Zoneを重ねて使い勝手について考察しています。

また,左手で操作する人のことも考えたThumb Zoneを見ると,快適に使えるエリアがかなり小さいことが分かります。

図2 親指の届きやすい範囲を考えたデザインについて

図2 親指の届きやすい範囲を考えたデザインについて

3. What’s new for designers, July 2014 | Webdesigner Depothttp://www.webdesignerdepot.com/2014/07/whats-new-for-designers-july-2014/

Webデザイナーのためのツールや素材などをまとめた記事で,新しいのものを集めています。

Webアプリケーション,フレームワーク,グリッドシステム,ゲームプラットフォーム,インスピレーションリソース,Photoshopのプラグイン,テキストエディタ,フォントが紹介されていました。

図3 Webデザイナーのためのツールや素材

図3 Webデザイナーのためのツールや素材

4. Best font hosting services and self hosting tools for 2014http://smashinghub.com/best-font-hosting-services-and-self-hosting-tools-for-2014.htm

Webフォントをホスティングしているサービスを紹介した記事です。

「Google Fonts」以外の選択肢として,フォントサブスクリプションサービスや,フォントをWebフォントに変換するためのツールなどが紹介されています。

図4 Webフォントをホスティングしているサービス

図4 Webフォントをホスティングしているサービス

5. Beautiful Clean Web Designs for Inspirationhttp://www.webdesignai.com/minimal-web-designs-examples/

すっきりきれいなWebデザインのギャラリーです。

適切なタイポグラフィ,ネガティブマージン(ホワイトスペース)⁠優れた配色などで,シンプルできれいに作られたWebデザインの数々が掲載されています。

図5 すっきりきれいなWebデザインのギャラリー

図5 すっきりきれいなWebデザインのギャラリー

そのほか,最近の記事の中から,ツールやサービスに関する気になる記事を紹介します。

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

Simple Sharing Buttons Generator by @fourtonfishhttp://simplesharingbuttons.com/

シンプルなシェアボタンを作るためのサービスです。

  1. アイコンのデザインを決める
  2. どのソーシャルメディアのボタンを作るかを決める
  3. ボタンを設置するWebページの情報を入れる

といった3つのステップで簡単にシェアボタンのセットを作れます。

なお,画像アイコンの場合はアイコンがダウンロードでき,Webフォントの場合はリンクや設定の仕方が紹介されます。

一見ステップ毎に別ページに遷移しているように見えますが,同一ページ内をスクロールしているだけです。ジェネレーターとしては,ありそうであまりなかったパターンですね。

図6 シンプルなシェアボタンを作るジェネレーター

図6 シンプルなシェアボタンを作るジェネレーター

今週の気になるWebネタ

PC版LINEのセキュリティ強化のため「認証番号」の入力が必要になりました : LINE公式ブログhttp://official-blog.line.me/ja/archives/1005593400.html

パソコンでLINEにログインする際の初回ログイン時に,4桁の「認証番号」をスマートフォン版LINEで入力することが必要になりました。最近話題となっているLINEの「乗っ取り」は,どこかのサービスから流出したメールアドレスとパスワードの組み合わせを使い,パソコンのLINEでアクセスしていると思われるので,これで被害は減るのでしょう。

LINEがこれだけ普及した理由の一つには,従来のWebサービスには必ず必要だったID/パスワードが不要だったことも影響していると思います。たとえば,スマートフォンでスカイプを初めて使ってみようとしても,まずID/パスワードを決めるところが,IT系になじみの薄い人の場合にはハードルが高いと推測されます。

しかし,機種変時にアカウントを引き継ぐためなどの理由で,LINEでもメールアドレスとパスワードの設定ができるようになっており,故障や紛失に備えて設定することが推奨されています。なお,今はFacebook認証も使えるので,その場合はメールアドレスとパスワードの設定なしに,機種変してもアカウントを引き継げるはずです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入