週刊Webテク通信

2015年9月第1週号 1位は,Webデザインにおけるありがちなミスとその解決方法,気になるネタは,Facebook,メッセンジャーの中にいるパーソナルアシスタント「M」のテスト開始

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

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

1. 6 Web design mistakes (and how to correct them)http://thenextweb.com/dd/2015/08/26/6-web-design-mistakes-and-how-to-correct-them/

Webデザインにおけるありがちなミスとその解決方法について解説した記事です。

  1. グリッドを使わずデザインする
  2. カスタマイズせずにテーマを使う
  3. 貧弱な画像をベースに始める
  4. カラーパレットやフォントセットを使わない
  5. 複雑すぎるナビゲーション
  6. 読み込みが遅い

それぞれの項目に,解決方法と正しい方向に導くためのヒントが説明されています。

図1 Webデザインにおけるありがちなミスとその解決方法

図1 Webデザインにおけるありがちなミスとその解決方法

2. How Floating Works | bitsofcodehttp://bitsofco.de/2015/how-floating-works/

CSSのフロートのふるまいについて解説しています。

  1. フロートした要素は親要素からは見えない(存在しないのと同じ)
  2. 左/右にフロートした要素は,可能な限り親要素の上部&左/右に近づく
  3. フロートされた要素はその前の要素より下に押し出される
  4. クリアされていないフロートした要素は先に定義された要素がより望ましい位置(右にフロートしているなら右)に配置される
  5. 親要素の上部に近い要素の方が,より親要素の上部&左/右に近づく(複数要素がフロートしていて幅が足りなくて入りきれない場合,後ろの要素が下に落ちる)
  6. フロートされた要素は親要素を拡張しない

上に挙げた見出しだけではわかりにくいと思いますが,元記事では画像とコードも使って解説してあります。

図2 CSSのフロートのふるまいについて

図2 CSSのフロートのふるまいについて

3. Why the Confirm Password Field Must Die - UX Movementhttp://uxmovement.com/forms/why-the-confirm-password-field-must-die/

ユーザー登録フォームにおいて,パスワード入力欄を確認用に2つ用意するケースがありますが,これはもうやめるべきという話題です。

パスワードの入力欄には文字が表示されないことが問題なので,ボタンで表示/非表示を切り替えられるようにすればいいとのことでした。

図3 確認用パスワード入力欄はやめるべきという考察

図3 確認用パスワード入力欄はやめるべきという考察

4. 19 Ways to Build Your Website, Online Store and Mobile App [Infographic] | Social Media Todayhttp://www.socialmediatoday.com/marketing/courtney-hunt/2015-08-27/19-ways-build-your-website-online-store-and-mobile-app

Webサイト,オンラインストア,モバイルアプリを作るためのサービスをまとめたインフォグラフィックスです。

Jimdoなど簡単に作れるもの,WordPressなどそれなりに簡単なもの,Drupalなどそれなりに知識が必要なものとに分けてまとめてあります。

図4 Webサイトを作るサービスをまとめたインフォグラフィックス

図4 Webサイトを作るサービスをまとめたインフォグラフィックス

5. 50 Beautiful Websites with Big Background Imageshttp://sixrevisions.com/inspiration/websites-big-background-images/

大きな背景画像のWebサイトのギャラリーです。大きな背景画像を使うことで,印象的で記憶に残るようになると解説しています。

トップページでブラウザのサイズに合わせて全体に背景画像が表示されるというテクニックを使ったサイトばかりでした。

図5 大きな背景画像のWebサイトのギャラリー

図5 大きな背景画像のWebサイトのギャラリー

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

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

20 Websites To Sell Your Design Works - eWebDesignhttp://ewebdesign.com/sell-your-design-works/

今回は,自分のデザインしたものを販売できるWebサービスをまとめた記事を紹介します。

WordPressのテーマをはじめ,Webデザイン用のグラフィックスやベクトル画像,フォント,ロゴのテンプレート,インフォグラフィックスなど,いろいろなものを販売することができますね。特に,WordPressのテーマを販売しているサービスが多く紹介されていました。

英語のサイトで有名なものは,日本国内だけの同様のサービスに比べてユーザー数も多いことが予想されるので,それだけ儲けられる可能性も高いように感じます。

また,自分が利用者側としての,デザイン素材を提供しているサイトのリストとしても参考になりますね。

図6 デザイン素材を販売できるサービスいろいろ

図6 デザイン素材を販売できるサービスいろいろ

今週の気になるWebネタ

Facebook,メッセンジャーの中にいるパーソナルアシスタント「M」のテスト開始 - ITmedia エンタープライズhttp://www.itmedia.co.jp/enterprise/articles/1508/27/news046.html

Facebookから,AppleのSiriやGoogleのGoogle Now,MicrosoftのCortanaに対抗する,パーソナルアシスタントが登場するようです。Facebookメッセンジャーで話しかけると,適切な答えを返してくれるサービスとのことでした。

ほかのサービスのような音声での会話形式ではなく,テキストでの会話というところが差別化のひとつのポイントかもしれません。商品を購入したり,レストランを予約するなど,作業を完了させられるところも大きな特徴となっています。

メッセンジャーで会話しながら決済までもっていけるということで,LINEも類似のサービスを出してきそうですね。パーソナルアシスタントがOSに依存せずいろいろ選べるようになるのはユーザーにとってもいいことでしょう。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入