週刊Webテク通信
2019年3月第4週号 1位は,デザインを単純にする方法,気になるネタは,縦も横も関係ないFireworkのビデオストーリーアプリが公式リリース
ネットで見かけた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種類です。英語なのでそのまま直訳して使うわけにもいきませんが,
- メールアドレスを聞く
- 承認したときのメッセージ
- エラー
- ネットショップ
- ローディング
また,
今週の気になるWebネタ
縦も横も関係ないFireworkのビデオストーリーアプリが公式リリース | TechCrunch Japanhttps://jp.techcrunch.com/2019/03/19/2019-03-14-firework-officially-launches-a-short-form-video-storytelling-app-backed-by-lightspeed/
今まで知りませんでしたが,
縦の時には見えていない部分が横にすると表示されるというわけですね。しかし,
スマホを縦にしても横にしても同じ向きのまま画面全体に動画が表示されるというのは,
バックナンバー
週刊Webテク通信
- 2019年3月第4週号 1位は,デザインを単純にする方法,気になるネタは,縦も横も関係ないFireworkのビデオストーリーアプリが公式リリース
- 2019年3月第3週号 1位は,WordPressデザインの2019年のトレンド,気になるネタは,Apple Musicの歌詞検索,日本でも
- 2019年3月第2週号 1位は,CSSセレクタの指定方法をクイズ形式で学ぶ,気になるネタは,子供向けコンテンツ使い放題「Amazon FreeTime Unlimited」発表 Fireタブレット限定で
- 2019年3月第1週号 1位は,ソリッドアイコンとアウトラインアイコンはどちらが早く認識されるのか,気になるネタは,音楽ストリーミング売上がはじめてダウンロードを超えた,日本レコード協会発表
関連記事
- 2022年5月第4週号 1位は,顧客にやさしいWebデザインの15の原則,気になるネタは,「SUZURI」でNFTコンテンツのグッズ販売可能に MetaMaskと連携
- 2022年4月第4週号 1位は,CSSでのセンタリングの実用ガイド,気になるネタは,Zoom、新しいホワイトボード機能「Zoom Whiteboard」を発表
- 2021年11月第3週号 1位は,2022年のWebデザインのトレンド22項目,YouTubeがすべての動画の「低く評価」数を非公開に
- 2021年9月第4週号 1位は,UIデザインにアイコンを使うときに守るべき10のルール,気になるネタは,音楽機器のズーム社,商標権侵害でWeb会議「Zoom」提供のNECグループ会社を提訴
- 2021年6月第4週号 1位は,CSSでの縦横比の設定方法,気になるネタは,Spotifyがライブオーディオアプリ「Greenroom」を提供開始,Clubhouseのライバル誕生