週刊Webテク通信

2013年7月第2週号 1位は,フラットデザインに長い影を追加した「ロングシャドウ」について,気になるネタは,GoogleアラートがRSSへの配信終了

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

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

1. Flat design casts a long shadow | Webdesigner Depothttp://www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/

フラットデザインに,長い影を落としたような効果について解説しています。サンプルがたくさん掲載されているので参考になります。

斜め45度の長い影をフラットなデザインに追加する手法は,日本でも「ロングシャドウ」と呼ばれて最近一気に認識されてきたようです。Googleのデザインには以前からよく使われていて,Googleっぽさを感じてしまう人もいるようですね。

フラットデザイン2.0と呼ばれるような,フラットデザインに新たな要素をプラスするものが求められているのは,フラットなだけだと短調になってしまうからでしょう。

ロングシャドーはフラットデザインに奥行きや濃淡を加えることができ,控え目に使用すれば非常に効果的とのことでした。

図1 フラットデザインに長い影を追加した「ロングシャドウ」について

図1 フラットデザインに長い影を追加した「ロングシャドウ」について

2. What is Responsive Web Design and why should you care?http://www.quantumcloud.com/blog/web-designing/what-is-responsive-web-design-and-why-should-you-care/

レスポンシブWebデザインの必要性などについて,まとめた記事です。

以下の項目に分けて,インフォグラフィックス風に画像でまとめてあります。

  1. レスポンシブデザインとは何か
  2. なぜ必要なのか
  3. レスポンシブデザインの特徴
  4. どのように動作するか
  5. 最も効率のよいプロセス
  6. フレームワーク
  7. 成果

図2 レスポンシブWebデザインについてまとめたインフォグラフィックス

図2 レスポンシブWebデザインについてまとめたインフォグラフィックス

3. Style Guide Boilerplatehttp://bjankord.github.io/Style-Guide-Boilerplate/

Webサイト制作時のスタイルガイドのベースとなるものを提供しています。

見出しやリスト,フォームの要素など,Webページで使われる様々な要素が用意されているので,どのようにCSSでスタイリングされているのかを一覧できます。

このスタイルガイドのファイル一式を自分の制作するサイトに入れておき,サイトで使っているCSSを適用させるようにすれば,いつでもそのサイトのスタイルガイドを確認できるようになって便利ということです。

図3 スタイルガイドのテンプレート的なものを提供

図3 スタイルガイドのテンプレート的なものを提供

4. 5 of the Best Do-It-Yourself Website Builders on the Internethttp://www.underworldmagazines.com/5-of-the-best-do-it-yourself-website-builders-on-the-internet/

Webサイトを簡単に制作できるツールを5つ取り上げています。

この手のツールも最近はかなり使えるものになってきていますし,Webデザインのことが分かっている人がこういったツールを使うと,よりちゃんとしたものが作れると思います。

Webデザイナーが,こういったツールを使って,仕事としてサイトを構築するというのもアリなんじゃないでしょうか。

図4 Webサイトを簡単に制作できるツールいろいろ

図4 Webサイトを簡単に制作できるツールいろいろ

5. Showcase of 30+ Flat Website Designs to Feed your Inspiration | Best PSD to HTMLhttp://www.bestpsdtohtml.com/showcase-of-30-flat-website-designs-to-feed-your-inspiration/

フラットデザインのサイトのショーケースです。

一見フラットっぽくないサイトも混じっていますが,最近流行りの感じのシンプルでレスポンシブなサイトが多く参考になります。

図5 フラットデザインのサイトを30以上紹介

図5 フラットデザインのサイトを30以上紹介

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

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

biggie: presentationshttp://macwright.org/biggie/

マークダウン記法で書いたものが,プレゼンテーション用のスライドに変換されるというサービスです。

文字が画面いっぱいに大きく表示されるのが特徴で,日本語も問題なく表示できました。デザインは3種類から選べます。できたスライドは,共有URLを生成できます。

分割された画面にエディタとプレビューが表示されていて,非常に直感的にスライドを作っていくことができそうです。マークダウンエディタとしての機能があるとさらに便利にも思えますが,別のマークダウンエディタで作ったものをコピー&ペーストすればいいんですね。

それほど凝ったプレゼンが作れるものではありませんが,ネット上にある画像を表示したり,リンクを設定することも可能です。ベースとなっているのはbigというプレゼンテーション用システムで,このbigを使えば同様のプレゼンテーションをローカルや自分のサーバーで動かすことが可能です。

図6 マークダウン記法で簡単にプレゼンテーションが作れるサービス

図6 マークダウン記法で簡単にプレゼンテーションが作れるサービス

今週の気になるWebネタ

GoogleアラートがRSSへの配信終了,代替サービスとGmailで代用 [RSS/Web] - iPod LOVEhttp://ipod.item-get.com/2013/07/googlerssgmail_rssweb.php

Google リーダーが終了したと同時に,Google アラートのRSS配信が終了してしまったようです。わたしもいろいろとアラート設定しているんですが,1日1回メールで受け取る設定をしていたので気付きませんでした。

たぶん事前の告知はされていなかったようで,Google リーダー終了のどさくさに紛れて終了したようなイメージがあります。Google的にはもうRSSの時代じゃないということのようなので,今後はbloggerのRSS配信機能が終了するようなこともあるのかもしれません。

GoogleとRSSで思い出しましたが,YouTubeがいろいろとRSSを生成しているのは意外と知られていないようです。たとえば,⁠http://www.youtube.com/rss/tag/タグの名前」でタグ別,⁠http://www.youtube.com/rss/user/ユーザーID/videos.rss」でユーザー毎のRSSが出力されています。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入