gihyo.jpサイトのロゴ

週刊Webテク通信

2015年11月第2週号1位は、完璧な問い合わせページをデザインする方法、気になるネタは、新型Apple TVは画面キャプチャー&録画も可能

2015-11-12

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

1. How to design the perfect contact page | Webdesigner Depothttp://www.webdesignerdepot.com/2015/11/how-to-design-the-perfect-contact-page/

完璧な問い合わせ（Contact）ページをデザインする方法を解説しています。

  1. 入力フィールドの数を絞る
  2. フォームを枠で囲む
  3. Googleマップを埋め込む
  4. 社会的な信用を証明する要素を追加する
  5. ブランディング要素を加える
  6. ユーザーの入力を手引きする
  7. シンプルさを保つ
  8. 電話番号を入れておく
  9. プライバシーに関する声明を追加する

最後に問い合わせページの実例とその解説とが載っていて、おさらいとして参考になります。

図1　完璧な問い合わせページをデザインする方法
図1　完璧な問い合わせページをデザインする方法

2. The Nine States of Design — Startups, Wanderlust, and Life Hacking — Mediumhttps://medium.com/swlh/the-nine-states-of-design-5bfe9b3d6d85

デザインにおける9つの「状態」について解説した記事です。ユーザーインターフェイスデザインで、今がどういう状態かを示すことはユーザー体験において重要ということです。

  1. 何も起きていない
  2. 読み込み中
  3. なし（空）
  4. 1つ
  5. いくつかの
  6. 多すぎる
  7. 正しくない
  8. 正しい
  9. 完了
図2　デザインにおける9つの「状態」について
図2　デザインにおける9つの「状態」について

3. TypeSource: Google Web Font inspiration in HTML & CSShttp://tobiasahlin.com/typesource/

Google Web Fontを使った文字デザインの作例が多数掲載されています。

HTMLとCSSのコードをすぐに参照して流用できるようになっていて便利です。さらに、テキストを打ち換えてプレビューすることもできます。

図3　Google Web Fontを使った文字デザインいろいろ
図3　Google Web Fontを使った文字デザインいろいろ

4. The Image Replacement Museum | CSS-Trickshttps://css-tricks.com/the-image-replacement-museum/

CSSの画像置換テクニックの歴史を振り返るため、これまでに登場した数々のテクニックをまとめています。2003年から2014年まで、いろいろな手法が生み出されてきたのがわかります。

今はWebフォントとSVGによりあまり使われなくなった画像置換ですが、日本ではまだ意外と使われているシーンもありそうです。掲載されている画像置換にはそれぞれポイントが解説されているので、実際に使用するときの参考になるでしょう。

図4　CSSの画像置換テクニックの歴史
図4　CSSの画像置換テクニックの歴史

5. 20 Creative Footer Designs for Awesome Websiteshttp://line25.com/inspiration/creative-footer-designs

クリエイティブなフッターデザインのギャラリーです。イラストを入れることで独自性を持たせているものが目立ちます。

1ページ完結型で、フッター部分は問い合わせ（Contact）となっているパターンもいくつか紹介されています。

図5　独自性のあるフッターデザインのギャラリー
図5　独自性のあるフッターデザインのギャラリー

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

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

9 Free Marketing Tools For Bloggers | SmashingApps.comhttp://www.smashingapps.com/2015/11/04/9-free-marketing-tools-for-bloggers.html

今回は、ブロガーのための便利なWebサービスをまとめた記事を紹介します。リンク短縮ツールやSEOに役立つサービスもありますが、記事のアイデアやタイトルを考えるためのサービスが興味深いです。

単語をいくつか入力すると、ブログ記事のアイデアを提案してくれるアイデアジェネレーターや、記事タイトルを採点や添削してくれるサービスが掲載されていました。

日本語でのアイデアを提案したり、タイトルを添削してはくれませんが、人目を引くためのポイントは英語でも参考になると思います。また、「⁠Content Idea Generator」は、黒板で添削しているようなデザインが面白いです。

図6　ブロガーのための便利なサービスいろいろ
図6　ブロガーのための便利なサービスいろいろ

おすすめ記事

記事・ニュース一覧