週刊Webテク通信

2016年3月第4週号 1位は,UIとUXを改善する10個のテクニック,気になるネタは,アドビ,UX/UIデザインとプロトタイピングを一気通貫できる新ツール「Adobe XD」のプレビュー版を提供開始

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

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

1. 10 UI And UX Tips (Secrets) To Improve Your Skillshttp://www.designyourway.net/blog/design/10-ui-and-ux-tips-secrets-to-improve-your-skills/

UIとUXを改善するためのテクニックを10個紹介した記事です。

  1. スケッチを描くのに時間をかける
  2. プロトタイピングツールを使ってユーザーテストを行う
  3. モバイルデバイス向けにUI/UXを最適化する
  4. デザインパターンのライブラリを活用する
  5. より良い手順となる方法を探る
  6. 潜在的ユーザーをリサーチして改善する
  7. チームのコラボレーションにGoogleドライブのようなツールを使う
  8. 成功のための技術的な秘訣を学ぶ
  9. 総合的な開発のために色を扱うスキルを改善する
  10. 線,アニメーション,ホワイトスペースを利用する

図1 UIとUXを改善する10個のテクニック

図1 UIとUXを改善する10個のテクニック

2. 40 Image Hover Effects Made with CSS3http://www.webdesigndev.com/image-hover-effects-made-with-css3/

画像にカーソルが重なったときに,アニメーションなどの効果を与えるテクニックを多数紹介しています。

タッチデバイスでは使えないにもかかわらず,カードデザインが流行っている影響もあって,最近マウスオーバーで文字が現れるなどの効果をよく見かけます。

図2 CSS3による画像のマウスオーバー効果いろいろ

図2 CSS3による画像のマウスオーバー効果いろいろ

3. Photoshop: 5 Indispensable Extensions for Everyday Use | NOUPEhttp://www.noupe.com/design/photoshop-5-indispensable-extensions-for-everyday-use-96495.html

Photoshopを使う上で必要不可欠という拡張機能を5つ紹介した記事です。

継ぎ目のない繰り返しパターンを作るもの,複数レイヤー名をまとめてリネームできるもの,Illustratorの「個別に変形」のような機能を実現するものなど,便利な拡張機能が揃っています。

図3 Photoshopを使う上で必要不可欠な拡張機能5つ

図3 Photoshopを使う上で必要不可欠な拡張機能5つ

4. 10 CSS3 Animation Scripts For Your Next Projects | SmashingApps.comhttp://www.smashingapps.com/2016/03/16/10-css3-animation-scripts-for-your-next-projects.html

CSS3によるアニメーションを実装するのに便利なスクリプト,ライブラリをまとめた記事です。

あまりに選べる効果が多いものを使うと迷ってしまいそうでもありますが,一から自分で設定するのが面倒なアニメーションが簡単に適用できて便利です。

図4 CSS3を使ったアニメーションのためのスクリプト

図4 CSS3を使ったアニメーションのためのスクリプト

5. graien resizeablehttp://essenmitsosse.de/pixel/

レスポンシブなピクセルアートが7種類楽しめるページです。ウィンドウサイズを変えるか,あるいは絵にカーソルを持って行くと追随してサイズが変わり,絵が変化します。

特に解説などは見つからなかったのですが,単純に面白いです。個人的には「Zeus」が好きです。

図5 レスポンシブなピクセルアート

図5 レスポンシブなピクセルアート

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

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

Social Media Image Resizing Tool | Landscape by Sprout Socialhttp://sproutsocial.com/landscape

各種ソーシャルメディア向けに画像をリサイズするWebサービスです。対応しているソーシャルメディアは,Twitter,Facebook,Instagram,LinkedIn,Google+,Pinterest,YouTubeとなっています。

ユーザーアイコンだけでなく,カバー画像や投稿画像など,それぞれのソーシャルメディアに適した画像が作成可能です。まとめて複数の画像も作れますが,それぞれ個別にトリミング位置やサイズを調整できます。

また,「Custom」を選ぶと,任意のピクセル数で画像をリサイズ&トリミングできます。Twitter,Facebookのプロフィール画像アップロード機能に似たUIで,シンプルで使いやすいリサイズ&トリミングツールとして,万人にお勧めできると思います。

図6 各種ソーシャルメディア向けに画像をリサイズするサービス

図6 各種ソーシャルメディア向けに画像をリサイズするサービス

今週の気になるWebネタ

アドビ,UX/UIデザインとプロトタイピングを一気通貫できる新ツール「Adobe XD」のプレビュー版を提供開始:CodeZine(コードジン)http://codezine.jp/article/detail/9328

AdobeからUX/UIデザインやプロトタイピングに特化したツール「Adobe Experience Design CC(Adobe XD)」が登場しました。以前「Project Comet」として発表されたものです。

最近はWeb制作のためのグラフィックスツールとして,Sketchの人気が高まっているので,それに対抗するツールと言えるのでしょう。画面遷移やアニメーションを実装したプロトタイプも作れるので,各種プロトタイピングツールとも競合しそうです。

プロトタイプ作成の機能もあったFireworksを完全に置き換えられるようなツールになると,開発中止のまま放置されているFireworksのファンも納得するんじゃないでしょうか。SketchはMac版しかないので,WindowsユーザーからのAdobe XDへの期待も大きいようです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入