週刊Webテク通信

2020年9月第4週号1位は、Webデザインで使われる5つの基本の画像タイプ、気になるネタは、ペンにしか見えない全天球カメラ「IQUI」カジュアル特化の「THETA」

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

1. 5 Basic Types of Images in Web Design - Design4Usershttps://design4users.com/types-of-images-web-design/

Webデザインで使われる5つの基本の画像タイプを解説した記事です。

以下の項目ごとに使用される目的、事例、使用するときのヒントなどを解説しています。

  1. ロゴ
  2. 写真
  3. イラスト
  4. マスコット
  5. 3Dグラフィックス
図1 Webデザインで使われる5つの基本の画像タイプ
図1 Webデザインで使われる5つの基本の画像タイプ

2. Learn CSS Centeringhttps://ishadeed.com/article/learn-css-centering/

CSSによるセンター揃えの方法をまとめた記事です。

  • 要素の水平方向センター揃え
  • ブロック要素の水平方向センター揃え
  • インライン要素の垂直方向センター揃え
  • ブロック要素の水平方向センター揃え
  • インライン要素の水平&垂直方向センター揃え
  • その他の要素の水平&垂直方向センター揃え

お皿のイラストがセンター揃えされる図版がそれぞれあるのですが、皿に載せるフルーツやスイーツを選べる遊び心がいいですね。

図2 CSSによるセンター揃えの方法いろいろ
図2 CSSによるセンター揃えの方法いろいろ

3. The Beginner's Guide to Responsive Web Design in 2020 (Code Samples)https://kinsta.com/blog/responsive-web-design/

レスポンシブWebデザインの初心者向けガイドです。

  • レスポンシブウェブデザインとは
  • レスポンシブWebデザイン対アダプティブデザイン
  • レスポンシブデザインが重要な理由
  • WordPressサイトはレスポンシブか?
  • レスポンシブWebデザインの構成要素
  • レスポンシブの一般的なブレークポイント
  • ウェブサイトをレスポンシブにする方法
  • レスポンシブデザインのCSSユニットと値
  • レスポンシブデザインの事例
図3 レスポンシブWebデザインの初心者向けガイド
図3 レスポンシブWebデザインの初心者向けガイド

4. A guide to minimalist design. The reign of white space. | by Inês Bernardino | Sep, 2020 | UX Collectivehttps://uxdesign.cc/a-guide-to-minimalist-design-36da72d52431

ミニマリストデザインのガイドです。

以下の項目に分けて豊富な事例とともに解説しています。

  • ホワイトスペース
  • 写真とイラスト
  • タイポグラフィと数字
  • 形状とパターン
図4 ミニマリストデザインのガイド
図4 ミニマリストデザインのガイド

5. 3D Icons Trend 2020 - Masterpicks - Design Inspirationhttps://www.themasterpicks.com/3d-icons-trend-2020/

3Dで作られたアイコンセットをまとめています。UI8という素材配布サイトに3D Assetsというメニューが作られ、そこに掲載されている3D素材をピックアップしたもののようです。

色を変えるなどカスタマイズできる素材が多いです。画像ファイルとして提供しているものがほとんどですが、3Dデータ自体も配布しているものもありました。

図5 3Dアイコンセットいろいろ
図5 3Dアイコンセットいろいろ

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

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

Wunderpresentation - Create presentation slides from any texthttps://wunderpresentation.com/

Wunderpresentationは、Notionのページやマークダウン記法のテキストから簡単にプレゼンスライドを作れるサービスです。Notion、マークダウン、Trelloと連携できます。Figmaへの対応とAPIの提供も予定しています。

スライドはマウス、キーボード、タッチでの操作に対応しています。プレゼンテーションモードでは全画面表示も可能です。プレゼンテーションは独自のURLを持っているので、リンクで共有できます。

現在はベータ版でユーザー登録不要で使えます。マークダウンからプレゼンスライドを作るサービスは以前からありますが、複数のサービスと連携したものは珍しく、今後に期待したいと思います。

図6 Notionなどと連携してプレゼンスライドを作れるサービス
図6 Notionなどと連携してプレゼンスライドを作れるサービス

おすすめ記事

記事・ニュース一覧