週刊Webテク通信

2017年11月第3週号1位は、ログインするときのユーザー体験を向上させる方法、気になるネタは、Instagramストーリーズ、24時間以上前の写真も投稿可能に

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

1. How to Improve the User Login Experiencehttps://line25.com/ui-ux-design/improve-user-login-experience

ログインするときのユーザー体験を向上させる方法をまとめています。

  • どこにログインするのかを明確にする
  • ソーシャルログインなど外部サービスを利用してのログイン
  • メールアドレスをユーザー名に使う
  • ユーザーアイコン画像を確認のために使う
  • すぐさまサインインできるようにする
  • ログインなのかユーザー登録なのか混乱しないようにする
図1 ログイン時のユーザー体験を向上させる方法
図1 ログイン時のユーザー体験を向上させる方法

2. 10 Ways to Increase Interactivity in Your Emails | JUST™ Creativehttp://justcreative.com/2017/11/06/10-ways-to-increase-interactivity-in-your-emails/

HTMLメールにインタラクティブ性を追加する方法を紹介しています。

メールを開いて8秒で読むべきかどうかが判断されるそうで、ユーザーを惹きつける手段としてインタラクティブ性が有効という前提での内容です。

  1. カウントダウンタイマー
  2. ナビゲーションメニュー
  3. 順番に切り替わるバナー
  4. スライダー
  5. スクラッチカードのように削ったり、めくったりするような効果
  6. アコーディオン
  7. フォームが埋め込まれている
  8. ツールチップ
  9. ビデオ

タイトルに「10通り」とありますが、9項目しかありませんでした。

ランディングページに入れる要素の参考にもなりそうです。

図2 HTMLメールにインタラクティブ性を追加する方法
図2 HTMLメールにインタラクティブ性を追加する方法

3. Advanced CSS-Only Form Styling - Jonathan Harrell | CSS Blogger & Teacher, UI/UX Designer, Front-End Developerhttps://jonathan-harrell.com/advanced-css-form-styling/

CSSだけでフォームをスタイリングするときに役立つセレクタを紹介しています。

ブラウザによってサポートしていないものもありますが、ブラウザの標準機能とCSSの組み合わせで値チェックなどいろいろなことができるのは便利ですね。

図3 CSSだけでフォームをスタイリングする最新テクニック
図3 CSSだけでフォームをスタイリングする最新テクニック

4. 9 Must-Have Features For Magazine-Style Blogs | Webdesigner Depothttps://www.webdesignerdepot.com/2017/11/9-must-have-features-for-magazine-style-blogs/

雑誌スタイルのブログに必要な機能をまとめた記事です。

  1. 強固なブランディング
  2. はっきりした見出し
  3. 階層化されたナビゲーションメニュー
  4. 読ませたい記事を集めたウィジェット
  5. 主要ソーシャルメディアのシェアボタン
  6. 関連記事
  7. 便利な検索機能(モバイルでも使えるもの)
  8. ページの要素のカスタマイズ
  9. ヘッダにアイキャッチ画像を使う
図4 雑誌スタイルのブログに必要な機能
図4 雑誌スタイルのブログに必要な機能

5. Sports Websites Design: Tips, Inspiration, and Best Practiceshttp://www.designyourway.net/blog/web-design/sports-websites-design/

スポーツ関連のウェブサイトデザインを作るためのテクニック、参考サイトなどを紹介した長文の記事です。

ソーシャルメディアへの最適化、モバイルフレンドリーなど、現在のトレンドに当てはまるものばかりなので、スポーツ業界に限らず参考になる部分は多いはずです。

図5 スポーツ関連のウェブサイトデザインのテクニックと参考サイト
図5 スポーツ関連のウェブサイトデザインのテクニックと参考サイト

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

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

Logo Crunch - The multi-resolution logo makerhttp://brandmark.io/logo-crunch/

Logo Crunchはロゴ画像を元にfaviconやアプリアイコンを生成するサービスです。複数サイズの画像をまとめて作ってくれるので便利です。

線幅を太くしたり、細かいところを塗りつぶすなどのちょっとした画像処理ができます。アイコンのサイズごとに設定でき、小さいロゴの時にハッキリ見えるために処理するといったことが可能となっています。

使ってみたところ透過のファビコン/アイコンが作れないようで、ちょっと残念でした。ファビコン/アイコンに最適化させる画像処理を簡単に行いたいというニーズ向けとしては面白いサービスだと思います。

図6 画像加工ができるファビコン/アイコン生成サービス
図6 画像加工ができるファビコン/アイコン生成サービス

おすすめ記事

記事・ニュース一覧