ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2015年8月3日～8月9日の間に見つけた記事のベスト5です。
UIデザインの試作をApple Keynoteで作る方法を紹介しています。動きのあるUIの確認のため、Adobe After Effectsで作ることを推奨する記事は以前紹介しましたが、Keynoteの方がハードルは低そうです。
Keynote上で素材をレイアウトして、アニメーション機能で動きを付けていくワークフローを、キャプチャ画像とムービーとで丁寧に解説しています。エフェクトの「マジックムーブ」を使うと、スライド間で位置が変更されたオブジェクトを自動的に動かすことができるので便利です。
PhotoshopやSketch、Illustratorから素材をコピー＆ペーストできるのも、Keynoteの良い点とのことでした。
図1 UIデザインの試作をApple Keynoteで作る方法
開発者のための、デザインにおける10の法則です。
- システムの状況を可視化する
- システムと現実世界とを一致させる
- ユーザーの制御と自由度
- 一貫性と標準
- エラーの防止
- 思い出させるよりも認識させる
- 柔軟性と効率
- シンプル
- ユーザーの認識、判断を手助けし、エラーからリカバーする
- ヘルプとドキュメントを用意する
図2 デベロッパー向けのデザインの法則
「Webデザインは死んだ」という記事を書いた人が、さらに考えてみたという記事です。
- コンテンツは王様であるが、もうWebには縛られない
- 「Webデザイン」という概念が、われわれの技術や価値観を制限してしまう
- ネット上での配信と発見の問題
図3 Webデザインの死についての考察
Webページ上での脚注、注釈の見せ方についてまとめています。
脚注（Footnote）、余白注記（side note）、文末脚注（end note）の違いや、注釈を実現するためのjQueryプラグインなどが紹介されていました。
図4 Webページ上での脚注について
なぜマテリアルデザインは多くの人から好かれているのかを解説した記事です。
「開発者が偉大なデザイナーのように見える」という指摘は、なるほどと思いました。いろいろな人の意見も掲載されています。
図5 マテリアルデザインが多くの人から好かれている理由
そのほか、最近の記事の中から、気になるニュース記事を紹介します。
先週の気になるWebサービス
今回は、SVGに関するWebサービスやツールを多数紹介した記事を取り上げます。
以下のようなサービスが紹介されていました。
- SVGの座標について学ぶサービス
- base64フォーマットに変換するサービス
- SVGでローディングアニメーションを作るサービス
- SVGでパターンを作るサービス
- ローポリゴン風のパターンを作るサービス
- 画像のクリッピングパスをSVGで作るサービス
- SVGで点線を作るサービス
まずはSVGの扱いに慣れるために、これらのサービスを利用するというのもいいんじゃないかと思います。
図6 SVGに関するWebサービスいろいろ
