週刊Webテク通信
2017年8月第5週号 1位は,円滑なユーザー体験のためにウェブデザインでやるべきこと,やってはいけないこと,気になるネタは,Twitterのハッシュタグが誕生10周年
ネットで見かけたWebテク
1. Do’ s and Don’ ts of Web Design for Smooth User Experiencehttp:// techstory. in/ web-design-smooth-user-experience/
円滑なユーザー体験のためにウェブデザインでやるべきこと,
- やるべきこと
- デバイスに関係なく,
同様の体験を提供する - 使いやすい明快なナビゲーションをデザインする
- 訪問済みリンクの色を変える
- 簡単に目を通せるページにする
- 全てのリンクをダブルチェックする
- クリック可能な要素がそのように見えるようにする
- デバイスに関係なく,
- やってはいけないこと
- コンテンツのロードで訪問者を待たせる
- リンクを新しいタブで開く
- プロモーションで画面をふさぐ
- スクロールを乗っ取る
- ビデオと音を自動再生する
- 美しさのために使いやすさを犠牲にする
- 点滅するテキストや広告
2. 5 Smart Alternatives to the Hamburger Menu | Webdesigner Depothttps:// www. webdesignerdepot. com/ 2017/ 08/ 5-smart-alternatives-to-the-hamburger-menu/
ハンバーガーメニューの代わりとなるナビゲーションを5つ紹介しています。
- タブバー
- 「More」
オプションのあるタブバー - 幅に合わせて折りたたまれるメニュー
- スクロールできるナビゲーション
- フルスクリーンナビゲーション
3. 5 Amazing Hamburger Menu Trends to Emulate - Dynamic Drive Bloghttp:// blog. dynamicdrive. com/ amazing-hamburger-icon-menu-trends/
ハンバーガーメニューのトレンドを5つ紹介しています。
- メニューのリンク以上のもの
- メニューの中にタブと複数行のコンテンツが表示される
- 音の鳴るメニュー
- サイズに合わせて可変するSVGを使ったアニメーション
- メニューの背景のアニメーション
4. CanvasFlip : Visual Inspectorhttps:// www. canvasflip. com/ visual-inspector/
Sketchのようなグラフィックツールを使う感覚で,
ウェブデベロッパーツールはHTMLやCSSを編集していきますが,
ページに使われている色,
5. vhshttp:// jxnblk. com/ vhs/
CSSアニメーションのライブラリーです。ズームやフェード,
要素にclass名を設定するだけで簡単に適用できるのが便利です。
そのほか,
- モリサワ,
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:// aperitif. io/
モジュールを選んでいくだけで,
選べるモジュールは大きくヘッダ,
モジュールは手描き風のラフなものから選んでいくのですが,
今週の気になるWebネタ
Twitterのハッシュタグが誕生10周年 最も使用されたのは? - ライブドアニュースhttp:// news. livedoor. com/ article/ detail/ 13515840/
Twitterのハッシュタグが初めて使われたのが,
ブログなどでカテゴリとともに分類に使われる
なお
バックナンバー
週刊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年末に終了へ
関連記事
- 2021年3月第1週号 1位は,2021年に注目すべき4つのUI/UXのトレンド,気になるネタは,ドコモとKDDI,回線解約ページを検索エンジンから隠ぺい 総務省の指摘受け修正
- 2020年9月第2週号 1位は,CSS Flexboxを使ったヘッダーの作り方,気になるネタは,“偉い人は上座”も可能? Zoom,参加者を並び替えられる新機能
- 2020年8月第4週号 1位は,レスポンシブデザインとアダプティブデザインの比較,気になるネタは,C Channel,アプリサービスを9月末で終了へ--SNSでのコンテンツ配信にシフト
- 2020年8月第2週号 1位は,Webページの16種類の基本タイプ,気になるネタは,Google,同時通訳もする無線イヤフォン「Pixel Buds」を日本で8月20日発売
- 2020年3月第4週号 1位は,デザインにおけるストーリーテリングの10のヒントと事例,気になるネタは,iPadOS 13.4、3月24日にリリース決定。Magic Trackpadなど既存トラックパッドやマウスも利用可能