週刊Webテク通信

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

ネットで見かけた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のようなコメントシステムを追加できるサービス

おすすめ記事

記事・ニュース一覧