週刊Webテク通信

2019年1月第4週号 1位は,コンテンツの区切り方について,気になるネタは,Slack,ブランドデザインのリニューアル第1弾としてロゴ変更

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

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

1. Separating Content – Tap to Dismiss – Mediumhttps://medium.com/tap-to-dismiss/separating-content-3bb83b868a71

コンテンツの区切り方について解説した記事です。

  • タップできることがわかるなどインタラクティブ性からの区切り
  • 見た目のデザインとしての区切り
  • アイテムの区切り線について
  • 例外的な区切り
  • セクションの区切り

図1 コンテンツの区切り方について

図1 コンテンツの区切り方について

2. Should design tools code? – UX Collectivehttps://uxdesign.cc/should-design-tools-code-3d6c79d64ef6

デザイナーはコーディングを学ぶべきかについて,最近のツールの進化を受けての考察です。

  • 人気のUIプロトタイピングツールとなったPrincipleは,コーディングの知識をほとんど必要としない
  • Airbnbなどの会社は,デザイナーが紙にスケッチしたUIからほんの数秒でコードを書き出す内部ワークフローを開発した
  • Framer XやModulzなどの新しいツールはUI patternsをReactコンポーネントに変換できる
  • Hadron Appなどデザインとコーディングを同時に行える複数のビューを持ったツールが登場した

これらの変化から,デザイナーはデザインに専念できる状況になってきているようです。

図2 デザイナーはコーディングを学ぶべきか

図2 デザイナーはコーディングを学ぶべきか

3. Logo trends 2019: what you should look out for Design your way https://www.designyourway.net/blog/graphic-design/logo-trends/

ロゴデザインのトレンドについてまとめています。

  • 鮮やかな色と面白いコントラスト
  • デザインより機能を優先
  • 単純な幾何学的図形
  • 大胆な色
  • 伝統的なアートのテクニックで描く
  • シンプルな形
  • 平行四辺形
  • わずかなグラデーション
  • 金色
  • 過剰気味な色使い
  • 線形グラデーション
  • 境界線
  • 切り抜き
  • ノスタルジー
  • デザイン要素として句読点を使う
  • アウトライン
  • レスポンシブなロゴ
  • 建築物を取り入れる
  • 活気に満ちたエネルギッシュなデザイン
  • 比喩を使う
  • 実験的な技法
  • グリッドベース
  • 色のマスキングと重ね合わせ
  • モノグラムと組み合わせたシンプルなタイポグラフィ
  • 幾何学的図形
  • オーバーラップ効果
  • 色の変化とグラデーション
  • 創造的なレタリング
  • ネガティブスペースを使う

図3 2019年のロゴデザインのトレンド

図3 2019年のロゴデザインのトレンド

4. anime.js • JavaScript animation enginehttps://animejs.com/

JavaScriptによるアニメーションエンジンのanime.jsがバージョン3になりました。

サンプルは派手なものが多いですが,もちろんシンプルな移動,変形などのアニメーションにも使えます。

図4 JavaScriptによるアニメーションエンジン

図4 JavaScriptによるアニメーションエンジン

5. Free Photoshop Tools for Web Designers https://line25.com/articles/free-photoshop-tools-for-web-designers

ウェブデザインにPhotoshopを使う際に便利なツールをまとめた記事です。

Photoshopのワークフローをウェブデザイン向けに改善し,効率を高めるためのツール,プラグインやアクション,ヒントやコツなどを紹介しています。

図5 ウェブデザインにPhotoshopを使う際に便利なツールいろいろ

図5 ウェブデザインにPhotoshopを使う際に便利なツールいろいろ

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

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

Tint and Shade Generatorhttps://maketintsandshades.com/

指定した色をベースに,濃淡のバリエーションを生成するサービスです。色のHEX値を入力すると,明るい色,暗い色をそれぞれ10%刻みで生成します。

基本色をベースに,グラデーション,境界線,背景,影などに使う色を決める際に利用することを想定しており,数値的に正確に10%刻みで色を作っていることが特徴とのことです。

複数の色の値をスペース区切りで入力すれば,一度にカラーパレットを複数作ることができます。以前紹介したウェブデザイン用のカラーパレットを作る方法Building Your Color Paletteを実践する際に便利なサービスだと思います。

図6 色の濃淡のバリエーションを生成するサービス

図6 色の濃淡のバリエーションを生成するサービス

今週の気になるWebネタ

Slack,ブランドデザインのリニューアル第1弾としてロゴ変更 | マイナビニュースhttps://news.mynavi.jp/article/20190118-758555/

Slackのロゴデザインが変更されました。これまでのロゴのマークは背景色によって見えにくくなるなどの問題があり,ロゴマークとアプリのアイコンが違うなど統一感が取れていなかったことが大きな理由とのことです。

そういったいきさつを説明したこともあり,このロゴ変更はおおむね好意的に受け取られているようです。チャンネル名の前に付いている#マークを使った従来のロゴの方がSlackらしいとか,以前のカラフルなマークがかわいかったという声も少なくありませんが。

Chatworkもロゴを変えたばかりで,意識してるのではという声もあります。でも,SlackもChatworkもお互いをそれほどライバル視してないんじゃないでしょうか。個人的には,メールからビジネスチャットへの移行はどんどん進んで欲しいので,ロゴが変わって一皮むけた(?)SlackもChatworkも応援したいです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入