ネットで見かけたWebテク
1. 7 Tips for Delighting Users With Great UX | Design Shackhttp://designshack.net/articles/ux-design/7-tips-for-delighting-users-with-great-ux/
すばらしいUX
- ユーザーごとにカスタマイズする
- アニメーションはシンプルに
- 一般的なデザインパターンを使用する
- 個性を持たせる
- 画面サイズで考える
- インタラクティブなコンテンツを組み込む
- 簡単で整然としたものを作る
![図1 すばらしいUXでユーザーを喜ばすテクニック7つ 図1 すばらしいUXでユーザーを喜ばすテクニック7つ](/assets/images/design/clip/01/weekly-web-tech/201602/25/001.png)
2. Is your website layout doing more damage than you think? – Design Schoolhttps://designschool.canva.com/blog/web-layouts/
Webサイトのレイアウトのパターンを7つまとめた記事です。いろいろなケースに合わせて適用できる実用的なレイアウトとして紹介されています。
- フリーフォームグリッド
- 固定サイドバー
- テキスト主体
- 2カラム
- 焦点を当てる部分を目立たせる
- 見出し+画像ギャラリー
- モジュラー
![図2 Webサイトのレイアウトパターン7つ 図2 Webサイトのレイアウトパターン7つ](/assets/images/design/clip/01/weekly-web-tech/201602/25/002.png)
3. Methods for Using Micro-Interactions on Your Sitehttp://speckyboy.com/2016/02/15/micro-interactions/
サイトにマイクロインタラクション
マイクロインタラクションの4つの柱
![図3 サイトにマイクロインタラクションをプラスする方法 図3 サイトにマイクロインタラクションをプラスする方法](/assets/images/design/clip/01/weekly-web-tech/201602/25/003.png)
4. How to Use CSS3 Transitions & Animations to Highlight UI Changes - Hongkiathttp://www.hongkiat.com/blog/visualizing-change-css-transitions-animations/
CSS3のトランジション、
通常は隠れているメニューが、
![図4 CSS3トランジション/アニメーションをUIの変更時に使う方法 図4 CSS3トランジション/アニメーションをUIの変更時に使う方法](/assets/images/design/clip/01/weekly-web-tech/201602/25/004.png)
5. Free Carousels and Sliders Based on Bootstrap - Designmodohttp://designmodo.com/free-sliders-bootstrap/
Bootstrapをベースとした、
Bootstrapを利用しているので、
![図5 Bootstrapベースのカルーセル/スライドショー 図5 Bootstrapベースのカルーセル/スライドショー](/assets/images/design/clip/01/weekly-web-tech/201602/25/005.png)
そのほか、
- PayPal、
「PayPal Commerce」 を発表-- 「購入ボタン」 の設置を手軽に - CNET Japan
メール、ソーシャルメディア、 ブログなどに 「購入ボタン」 を入れられるようになるとのこと - Twitter、
顧客サービス向け新機能を発表--ダイレクトメッセージが容易に - CNET Japan
ツイートにプライベートメッセージを送るリンクボタンを埋め込めるようになるようです 「お客さま視点」 で解約金ナシ継続 格安スマホシェアNo1を目指す新生イオンモバイル -ITmedia Mobile
自らがMVNOとなり「イオンモバイル」 ブランドでの通信サービスを開始するそうで、 話題になりそうです
先週の気になるWebサービス
THE EMOJINI 3000 | powered by Curalatehttps://emojini.curalate.com/
THE EMOJINI 3000は、
Instagramの自分のアカウントと接続すると、
画像のURLを入力する、
![図6 画像を元に関連する絵文字を表示するサービス 図6 画像を元に関連する絵文字を表示するサービス](/assets/images/design/clip/01/weekly-web-tech/201602/25/thumb/TH800_006.png)
![図7 画像から絵文字を表示した例 図7 画像から絵文字を表示した例](/assets/images/design/clip/01/weekly-web-tech/201602/25/thumb/TH800_007.png)