週刊Webテク通信

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

ネットで見かけた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 フォームの内容をメール送信するサービス

おすすめ記事

記事・ニュース一覧