週刊Webテク通信

2017年3月第2週号1位は、今どきのUIデザインで影やぼかしの効果を使う方法、気になるネタは、ソニー、PS4も遊べる投影型コンピュータ Xperia Touch 発表。超短焦点プロジェクターと投影面タッチ認識、Android搭載

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

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デザインに使う方法

2. A Complete Guide to CSS Grid | Codrops CSS Referencehttps://tympanus.net/codrops/cssreference/grid/

CSSでグリッドレイアウトを実現するCSS Grid Layoutについての完全ガイドです。

CSS Grid Layoutはまだ対応しているブラウザは少ないですが、Microsoft EdgeとIE11でも対応しており、Flexboxでも難しいような複雑なグリッドレイアウトを実現できます。

Chromeでは、⁠chrome://flags」で試験運用機能のページを開き、⁠試験運用版のウェブ プラットフォームの機能」を有効にすることで利用できます。

図2 CSS Grid Layoutの完全ガイド
図2 CSS Grid Layoutの完全ガイド

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開発におけるバックエンドとフロントエンド

4. 10 Useful Website Building Platforms and Toolshttps://speckyboy.com/10-useful-website-building-platforms-tools/

Webサイトを作るためのプラットフォームとツールを10個紹介しています。

ツール選びで重要な要素として以下の項目が挙げられていました。

  • ピクセルレベルでデザインをコントロールできる
  • シンプルで柔軟性のあるコンテンツ管理
  • モバイルアプリやレスポンシブデザインのサポート
  • ソーシャルメディアとの連携
図4 Webサイトを作るためのプラットフォーム&ツール
図4 Webサイトを作るためのプラットフォーム&ツール

5. 18 CSS Tabshttp://freefrontend.com/css-tabs/

タブインターフェイスのコードとデモを18種類まとめた記事です。

タブ切り替えの際のエフェクトに特徴のあるものが多く、どれを利用するのか迷いそうです。

図5 タブインターフェイスのコードとデモいろいろ
図5 タブインターフェイスのコードとデモいろいろ

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

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

Web Maker - A blazing fast & offline web playgroundhttps://kushagragour.in/lab/web-maker/

Web MakerはChrome拡張として起動するコードエディターです。コード共有サービスCodePenと似たインターフェイスで、リアルタイムプレビューを見ながらコードを記述できます。

Sass、Lessなどのプリプロセッサに対応しているのはもちろん、Bootstrap、Foundation、Animate.cssなどのCSSライブラリや、jQuery、AngularなどのJavaScriptライブラリを選ぶだけですぐに読み込めるのも便利です。

マークダウン記法も使えるので、リアルタイムにプレビューできるマークダウンエディタにもなります。作ったファイルは保存、書き出しができますし、スクリーンキャプチャを撮れたりと、なかなかの高機能です。

図6 Chrome拡張として起動するコードエディター
図6 Chrome拡張として起動するコードエディター

おすすめ記事

記事・ニュース一覧