週刊Webテク通信

2017年4月第5週号 1位は，お問い合わせページを改善するためのヒントと良い実例，気になるネタは，今日から始める「マストドン」——Twitterとの違いから使い方，オススメサーバーまで

Webテク, Webデザイン, Web広告, レスポンシブウェブデザイン, ワイヤフレーム, メッセンジャー, mastodon

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

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

1. Contact Us Page Best Practices with 22 Fantastic Examples - Onextrapixelhttps://onextrapixel.com/contact-us-page-best-practices-examples/

お問い合わせページを改善するためのヒントと良い実例を紹介した記事です。

  • 何をすればいいのか分かるようなボタンを使う
  • メール以外の連絡を取る手段を用意する
  • フォームからつまらない内容の問合せがこないようにする工夫
  • ページの先頭と最後に問い合わせに関する情報を入れる
  • 必要な項目だけにした簡単なフォームを作る

実例は，機能やUIというよりも，デザイン的に凝ったページが紹介されているように感じました。

図1　お問い合わせページを改善するためのヒントと良い実例

図1　お問い合わせページを改善するためのヒントと良い実例

2. Designing accessible products – uxdesign.cchttps://uxdesign.cc/designing-accessible-products-e8aa79b55ebc

アクセシブルなプロダクトの作り方を紹介した記事です。

アクセシブルなインターフェイスとして推奨するビジュアルパターンを，画像とともにまとめています。

  1. 色のコントラスト
  2. フォーカス
  3. クリックターゲット
  4. コンテンツへの迅速なアクセス
  5. 要約した情報
  6. アクセシブルなトグルボタン

図2　アクセシブルなプロダクトの作り方

図2　アクセシブルなプロダクトの作り方

3. A Brief Overview On Responsive Navigation Patterns – Smashing Magazinehttps://www.smashingmagazine.com/2017/04/overview-responsive-navigation-patterns/

レスポンシブウェブデザインでのナビゲーションパターンについて解説した記事です。

好ましいナビゲーションのパターンとして，小さな画面サイズでもメニューの項目が全て入っているもの，開閉メニューでメニューが階層化されているもの，シンプルな開閉メニューの3つの例が紹介されていました。

図3　レスポンシブなナビゲーションパターンについて

図3　レスポンシブなナビゲーションパターンについて

4. 5 Web Design Trends to Follow this Spring - noupehttps://www.noupe.com/design/5-web-design-trends-to-follow-this-spring.html

この春のWebデザインのトレンドを5つ紹介しています。

  1. イラスト
  2. ピンク
  3. 幾何学図形と非対称
  4. ちょっとしたエフェクト
  5. ページの隅

図4　この春のWebデザインのトレンド

図4　この春のWebデザインのトレンド

5. Wireframes by Top UX Designers – Inspiration Supply – Mediumhttps://medium.com/inspiration-supply/wireframes-by-top-ux-designers-d6922d34ddb8

優れたUXデザイナーによって作られたワイヤフレームのギャラリーです。

ワイヤーフレームは以下の2点において重要とのことでした。

  • 機能や動作，コンテンツの優先順位を決めるため
  • Webやアプリが最終的にどのように見えるのかをクライアントに説明するため

図5　ワイヤフレームのギャラリー

図5　ワイヤフレームのギャラリー

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

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

Speaklynhttp://speaklyn.com/

「Speaklyn」は，Facebookメッセンジャーを使ったメッセージ送信フォームをサイトやブログに埋め込むためのサービスです。Facebookページとしてメッセージを受け取ることで，企業や組織の問合せフォーム代わりに使えます。

設定は簡単で，FacebookページのURLと言語，カバー写真を使うかどうかを指定するだけです。ページに表示されるボタンの色やフォントサイズ，ラベルテキストなどを変更することもできます。

生成されたJavaScriptのコードをページやブログのテンプレートなどに貼り付けることで，ページの右下または左下にボタンが表示されるようになり，押すとメッセージ送信のウィンドウが開きます。Facebookにログインしている人だけが対象となりますが，問い合わせフォームより気軽な連絡手段として有効だと思います。

図6　Facebookメッセンジャーを使ったメッセージ送信フォーム埋め込みサービス

図6　Facebookメッセンジャーを使ったメッセージ送信フォーム埋め込みサービス

今週の気になるWebネタ

今日から始める「マストドン」—⁠—Twitterとの違いから使い方，オススメサーバーまで | TechCrunch Japanhttp://jp.techcrunch.com/2017/04/21/mstdn-engadget/

一気に大きな話題となっている分散型ソーシャルメディアのマストドン（Mastodon）⁠，みなさん使ってますでしょうか？ まだ様子見という人も多いでしょうが，わたしはいくつかのインスタンスに参加してみました。

インスタンスというのはマストドンのサーバーのことで，誰でもサーバーを立てられることがマストドンの特徴となっています。自分の趣味に合うインスタンスに登録したほうがいいのですが，複数インスタンスに登録するのは当たり前なので，最初はあまり悩まずメジャーなところにアカウントを作ってもいいでしょう。

できることはツイッターと似ていますし，日本語対応しているので，機能的に戸惑うところは少ないと思います。Slackとは直接ライバル視されるものではありませんが，Slackの「チーム」はマストドンのインスタンスと考えられるなど，比較対象にはなりそうです。

Webテク, Webデザイン, Web広告, レスポンシブウェブデザイン, ワイヤフレーム, メッセンジャー, mastodon

著者プロフィール

芦之由（あしのよし）

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

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

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