週刊Webテク通信

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

ネットで見かけた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 マークダウン記法で簡単にプレゼンテーションが作れるサービス

おすすめ記事

記事・ニュース一覧