週刊Webテク通信

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

ネットで見かけた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の画面イメージ

おすすめ記事

記事・ニュース一覧