週刊Webテク通信
2017年8月第5週号 1位は，円滑なユーザー体験のためにウェブデザインでやるべきこと，やってはいけないこと，気になるネタは，Twitterのハッシュタグが誕生10周年
ネットで見かけたWebテク
1. Do’
円滑なユーザー体験のためにウェブデザインでやるべきこと，
- やるべきこと
- デバイスに関係なく，
同様の体験を提供する - 使いやすい明快なナビゲーションをデザインする
- 訪問済みリンクの色を変える
- 簡単に目を通せるページにする
- 全てのリンクをダブルチェックする
- クリック可能な要素がそのように見えるようにする
- デバイスに関係なく，
- やってはいけないこと
- コンテンツのロードで訪問者を待たせる
- リンクを新しいタブで開く
- プロモーションで画面をふさぐ
- スクロールを乗っ取る
- ビデオと音を自動再生する
- 美しさのために使いやすさを犠牲にする
- 点滅するテキストや広告
図1 円滑なユーザー体験のためにやるべきこと，
2. 5 Smart Alternatives to the Hamburger Menu | Webdesigner Depothttps://
ハンバーガーメニューの代わりとなるナビゲーションを5つ紹介しています。
- タブバー
- 「More」
オプションのあるタブバー - 幅に合わせて折りたたまれるメニュー
- スクロールできるナビゲーション
- フルスクリーンナビゲーション
図2 ハンバーガーメニューの代わりとなるナビゲーション
3. 5 Amazing Hamburger Menu Trends to Emulate - Dynamic Drive Bloghttp://
ハンバーガーメニューのトレンドを5つ紹介しています。
- メニューのリンク以上のもの
- メニューの中にタブと複数行のコンテンツが表示される
- 音の鳴るメニュー
- サイズに合わせて可変するSVGを使ったアニメーション
- メニューの背景のアニメーション
図3 ハンバーガーメニューのトレンド
4. CanvasFlip : Visual Inspectorhttps://
Sketchのようなグラフィックツールを使う感覚で，
ウェブデベロッパーツールはHTMLやCSSを編集していきますが，
ページに使われている色，
図4 Webページをライブ編集できるChrome機能拡張
5. vhshttp://
CSSアニメーションのライブラリーです。ズームやフェード，
要素にclass名を設定するだけで簡単に適用できるのが便利です。
図5 基本的な動きを網羅したCSSアニメーションのライブラリー
そのほか，
- モリサワ，
Webフォントサービス 「TypeSquare」 でエイワン書体などの提供を新たに開始 - MdN Design Interactive - デザインとグラフィックの総合情報サイト
エイワン書体22種，デザインシグナル書体27種が追加されました。 - Amazon
「仮想ダッシュボタン」 日本上陸 スマホから2タップで商品届く - ITmedia NEWS
誤注文をふせぐためボタンは2回押す仕様になっているそうです。 - iOS版
「Googleアシスタント」 が日本語に対応 iPhoneでSiriと同居 - ITmedia NEWS
「Hey Siri」と 「OK Google」 がiPhoneで両方使えるようになりました。
先週の気になるWebサービス
Aperitif - The recipe for successful web templateshttps://
モジュールを選んでいくだけで，
選べるモジュールは大きくヘッダ，
モジュールは手描き風のラフなものから選んでいくのですが，
図6 レスポンシブなウェブページのテンプレートが簡単に作れるサービス
図7 モジュールを選ぶ画面
図8 生成したテンプレートの例
今週の気になるWebネタ
Twitterのハッシュタグが誕生10周年 最も使用されたのは？ - ライブドアニュースhttp://
Twitterのハッシュタグが初めて使われたのが，
ブログなどでカテゴリとともに分類に使われる
なお
著者プロフィール
芦之由（あしのよし）
Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター＆ライター。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。
デイリーWebテクの購読やバックナンバーについては，以下の紹介サイトをご覧ください。
デイリーWebテク - Webテク関連の話題を毎日配信 -
URL：http://www.rgs680.com/dwt/
バックナンバー
週刊Webテク通信
- 2017年8月第5週号 1位は，円滑なユーザー体験のためにウェブデザインでやるべきこと，やってはいけないこと，気になるネタは，Twitterのハッシュタグが誕生10周年
- 2017年8月第4週号 1位は，分割画面ホームページのデザインテクニック，気になるネタは，Facebook、不評のストーリーカメラを強化。ライブ、GIF動画、テキストを追加
- 2017年8月第3週号 1位は，手痛いミスから学ぶユーザーインターフェイス10の法則，気になるネタは，Instagramのライブ配信に友人を招待--新機能が追加へ
- 2017年8月第2週号 1位は，ウェブアクセシビリティを向上させるための10のガイドライン，気になるネタはDeNAのファッションメディア「MERY」が年内復活へ――小学館と共同出資会社を設立
- 2017年8月第1週号 1位は，モバイルUXのためにコンテンツ最適化する7つの方法，気になるネタはAdobe「Flash」を2020年末に終了へ
関連記事
- 2020年3月第4週号 1位は，デザインにおけるストーリーテリングの10のヒントと事例，気になるネタは，iPadOS 13.4、3月24日にリリース決定。Magic Trackpadなど既存トラックパッドやマウスも利用可能
- 2020年1月第4週号 1位は，2020年に見ておくべき7つのUIトレンド，気になるネタは，Chromeアプリ，Windows，Mac，Linux向けは2020年12月にサポート終了
- 2019年10月第3週号 1位は，明白なUIを作るヒント，気になるネタは，macOS Catalina，「Sidecar」の必要条件が明らかに あなたのiPadは使える？
- 2019年10月第1週号 1位は，ウェブサイト作るのに必要な要素とそのコスト，気になるネタは，Facebook，「セカンドライフ」のようなVRワールド「Horizon」を「Oculus Quest」などで来年スタート
- 2019年8月第5週号 1位は， ボタンに処理中という状況を表示する必要があるとき，気になるネタは，BuzzFeedのMoodFeed機能は気分に合ったコンテンツを勧めてくれる