週刊Webテク通信

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

Webテク, Webデザイン, Web広告, CSS, レスポンシブWebデザイン, 3D, プレゼンテーション, カメラ

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

ネットで見かけた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などと連携してプレゼンスライドを作れるサービス

今週の気になるWebネタ

ペンにしか見えない全天球カメラ「IQUI」はカジュアル特化の「THETA」か (1/2) - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2009/17/news103.html

リコーでTHETAを作った人が新会社ベクノスで開発した全天球カメラ「IQUI（イクイ⁠）⁠」が発表されました。ベクノスはリコーから独立したスタートアップ会社です。

ペン型でスリムな形状で，女性に持ってもらうことを意識していると思われるおしゃれ感のあるビジュアルです。別売りのバッテリーチャージャー兼用ケースも，女性が持っても違和感のないデザインに見えます。

価格は税別2万9800円ですが，カジュアルな全天球カメラにどれだけ需要があるのか気になりますね。SNSでのクチコミで広まっていくことを期待しているんだと思います。

Webテク, Webデザイン, Web広告, CSS, レスポンシブWebデザイン, 3D, プレゼンテーション, カメラ

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote