週刊Webテク通信

2017年10月第1週号 1位は,暗い色のUIを使うことの良い点と悪い点,気になるネタは,実名制Q&Aサイト「Quora」日本語版β公開

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2017年9月25日~10月1日の間に見つけた記事のベスト5です。

1. Dark UIs. The Good and the Bad. Dos and Don’ts. | Toptalhttps://www.toptal.com/designers/ui/dark-ui

暗い色のUIを使うことの良い点と悪い点,すべきこととしてはいけないことをまとめた記事です。

暗いUIを使っても良い場合
  • ブランドのカラースキームとマッチするとき
  • デザインがミニマルでコンテンツの種類が少ないとき
  • 夜に利用するエンターテインメントアプリのように内容と用途が適している場合
  • 長い時間使用する解析ページなどで目の負担を減らす
  • ミステリーのような内容で感情を呼び起こすため
  • 印象的で劇的な外観を作り出すため
  • 高級感と品位を作り出すため
  • 見た目の優先順位を付けるため
使わない方がいい場合
  • テキストが多い場合
  • 1画面に色々なコンテンツが一緒に表示される場合
  • たくさんのフォーム,コンポーネント,ウイジェットが使われたBtoBのアプリケーション
  • 幅広い色が使われている場合

図1 暗い色のUIを使うことの良い点と悪い点

図1 暗い色のUIを使うことの良い点と悪い点

2. Top Prototyping Tools You Should Use to Save Timehttps://line25.com/ui-ux-design/top-prototyping-tools-use-save-time

時間短縮にも役立つプロトタイピングツールをまとめた記事です。

プロトタイピングが重要な理由もまとめてありました。

  1. プロトタイプを段々と進化させていくことはデザインのチェックを手助けする
  2. うまくいくもの,うまくいかないもの,何がうまくいってないのかをプロトタイプは見せてくれる
  3. 本番に近いプロトタイプは,サイトのUXに悪影響を及ぼす可能性のある問題の発見と解決に役立つ
  4. プロトタイプはデザイン確認のための共有方法として有効

図2 プロトタイピングツール紹介とプロトタイプの重要性の解説

図2 プロトタイピングツール紹介とプロトタイプの重要性の解説

3. CSS Grid PlayGround | Terminology | Mozillahttps://mozilladevelopers.github.io/playground/

CSSグリッドレイアウトについての入門的な内容です。

Mozillaが提供しているコンテンツで,Firefoxのデベロッパーツールを使ってCSSグリッドレイアウトのデバッグをする方法も解説しています。

図3 Mozillaが提供するCSSグリッドレイアウト入門

図3 Mozillaが提供するCSSグリッドレイアウト入門

4. 10 Super Useful Code Generators for Web Designershttps://speckyboy.com/code-generators-web-designers/

CSSやJavaScriptなどのコードジェネレーターを紹介しています。

CSSのメディアクエリの設定を簡単に記述するものや,レスポンシブなグリッドレイアウトのテンプレートを作るものなど,便利なジェネレーターがいろいろと掲載されていました。

図4 便利なコードジェネレーターいろいろ

図4 便利なコードジェネレーターいろいろ

5. 10 Inspirational Websites with Angled Graphicshttp://www.webdesigndev.com/10-inspirational-websites-with-angled-graphics/

斜めになったグラフィックを使ったウェブデザインを10個紹介しています。

大きなタイポグラフィと斜めの線がウェブサイトをより目立たせるとのことで,斜めの要素をうまく使ったウェブデザインの実例を確認できます。

図5 斜めのグラフィックを使ったウェブデザインのギャラリー

図5 斜めのグラフィックを使ったウェブデザインのギャラリー

そのほか,最近の記事の中から,気になるニュース記事を3つ紹介します。

先週の気になるWebサービス

Good Web Designhttp://www.goodweb.design/

ウェブデザインをパーツ毎に見られるギャラリーサイトです。ランディングページやウェブサービスのトップページのような1ページで完結しているページをターゲットとしています。

以下の項目ごとにデザインの実例を閲覧できます。

  • ナビゲーション
  • ヒーローイメージ
  • 機能紹介
  • 社会的な信頼の裏付け要素(メディア掲載や利用者の声)
  • 値段表
  • コールトゥアクション(ボタンなど行動喚起の要素)
  • FAQ
  • フッタ

パーツ画像をクリックするとページ全体を画像で確認できます。また,各パーツの右下の「source」ボタンからそのサイトにリンクしています。

ランディングページに必要な要素を確認しつつ,デザインのインスピレーションを得られる便利なサービスだと思います。

図6 ウェブデザインをパーツ毎に見られるギャラリーサイト

図6 ウェブデザインをパーツ毎に見られるギャラリーサイト

今週の気になるWebネタ

実名制Q&Aサイト「Quora」日本語版β公開 - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1709/26/news099.html

米国発で月間ユニークビジター数が2億人以上というQ&Aサイト「Quora」の日本語ベータ版がスタートしました。招待制ですが誰でも利用申し込みができるようです。

ウェブデザインやウェブ開発に関する回答も多く,情報収集していると自然にQuoraに行き着くことも多々あって,わたしは英語版にユーザー登録はしていました。基本的にはユーザー登録しないと見られないところが日本の他のQ&Aサイトとは違う点ですね。

ゆるくてネタ質問や釣り質問も多い既存の日本のQ&Aサイトとは違う路線で,クオリティの高い知識を共有できるプラットフォームとして日本に根付くかどうか,期待を込めつつ見守りたいと思います。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

バックナンバー

週刊Webテク通信

バックナンバー一覧

コメント

コメントの記入