週刊Webテク通信

2019年12月第3週号 1位は,ウェブページに「Fパターン」は今でも重要か,気になるネタは,Googleアシスタントのリアルタイム通訳機能がiOSとAndroidでも利用可能に

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

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

1. Is the F-pattern Still Relevant? | Webdesigner Depothttps://www.webdesignerdepot.com/2019/12/is-the-f-pattern-still-relevant-in-web-design/

ウェブページを見るときの目の動きがF字型になるという「Fパターン」を意識することは今でも重要かを考察した記事です。

ユーザーにとって関連性のあるもの,興味を引くものにうまく誘導できない場合にF字型になるので,その誘導ができればF字型は関係ないとのことでした。

ユーザーがページを目でスキャンするために,以下の要素をページに入れると良いそうです。

  • 短い文と段落
  • ヘッダーとサブヘッダーを使用し,すばやくわかりやすく説明する
  • 箇条書き,画像,太字のテキスト,ハイパーリンク,豊富なスペースなど,自然に目が止まる要素

図1 ウェブページに「Fパターン」は今でも重要か

図1 ウェブページに「Fパターン」は今でも重要か

2. Small Business Website Design: 5 Tips to Improve Ithttps://icons8.com/articles/small-business-website-design/

スモールビジネスでのウェブデザインのヒントを紹介しています。

  1. シンプルでエレガントなデザインを選ぶ
  2. レスポンシブが重要
  3. 色の使い方を学ぶ
  4. ソーシャルメディアをデザインに取り込む
  5. 画像をうまく使用する
  6. 適切なタイポグラフィを選ぶ

図2 スモールビジネスでのウェブデザインのヒント

図2 スモールビジネスでのウェブデザインのヒント

3. Picking the right stock photo for your next design projecthttps://uxplanet.org/picking-the-right-stock-photo-for-your-next-design-project-91691babeef8

ストックフォトを配布しているサイトをまとめています。無料で使えるストックフォトのサイトが多数あって参考になります。

また,食べ物写真,ビンテージ写真を配布しているサイトや,写真をダブルトーンにするサービスも紹介していました。

図3 無料のストックフォトサイトのまとめ

図3 無料のストックフォトサイトのまとめ

4. 17 useful tools for UI/UX designers | Webflow Bloghttps://webflow.com/blog/ui-ux-design-tools

UI/UXデザインツールを17種類まとめた記事です。

Sketch,Adobe XD,Figmaといった定番のものから,あまり知らないもの,まだあったんだという懐かしいものなどがありました。

図4 UI/UXデザインツールを17種類紹介

図4 UI/UXデザインツールを17種類紹介

5. The Figma tutorials and guides you've been looking forhttps://www.designyourway.net/blog/resources/figma-tutorials/

Figmaを学ぶためのチュートリアル記事や動画をまとめています。

初心者向けのものから高度なものまで,順番に取り上げてあり参考になりそうです。

図5 Figmaを学ぶためのチュートリアルいろいろ

図5 Figmaを学ぶためのチュートリアルいろいろ

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

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

SocialSizes.io - Image and Video sizes for Social Mediahttps://socialsizes.io/

SocialSizesは,いろいろなソーシャルメディアで使用する画像や動画のテンプレートを提供しています。Sketch,Figma,Adobe XD,Photoshopのファイルをダウンロードできます。

たとえばInstagramのテンプレートには,フィード用,ストーリー用,プロフィール用のサイズを指定した,複数のアートボードが1つのファイルになっています。それぞれのソーシャルメディアでの画像のサイズや注意点,動画のサイズや長さの制限の資料としても便利です。

アメリカでも人気というTikTokや,AppStore用のテンプレートもありました。なお,全てのテンプレートが1ファイルにまとまっているものもあります。それをダウンロードしておけば,サイズの確認をしたいときにも使えますね。

図6 ソーシャルメディア用の画像や動画のテンプレート

図6 ソーシャルメディア用の画像や動画のテンプレート

今週の気になるWebネタ

Googleアシスタントのリアルタイム通訳機能がiOSとAndroidでも利用可能に - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1912/13/news059.html

Googleアシスタントでリアルタイム通訳機能が使えるようになりました。⁠OK Google,英語の通訳をして」などと話しかけると通訳モードになります。

動作的には,Google翻訳の会話モードと同じような感じです。会話を前提としているので,英語のポッドキャストをひたすら自動翻訳させるために使うのは難しそうでした。

まだAndroid版のみですが,音声文字変換アプリを使うとリアルタイムで音声から文字起こしもできます。英語の文字起こし&翻訳がスマホの無料アプリだけでリアルタイムにできるのは,英語学習に役立つでしょうし,便利な時代になったなと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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