週刊Webテク通信

2017年1月第4週号 1位は,シンプルなデザインのための7つのルール,気になるネタは,Slackにスレッド機能 複数の会話が分かりやすく

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

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

1. 7 Rules for Creating a Simple Design | Design Shackhttps://designshack.net/articles/graphics/7-simple-design-rules/

シンプルなデザインのための7つのルールを紹介しています。

  1. 1つのページに1つの目的を設定する
  2. 2つのフォントファミリーしか使わないことにこだわる
  3. 一貫性を持って整列させる
  4. 階層構造を確立する
  5. 要素間のスペースを十分に取る
  6. コントラストを上げる
  7. 一貫性を持ったアイコンと要素を使う

ユーザーが疑問を持たず複雑な指示なしに直感的に使えれば,シンプルデザインだからといって面白い要素やユーザーインターフェイスの機能を減らす必要はないとのことです。

図1 シンプルなデザインのための7つのルール

図1 シンプルなデザインのための7つのルール

2. 4 Beautifully Simple Homepage Designs - SpyreStudioshttp://spyrestudios.com/4-beautifully-simple-homepage-designs/

シンプルで素晴らしいホームページデザインの実例集です。そのブランドを効果的に伝えているデザインのサイトを4つ掲載しています。

デザインやインタラクションに凝っているにも関わらず,わかりやすいインターフェイスという意味で「シンプル」なサイトが揃っていました。

図2 シンプルで素晴らしいホームページデザインの実例

図2 シンプルで素晴らしいホームページデザインの実例

3. How Designers Should Think About SVG – Design + Sketch – Mediumhttps://medium.com/sketch-app-sources/how-designers-should-think-about-svg-b2b92efc4d77#.37hpp59c3

SVGに対するデザイナーの考え方をまとめた,⁠SVGのススメ」といった感じの記事です。

  • SVGはなぜ素晴らしいのか
  • ビットマップ画像とどう違うのか
  • SketchからSVGを書き出す方法
  • SVGを使う上でのヒント

といった項目で,SVGについて解説しています。

図3 SVGについての解説記事

図3 SVGについての解説記事

4. 14 WordPress Themes to Getting 2017 off to a Good Start - Hongkiathttp://www.hongkiat.com/blog/wordpress-themes-getting-2017-off-good-start/

素晴らしいWordPressのテーマを14個紹介しています。

良いテーマを選ぶ上で,以下の項目を考慮したとのことです。

  • SEOのための機能を持つ
  • カスタマイズがしやすい
  • 優れたサポート

図4 素晴らしいWordPressのテーマ14選

図4 素晴らしいWordPressのテーマ14選

5. 20 Inspirational Dashboard Designs - noupehttp://www.noupe.com/design/20-inspirational-dashboard-designs.html

ダッシュボードデザインのギャラリーです。オンラインサービスなどでの,ログインしたあとの管理画面を作るときの参考になります。

実際にコーディングされたサイトではなく静止画レベルのものばかりですが,デザインの方向性やツールの配置などを考えるヒントになるでしょう。

図5 ダッシュボードデザインのギャラリー

図5 ダッシュボードデザインのギャラリー

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

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

The SVG Font Machine | Glyphterhttps://glyphter.com/

Glyphterは,SVGファイルを登録して独自のアイコンフォントを作成するサービスです。自分で作ったSVGファイルだけでなく,あらかじめ用意されているアイコンも利用できます。

作ったアイコンフォントをダウンロードすると,フォントを読み込ませる設定のCSSファイルも付いてきます。ユーザー登録なしで作成からダウンロードまでできるので,気軽に使えるところもメリットだと思います。

サイトの制作途中でアイコンフォントにアイコンを追加するケースは多いと思いますが,無料のユーザー登録をすればフォントを登録していつでも編集できます。無料プランでは1つのフォントしか扱えませんが,有料プランにすると数の制限なく複数のフォントを管理できるようになります。

図6 SVGから独自のアイコンフォントを作れるサービス

図6 SVGから独自のアイコンフォントを作れるサービス

今週の気になるWebネタ

Slackにスレッド機能 複数の会話が分かりやすく - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1701/19/news063.html

ビジネスチャットツールのSlackに,ついにスレッド機能が追加されました。スレッドはまとめられてサイドバーに表示され,スレッドへのコメントはチャンネル全体に表示するかどうかを選べるなど,なかなか考えられています。

音声通話,ビデオ通話機能も付きましたし,どんどん機能強化するSlackですが,やはり日本語対応という面での不満もあります。日本語での投稿・検索はできますし,普通にチャットしている分には気にならないと思うのですが,メニュー類が英語というのを嫌がる人は少なくありません。

スレッド機能によって,より便利になりそうなので,あとはせめてチャンネル名(会議室名みたいなもの)を日本語で付けられると,次のプロジェクトで使おうとか提案しやすくなると思っています。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入