週刊Webテク通信

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

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

ネットで見かけた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拡張として起動するコードエディター

今週の気になるWebネタ

ソニー,PS4も遊べる投影型コンピュータ Xperia Touch 発表。超短焦点プロジェクター と投影面タッチ認識,Android搭載:MWC2017 - Engadget 日本版http://japanese.engadget.com/2017/02/27/ps4-xperia-touch-x-x-andro/

Android OSを搭載し,プロジェクタで映した画面をタッチ操作できる投影型コンピュータ「Xperia Touch」が発表されました。かなり未来を感じられる面白いデバイスです。

タッチ認識は赤外線とカメラを組合せた方式で,毎秒60フレームで10点マルチタッチ認識に対応とのこと。発売後のファームウェアアップデートでジェスチャー操作にも対応するそうです。

紹介ムービーにも登場していますが,やはり子供に受けそうなデバイスです。チームラボのやってるようなことの縮小版ができそうにも思えます。これを使って何をしようかと考えるのが楽しい期待のデバイスです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入