週刊Webテク通信

2019年7月第4週号 1位は, 静的なプロトタイプに見た目の強弱をつけるテクニック,気になるネタは,Twitterでよく使われる絵文字,日本の1位は? トップ10発表,世界とかなり違う

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

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

1. 8 simple UI design tricks for more dynamics in static prototypeshttps://setproduct.com/blog/design-tricks-for-static-prototypes

アニメーションを使わずに,静的なプロトタイプに見た目の強弱をつけるテクニックをまとめています。

  1. ちょっとだけ浮かせる
  2. ホバー時やアクティブなものを区別する
  3. ただの飾りの幾何学図形
  4. 選択時またはハイライト時の変化
  5. 絵文字の力
  6. 1つを強調表示
  7. 入力しているフィールドを強調表示
  8. 影をつける

図1 静的なプロトタイプに見た目の強弱をつけるテクニック

図1 静的なプロトタイプに見た目の強弱をつけるテクニック

2. 50 Shades of Black: Effective Use of No Color | Design Shackhttps://designshack.net/articles/50-shades-of-black-effective-use-of-no-color/

黒を効果的に使う方法を解説した記事です。印刷物とオンラインそれぞれでの使い方を説明しています。

オンラインでの黒の使い方のテクニック6選は以下となります。

  1. 暖かいか冷たいか,プロダクトのトーンに合うようにする
  2. 画面のコントラストや背景の明るさによって黒がグレーに見えることがあるので彩度を調整する
  3. さまざまな濃さの黒を使用する
  4. ほかの色との組み合わせで黒さが変わることを考慮する
  5. 黒い背景に白い小さな文字が読みにくい人がいるので注意する
  6. 画面によってわずかに色が違って見えることを忘れない

図2 黒を効果的に使う方法

図2 黒を効果的に使う方法

3. 15 Must-Have Features for Ecommerce Siteshttps://www.searchenginejournal.com/ecommerce-guide/must-have-website-features/

ECサイトに必須なものを15個まとめた記事です。

  1. ユーザーフレンドリー
  2. モバイルフレンドリー
  3. 高解像度の写真とビデオ
  4. ユーザーによるレビュー
  5. 特別な提示
  6. ウィッシュリスト
  7. (実店舗の)店内検索機能
  8. 関連商品
  9. FAQ
  10. ソーシャルプルーフ(社会的証明)
  11. セキュリティ機能
  12. 高度な支払いオプション
  13. 詳細な発送情報
  14. 複数の接触方法があるコンタクトページ
  15. 返品ポリシー

図3 ECサイトに必須なもの15個

図3 ECサイトに必須なもの15個

4. 8 Fantastic Onboarding Carousel HTML & CSS Snippetshttps://speckyboy.com/onboarding-carousels-snippets/

カルーセルのコーディング例をCode Penより紹介しています。

モバイルでの見やすさを考慮した,縦長カード型のカルーセルが多いです。

図4 カルーセルのコーディング例いろいろ

図4 カルーセルのコーディング例いろいろ

5. 29 Years of Adobe Photoshop Design History - 90 Images - Version Museumhttps://www.versionmuseum.com/history-of/adobe-photoshop

Photoshopの歴史を1990年のバージョン1から現在まで振り返っています。

キャプチャー画像が豊富で,懐かしいスプラッシュスクリーンやインターフェイスで楽しめます。

図5 Photoshopの29年の歴史を振り返る

図5 Photoshopの29年の歴史を振り返る

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

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

FormSubmit | A Contact Form to Email Servicehttps://formsubmit.co/

FormSubmitは,フォームの内容をメール送信するだけのサービスです。よくあるフォーム作成&管理のサービスとは違い,送信部分だけを手助けするシンプルなサービスです。

フォームのactionの値にこのサービスのURLとメールアドレスを入れるだけで,そのメールアドレスにフォームの内容が送られます。ユーザー登録不要で使えるのも便利です。

同様のサービスはほかにもありますが,オプション機能が一番充実しているようです。使い方の説明もわかりやすいです。

以下,類似のサービスです。

図6 フォームの内容をメール送信するサービス

図6 フォームの内容をメール送信するサービス

今週の気になるWebネタ

Twitterでよく使われる絵文字,日本の1位は? トップ10発表,世界とかなり違う - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1907/17/news093.html

7月17日が「世界絵文字デー」とのことで,Twitter上でよく使われる絵文字TOP10がTwitter Japanから発表されました。日本と世界の上位10個で,同じものは3種類です。

日本1位のうれし泣きの絵文字は,Adobeが米国の絵文字ユーザーに調査したThe Cultural Phenomenon of Emoji | Adobe Blogでも1位でした。この絵文字は日米ともに人気が高いことは間違いなさそうです。

世界で1位のサクランボの絵文字にはいろんな意味がありそうですが,⁠Cherry Emoji Twitter」というTwitter上の団体みたいなのがあるようで,それも影響しているんだと思います。桜の花の絵文字が日本より世界の方がランクが上なのも興味深いですね。

著者プロフィール

芦之由(あしのよし)

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

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

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