週刊Webテク通信

2017年8月第5週号 1位は，円滑なユーザー体験のためにウェブデザインでやるべきこと，やってはいけないこと，気になるネタは，Twitterのハッシュタグが誕生10周年

Webテク, Webデザイン, Web広告, ハンバーガーメニュー, Chrome, CSS, アニメーション, Twitter

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

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

1. Do’s and Don’ts of Web Design for Smooth User Experiencehttp://techstory.in/web-design-smooth-user-experience/

円滑なユーザー体験のためにウェブデザインでやるべきこと，やってはいけないことをまとめた記事です。

やるべきこと
  1. デバイスに関係なく，同様の体験を提供する
  2. 使いやすい明快なナビゲーションをデザインする
  3. 訪問済みリンクの色を変える
  4. 簡単に目を通せるページにする
  5. 全てのリンクをダブルチェックする
  6. クリック可能な要素がそのように見えるようにする
やってはいけないこと
  1. コンテンツのロードで訪問者を待たせる
  2. リンクを新しいタブで開く
  3. プロモーションで画面をふさぐ
  4. スクロールを乗っ取る
  5. ビデオと音を自動再生する
  6. 美しさのために使いやすさを犠牲にする
  7. 点滅するテキストや広告

図1　円滑なユーザー体験のためにやるべきこと，やってはいけないこと

図1　円滑なユーザー体験のためにやるべきこと，やってはいけないこと

2. 5 Smart Alternatives to the Hamburger Menu | Webdesigner Depothttps://www.webdesignerdepot.com/2017/08/5-smart-alternatives-to-the-hamburger-menu/

ハンバーガーメニューの代わりとなるナビゲーションを5つ紹介しています。

  1. タブバー
  2. 「More」オプションのあるタブバー
  3. 幅に合わせて折りたたまれるメニュー
  4. スクロールできるナビゲーション
  5. フルスクリーンナビゲーション

図2　ハンバーガーメニューの代わりとなるナビゲーション

図2　ハンバーガーメニューの代わりとなるナビゲーション

3. 5 Amazing Hamburger Menu Trends to Emulate - Dynamic Drive Bloghttp://blog.dynamicdrive.com/amazing-hamburger-icon-menu-trends/

ハンバーガーメニューのトレンドを5つ紹介しています。

  1. メニューのリンク以上のもの
  2. メニューの中にタブと複数行のコンテンツが表示される
  3. 音の鳴るメニュー
  4. サイズに合わせて可変するSVGを使ったアニメーション
  5. メニューの背景のアニメーション

図3　ハンバーガーメニューのトレンド

図3　ハンバーガーメニューのトレンド

4. CanvasFlip : Visual Inspectorhttps://www.canvasflip.com/visual-inspector/

Sketchのようなグラフィックツールを使う感覚で，公開しているウェブページを編集できるChrome機能拡張です。

ウェブデベロッパーツールはHTMLやCSSを編集していきますが，このCanvasFlipはパネルから数値を変更したり，色・フォントを選択するなど直感的な作業ができます。

ページに使われている色，フォント，画像の一覧も出せます。ページ内の画像をダウンロードできる機能は重宝しそうです。

図4　Webページをライブ編集できるChrome機能拡張

図4　Webページをライブ編集できるChrome機能拡張

5. vhshttp://jxnblk.com/vhs/

CSSアニメーションのライブラリーです。ズームやフェード，移動など基本的な動きが揃っています。

要素にclass名を設定するだけで簡単に適用できるのが便利です。

図5　基本的な動きを網羅したCSSアニメーションのライブラリー

図5　基本的な動きを網羅したCSSアニメーションのライブラリー

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

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

Aperitif - The recipe for successful web templateshttps://aperitif.io/

モジュールを選んでいくだけで，簡単にレスポンシブなウェブページのテンプレートが作れるサービスです。素早くプロトタイプを作りたい場合などに役立ちそうです。

選べるモジュールは大きくヘッダ，コンテンツ，ブログ，フッタと分かれており，コンテンツにはナビゲーションバー，メインイメージ（ヒーローエリア⁠）⁠，画像一覧，画像とテキストが並んだものなどいろいろなパターンが用意されています。

モジュールは手描き風のラフなものから選んでいくのですが，実際に生成したテンプレートはかなりしっかり作られていてクオリティが高く，良い意味で裏切られます。

図6　レスポンシブなウェブページのテンプレートが簡単に作れるサービス

図6　レスポンシブなウェブページのテンプレートが簡単に作れるサービス

図7　モジュールを選ぶ画面

図7　モジュールを選ぶ画面

図8　生成したテンプレートの例

図8　生成したテンプレートの例

今週の気になるWebネタ

Twitterのハッシュタグが誕生10周年 最も使用されたのは？ - ライブドアニュースhttp://news.livedoor.com/article/detail/13515840/

Twitterのハッシュタグが初めて使われたのが，2007年8月23日（現地時間）とのことで，10周年の記念日を迎えました。説明するのが難しい概念ではありますが，Instagramの人気もあり日本でもかなり認知度が上がったと思います。

ブログなどでカテゴリとともに分類に使われる「タグ」も，「⁠ハッシュタグのタグと同じ」というと理解されやすくなりました。HTMLのタグと紛らわしいという問題はまだありますが…。

なお「#」はシャープ（♯）じゃないというのはIT業界の人は知ってる人が多いと思いますが，井桁（いげた⁠）⁠，パウンド，ナンバーキー，ハッシュキー，スクエアなどと世界でいろんな読み方があるようで，「⁠シャープじゃなくて○○ですよ」とすっきりと説明できないのが悩ましいところです。

Webテク, Webデザイン, Web広告, ハンバーガーメニュー, Chrome, CSS, アニメーション, Twitter

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote