週刊Webテク通信

2016年1月第4週号 1位は,インターフェイスデザインにおける意味のあるアニメーション(セマンティック・アニメーション)についての考察,気になるネタは,Facebookの最新機能は,スポーツの試合をフォローして友達と語り合う場

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

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

1. Motion with Meaning: Semantic Animation in Interface Design · An A List Apart Articlehttp://alistapart.com/article/motion-with-meaning-semantic-animation-in-interface-design

インターフェイスデザインにおける,意味のあるアニメーション(セマンティック・アニメーション)についての考察です。

例えばiOSでは,ホーム画面に並んでいるアイコンから起動するアプリがズームインしますが,アプリ切り替えのときにズームアウトすると他のアプリが横に重なって並んでいるので,矛盾していると指摘しています。

以下の項目に分けて,意味性,一貫性から考えた良いアニメーションを探っていますが,セマンティック・アニメーションの考え方をこれから普及させていく段階のようです。

  • UIデザインのアニメーションの歴史
  • シンプルな切り替え
  • 要素間の関係性を説明する
  • 空間の一貫性を保つ

図1 インターフェイスデザインにおける,意味のあるアニメーションについての考察

図1 インターフェイスデザインにおける,意味のあるアニメーションについての考察

2. Everything I know about responsive web typography with CSS — Zell Liewhttp://www.zell-weekeat.com/responsive-typography/

Webデザインでのレスポンシブなタイポグラフィについてまとめた記事です。

  1. スクリーンサイズが大きくなるほど,フォントサイズと行間を増加させる
  2. タイポグラフィにモジュラースケールを使う
  3. タイポグラフィに相対的な単位(em,rem)を使う
  4. 垂直方向にリズムを持たせる
  5. 一行の文字数を45〜75文字の間にする

2は,h1,h2,h3などのフォントサイズを,一貫性を持った比率でスクリーンサイズに合わせて可変させるということのようです。

レスポンシブなタイポグラフィに使える,TypeというSassのライブラリも紹介しています。

図2 レスポンシブなタイポグラフィについてのヒント

図2 レスポンシブなタイポグラフィについてのヒント

3. 10 Years of Web Inspector | WebKithttps://webkit.org/blog/5718/10-years-of-web-inspector/

WebKit(Safari)のWebインスペクタの10周年を記念して歴史をまとめています。ChromeのデベロッパーツールもベースはこのWebインスペクタです。

新機能がいつ搭載されたかの記録が多いので,機能のおさらいにもなります。

図3 WebKitのWebインスペクタの10年の歴史

図3 WebKitのWebインスペクタの10年の歴史

4. 15 Fresh Splash Screens / Landing Pages of 2016 | JUST™ Creativehttp://justcreative.com/2016/01/19/15-fresh-splash-screens-of-2016/

印象深いトップページのギャラリーです。トップページがアプリの起動画面(スプラッシュスクリーン)のようなサイトが多数紹介されています。

実際にリンク先に行くと,ここに掲載されているスクリーンショットと違う画像が表示されることが多かったです。画像をどんどん入れ替えていたり,複数画像をランダムで切り替えているサイトが多いのでしょう。

図4 スプラッシュスクリーンのようなトップページのギャラリー

図4 スプラッシュスクリーンのようなトップページのギャラリー

5. Some Pretty Splendid SVG Links | CSS-Trickshttps://css-tricks.com/svg-funsville-links/

SVGに関する情報へのリンクをまとめています。テクニックや素材,ジェネレーターなどが紹介されています。

SVGでカレンダーを生成するというコードが紹介されていますが,このようにオンラインでSVGを生成して,それをIllustratorなどに取り込んで素材として使うという手法も今後増えそうです。

図5 SVGに関する情報へのリンクいろいろ

図5 SVGに関する情報へのリンクいろいろ

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

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

30 Free Online Photos, Videos & Music Editors - Hongkiathttp://www.hongkiat.com/blog/30-free-online-multimedia-photo-audio-video-editors/

今回は,画像編集,ビデオ編集,音楽編集のWebサービスをまとめた記事を紹介します。最近はモバイルアプリが注目を集めることが多いですが,Webサービスもかなり充実してきています。

クライアントにCMSを使ってもらう際に,簡単な画像編集のためにWebサービスを紹介するのもありかと思います。その場合,日本語対応の方が受け入れられやすいはずですが,この中では,Pixlr Editor,Befunky,Polarrはインターフェイスが日本語化されていました。

また,この手のツールには画像を装飾するスタンプ(英語ではStickerという呼び名が主流)などの素材が用意されているものも多いので,そういった素材目当てでの活用法もあると思います。

図6 画像編集,ビデオ編集,音楽編集のWebサービスいろいろ

図6 画像編集,ビデオ編集,音楽編集のWebサービスいろいろ

今週の気になるWebネタ

Facebookの最新機能は,スポーツの試合をフォローして友達と語り合う場 | TechCrunch Japanhttp://jp.techcrunch.com/2016/01/22/20160120facebook-sports-stadium/

Facebookでスポーツの試合をネタにリアルタイムで語り合えるようになるそうです。今年のオリンピックを見据えての機能強化かもしれません。

スポーツ中継と親和性の高いのはTwitterですが,ハッシュタグや検索結果で見ていると,悪口やノイズなどが多くて残念な気持ちになることの多いのが現状です。知り合いだけの空間のFacebookの方が安心して盛り上がれそうです。

とはいえ,TwitterだろうがFacebookだろうが海外発のサービスなので,2020年の東京オリンピックの時には,日本独自のテクノロジーで盛り上がれることを期待したいですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入