週刊Webテク通信

2015年5月第1週号 1位は,モックアップではなくプロトタイプを作るべき理由,気になるネタは,日本郵政,高齢者サービスでApple,IBMと提携―iPadとAI利用で見守りやヘルスケアなど提供へ

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

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

1. Choose prototypes over mockupshttp://blog.webflow.com/always-choose-prototypes-over-mockups

Webデザインのワークフローの中で,モックアップ(静止画像)ではなくプロトタイプ(操作できるもの)を作るべきだという記事です。

以下のような項目で,プロトタイプを作るべき理由を解説しています。

  • モックアップはベストな解決策ではない
  • プロトタイプは最終完成形に近い
  • プロトタイプによって可視化が容易になる
  • プロトタイプはレスポンシブな形でデザインしやすい

この記事は,Webflowというサイト構築ツールのブログに掲載されているもので,コーディングをせずにプロトタイプを作るツールとしてWebflowが紹介されていました。

図1 モックアップではなくプロトタイプを作るべき理由

図1 モックアップではなくプロトタイプを作るべき理由

2. 11 Examples of How Ghost Buttons are Used Effectivelyhttp://spyrestudios.com/ghost-buttons-examples/

ゴーストボタンを効果的に使用している例を紹介しています。なぜ効果的かの解説とともに,11個のサイトが掲載されていました。

以下の3つは,ゴーストボタンを利用する上での重要なポイントです。

  • ゴーストボタンの配置や位置は重要で,中央に配置するのが最も目につきやすい
  • ゴーストボタンは背景が透けているので,背景画像によって見にくくならない場所に配置する
  • ゴーストボタンは今っぽい印象を与えるが,全てのサイトに合うわけではない

図2 ゴーストボタンを効果的に使用している実例

図2 ゴーストボタンを効果的に使用している実例

3. The 5 Building Blocks of Visual Hierarchy in Web Designhttp://thenextweb.com/dd/2015/04/30/the-5-pillars-of-visual-hierarchy-in-web-design/

Webデザインにおける視覚的な階層構造を作るためのポイントを紹介しています。

  1. サイズ
  2. レイアウト
  3. スペース
  4. スタイル

の5つの要点について解説していました。

図3 Webデザインにおける視覚的な階層構造を作るポイント

図3 Webデザインにおける視覚的な階層構造を作るポイント

4. Best Practices for Sliding Hamburger Menus | Web Designhttp://webdesignledger.com/web-design-2/best-practices-for-hamburger-menus

スライドして要素が現れるハンバーガーメニューを制作する上でのヒントを解説した記事です。

要点の紹介と,実装するためのjQueryプラグイン数点が紹介されていました。

図4 ハンバーガーメニューを制作する上でのヒント

図4 ハンバーガーメニューを制作する上でのヒント

5. 15 Mockups to Showcase Your Responsive Web Designshttp://line25.com/articles/15-mockups-to-showcase-your-responsive-web-designs

レスポンシブWebデザインのためのモックアップ素材を多数紹介しています。

複数の端末の画面にWebページが表示されているような画像を,はめ込み合成で簡単に作れるPSD素材が入手できます。

図5 レスポンシブWebデザインのためのモックアップ素材集

図5 レスポンシブWebデザインのためのモックアップ素材集

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

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

Carnivalhttps://carnivalapp.io/

Carnivalは,Webサイト上にコメントを追加できる仕組みを提供するサービスです。ユーザー登録が必要ですが,スクリプトのコードを貼り付けるだけで簡単に設置できます。商用サイトでない場合,無料で使えるプランもあります。

特徴は,ページ内の段落毎にコメントを残せることです。そうです,Mediumで採用されている,あのコメントシステムがあなたのブログでも使えるようになります。管理者自身が追加情報を書く場合も,このコメントの仕組みは便利だと思います。

コメントするための認証がGoogleとGitHubだけということと,Mediumのようにコメントの付いた段落にアンカーリンクが生成されないことが残念ですが,今後のアップデートに期待しつつ見守りたいです。

図6 Mediumのようなコメントシステムを追加できるサービス

図6 Mediumのようなコメントシステムを追加できるサービス

今週の気になるWebネタ

日本郵政,高齢者サービスでApple,IBMと提携―iPadとAI利用で見守りやヘルスケアなど提供へ | TechCrunch Japanhttp://jp.techcrunch.com/2015/05/01/20150430apple-ibm-japan-post/

NHKニュースで「日本郵政は,アメリカの大手IT企業のアップルやIBMと連携して高齢者専用のタブレット端末を開発」と報道されていて驚きました。Appleがそんな独自端末を作るわけがないと思い調べてみると,やはり端末はiPadを使うとのことでした。

このニュースに対し,日本のメーカーの端末を使えよという声はあまりないようです。そもそも日本メーカーのタブレットだって,OSは日本製ではないですからね。Apple,IBMと提携というのは変なしがらみがなさそうで,むしろ好意的に受け止められているように感じられます。

この流れで,将来的には高齢者にApple Watchを提供という布石が打たれたように思えます。心拍数測定はまさにヘルスケア分野で役立つでしょうし,Apple Watch自体にGPSが搭載されれば老人の徘徊対策にもなるでしょう。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入