週刊Webテク通信

2017年4月第2週号 1位は，コンテンツを台無しにしてしまうデザインの間違い7選，気になるネタは，Macのコーディング用テキストエディタ「Espresso」がv3として帰ってきた！

Webテク, Webデザイン, Web広告, JavaScript, CSS, テキストエディタ

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

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

1. 7 Design Mistakes That Can Ruin Your Content | Design Shackhttps://designshack.net/articles/inspiration/7-design-mistakes-that-can-ruin-your-content/

コンテンツを台無しにしてしまうデザインの間違いを7つまとめた記事です。

  1. 手抜きのタイポグラフィ
  2. すべてが同じサイズ
  3. 階層構造を忘れている
  4. 基本を無視している
  5. 文字が多すぎる
  6. 解像度の低い画像ばかり
  7. 仕掛けが多すぎる

それぞれに対し，良い例のサイトが1つずつ紹介されています。

図1　コンテンツを台無しにしてしまうデザインの間違い7選

図1　コンテンツを台無しにしてしまうデザインの間違い7選

2. Bad Design vs. Good Design: Learn From The Worst Web Designshttp://anthonynealmacri.com/bad-design-vs-good-design-learn-worst-web-designs/

こちらは，悪いデザインと良いデザインとを比較して，悪いデザインからウェブデザインを学ぼうという記事です。

以下の3項目について，悪い例＆良い例と解説が載っています。

  1. 情報が多すぎる
  2. 見た目ですぐにわからないナビゲーション
  3. アニメーションし過ぎ

図2　悪いデザインからウェブデザインを学ぶ

図2　悪いデザインからウェブデザインを学ぶ

3. 3 trends in landing page design – Muzli -Design Inspirationhttps://medium.muz.li/3-trends-in-landing-page-design-5cf900f2c90f

ランディングページのトレンドを実例とともに紹介しています。

  1. 斜めのレイアウト
  2. 波打った形
  3. ブロック毎の区切りが明確ではない

特に解説などはないのですが，紹介されているそれぞれのページのクオリティが高く参考になります。

図3　ランディングページのトレンド3選

図3　ランディングページのトレンド3選

4. 20 Playful Click & Hold, Drag & Gesture Interactions in Web Designhttps://www.awwwards.com/click-and-hold-drag-and-gesture-interactions-in-web-design.html

クリック長押しやドラッグ＆マウスジェスチャーで操作する，インタラクション性の高いサイトを多数掲載しています。

凝った面白い動きをするサイトばかりでウェブデザインの可能性を感じられますが，真似をするにはかなりハードルが高そうです。

図4　インタラクション性の高いサイトいろいろ

図4　インタラクション性の高いサイトいろいろ

5. 15 Interesting JavaScript and CSS Libraries for April 2017 | Tutorialzinehttp://tutorialzine.com/2017/04/15-interesting-javascript-and-css-libraries-for-april-2017/

JavaScriptとCSSのライブラリをまとめています。ElementというVue.js 2.0ベースのUIフレームワークが良さそうです。

Vue.jsやReactがらみのものが多く，フロントエンドのJavaScriptのトレンドが変わったことを今さらながら実感しました。

図5　JavaScriptとCSSのライブラリまとめ

図5　JavaScriptとCSSのライブラリまとめ

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

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

Color Tool - Material Designhttps://material.io/color/

「Color Tool⁠」⁠ は，マテリアルデザインのアップデートとともに登場した，マテリアルデザイン向けカラーパレットを作るためのGoogleが提供するツールです。

プライマリーカラーとセカンダリーカラーを選ぶと，配色は自動的に作られます。また，プライマリー／セカンダリーカラーの上に載った場合の文字色も指定できます。

マテリアルデザインの6種類のUI上での見た目がすぐに確認できて便利です。アクセシビリティについて診断する機能もあり，文字の可読性についての判断と，何パーセントの透明度までOKかをアドバイスしてくれます。

図6　マテリアルデザイン向けカラーパレット作成ツール

図6　マテリアルデザイン向けカラーパレット作成ツール

今週の気になるWebネタ

Espresso — The Web Editor for Machttp://espressoapp.com/

Macのコーディング用テキストエディタ「Espresso」がv3として帰ってきました。あまりメジャーではありませんが，わたしのお気に入りエディタです。

2007年のApple Design Awardsに選ばれたCSSエディタのCSSEditに続き，MacRabbitが開発したコーディング用エディタがEspresso。CSSEditの機能を引き継ぎつつHTMLコーディングに主軸を移したもので，Macらしい洗練されたUIが魅力的でした。

Espressoが長い間アップグレードされなくなったため，Bracketsに乗り換えていたのですが，今はまたEspressoに戻りたいと思い始めています。機能的にはBracketsの方が魅力的な部分も多いんですが，使っていて気持ちいいのはやっぱりEspressoなんですよね。

Webテク, Webデザイン, Web広告, JavaScript, CSS, テキストエディタ

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote