週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 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デザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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