週刊Webテク通信

2015年5月第2週号1位は、独自性のあるWebサイトのレイアウトを作るためのヒントと実例、気になるネタは、ソニー、照らして鳴らすLED電球スピーカ--「Life Space UX」第2弾

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

1. Examples of unique website layoutshttp://blog.webflow.com/examples-of-unique-website-layouts

独自性のあるWebサイトのレイアウトを実例とともに解説した記事です。

紹介されているのは、以下の3つのパターンです。

  1. 画像を大量に使ったコンテンツ
  2. エディトリアルデザイン的な構成を必要とする大量のコンテンツ
  3. 芸術的なナビゲーション

また、独自性のあるレイアウトを作るための5つのヒントも掲載されていました。

  1. ナビゲーションの手がかりを含める
  2. レスポンシブ性を犠牲にしない
  3. 独自性のあるレイアウトは独自性のあるインスピレーションから始まる
  4. 失敗することもある
  5. ユーザーを混乱させない
図1 独自性のあるWebサイトのレイアウトを作るためのヒントと実例
図1 独自性のあるWebサイトのレイアウトを作るためのヒントと実例

2. Flat Design vs. Material Design: What Makes Them Different? : Adobe Dreamweaver Team Bloghttp://blogs.adobe.com/dreamweaver/2015/05/flat-design-vs-material-design-what-makes-them-different.html

フラットデザインとマテリアルデザインの違いについてまとめた記事です。

以下のようなことが解説されています。

  • マテリアルデザインとフラットデザインとの違い3点
  • マテリアルデザインは明確に定義されたコンセプト
  • フラットデザインは反動(スキューモーフィズムに対する)
  • マテリアルデザインはスキューモーフィズムをいくつか取り込んでいる
  • マテリアルデザインは物理学を取り入れている
  • フラットデザインの良い点悪い点
  • マテリアルデザインのの良い点悪い点

スキューモーフィズム(skeuomorphism)とは、現実の物を模したデザインのことです。

図2 フラットデザインとマテリアルデザインの違い
図2 フラットデザインとマテリアルデザインの違い

3. Designing patterns: the biggest web trend of 2015 so far | Webdesigner Depothttp://www.webdesignerdepot.com/2015/05/designing-patterns-the-biggest-web-trend-of-2015-so-far/

2015年のWebデザインの大きなトレンドであるパターン(柄、模様)について、多数の実例を元に解説しています。

  • 生成されたパターン
  • データによるパターン
  • 手作りのパターン
  • アニメーションするパターン
  • グリッド状のパターン
図3 2015年のWebデザインの大きなトレンドであるパターンの紹介
図3 2015年のWebデザインの大きなトレンドであるパターンの紹介

4. The Future of Interaction Designhttp://thenextweb.com/dd/2015/05/07/the-future-of-interaction-design/

インタラクションデザインの未来について解説した記事です。

インタラクションデザインの5つの柱や、最新のインタラクションデザインのテクニックなどについてまとめてあります。

図4 インタラクションデザインの未来
図4 インタラクションデザインの未来

5. CSS Filter Effects ― CSSReflexhttp://www.cssreflex.com/css-generators/filter/

CSSのfilterプロパティでの効果を確認しながら設定できるページです。スライダーで数値を変更して効果のかかり具合を見ることができ、CSSのコードが生成されます。

ただ画像を加工したいだけならPhotoshopなどで編集すればいいので、ロールオーバー時に画像を変化させる場合などに使うとよさそうです。

図5 CSSのfilter効果のジェネレーター
図5 CSSのfilter効果のジェネレーター

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

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

Formspree | Functional HTML formshttp://formspree.io/

フォームに入力した内容を指定のメールアドレスに送信するためのサービスです。formタグのactionにこのサービスのURLとパラメーターを指定するだけで、問い合わせフォームなどを簡単に稼働させられます。

ユーザー登録不要で使えるところも特徴です。初めてフォームから送信したときには、指定したメールアドレスに確認用のメールが来ます。そのメールの認証用URLをクリックして認証すると、次からはフォームの内容がメール送信されるという仕組みになっていました。

メール送信完了後に表示されるページのURLなど、いくつかの設定ができるようになっており、単純な問合せフォームには十分使えそうです。

図6 メールフォームを簡単に実装できるサービス
図6 メールフォームを簡単に実装できるサービス

おすすめ記事

記事・ニュース一覧