週刊Webテク通信

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

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

ネットで見かけた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

今週の気になるWebネタ

Googleが高機能&シンプルWiFi ルータ「OnHub」発表。IoT向け規格もマルチ対応 - Engadget Japanesehttp://japanese.engadget.com/2015/08/19/google-wifi-onhub-iot/

GoogleからWiFiルータが登場しました。革新的な機能があるわけではありませんが,シンプルでセットアップが簡単でデザインも良いところがポイントのようです。

もうその存在を忘れている人も多いかもしれませんが,Nexus Playerに続いてのGoogleによる円筒形デバイスですね。調べてみると,サイズもNexus Playerとほぼ同じ12cmくらいのCDサイズでした,重ね合わせることもできそうです。

Amazonの会話型コンピュータ兼スピーカーEchoも円筒形デバイスですが,それより,auオリジナルのインテリア雑貨として登場した「傘立て(Umbrella stand)⁠「ゴミ箱(Dust bin)⁠に似てますね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入