週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 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 メールフォームを簡単に実装できるサービス

今週の気になるWebネタ

ソニー,照らして鳴らすLED電球スピーカ--「Life Space UX」第2弾 - CNET Japanhttp://japan.cnet.com/digital/av/35064361/

電球型のLED電球スピーカーが新登場しました。これまでも照明一体型のスピーカーはあったのですが,既存の電球の代わりに挿すだけで使えるタイプというところが特徴のようです。

照明一体型スピーカーの話題を以前目にしたときにはあまり興味を持たなかったのですが,最近はBluetooth接続のスピーカーの便利さを実感しているので,こちらも気になりました。

蛍光灯ではなく電球を使っている場所というと,家の中ではトイレが思い浮かぶのですが,トイレにスピーカーというのも意外といいかもしれません。また,店舗でBGMを流すのに利用するのに使えば,スピーカーを設置するのに比べてコストを減らせそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入