ネットで見かけたWebテク
1. 6 big redesigns of summer 2015 | Web design | Creative Bloqhttp://www.creativebloq.com/web-design/big-redesigns-summer-2015-101517324
この夏デザインリニューアルされたサイト6つを取り上げて、
同時期にリデザインされたサイトのまとめは、
しいて傾向を挙げるとすると、
![図1 最近デザインリニューアルされたサイトと変更箇所 図1 最近デザインリニューアルされたサイトと変更箇所](/assets/images/design/clip/01/weekly-web-tech/201511/05/thumb/TH800_001.png)
2. User Experience Design — Best sources to learn UX — Personal Growth — Mediumhttps://medium.com/keep-learning-keep-growing/user-experience-design-best-sources-to-learn-ux-c67bf80484ce#.1omjsfgx2
ユーザーエクスペリエンスデザイン
有料の電子書籍や学習サイトなど、
![図2 UXデザインを学べるサイトやサービスいろいろ 図2 UXデザインを学べるサイトやサービスいろいろ](/assets/images/design/clip/01/weekly-web-tech/201511/05/thumb/TH800_002.png)
3. Background Image Shapes | CSS-Trickshttps://css-tricks.com/background-image-shapes/
斜めになった図形を使って画像をトリミングするテクニックを紹介した記事です。
以下の5つの項目を実現することを目標とします。
- CMSで管理した画像を割りあてる
- レスポンシブ
- 画像はアニメーションして切り替わる
- 対応していないブラウザにも代替手段を用意する
- Flashなどを使わずセマンティックに構築する
そして、
- CSS Transform
(多くの計算が必要でブレイクポイントの設定が難しい) - CSS clip-path
(作りやすいがIEが非対応) - SVG
(多くのブラウザで対応しているがちょっと期待はずれ、 Firefoxでバグ) - SVG
+
また、
![図3 斜めになった図形を使って画像をトリミングするテクニック 図3 斜めになった図形を使って画像をトリミングするテクニック](/assets/images/design/clip/01/weekly-web-tech/201511/05/thumb/TH800_003.png)
4. CSSGramhttp://una.im/CSSgram/
CSS FiltersとCSS Blend Modesを使って、
classを指定するだけで簡単に適用できるので、
![図4 インスタグラムのフィルターのような効果をCSSで 図4 インスタグラムのフィルターのような効果をCSSで](/assets/images/design/clip/01/weekly-web-tech/201511/05/thumb/TH800_004.png)
5. NavNav - 90+ Responsive Navigation Bar Menu Tutorials, Examples, and Demos (CSS, jQuery, JavaScript)http://navnav.co/
レスポンシブなナビゲーションのサンプル、
ドロップダウン、
![図5 レスポンシブなナビゲーションを作るための情報源となるまとめサイト 図5 レスポンシブなナビゲーションを作るための情報源となるまとめサイト](/assets/images/design/clip/01/weekly-web-tech/201511/05/thumb/TH800_005.png)
そのほか、
- タイ・
バンコクで同国初の 「歩きスマホ」 専用レーンを試験的に導入 - Engadget Japanese
日本の駅のホームの歩きスマホ問題には応用できなそうですが、面白い試みです - Facebookメッセンジャーアプリで友達以外にメッセージを送れる
「Message Request」 機能が追加へ - ITmedia ニュース
これまでモバイルアプリからは友達にしか送れなかったんですね - 任天堂、
スマホアプリ第1弾 「Miitomo」 を3月に配信--新会員サービスも同時期から開始 - CNET Japan
ついに任天堂からもスマホアプリが登場します
先週の気になるWebサービス
10 Tools for Collecting Your Design Inspiration | Design Shackhttp://designshack.net/articles/business-articles/10-tools-for-collecting-your-design-inspiration/
今回は、
Historiousは、
EmberはWebページ全体のスクリーンショットを撮って管理できる便利なツールなのですが、
![図6 Webページをコレクションするツール10選 図6 Webページをコレクションするツール10選](/assets/images/design/clip/01/weekly-web-tech/201511/05/thumb/TH800_006.png)