週刊Webテク通信

2017年12月第1週号 1位は,よくあるレスポンシブレイアウトのCSS Gridでのコーディング例,気になるネタは,Amazon,職場用「Alexa for Business」,米国で提供開始

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

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

1. Common Responsive Layouts with CSS Grid (and some without!)https://medium.com/samsung-internet-dev/common-responsive-layouts-with-css-grid-and-some-without-245a862f48df

よくあるレスポンシブレイアウトの,CSS Gridでのコーディング例を紹介しています。

以下の4つのパターンのデモページとコードをリンクで見られます。

  1. 大きな画像のサムネイル付き記事リスト
  2. 画面一杯の画像ギャラリー
  3. カードレイアウト
  4. 聖杯レイアウト(ヘッダ,フッタ,メインコンテンツ,両側のサイドバーで構成された3カラムのレイアウト)

コードの共有に使っているGlitchというサービスも興味深いです。

図1 一般的なレスポンシブレイアウトのCSS Gridでのコーディング例

図1 一般的なレスポンシブレイアウトのCSS Gridでのコーディング例

2. CSS Grid Starter Layouts | CSS-Trickshttps://css-tricks.com/snippets/css/css-grid-starter-layouts/

こちらも,よく使われるレイアウトのCSS Gridでのコーディング例をまとめた記事です。

以下のパターンのコーディング例を,コード共有サービスCodePenによる埋め込みで閲覧できます。

  1. 聖杯レイアウト(ヘッダ,フッタ,メインコンテンツ,両側のサイドバーで構成された3カラムのレイアウト)
  2. 2カラムにヘッダ&フッタがついたレイアウト
  3. 均等配置され横幅に合わせて可変するレイアウト
  4. グリッドをはみ出す要素
  5. 簡単なカレンダー
  6. モノポリーのボード

図2 CSS Gridでのレイアウトのベースとなるコード集

図2 CSS Gridでのレイアウトのベースとなるコード集

3. 10 UX Design Predictions For 2018 | Adobe Bloghttps://theblog.adobe.com/10-ux-design-predictions-for-2018/

2018年に向けてのUXデザインに関する予測をまとめています。

  1. コンテンツ中心のユーザー体験
  2. ユーザーに時間をかけさせないデザイン
  3. より賢いパーソナライゼーション
  4. さまざまなデバイス間で統合されたユーザー体験
  5. 人間に対するのと同じような体験をデジタルで
  6. 声を使ったユーザーインターフェイス
  7. 生体認証
  8. AR(拡張現実)
  9. バーチャルリアリティに一歩近づく
  10. UXデザイナーの幅広い役割

図3 2018年のUXデザインの予測

図3 2018年のUXデザインの予測

4. 9 tools to make graphic design easier in 2018 | Creative Bloqhttp://www.creativebloq.com/inspiration/9-tools-to-make-graphic-design-easier-in-2018

グラフィックデザインを簡単にするツールを9つ紹介しています。

ツールそのものだけでなく,Photoshopの曲線ペンツール,Illustratorのパペットワープツールといった新機能や,Illustratorのプラグインなども紹介しているところが興味深いです。

図4 グラフィックデザインを簡単にするツール9選

図4 グラフィックデザインを簡単にするツール9選

5. Skeuomorphic Design — A controversial UX approach that is making a comebackhttps://medium.muz.li/skeuomorphic-design-a-controversial-ux-approach-that-is-making-a-comeback-a0b6e93eb4bb?ref=webdesignernews.com

現実世界の物をリアルに模したデザインである,スキュアモーフィック(Skeuomorphic)デザインが,UXデザインにおいて復活してきていることを解説しています。

時計,自動車,家電のデジタル化,IoT化において,現実世界のモチーフを模倣したUXデザインが今後重要になるとのことでした。

図5 スキュアモーフィックデザインの復活

図5 スキュアモーフィックデザインの復活

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

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

UPNG: fast PNG minifierhttp://upng.photopea.com/

UPNGはPNG画像を軽量化&最適化するサービスです。同様のサービスはいろいろありますが,品質とファイル容量のバランスに自信を持っているようです。

PNG画像をドラッグ&ドロップすると,自動でおすすめの状態に軽量化します。サイズ(ファイルサイズ)とクオリティのどちらを重視するかをスライダーで調整できます。

複数ファイルをドラッグ&ドロップして,まとめて処理できるので便利です。ただ,まとめて処理する場合はスライダーでの調整を画像ごとに個別に行うことはできません。

図6 PNG画像を軽量化&最適化するサービス

図6 PNG画像を軽量化&最適化するサービス

今週の気になるWebネタ

Amazon,職場用「Alexa for Business」,米国で提供開始 - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1712/01/news064.html

Amazonの音声アシスタントAlexaのビジネス版「Alexa for Business」が発表されました。会議室の予約やコピー用紙の注文などが音声命令でできるようになります。

会議室などに置いてみんなが使える共有デバイスと,個人がデスクに置いて使うパーソナルデバイスを区別して扱い,それら社内のデバイスを一括管理できるようです。

日本のオフィスに音声命令は合わないと思う人も多いかもしれませんが,会社の受付をスマートスピーカーで行うというのはありかなと思います。タッチパネルの無人受付案内システムより,音声で尋ねる方が便利ですよね。

著者プロフィール

芦之由(あしのよし)

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

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

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

バックナンバー

週刊Webテク通信

  • 2017年12月第1週号 1位は,よくあるレスポンシブレイアウトのCSS Gridでのコーディング例,気になるネタは,Amazon,職場用「Alexa for Business」,米国で提供開始

バックナンバー一覧

コメント

コメントの記入