週刊Webテク通信

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

ネットで見かけた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の無料分析ツール

おすすめ記事

記事・ニュース一覧