週刊Webテク通信

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

ネットで見かけた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サービスいろいろ

おすすめ記事

記事・ニュース一覧