週刊Webテク通信

2019年9月第1週号 1位は, モバイル用ウェブページで画面下部にナビゲーションを置くことについて,気になるネタは,Googleフォト、画像内テキストによる検索が可能に(まずは英語)

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

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

1. Bottom Navigation Pattern On Mobile Web Pages: A Better Alternative? — Smashing Magazinehttps://www.smashingmagazine.com/2019/08/bottom-navigation-pattern-mobile-web-pages/

モバイル用ウェブページで,画面の一番下にナビゲーションを置くことについて考察した記事です。

スマートフォンの画面サイズが大きくなり,画面上部に親指が届きにくくなったことから,メニューを下部に置くことを検討しています。

下部にロゴやハンバーガーメニューを移動させたワイヤーフレームや,実際のサイトの画面キャプチャをもとにメニューを下部に移動させた例などを紹介しています。

図1 モバイル用ウェブページで画面下部にナビゲーションを置くことについて

図1 モバイル用ウェブページで画面下部にナビゲーションを置くことについて

2. 3 Essential Design Trends, September 2019 | Webdesigner Depothttps://www.webdesignerdepot.com/2019/09/3-essential-design-trends-september-2019/

重要なデザイントレンドとして,ミレニアル世代とZ世代にアピールするデザインテクニックを3つ紹介しています。

  1. 若々しい見た目
  2. TikTokの美的センス
  3. 未来的な感じ

図2 若者にアピールするデザインテクニック

図2 若者にアピールするデザインテクニック

3. Solving Problems With CSS Grid: The Gantt Charthttps://webdesign.tutsplus.com/tutorials/solving-problems-with-css-grid-the-gantt-chart--cms-33837

CSSグリッドを使ってガントチャートを作る方法を解説しています。レスポンシブできれいなガントチャートを実装しています。

区切りとなる線に名前をつけることで,ガントチャート内のタスクの開始と終了をCSSで「grid-column: sun-morning / mon-night;」のように記述できるのがよく考えられていて感心しました。

図3 CSSグリッドを使ってガントチャートを作る方法

図3 CSSグリッドを使ってガントチャートを作る方法

4. Best Tools For Graphic Designers In 2019https://paperform.co/blog/tools-for-graphic-designers

デザイナーのためのツールをまとめています。

  • ラスターグラフィックツール
  • ベクターグラフィックツール
  • フォントと色のツール
  • ストックフォト
  • ストックアイコンとイラスト
  • ソーシャルメディア用デザインツール
  • ロゴデザインツール

図4 デザイナーのためのツールいろいろ

図4 デザイナーのためのツールいろいろ

5. How the Illustration Design Trend Caught Fire & Why Every SaaS Is Rebrandinghttps://unbounce.com/design/branding-cartoon-illustration-design-trend/

ウェブサービスのビジュアルとして,いま大流行しているフラットデザインの人物イラストについてまとめた記事です。

このトレンドの起源は,2017年に使われはじめたSlackのイラストかFacebookのイラストとする説が濃厚とのことです。

図5 いま大流行のフラットデザインの人物イラストについて

図5 いま大流行のフラットデザインの人物イラストについて

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

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

SVG Artistahttps://svgartista.net/

SVG Artistaは,SVGファイルをもとにアニメーションを作成するサービスです。strokeとfillプロパティをアニメーションするだけの単純なことしかできない分,簡単でわかりやすいです。

SVGをアップロードするかコードをペーストすると,自動的にアニメーションが作られます。アニメーションする時間やイージングなどを調整できます。SVGファイルの作り方次第で,ある程度思い通りのアニメーションを作れるんじゃないでしょうか。

AnimistaというSVGアニメーション作成サービスと同じところが作っています。より簡単にユーザーのニーズが高いアニメーションが作れるツールとして,別途開発したようです。

図6 SVGからアニメーションを作成するサービス

図6 SVGからアニメーションを作成するサービス

今週の気になるWebネタ

Googleフォト,画像内テキストによる検索が可能に(まずは英語) - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1908/26/news055.html

Google フォトで,画像内の文字を対象に検索できるようになったようです。まずは英語からとのことで,日本語対応が楽しみです。

また,Google フォト内のGoogle レンズ機能で,画像内の文字をテキスト化できるようになり,こちらは日本語にも対応しています。いまどきOCR機能は珍しくはありませんが,そのテキストをすぐにGoogle検索したり翻訳できるところが便利ですね。

今のところ画像内の文字のテキスト化は,モバイルアプリではできるけどブラウザ上ではできません。Google レンズはAndroid版の単独アプリやGoogle アシスタントでも使えますが,そもそもパソコン上で使う方法はありませんでした。

著者プロフィール

芦之由(あしのよし)

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

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

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