週刊Webテク通信

2015年8月第4週号1位は、記憶に残るサイトをデザインする秘訣、気になるネタは、Googleが高機能&シンプルWiFi ルータ「OnHub」発表証

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

1. 10 Design Tricks to Make Your Site Memorable(and Profitable)https://webdesignledger.com/memorable-design-tricks

記憶に残るサイトにするための、デザインの秘訣を10項目紹介しています。

  1. 楽しませる
  2. 物語性を加える
  3. しゃれたアニメーション
  4. 色を使う
  5. 実験的なナビゲーションとメニュー
  6. ダイナミックなインフォグラフィックス
  7. 快適で楽しいフォーム
  8. 雰囲気に合った背景パターン
  9. 新しいコンテンツを頻繁に加える
  10. 無料のものを提供する

あまり実験的なナビゲーションは賛否が分かれやすいですが、冒険したものがどんどん登場することでWebデザインが発展していく面もあるでしょう。

図1 記憶に残るサイトをデザインする秘訣
図1 記憶に残るサイトをデザインする秘訣

2. 5 Most Common Interaction Design Mistakes on the Web - Designmodohttp://designmodo.com/5-interaction-design-mistakes/

インタラクションデザインのよくある失敗を5つまとめています。

  1. 革新的すぎて困惑させる
  2. 混乱させるナビゲーション
  3. 乱雑
  4. コントラストがない
  5. フォームの本来のスタイリングを無視

1位の記事では「実験的なナビゲーションとメニュー」を推奨していましたが、ここにまとめられた「よくある失敗」につながることも多そうなので注意したいですね。

図2 インタラクションデザインのよくある失敗
図2 インタラクションデザインのよくある失敗

3. Why micro-interactions are the secret to great designhttp://thenextweb.com/dd/2015/08/17/why-micro-interactions-are-the-secret-to-great-design/

マイクロインタラクション(最小単位のインタラクション)が、すばらしいデザインを生む秘訣だということについて解説した記事です。

マイクロインタラクションの4つの要素は以下とのことでした。

  1. トリガー(きっかけ)
  2. ルール
  3. フィードバック
  4. ループとモード
図3 マイクロインタラクションについての解説
図3 マイクロインタラクションについての解説

4. Laying Out A Flexible Future For Web Design With Flexbox – Smashing Magazinehttp://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/

CSSのFlexboxを用いたレイアウトについて、細かく解説しています。

記事内容と直接関係ありませんが、各見出しにリンクアイコンが付いていて、そこをクリックするとページ内リンクのURLに移動するようになっているのが気になりました。これは、記事中の任意の場所にリンクを張ってもらうためのものなのでしょう。なかなか面白い試みだと思います。

図4 Flexboxを用いたフレキシブルなレイアウト手法
図4 Flexboxを用いたフレキシブルなレイアウト手法

5. UI Design Showcase: 25 Best UI Design Projectshttp://line25.com/inspiration/ui-design-showcase

優れたユーザーインターフェイスデザインの、Webアプリやモバイルアプリなどを集めたショーケースです。

WebサイトのUIデザインではなく、実際のアプリとしてのUIデザインについての評価でした。

図5 優れたユーザーインターフェイスデザインのショーケース
図5 優れたユーザーインターフェイスデザインのショーケース

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

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

esa.io - Expertise Sharing Archives for motivated teams.https://esa.io/

esaはグループで情報共有するためのWebサービスで、日本で開発されています。チャット的なツールではなく、文章を蓄積させていくWiki的な方向性とのことです。

Wikiのようなストック情報と、アイデアなどの「書きかけ」状態の情報の両方を共有できるように考えられているところが特徴となっています。

作業中を意味する「WIP(Work in progress⁠⁠」という機能があることで、まだまとまり切れていないアイデアなどでも情報発信しやすくなるよう工夫されています。

Markdownが使えて情報を整理しやすいことから、Evernoteの代替として個人で使っている人もいるそうです。

以下の記事でesaについて取り上げられています。

図6 国産の情報共有サービスesa
図6 国産の情報共有サービスesa

おすすめ記事

記事・ニュース一覧