2018年9月第2週号 1位は、ウェブデザインにアイコンをどう活用するか、気になるネタは、Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表

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

ランディングページ内のいろいろな要素に、アイコンをどう使うのかを解説した記事です。アイコン素材を提供するサービス「Icons8」による記事なので、要所要所でIcons8について触れています。

大きく以下の3つの項目に分けて紹介しています。

Icons8を使ってアイコンの色を変更する方法、背景に図形を置く方法なども解説しています。どういうキーワードでアイコンを検索するかを紹介しているところが、アイコンを探す上でのヒントになるなと思いました。

色覚異常のユーザーのことを考慮して、UIデザインを行うためのヒントをまとめています。

大きなサイズのフッタをデザインするためのヒントを紹介しています。

テキストを1文字ずつに分割して個別にclassなどを振ることで、柔軟なテキストアニメーションを簡単に実現できるようにするJavaScriptライブラリです。

1文字ずつclassが適用されるので、文字ごとに色を付けるとか大きさを変えるなど、アニメーション以外の用途にも応用できそうです。

画像に対するホバー効果のコーディング例をCodePenからまとめた記事です。

劇的なホバー効果はユーザーの気を引くのに最適と解説してありますが、ちょっと派手過ぎる効果と感じられるものもありました。

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

最短3分で完成するAI自動動画制作ツール「VIDEO BRAIN⁠」⁠ - 週刊アスキー
月額15万円からのプランで提供するそうです
YouTube、“⁠動画で募金⁠”支援ツール「YouTube Giving」提供開始 - ITmedia NEWS
手数料はYouTubeが負担し寄付金の100％が非営利団体に送金されるとのこと
ソフトバンクとヤフーのPayPay、Alipayと連携中国観光客の利用促す - ITmedia NEWS
今秋に提供を始めるPayPayの加盟店でもAlipayを利用できるようにするそうで、加盟店獲得の決め手になりそうですね

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

SINIS（サイニス）は日本で開発された Instagramの無料分析ツールです。Instagram上で見られるインサイト情報をベースにしていますが、パソコンから見られることでの利便性は大きいはずです。

Facebookのアカウントで認証するため、InstagramのアカウントをFacebookページと連携しておく必要があります。インサイトデータを上手くグラフにしており、グラフ化したフォロワー数の推移などインサイトでは見られない機能も提供しています。

自分の管理するFacebookページに紐付けられているInstagramアカウントをまとめて管理して、切り替えながら解析結果を見ていけるのも便利です。データのエクスポート機能もありますが、現状は「プロフィールへのアクション」「⁠発見」だけしかエクスポートできませんでした。

手書きでスケッチしたUI画面をHTMLコードに自動変換する技術をMicrosoftが発表しました。実際にスケッチ画像をアップロードして試すことができます。

フレームワークにBootstrapを使ってコーディングするというアプローチは良いですね。コーディングの品質はともかく、スケッチ上の各要素がどういうUI要素かという認識はちゃんとできているようです。

この仕組みのようにプロトタイプを素早く作るというアプローチと、本番に使えるコーディングを手助けしてくれるというアプローチの両方で、AIが活かされていくのだと思います。今後の進化が楽しみです。