週刊Webテク通信

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

ネットで見かけた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画像を軽量化&最適化するサービス

おすすめ記事

記事・ニュース一覧