週刊Webテク通信

2019年11月第5週号 1位は，ボタンやメニューのクリックできる領域を増やす方法，気になるネタは，Apple，企業向け音楽配信「Apple Music for Business」。ブランド毎に楽曲選別

Webテク, webデザイン, Web広告, モバイル, Flexbox, アニメーション, AI, 音楽

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2019年11月18日～11月24日の間に見つけた記事のベスト5です。

1. Enhancing The Clickable Area Sizehttps://ishadeed.com/article/clickable-area/?ref=webdesignernews.com

ボタンやメニューのクリックできる領域を増やす方法を解説した記事です。ボタンのテキストの周りの余白が少ない，メニューバーのテキスト部分しかクリックできないなどのミスを正す方法を紹介しています。

ボタン，メニュー，ハンバーガーメニュー，チェックボックスとラジオボタン，サイドバー，セクションヘッダーについて取り上げていました。

また，CSSで要素の幅と高さを変更したり，余白を使用するだけでは対応できない場合に，擬似要素（afterやbeforeなど）を使ってクリック可能な領域を大きくするコーディング例も掲載しています。

図1　ボタンやメニューのクリックできる領域を増やす方法

図1　ボタンやメニューのクリックできる領域を増やす方法

2. Flexbox — The Animated Tutorial - JavaScript Teacher - Mediumhttps://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2

Flexboxをアニメーションで学ぶチュートリアルです。ウィンドウサイズを変更した場合の挙動をアニメーションGIFで見られます。

フレックスコンテナ内のアイテムが，横幅，あるいは高さによってどう変化するかがわかりやすいです。

図2　Flexboxをアニメーションで学ぶチュートリアル

図2　Flexboxをアニメーションで学ぶチュートリアル

3. Top 5 Mobile Application Design Tips For 2020https://inkbotdesign.com/mobile-application-design-tips/

モバイルアプリケーションをデザインするヒントをまとめています。

  1. 最初の画面にメインの機能を表示
  2. よりシンプルに
  3. 標準的な手法を使う
  4. 利用者に合わせて調整する
  5. サイトとデザインなどを揃える

図3　モバイルアプリケーションをデザインするヒント

図3　モバイルアプリケーションをデザインするヒント

4. 14 inspiring UX designer portfolios | Webflow Bloghttps://webflow.com/blog/ux-designer-portfolio

UXデザイナーのポートフォリオサイトをまとめた記事です。シンプルで色数が少ないものが多いですね。

サイトを訪れなくても動きがわかるようアニメーションも掲載していますが，実際のサイトで見ることをおすすめします。

図4　UXデザイナーのポートフォリオサイトいろいろ

図4　UXデザイナーのポートフォリオサイトいろいろ

5. Logo color combinations that look great and you should tryhttps://www.designyourway.net/blog/graphic-design/logo-color-combinations/

ロゴの配色で，見栄えの良い色の組み合わせについて解説しています。ロゴに使用する色数に決まりはありませんが，ほとんどのロゴでは3色か2色が使われているとのことです。

最後にベストな色の組み合わせとして，黄色と赤，黄色と青，黒と金色などを実例とともに紹介していて参考になります。

図5　ロゴの見栄えの良い色の組み合わせ

図5　ロゴの見栄えの良い色の組み合わせ

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

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

Rosebud AIhttps://app.generative.photos/

AIが作った人物素材を使って画像を作るサービスです。現状のものはデモ版という位置づけなのだと思います。

人物の入った写真の顔の部分を，AIで生成した顔で差し替えられます。今のところ利用できるのは女性の写真だけで，4人の顔に変更することが可能です。

現在は使えませんがアップロードボタンもあるので，将来的には人物の入った写真をアップロードして，顔を差し替えられるのだと思います。

このサービスの説明ページ「25,000 AI Photos」によると，AIが生成した2万5千人以上のモデルがいるとのことでした。

図6　写真内の人物の顔をAIで生成した顔で差し替えるサービス

図6　写真内の人物の顔をAIで生成した顔で差し替えるサービス

今週の気になるWebネタ

Apple，企業向け音楽配信「Apple Music for Business」。ブランド毎に楽曲選別 - AV Watchhttps://av.watch.impress.co.jp/docs/news/1219921.html

企業向け音楽配信サービス「Apple Music for Business」が発表されました。店舗向け音楽の大手プロバイダPlayNetworkと提携してサービスを提供するそうです。日本は含まれていません。

Apple Musicを店舗のBGMとして使えるようになる話だと思うのですが，公式サイトや日本での報道を見ても，いまひとつ詳細がピンときません。USEN（有線）とAppleが提携したような感じなんでしょうか。

PlayNetworkが企業，ブランドごとにカスタマイズしたプレイリストを提供するところがポイントのようです。なお，このニュースを知って，店舗のBGMにApple Musicを使えないことを知る人もいそうですね。

Webテク, webデザイン, Web広告, モバイル, Flexbox, アニメーション, AI, 音楽

著者プロフィール

芦之由（あしのよし）

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

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

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