週刊Webテク通信

2016年7月第1週号 1位は,ChromeのデベロッパーツールでCSSアニメーションを検証する方法,気になるネタは,Kindleが紙に近づく新機能Page Flip導入。指挟んでパラパラを再現

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

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

1. Inspect animations | Web Tools - Google Developershttps://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/animations

Chromeのデベロッパーツールで,CSSアニメーションを検証する方法を解説しています。

アニメーションのインスペクタを表示することでアニメーションをタイムラインで表示でき,再生したり,タイミングをコントロールしてみたりできます。

全体の再生速度をボタンで100%,25%,10%で変えられ,さらにタイムライン表示で開始点,終了点をスライドして変更したり,キーフレームを移動させることが可能です。

アニメーションごとに「アニメーショングループ」が自動で作られるところも便利です。

図1 ChromeのデベロッパーツールでCSSアニメーションを検証する方法

図1 ChromeのデベロッパーツールでCSSアニメーションを検証する方法

2. Netlify: Top Ten Static Website Generatorshttps://www.netlify.com/blog/2016/05/02/top-ten-static-website-generators

静的サイトのジェネレーターをまとめた記事です。

WordPressのようにデータベースを元に動的にページを生成するのではなく,データベースを元に静的なページを書き出す仕組みが今一度注目されています。

ページの読み込み速度が速い点と,セキュリティ的な心配がない点が,特に静的サイトジェネレーターを使うメリットと説明されていました。

図2 静的サイトのジェネレーターまとめ

図2 静的サイトのジェネレーターまとめ

3. 4 Tips to Create an Epic Web Form | Social Media Todayhttp://www.socialmediatoday.com/marketing/4-tips-create-epic-web-form

良いWebフォームを作るためのヒントを4つ紹介しています。

  1. 簡潔にする
  2. 多くの情報を聞きすぎない
  3. 簡単にする
  4. 優れたサンキューページを作る

図3 良いWebフォームを作るためのヒント

図3 良いWebフォームを作るためのヒント

4. Makin' GIFs | CSS-Trickshttps://css-tricks.com/makin-gifs/

GIFアニメを作るツールを3つまとめた記事です。

iOSアプリ「GIPHY CAPTURE」⁠フリーのツールで有名な「LICEcap」⁠そしてPhotoshopが紹介されています。

図4 GIFアニメを作るツールを3つ紹介

図4 GIFアニメを作るツールを3つ紹介

5. 10 User-Friendly FAQ Page Templates & Support Themeshttp://spyrestudios.com/ux-friendly-faq-page-template-designs/

FAQページのテンプレートを多数紹介しています。

よくあるパターンの開閉するアコーディオンメニューばかりですし,後半の有料テンプレートは似たり寄ったりですが,参考にはなると思います。

図5 FAQページのテンプレートいろいろ

図5 FAQページのテンプレートいろいろ

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

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

Wunderlist | To-do リスト,リマインダー,タスク管理 - App of the Year!https://www.wunderlist.com/ja/

Wunderlistはタスク管理のWebサービスです。かなり有名なサービスなのですが,なぜ今さら取り上げたのかというと,Slackと連携するところが便利だなと思ったからです。

SlackのWunderlistアプリを設定すると,タスクの追加や完了の情報をSlackと連携できるようになります。Slackからタスクを追加することもできますが,便利なのはタスク完了をSlackに通知できることです。

グループワークのやりとりをSlackで行っているケースで,タスク管理はWunderlistで行えば,タスクの追加や完了はSlackに通知されるため,Slackさえ見ていれば情報を見逃さないことになるので便利です。

図6 Slackと連携できるタスク管理サービス

図6 Slackと連携できるタスク管理サービス

今週の気になるWebネタ

Kindleが紙に近づく新機能Page Flip導入。指挟んでパラパラを再現 (動画) - Engadget Japanesehttp://japanese.engadget.com/2016/06/28/kindle-page-flip/

Kindleに新しいブラウズ機能が追加されたとのことで動画を見てみたのですが,ちょっと予想したものとは違いました。紙の本でページをパラパラめくるのに対抗して,Kindleに登場した新機能Page Flipは,サムネイル表示が素早くスクロールでき,元の場所にもすぐ戻れるというものでした。

なるほど,紙の本のメタファーから離れての,デジタルならではの進化ですね。紙の本と似せることにこだわって,紙のめくれを再現しようとしていたことは,やっぱり間違っていたんだろうなと思いました。スキューモーフィズムからフラットデザインへの大きな流れの一例とも言えるでしょう。

あと,こういったインターフェイスがサクサク動くには,やはり電子ペーパーのKindle端末よりもタブレットやスマートフォンの方が適しているはずです。Kindle端末よりKindleアプリの機能が上になりすぎるのも,Amazonとしては悩ましいことになりそうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入