週刊Webテク通信

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

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

ネットで見かけた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 画像加工ができるファビコン/アイコン生成サービス

今週の気になるWebネタ

Instagramストーリーズ,24時間以上前の写真も投稿可能に - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1711/09/news060.html

24時間で自動で消えるストーリー機能は,24時間以内に撮った写真しか投稿できない仕様だったのですが,その制限がなくなりました。24時間以上前の写真には自動的に撮影日が入るということで,区別はしています。

ところで記事タイトルの「ストーリーズ」表記に違和感を感じたんですが,Instagramのアプリを見てみると確かに「ストーリーズ」と書いてあります。以前は「ストーリー」だったのが表記が変わったんですね。

Facebookの方は「ストーリー」表記のままですが,そのうち統一されるのでしょうか? 英語ではこの機能そのものは「Instagram Stories」のように呼んでいるようですが,単体の場合は「My Story」のように普通に使い分けるようです。まあ,日本では単数形でも複数形でも違和感はないので,どっちでもいい気はしますね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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

コメント

コメントの記入