週刊Webテク通信

2012年11月第2週号1位は、レスポンシブWebデザインがもたらすものと課題について、気になるネタは、個人向け文書スキャナ「ScanSnap」新旗艦モデル--Wi-Fiでスマホと連携

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

1. The opportunities and challenges of responsive design | Webdesigner Depothttp://www.webdesignerdepot.com/2012/11/the-opportunities-and-challenges-of-responsive-design/

レスポンシブWebデザインがもたらすものと課題についてまとめています。

レスポンシブWebデザインにより、良くなることが期待できる点は以下です。

  1. メンテナンスが楽になる
  2. ブランドの一貫性が保ちやすい
  3. ユーザビリティを統一しやすい
  4. リダイレクトが不要
  5. 読み込み時間

5の「読み込み時間」ですが、デバイスごとに最適化した画像を提供することが前提のようです。

そして、レスポンシブWebデザインの課題は以下になります。

  1. 開発に時間がかかる
  2. 異なるデバイスは異なる目的で使われる
  3. 異なるデバイスは異なる操作方法を必要とする
  4. 非対応のブラウザがある
  5. リサイズされた画像では細部の情報を失ってしまう
  6. 小さい画面サイズでのナビゲーションメニュー

記事では、これらを元に考慮すべき点なども紹介されています。

図1 レスポンシブWebデザインがもたらすものと課題について
図1 レスポンシブWebデザインがもたらすものと課題について

2. Functional Footer Design: 8 Improvements for Ordinary Footers - DesignFestivalhttp://designfestival.com/functional-footer-design-8-improvements-for-ordinary-footers/

普通のフッタを機能的なフッタにするための改善点をまとめています。

  1. サイトマップ
  2. 連絡先情報
  3. 重要なリンクの宣伝
  4. リンクを整理
  5. 美しく作る
  6. ブログやソーシャルメディアのリンクを入れる
  7. 提供者名や提携組織の名前を入れる
  8. 検索窓を入れる
図2 機能的なフッタにするための改善点
図2 機能的なフッタにするための改善点

3. Little Big Detailshttp://littlebigdetails.com/

ユーザーインターフェイスの細かいこだわりを集めたTumblrサイトです。

OSやアプリケーション、Webサイトなどのユーザーインターフェイスから見つけたこだわりのポイントを、画像付きで紹介しています。

図3 ユーザーインターフェイスの細かいこだわりを集めたサイト
図3 ユーザーインターフェイスの細かいこだわりを集めたサイト

4. 15 Most beautifully designed websites | Web design resource | Ishu'sBloghttp://www.ishu.com.np/15-most-beautifully-designed-websites/

すばらしいデザインのWebサイトを15個セレクトして紹介しています。

トップ15とうたっているだけあり、Apple、Googleなどメジャーなサイトが中心でした。

図4 すばらしいデザインのWebサイト15選
図4 すばらしいデザインのWebサイト15選

5. Cool New Website Designs For Inspiration - 35 Siteshttp://www.designyourway.net/blog/inspiration/cool-new-website-designs-for-inspiration-35-sites/

洗練されたWebデザインのギャラリーです。35の新しいサイトを紹介しています。

ページ遷移が少なく、ちょっとした動きのあるサイトが多いようです。

図5 洗練されたWebデザインのギャラリー
図5 洗練されたWebデザインのギャラリー

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

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

Striking.lyhttps://www.striking.ly/

Striking.lyは、1ページ完結型でスクロールで見せていくタイプのサイトを、簡単に作れるWebサービスです。

標準状態でのテンプレートがシンプルかつしっかりデザインされているので、文字や写真を差し替えるだけでカッコいいサイトが作れそうです。英語のサイトならフォントもいろいろ使えるので、これだけで立派なサイトが作れることでしょう。

ビジネス/パーソナルブランディング/ポートフォリオの3つからテーマを選び、さらにその中の数種類のテンプレートから、使いたいものを選択します。あらかじめ文字や画像の入ったテンプレートをベースに、コンテンツを差し替えることでサイトを作成していきます。

複数ページに分けずに、⁠セッション」として縦にいくつかのエリアが並んでいくわけですが、セッションの目的によっていくつかのテンプレートに分かれています。そのセッションのテンプレートの個数やレイアウトパターン、カスタマイズ性が絶妙だなと感じました。デザイナーでなくても無理なくカスタマイズでき、下手にいじりすぎてレイアウトを崩さないように考えられているのだと思います。

無料で作れるのは2ページまでで、月の訪問者数が500という制限があります。その上のSTARTER/PROという二つの有料コースにアップグレードすると、ページ数と訪問者数の制限が増えるほか、独自ドメインやGoogle Analyticsなどが使えるようになります。

図6 1ページ完結型サイトが作れるサービス
図6 1ページ完結型サイトが作れるサービス

おすすめ記事

記事・ニュース一覧