週刊Webテク通信

2013年6月第2週号1位は、シングルページ型のWebデザインがWebの未来である理由、気になるネタは、くら寿司、手塚作品をスマホから無料で読める「TEZUKA SPOT」全店に導入

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

1. 8 Reasons Why Pageless Design is the Future of the Webhttp://www.dtelepathy.com/blog/design/8-reasons-why-pageless-design-is-the-future-of-the-web

シングルページ完結型のWebデザインが、Webの未来である理由を解説しています。

以下の8つの項目に分けて説明してありました。

  1. ストーリーを語り訪問者に行動を起こすよう誘導できる
  2. ページ遷移などで途切れることなく見ることができ、直感的で全体像をつかみやすい
  3. 直感と感情を満足させられる
  4. 高いコンバージョン率が得られる
  5. メンテナンスが素早く簡単にできる
  6. 直帰率を低下させ、ソーシャルメディアでの共有がしやすい
  7. 複数のデバイスで見た目を統一しやすい
  8. 制作費を抑えられる

シングルページデザインを「Pageless Design⁠⁠、シングルページサイトを「Smart Site」という呼び方をしているのも新鮮でした。

図1 シングルページデザインの良さを解説
図1 シングルページデザインの良さを解説

2. Principles of Flat Design - Designmodohttp://designmodo.com/flat-design-principles/

フラットデザインの原則について解説した記事です。

  • 効果を加えない
  • シンプルな要素
  • タイポグラフィに力を入れる
  • 色に力を入れる
  • ミニマルデザイン

という5つの原則について説明した後、⁠Almost⁠⁠ Flat Design」というアプローチについて紹介しています。フラットデザインをベースに、ボタンなどにはグラデーションやドロップシャドウをちょっとだけ加えて操作性を損なわないようにした、⁠ほぼ⁠フラットなデザインのことです。

前号で取り上げた「Is the New Google Interface Flat?(Googleの新しいインターフェイスはフラットか?⁠⁠」でも、このAlmost Flat Designという言葉が登場していました。

図2 フラットデザインの原則
図2 フラットデザインの原則

3. Advantages of Designing Big Oversized Website Layoutshttp://speckyboy.com/2013/05/27/advantages-of-designing-big-oversized-website-layouts/

従来のWebサイトに比べ、非常に大きく表示されるようにデザインされたサイトについて、その利点を解説しています。

  • ファーストビューで目を惹くことができる
  • 大きなイメージを見せられる
  • 文字が読みやすい

といった利点と、フルスクリーンの背景画像と視差スクロールについて説明してありました。

実例も数多く紹介されています。

図3 大きなサイズのWebデザインの利点
図3 大きなサイズのWebデザインの利点

4. FireworksユーザーがPhotoshopではできないと思っている12の機能 | 誠http://www.ngi-d.net/fireworks_to_photoshop/

FireworksユーザーにPhotoshopの不満な点をヒアリングして、その解決策をまとめたという記事です。

Fireworksの開発終了は残念ですが、WebデザインにおいてのPhotoshopの使い方の解説記事が増えたことは、Web業界にとってもプラスになっていると思います。

図4 PhotoshopをWebデザインに使うためのテクニック
図4 PhotoshopをWebデザインに使うためのテクニック

5. Writing Web Content with Markdownhttp://www.hongkiat.com/blog/web-content-with-markdown/

マークダウン記法の記述方法と便利なツールを紹介しています。

日本でもいろんなブログなどで話題となっている、Mac用の便利なアプリケーション「Mou」も紹介されていました。

図5 マークダウン記法の入門記事
図5 マークダウン記法の入門記事

そのほか、最近の記事の中から、便利なスクリプトを紹介します。

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

web計。http://zeller-lab.com/img-width/

「web計。」は、Webデザイン用の計算が行えるWebサービスです。縦横比によって画像のピクセル数を計算する機能と、画像を横に並べるときのサイズ計算機能があります。

特に便利そうなのが横幅に対する画像数の計算です。横幅のピクセル数と画像の個数、マージンを入力すると画像の横幅が計算されます。また、画像のサイズと全体の横幅、マージンを入力して、何個の画像が入るのかを計算することも可能です。

縦横比の計算は、4:3、3:2、16:9のほか、黄金比、白銀比も用意されています。

図6 Webデザイン用の計算機サービス
図6 Webデザイン用の計算機サービス

おすすめ記事

記事・ニュース一覧