週刊Webテク通信

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

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

ネットで見かけた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 ブロガーのための便利なサービスいろいろ

今週の気になるWebネタ

新型Apple TVは画面キャプチャー&録画も可能!! YouTuberのゲーム実況が捗る!! - Engadget Japanesehttp://japanese.engadget.com/2015/10/30/apple-tv-and-youtuber/

ついに発売が開始され,いろいろとレビュー記事も登場している新型Apple TVですが, USB-CケーブルでMacとつなぐと画面キャプチャーと録画ができるそうです。iPhone/iPadに続き,Apple TVもケーブルでMacにつないでミラーリングできるようになったわけです。

画面キャプチャーもそうですが,プレゼンなどの時にプロジェクター表示するのにも便利だと思います。映画コンテンツなどは表示できないのがちょっと残念ですが,不正コピー防止ということで仕方ないでしょう。

また,Fire TV StickでiPhoneの画面をミラーリングできるという情報も見つけました。Fire TV StickにAirPlayに対応させるAndroidアプリを入れればいいとのことです。ChromecastはiPhoneのミラーリングに対応していないので,Fire TVの優位点となるかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入