週刊Webテク通信

2015年8月第2週号 1位は,UIデザインの試作をApple Keynoteで作る方法,気になるネタは,Apple Watchと合体する高級腕時計 PINNACLE。お値段100万円~1400万円

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

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

1. How To Prototype UI Animations In Keynote – Smashing Magazinehttp://www.smashingmagazine.com/2015/08/animating-in-keynote/

UIデザインの試作をApple Keynoteで作る方法を紹介しています。動きのあるUIの確認のため,Adobe After Effectsで作ることを推奨する記事は以前紹介しましたが,Keynoteの方がハードルは低そうです。

Keynote上で素材をレイアウトして,アニメーション機能で動きを付けていくワークフローを,キャプチャ画像とムービーとで丁寧に解説しています。エフェクトの「マジックムーブ」を使うと,スライド間で位置が変更されたオブジェクトを自動的に動かすことができるので便利です。

PhotoshopやSketch,Illustratorから素材をコピー&ペーストできるのも,Keynoteの良い点とのことでした。

図1 UIデザインの試作をApple Keynoteで作る方法

図1 UIデザインの試作をApple Keynoteで作る方法

2. 10 design principles — for developers — Mediumhttps://medium.com/@nirbenita/the-10-design-heuristics-for-developers-1e70a9dc58a7

開発者のための,デザインにおける10の法則です。

  1. システムの状況を可視化する
  2. システムと現実世界とを一致させる
  3. ユーザーの制御と自由度
  4. 一貫性と標準
  5. エラーの防止
  6. 思い出させるよりも認識させる
  7. 柔軟性と効率
  8. シンプル
  9. ユーザーの認識,判断を手助けし,エラーからリカバーする
  10. ヘルプとドキュメントを用意する

図2 デベロッパー向けのデザインの法則

図2 デベロッパー向けのデザインの法則

3. More Thoughts on Why Web Design is Dead | UX Magazinehttp://uxmag.com/articles/more-thoughts-on-why-web-design-is-dead

「Webデザインは死んだ」という記事を書いた人が,さらに考えてみたという記事です。

  • コンテンツは王様であるが,もうWebには縛られない
  • 「Webデザイン」という概念が,われわれの技術や価値観を制限してしまう
  • ネット上での配信と発見の問題

図3 Webデザインの死についての考察

図3 Webデザインの死についての考察

4. Footnotes on the Web | Scotch and Awehttp://scotchandawe.com/posts/footnotes-on-the-web.html

Webページ上での脚注,注釈の見せ方についてまとめています。

脚注(Footnote)⁠余白注記(side note)⁠文末脚注(end note)の違いや,注釈を実現するためのjQueryプラグインなどが紹介されていました。

図4 Webページ上での脚注について

図4 Webページ上での脚注について

5. Why so many people love Material Design? — Mediumhttps://medium.com/@mcristaldo/why-so-many-people-loves-material-design-6a60d31e597d

なぜマテリアルデザインは多くの人から好かれているのかを解説した記事です。

「開発者が偉大なデザイナーのように見える」という指摘は,なるほどと思いました。いろいろな人の意見も掲載されています。

図5 マテリアルデザインが多くの人から好かれている理由

図5 マテリアルデザインが多くの人から好かれている理由

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

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

20 Useful SVG Tools for Better Graphics - Hongkiathttp://www.hongkiat.com/blog/svg-tools/

今回は,SVGに関するWebサービスやツールを多数紹介した記事を取り上げます。

以下のようなサービスが紹介されていました。

  • SVGの座標について学ぶサービス
  • base64フォーマットに変換するサービス
  • SVGでローディングアニメーションを作るサービス
  • SVGでパターンを作るサービス
  • ローポリゴン風のパターンを作るサービス
  • 画像のクリッピングパスをSVGで作るサービス
  • SVGで点線を作るサービス

まずはSVGの扱いに慣れるために,これらのサービスを利用するというのもいいんじゃないかと思います。

図6 SVGに関するWebサービスいろいろ

図6 SVGに関するWebサービスいろいろ

今週の気になるWebネタ

Apple Watchと合体する高級腕時計 PINNACLE。お値段100万円~1400万円 - Engadget Japanesehttp://japanese.engadget.com/2015/08/04/apple-watch-pinnacle-100-1400/

Apple Watchをバンドの反対側に着けるというアプローチの高級時計が登場しました。この考え方は面白いですね。100万円はちょっと手が出ませんが,同じアプローチで安い時計が出ると,結構受け入れられるんじゃないでしょうか。

Apple Watchが傷つきやすくなるとか,キーボード打つのに邪魔だとか思ったのですが,長袖の時期ならむき出しにはならないですし,大丈夫なのかもしれません。

しかし,手首の裏側だと腕の動きで画面がオンにならなかったり,心拍センサーの推奨外だったりするようで,実用性は下がりそうです。これは,Apple側が対策してくれればなんとかなりそうですし,Apple側からApple Watchの手首側に何か着けるというアイデアが出てくるという展開もあるかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入