週刊Webテク通信

2016年11月第2週号 1位は，独創的なアニメーションを使ったWebデザイン10選，気になるネタは，改札やレジでかざすだけじゃない--最新のiPhone以外でも使える「Apple Pay」

Webテク, Webデザイン, Web広告, アニメーション, 写真, ポストプロセッサ, グリッドシステム, WordPress, アバター, Apple Pay

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2016年10月31日～11月6日の間に見つけた記事のベスト5です。

1. 10 Recent Inventive Examples of Animation in Web Designhttps://speckyboy.com/10-recent-inventive-examples-animation-web-design/

独創的なアニメーションを使ったWebデザインの例を10個まとめた記事です。

  1. インタラクティブに動くメインイメージ
  2. 島をガイドする3Dツアー
  3. 紙を真似た動き
  4. 裏に隠れているモノを見せる
  5. 商品紹介で楽しませる
  6. 横スクロールに合わせた効果
  7. SVGロゴと煙のエフェクト
  8. 水が流れるようなアニメーションのSVGロゴ
  9. 雨に濡れたような効果
  10. テキストの表組みから詳細画面への面白い遷移

革新的なアイデアでクオリティも高いサイトが揃っており，思わず人に見せたくなります。一方で，訪問者の印象に残るには，これくらい凝った見せ方をしないといけないのかと考えさせられました。

図1　独創的なアニメーションを使ったWebデザイン10選

図1　独創的なアニメーションを使ったWebデザイン10選

2. 5 Tips for Mixing Photos & Illustrations in a Single Design | Design Shackhttps://designshack.net/articles/graphics/mixing-photos-illustrations/

写真とイラストを同時に使ったデザインでのテクニックを5つ紹介しています。

  1. UIのアクセントとしてイラストを使う
  2. イラストを優先する
  3. タイポグラフィのようにイラストを使う
  4. イラストをアニメーションさせることを考える
  5. ストーリーを語る

図2　写真とイラストを同時に使ったデザインのテクニック

図2　写真とイラストを同時に使ったデザインのテクニック

3. CSS Post-Processors For Beginners: Tips and Resources - Hongkiathttp://www.hongkiat.com/blog/css-post-processors-tips-resources/

SassやLESSのようなCSSプリプロセッサはだいぶ普及してきましたが，前（pre）ではなく後（post）で処理をするポストプロセッサを紹介しています。

CSSを記述した後，ベンダープリフィクスを付けたり，特定のブラウザ向けに問題回避の記述を入れるなどの処理をツールを使って自動で行うというわけです。CSSポストプロセッサのためのツールも多数紹介しています。

図3　ポストプロセッサ入門

図3　ポストプロセッサ入門

4. How to build a responsive grid system | Zell Liewhttps://zellwk.com/blog/responsive-grid-system/

レスポンシブなグリッドシステムの作り方を解説した記事です。

コラムの幅や間隔をどう計算していくかなどを，順を追って丁寧に説明しています。

図4　レスポンシブなグリッドシステムの作り方

図4　レスポンシブなグリッドシステムの作り方

5. WordPress: How to Enhance the Visual Editor With Custom Formats | NOUPEhttp://www.noupe.com/wordpress/wordpress-custom-formats-99250.html

WordPressのビジュアルエディタを，プラグインを使わずに拡張する方法を解説した記事です。

メニューにプルダウンを追加して，3種類のボタンを簡単に挿入できるようにするための作業内容を順を追って説明しています。

図5　WordPressのビジュアルエディタをプラグインを使わず拡張する方法

図5　WordPressのビジュアルエディタをプラグインを使わず拡張する方法

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

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

Adorable Avatars!http://avatars.adorable.io/

Avatarsはイラストのアバター画像を生成するWebサービスです。プロトタイプ作成やデザイン検討のときの，ダミーのプロフィールアイコンとして利用するためのものです。

サイズとユーザー名などの文字列を元にしたURLで，アバター画像が生成されます。プレースホルダー画像（ダミー画像）生成サイトと同じ使い方です。ユーザー名などの文字列が同じならば，常に同じアバター画像が生成されます。

このサイト上でアバター生成を試すこともできます。アバターは5000種類も用意されているそうです。非常にクセが強いイラストなのと，日本人好みじゃないテイストなのとが気になりますが，面白いサービスだと思います。

図6　アバター画像を生成するWebサービス

図6　アバター画像を生成するWebサービス

今週の気になるWebネタ

改札やレジでかざすだけじゃない--最新のiPhone以外でも使える「Apple Pay」 - CNET Japanhttp://japan.cnet.com/news/service/35091535/

Apple Payが日本でもスタートしたということで，アプリやウェブサイトでの決済をApple Payでも行えるようになりました。これは，iPhone 7だけでなく，古いiPhoneでも利用できます。

Apple Payに対応しているECサイトなら，指紋認証だけですぐに決済が可能になり，クレジットカード番号を入れるなどの面倒な作業が不要になります。Walletアプリで住所を登録しておけば，各ECサイトで住所を入力する必要もありません。

ユーザー登録やクレジットカード番号の入力が面倒という，はじめてのECサイトが敬遠される理由を，Apple Payで解決できるわけです。BASEやminneのような，個人がハンドメイド品などを販売できるサービスでも対応が予定されていますし，じわじわと浸透していくんじゃないかと期待しています。

Webテク, Webデザイン, Web広告, アニメーション, 写真, ポストプロセッサ, グリッドシステム, WordPress, アバター, Apple Pay

著者プロフィール

芦之由（あしのよし）

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

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

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