週刊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年末に終了へ
関連記事
- 2019年10月第1週号 1位は，ウェブサイト作るのに必要な要素とそのコスト，気になるネタは，Facebook，「セカンドライフ」のようなVRワールド「Horizon」を「Oculus Quest」などで来年スタート
- 2019年9月第1週号 1位は， モバイル用ウェブページで画面下部にナビゲーションを置くことについて，気になるネタは，Googleフォト、画像内テキストによる検索が可能に（まずは英語）
- 2019年8月第5週号 1位は， ボタンに処理中という状況を表示する必要があるとき，気になるネタは，BuzzFeedのMoodFeed機能は気分に合ったコンテンツを勧めてくれる
- 2019年3月第4週号 1位は，デザインを単純にする方法，気になるネタは，縦も横も関係ないFireworkのビデオストーリーアプリが公式リリース
- 2019年3月第1週号 1位は，ソリッドアイコンとアウトラインアイコンはどちらが早く認識されるのか，気になるネタは，音楽ストリーミング売上がはじめてダウンロードを超えた，日本レコード協会発表