週刊Webテク通信

2020年6月第1週号 1位は,写真の上に文字を配置するときに使えるテクニック,気になるネタは,富士フイルムもデジカメのWebカメラ化ソフト Web会議の需要増に対応

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

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

1. 17 Tips for Designing with Type on a Photohttps://designmodo.com/design-type-photo/

写真の上に文字を配置するときに使えるテクニックを17種類まとめています。

  1. 写真と文字とのコントラストをつける
  2. 画像の一部をテキストにする
  3. ビジュアルが誘導する視点移動を利用する
  4. 画像をぼかす
  5. テキストをボックスに入れる
  6. 背景部分にテキストを追加する
  7. 大きくする(文字だけでなく写真を大きくする場合も)
  8. 文字に色を追加
  9. 写真の上に色を重ねる
  10. シンプルに
  11. 写真をずらす(文字の一部だけが画像に重なる状態)
  12. 写真の上に文字を収める考え方を捨てる
  13. 文字を縦書きにする
  14. 動的な効果を利用する(以下3つで具体例を挙げる)
  15. 視差効果を使う
  16. 遠近法の実装
  17. ホバー効果を追加する

図1 写真の上に文字を配置するときに使えるテクニック

図1 写真の上に文字を配置するときに使えるテクニック

2. Text fields & Forms design — UI components series - UX Collectivehttps://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0

フォームのテキストフィールドをデザインするためのテクニックを紹介しています。

収集するデータに適切な入力タイプを使用する,今の状態とユーザーの操作に合わせて外観を変更するなどの手法を,悪い例と良い例をビジュアルで示して解説しています。

パスワードを2回入力させるのは馬鹿げているというのは,使う側の立場からもうなずけます。パスワードを通常のテキストとして表示できるボタンをつけること,パスワードの要件を常に表示し,強度メーターをつけることがオススメされていました。

図2 フォームのテキストフィールドをデザインするヒント

図2 フォームのテキストフィールドをデザインするヒント

3. 6 Examples of Eye-Catching Landing Page Design | SpyreStudioshttps://spyrestudios.com/6-eye-catching-landing-page-design/

目を引くランディングページデザインの6つの例をまとめた記事です。

  1. 簡潔でわかりやすいホームページを用意する
  2. 適切なヒーローイメージが使われているか確認する
  3. キャッチフレーズに焦点を当てる
  4. 社会的な信頼の根拠となるものを利用する
  5. 動画を活用する
  6. ユーザーにフォーカスする

図3 目を引くランディングページデザインの6つの例

図3 目を引くランディングページデザインの6つの例

4. Top 10 Ecommerce Design Trends in 2020https://yourstory.com/mystory/top-ten-ecommerce-design-trends-2020

Eコマースのデザイントレンドを10個紹介した記事です。

  1. ウェブサイトよりモバイルアプリに重点を置く
  2. アニメーション,GIF,動画によるインタラクティブショッピング
  3. 印象的な色とキャッチーなタイポグラフィー
  4. インタラクティブな商品ビジュアルによるオリジナル写真
  5. ランディングページと商品ページの両方を兼ねる
  6. ストーリーを語り客と感情的なつながりを持つ
  7. HTTPS暗号化でサイトのセキュリティを強化する
  8. 人工知能を備えたチャットボット機能
  9. 目立たせたい商品を強調させるためグリッドレイアウトを破る
  10. 個人に向けた商品の説明文

図4 Eコマースのデザイントレンド10個

図4 Eコマースのデザイントレンド10個

5. 7 Reasons to Use Illustrations on Your Website (And Examples of How to Do It) | Codropshttps://tympanus.net/codrops/2020/05/25/7-reasons-to-use-illustrations-on-your-website/

ウェブサイトにイラストを使うべき7つのケースをまとめています。

  1. 写真では完全に撮影できない場合
  2. ブランドが独自のアプローチを必要とする独自の外観を持っている場合
  3. 写真が多い競合サイトと差別化したい場合
  4. すでに消費者からの信頼を確立しているブランドのスタイルを新しい会社が利用する場合
  5. クリエイターが面白い話をしたりシェアする場合
  6. アプリやリソースを販売している会社の場合
  7. ターゲットが子供(またはその親)の場合

図5 ウェブサイトにイラストを使うべき7つの理由

図5 ウェブサイトにイラストを使うべき7つの理由

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

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

Nesto Pomodoro Timerhttps://nesto.cc/

BGM機能のついたポモドーロタイマーをウェブ上で利用できるサービスです。ポモドーロ・テクニックと呼ばれる時間管理術を実践するときに役立ちます。スマホでも使用できます。

ポモドーロ・テクニックの25分の作業,5分の休憩,4セットごとにとる15分の長めの休憩の3つのタイマーが用意されています。BGMを自然の音,環境音,ジャズ,クラシックから選べ,背景画像も変更できます。休憩時間にはBGMは再生されません。

ポモドーロタイマーのアプリはいくつもありますが,ウェブ上で使えるものは珍しいはずです。また,仕事に集中できるようにBGMが用意されているところも面白いです。このBGMは,実はYouTubeの動画を再生していたことに気づき驚きました。

図6 BGM機能のついたポモドーロタイマー

図6 BGM機能のついたポモドーロタイマー

今週の気になるWebネタ

富士フイルムもデジカメのWebカメラ化ソフト Web会議の需要増に対応 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2005/27/news116.html

富士フイルムが同社のデジタルミラーレスカメラXシリーズ・中判デジタルカメラGFXをWebカメラ化するWindows用ソフトの提供を始めました。カメラに搭載する色調の変更機能もそのまま使えるそうです。

一足先に同様のWindowsソフトをEOS用にリリースしていたキヤノンは,Mac版の提供も始めました。また,先日ソニーが発表したビデオブロガー用のデジカメZV-1もWebカメラ化できるそうです。

リモートワークでビデオ会議の機会が増え,Webカメラとしてデジカメが注目されるようになるとは思いませんでした。自分を撮るのに慣れてきて,YouTuberデビューする人も増えるんじゃないでしょうか。

著者プロフィール

芦之由(あしのよし)

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

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

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