週刊Webテク通信

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

ネットで見かけた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 ソーシャルメディア用の画像や動画のテンプレート

おすすめ記事

記事・ニュース一覧