週刊Webテク通信

2020年11月第3週号 1位は，エンゲージメントを高めるお問い合わせページをデザインする方法，気になるネタは，「Googleフォト」，無制限の無料ストレージを2021年5月末で終了へ

Webテク, Webデザイン, Web広告, UI, SVG, 文書, Googleフォト

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

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

1. How to Design a Contact Page that Drives Engagement | Webdesigner Depothttps://www.webdesignerdepot.com/2020/11/how-to-design-a-contact-page-that-drives-engagement/

エンゲージメントを高めるコンタクト（お問い合わせ）ページをデザインする方法を解説しています。

  1. 色を正しく使用する
  2. カスタマーサポートの人がいることを感じさせる
  3. ページを見つけやすくする
  4. ユーザーの体験を有益なものにする
  5. ユーザーを適切な場所に導く
  6. お客だけじゃなく問合せを受けるチームもサポートする

図1　エンゲージメントを高めるお問い合わせページをデザインする方法

図1　エンゲージメントを高めるお問い合わせページをデザインする方法

2. Website Design: The Ultimate Guide with Examples - Designmodohttps://designmodo.com/website-design/

ウェブデザインの基本について掘り下げて，主要なUI要素，使いやすさ，アクセシビリティなどについてポイントを紹介した記事です。図版も豊富です。

  • ウェブデザインの目標
  • ウェブデザインの3つの主なタイプ
  • ウェブサイトをデザインするための要素
  • 良いウェブデザインの原則
  • ウェブデザインのユーザビリティ
  • ウェブデザインのアクセシビリティ
  • ウェブデザインのトレンド
  • ウェブデザインの事例のコレクション

図2　ウェブデザインの完全ガイド

図2　ウェブデザインの完全ガイド

3. Top Landing Page Design Tips That Will Definitely Help Youhttps://gapsystudio.com/blog/landing-page-design-tips/

効果的なランディングページを作るヒントを紹介しています。

  1. キャッチーな見出しを作る
  2. 行動を促すボタンを追加する
  3. 利点を強調する
  4. ランディングページの構造を作る
  5. 社会的な証明（レビュー，品質証明書，協力企業のロゴなど）を追加する
  6. 読み込み速度を短くする
  7. カウントダウンタイマーを使う
  8. リードフォームを追加する

図3　効果的なランディングページを作るヒント

図3　効果的なランディングページを作るヒント

4. How to fix a bad user interfacehttps://www.scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack/

良くないユーザーインターフェイスを修正する方法を解説した記事です。

デジタルプロダクトでの操作画面には以下の5つの状態があります。

  1. 理想的な状態
  2. 空の状態
  3. エラーの状態
  4. 不完全な状態
  5. 読み込み中の状態

それぞれの状態においてさらに細かく分類しつつ，画面例とともに改善のヒントを紹介しています。

図4　良くないユーザーインターフェイスを修正する方法

図4　良くないユーザーインターフェイスを修正する方法

5. API for Web Icons | SVGBox.nethttps://svgbox.net/

SVGのアイコンを無料で提供しています。UIアイコンやロゴアイコン，背景パターン用アイコンなど，今のところ8種類のアイコンセットがあります。

CDNから読み込んでimgタグで使えるのでお手軽です。

図5　無料で読み込んで使えるSVGアイコン集

図5　無料で読み込んで使えるSVGアイコン集

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

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

Scribbblehttps://www.scribbble.io/

Scribbbleはオンラインで文書を作って公開できるサービスです。非常にシンプルで今のところ有料プランなどもないようです。

今では一般的となったテキストを選択するとメニューが出現するタイプではなく，メニュー類は画面下に固定されています。見出し，リストの設定や画像の挿入など一通りの機能は揃っています。

マークダウンで記述されますが，プレビューも同時に表示できます。作った文書のリンクの文字列を自由に設定できるのは，この手のサービスでは珍しいと思いました。誰でも見られるよう公開するか，自分しか見られない下書き状態で保存するか選べます。

図6　オンラインで文書を作って公開できるサービスScribbble

図6　オンラインで文書を作って公開できるサービスScribbble

図7　Scribbbleの画面イメージ

図7　Scribbbleの画面イメージ

今週の気になるWebネタ

「Googleフォト」，無制限の無料ストレージを2021年5月末で終了へ - CNET Japanhttps://japan.cnet.com/article/35162321/

Googleフォトの「画像と動画をアップし放題，容量としてノーカウント，ただしルールにそって圧縮したりリサイズして保存します」という仕組みが終了します。この無制限枠，ひとことで説明するのが難しいですね。

2021年6月からは，アップした画像と動画は普通にストレージ容量にカウントされるようになります。だいたいのユーザーは無料で提供する15GBで3年くらいはもつんじゃないかとのことです。

Gmailを昔から使っている人は，Gmailの容量がGoogleのストレージの容量をかなり使ってるケースも多いと思います。Gmailの整理をしたら写真や動画を入れるスペースがもっと空くかもしれませんよ。Gmailに添付ファイルだけ削除する機能があったらいいんんですが…。

Webテク, Webデザイン, Web広告, UI, SVG, 文書, Googleフォト

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote