週刊Webテク通信

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

ネットで見かけた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 デザイン素材を販売できるサービスいろいろ

おすすめ記事

記事・ニュース一覧