ネットで見かけたWebテク
1. How to simplify your design – UX Planethttps://uxplanet.org/how-to-simplify-your-design-69d97fde11b9
デザインを単純にする方法をまとめています。図解してあるのでわかりやすいです。
- 価値を絞って製品を作る
- 不要なものは全て削る
- データを意味のある形に変換する
- 迅速な意思決定できるようサポートする
- 多すぎる選択肢はお客さんを不安にさせる
- 複数の選択肢がある場合はオススメを知らせる
- お客さんの注意を正しい方向に誘導する
- 色とタイポグラフィを使ってコンテンツの階層を伝える
- 組織化することで多くのものを少なく管理しやすく見せる
- 関連した項目をグループ化する
- 大きなタスクを小さなステップに分割する。1カラムのレイアウトにする
- プロセスとシステムの状況を透明性を保って伝える
- ユーザーのために計算する
- 段階的に見せることで複雑さを隠す
- 一般的に受け入れられているパターンとインタラクションに頼る
- ユーザーの初めての体験となる操作は合理的にデザインする
- 製品が使用されるときの人間工学と状況に留意する
- インライン編集と値の自動提案をサポートする
- 賢いデフォルト値を使って認知の負荷を減らす
- エラーを防ぐ
- アクセシビリティのためのデザイン
2. Everything you need to know about Loading Animationshttps://medium.com/flawless-app-stories/everything-you-need-to-know-about-loading-animations-10db7f9b61e
ローディング時に表示するアニメーションについてまとめています。
気をつける点について、
- できる限り表示しないようにする
- 残り時間のヒントを与える
- なぜ待たないといけないのか説明する
- 待っている間イライラさせない
- 待っているという感覚を減らす
- 企業からの発信やブランディングにつなげる
ほかにも、
3. How Art Direction Will Help You Create Masterful Web Interfaces - Marvel Bloghttps://blog.marvelapp.com/art-direction-will-help-create-masterful-web-interfaces/
優れたインターフェイスを作るのにアートディレクションがどう役立つかを説明しています。
アートディレクションを使って、
- 組織のブランドアイデンティティを吹き込んだものを作る
- 際立っている驚くべき何かを作る
- ユーザーの興味を引き付ける
- デザインを選ぶとき推測するのではなく調査する
- 最初から最後まで当初の目標を忘れない
- あなたのウェブサイトの主なターゲットを特定する
- どのメッセージを伝えるべきか決める
- 製品を使ったときにユーザーに与えたい感情面での影響を決める
- 付加価値を追求する
(あなたのデザインはどのように貢献していますか?) - プロジェクトの最初からできるだけ早くブランドの本質を研究し、
吸収する
4. Room to Breathe: Using Whitespace in the Hero Areahttps://speckyboy.com/whitespace-hero-area/
メインイメージでの余白の重要性と使い方について紹介した記事です。
いくつかの実際のサイトを例に、
5. Blurred Borders in CSS | CSS-Trickshttps://css-tricks.com/blurred-borders-in-css/
CSSで写真の縁の部分をぼかすコーディング方法を紹介した記事です。
ボーダー部分の背景画像をCSSフィルター効果でぼかしています。
そのほか、
「Googleマップが劣化した」 不満の声が相次ぐ ゼンリンとの契約解除で日本地図データを自社製に変更か - ITmedia NEWS
Googleマップの地図データがゼンリンのものではなくなり、マップのクオリティが落ちてしまったと言われています - Instagramアプリから商品を直接購入できる機能、
ベータ提供に - CNET Japan
オンラインショップの機能をInstagramが持つことになるようです - スケッチを数秒でリアルな写真に変えるNVIDIAのAI | TechCrunch Japan
人が描いたところが、写真をベースとしたリアルな岩や山などに変わります
先週の気になるWebサービス
Speak Humanhttp://speakhuman.today/
目的に合わせたマイクロコピー
カテゴリは以下の5種類です。英語なのでそのまま直訳して使うわけにもいきませんが、
- メールアドレスを聞く
- 承認したときのメッセージ
- エラー
- ネットショップ
- ローディング
また、