ネットで見かけたWebテク
1. How To Use Shadows And Blur Effects In Modern UI Design – Smashing Magazinehttps://www.smashingmagazine.com/2017/02/shadows-blur-effects-user-interface-design/
今どきのUIデザインで影やぼかしの効果を使う方法について解説した記事です。
- 影とユーザーインターフェイスのわかりやすさ
- 階層構造と奥行きを視覚的に印象付ける
- 高さの表現で操作のフィードバックを提供する
- モバイルインターフェイスでぼかしを使う利点
- 操作の流れを明確にする
- ユーザーの注意を引く
- 写真の上のテキストを読みやすくする
- ぼかし効果による問題点
- モバイル環境での過度なぼかしの使用
(パフォーマンスとバッテリ寿命に影響) - ぼかし効果と文字の読みやすさの問題
(ぼかした背景画像の上の文字は写真によっては読みにくい) - ぼかし効果とコンテンツ量の多いページ
(ぼかした背景の上に大量のコンテンツがあると読みにくい)
- モバイル環境での過度なぼかしの使用
![図1 影やぼかしの効果を今どきのUIデザインに使う方法 図1 影やぼかしの効果を今どきのUIデザインに使う方法](/assets/images/design/clip/01/weekly-web-tech/201703/09/thumb/TH800_001.png)
2. A Complete Guide to CSS Grid | Codrops CSS Referencehttps://tympanus.net/codrops/cssreference/grid/
CSSでグリッドレイアウトを実現するCSS Grid Layoutについての完全ガイドです。
CSS Grid Layoutはまだ対応しているブラウザは少ないですが、
Chromeでは、
![図2 CSS Grid Layoutの完全ガイド 図2 CSS Grid Layoutの完全ガイド](/assets/images/design/clip/01/weekly-web-tech/201703/09/thumb/TH800_002.png)
3. Back End vs Front End Web Development - Exploring Both Sideshttps://www.keycdn.com/blog/back-end-vs-front-end/
Web開発におけるバックエンドとフロントエンドについて、
バックエンドとフロントエンドのどちらの立場の人も知っておくべき知識は、
![図3 Web開発におけるバックエンドとフロントエンド 図3 Web開発におけるバックエンドとフロントエンド](/assets/images/design/clip/01/weekly-web-tech/201703/09/thumb/TH800_003.png)
4. 10 Useful Website Building Platforms and Toolshttps://speckyboy.com/10-useful-website-building-platforms-tools/
Webサイトを作るためのプラットフォームとツールを10個紹介しています。
ツール選びで重要な要素として以下の項目が挙げられていました。
- ピクセルレベルでデザインをコントロールできる
- シンプルで柔軟性のあるコンテンツ管理
- モバイルアプリやレスポンシブデザインのサポート
- ソーシャルメディアとの連携
![図4 Webサイトを作るためのプラットフォーム&ツール 図4 Webサイトを作るためのプラットフォーム&ツール](/assets/images/design/clip/01/weekly-web-tech/201703/09/thumb/TH800_004.png)
5. 18 CSS Tabshttp://freefrontend.com/css-tabs/
タブインターフェイスのコードとデモを18種類まとめた記事です。
タブ切り替えの際のエフェクトに特徴のあるものが多く、
![図5 タブインターフェイスのコードとデモいろいろ 図5 タブインターフェイスのコードとデモいろいろ](/assets/images/design/clip/01/weekly-web-tech/201703/09/thumb/TH800_005.png)
そのほか、
- GoogleのノートアプリKeepがG Suiteに統合、
Google Docsからも利用やアップデートが可能 | TechCrunch Japan
スマホでKeepを使いGoogle Docsでまとめるという連携は便利そうです。 - モジラ、
「後で読む」 サービス 「Pocket」 の開発元を買収 - CNET Japan
この記事を見てPocketの昔の名前「Read It Later」 が社名なんだなとあらためて思いました。 - LINEがAI基盤
「Clova」 を発表、 今夏にはスマートスピーカーも発売——さらに 「Gatebox」 も子会社化 | TechCrunch Japan
Amazon Echo、Google Homeに対抗する音声アシスタントAIは、 なんとLINEから登場するようです。
先週の気になるWebサービス
Web Maker - A blazing fast & offline web playgroundhttps://kushagragour.in/lab/web-maker/
Web MakerはChrome拡張として起動するコードエディターです。コード共有サービスCodePenと似たインターフェイスで、
Sass、
マークダウン記法も使えるので、
![図6 Chrome拡張として起動するコードエディター 図6 Chrome拡張として起動するコードエディター](/assets/images/design/clip/01/weekly-web-tech/201703/09/thumb/TH800_006.png)