週刊Webテク通信
2018年8月第1週号 1位は,ウェブデザインでのよくある間違いのまとめ,気になるネタは,円形ディスプレイのスマートスピーカ「Amazon Echo Spot」発売
ネットで見かけたWebテク
1. Common webpage design mistakeshttp:// blog-en. tilda. cc/ articles-website-design-mistakes
ウェブデザインでのよくある間違いをまとめた記事です。
- ランディングページで避けたい間違い
- コンテンツが論理的にブロック分けされていない
- アイテム同士の間隔が同じではない
- パディングが狭すぎてユーザーがコンテンツのブロック分けを理解できない
- テキストと背景画像とのコントラストがない
- 1つのページにスタイルが多すぎる
- 狭すぎる色の付いたブロック
- 狭いカラムに文字をたくさん入れる
- 文章量の多いセンター揃えのテキスト
- イメージの重要な部分にテキストが被っている
- 視覚的な階層構造の付け方を間違っている
- 1かたまりのブロックが2つに分かれているように見える
- タイトルが大きすぎる/
長すぎる - ボタンの境界線の間違った使い方
- 色を使いすぎる
- メニューに入れる項目が多すぎる
- 記事ページでの間違い
- 長くて詰まったテキスト
- 見出しの前後の空白の長さが等しい
- 見出しの階層構造がない
- ブロックの上下の空白が等しくない
- キャプションが画像に近すぎる
- 小見出しと本文との間隔が狭すぎる
- 目立たせたい要素と本文が近すぎる
- コントラストが低い要素
- 狭いテキストブロックに背景色を使う
- 背景画像を使った領域同士の間にすきまがある
- アクセントとなる要素が多すぎる
- 文字のスタイルを使いすぎる
- 文章量の多いセンター揃えのテキスト
- 見出しが画像に近すぎる
- 必要でないところで斜体を使う
- 場違いの場所にブロックが配置されている
2. 10 Popular UI Design Trends on Dribbble in 2018https:// icons8. com/ articles/ popular-ui-design-trends-dribbble/
Dribbbleに掲載されたデザインからUIデザインのトレンドをまとめています。
デザイナーが作品を投稿するSNSサイトのDribbbleにアップされたものなので,
- 目立つイラストをウェブページに掲載する
- モバイル用のイラストを用意する
- スクリーン分割
- 太く注意を引くタイポグラフィ
- 陰影を使った紫色
- アニメーションするグラフィックス
- 文字で画像をマスク
- フルスクリーンの背景画像
- スキューモーフィズム
(現実の物を模したデザイン) - 切り替え効果の実験
3. The Complete Illustrated Flexbox Tutorial – freeCodeCamphttps:// medium. freecodecamp. org/ the-complete-illustrated-flexbox-tutorial-d35c085dbf35
Flexboxの使い方を図解した,
Flexboxの全てのプロパティについて図を使って解説しており,
4. 8 Secrets of the Perfect Link | Webdesigner Depothttps:// www. webdesignerdepot. com/ 2018/ 07/ 8-secrets-of-the-perfect-link/
完璧なリンクを作るための8つの秘訣を紹介しています。
- 良いリンクはボタンではない
- 良いリンクは目的が明確である
- 良いリンクは訪問済みリンクに考慮する
- 良いリンクは常に青色
- 良いリンクはアンダーラインがある
- 良いリンクは目立っている
- 良いリンクは良いマイクロコピーが使われている
- 良いリンクは良いUXを促進する
5. 16 Adobe XD UI Kits by Top Designers - Freebie Supplyhttps:// freebiesupply. com/ blog/ adobe-xd-ui-kits-by-top-designers/
Adobe XD用のUIキットをまとめた記事です。
ECサイト用,
なお,
そのほか,
- 文章の
「自動要約ツール」, ユーザーローカルが無償提供 - ITmedia NEWS
重要部分がわかるように表示したり,3行/ 5行/ 10行のダイジェストを作ったりできて面白そうです - freee,
マツリカなど五反田のスタートアップ6社が一般社団法人 「五反田バレー」 を設立 | TechCrunch Japan
freee,ココナラなど五反田にはスタートアップが集まりつつあるそうです - グーグル,
セキュリティキー 「Titan Security Key」 を発売へ - CNET Japan
USB版とBluetooth版のセットで50ドルとのことです
先週の気になるWebサービス
CSS Duotone Generatorhttps:// cssduotone. com/
CSSを使って画像をデュオトーンに変換するサービスです。画像をアップロードするとデュオトーンに加工され, HTMLとCSSが生成されます。
画像の色と背景色,
デュオトーンは最近のデザインのトレンドでもあるようなので,
今週の気になるWebネタ
円形ディスプレイのスマートスピーカ 「Amazon Echo Spot」 発売--1万4980円 - CNET Japanhttps:// japan. cnet. com/ article/ 35123082/
Amazonが円形ディスプレイのスマートスピーカー
日本で発売されているスマートスピーカーとしては初の画面付きとのことで,
Android対応スマートウォッチには丸い画面のものもありますし,
バックナンバー
週刊Webテク通信
- 2018年8月第5週号 1位は,日本のウェブデザインの10の特徴,気になるネタは,イープラス「チケット購入アクセスの9割がbotだった」――アカマイの検知システムで判明
- 2018年8月第4週号 1位は,新しいウェブサイトを立ち上げるときにやるべきこと,気になるネタは,Evernote、10周年で新ロゴ発表(ゾウは健在)
- 2018年8月第3週号 1位は,スライドアウトメニューのオリジナルの手法を10個紹介,気になるネタは,「Alexa」が進化,「後で分かったらお知らせします」が可能に
- 2018年8月第2週号 1位は,固定ナビゲーションメニューのトレンド,気になるネタは,FacebookとInstagramに使いすぎ防止機能追加へ
- 2018年8月第1週号 1位は,ウェブデザインでのよくある間違いのまとめ,気になるネタは,円形ディスプレイのスマートスピーカ「Amazon Echo Spot」発売
関連記事
- 2021年1月第3週号 1位は,2021年に注目すべきEメールのデザイントレンド,気になるネタは,Facebook,ページでの「いいね」を廃止し,「フォロー」に一本化へ
- 2020年11月第4週号 1位は,デザインの一貫性についてのまとめ,気になるネタは,OPPO,巻取りスマホのコンセプトモデル「OPPO X 2021」を公開
- 2020年9月第2週号 1位は,CSS Flexboxを使ったヘッダーの作り方,気になるネタは,“偉い人は上座”も可能? Zoom,参加者を並び替えられる新機能
- 2020年7月第5週号 1位は,2020年のUIデザインのトレンド,気になるネタは,テレビ会議でのプレゼン映像をかっこよくする仮想カメラアプリ「mmhmm」登場
- 2020年5月第3週号 1位は,より柔軟なレスポンシブデザインが可能になるCSS関数のmin、max、clampを詳しく解説,気になるネタは,ビデオ会議などの自己紹介に役立つ「バーチャル名刺背景ジェネレーター」