週刊Webテク通信

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

Webテク, Webデザイン, Web広告, UI, JavaScript, Instagram, HTML

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

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

1. Web Design: How to Use Icons on Landing Pageshttps://icons8.com/articles/web-design-how-to-use-icons-on-landing-pages/

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

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

  • アイコンを使ってリストを見映え良くする
  • ブロックの区切りにアイコンを使う
  • アイコンを使って魅力的で人目を引く要素を作る

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

図1　ウェブデザインにアイコンをどう活用するかを解説

図1　ウェブデザインにアイコンをどう活用するかを解説

2. Designing UI with Color Blind Users in Mind - Secret Stache Mediahttps://www.secretstache.com/blog/designing-for-color-blind-users/

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

  • パターンやテクスチャを使う
  • 色と記号を使用する
  • テキストラベルを使用する
  • リンクにアンダーラインを入れる
  • 色と色との組み合わせを避ける
  • 主要なボタンを目立たせる
  • フォームの必須項目には記号を入れる

図2　色覚異常ユーザーを考慮したUIデザインのヒント

図2　色覚異常ユーザーを考慮したUIデザインのヒント

3. 4 Best Practices for Designing Mega-Footers | Webdesigner Depothttps://www.webdesignerdepot.com/2018/09/4-best-practices-for-designing-mega-footers/

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

  1. ブランディングに関わる要素を入れる
  2. （問合せやダウンロードなど）ユーザーを誘導する要素を集める
  3. ソーシャルメディアボタンを追加する
  4. 階層化されたナビゲーションを作る

図3　大きなサイズのフッタをデザインするヒント

図3　大きなサイズのフッタをデザインするヒント

4. Splitting.jshttps://splitting.js.org/

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

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

図4　テキストを1文字ずつに分割してアニメーションするためのJSライブラリ

図4　テキストを1文字ずつに分割してアニメーションするためのJSライブラリ

5. 10 Advanced Image Hover Effects Snippetshttps://speckyboy.com/advanced-image-hover-effects/

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

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

図5　画像に対するホバー効果の例いろいろ

図5　画像に対するホバー効果の例いろいろ

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

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

SINIS（サイニス）｜Instagramの無料分析ツールhttps://sinis.jp/

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

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

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

図6　Instagramの無料分析ツール

図6　Instagramの無料分析ツール

今週の気になるWebネタ

Microsoft，手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表：AIで手書きの図形と文字を認識 - ＠IThttp://www.atmarkit.co.jp/ait/articles/1809/04/news052.html

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

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

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

Webテク, Webデザイン, Web広告, UI, JavaScript, Instagram, HTML

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote