週刊Webテク通信

2013年11月第1週号1位は、モバイルに最適化したWebサイトを作る方法、気になるネタは、Beatroboが「PlugAir」発表--デバイスをスマホに差し込めば動画や音楽を共有

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

1. How to Create Mobile-Optimized Websiteshttp://www.designyourway.net/blog/resources/how-to-create-mobile-optimized-websites/

モバイルに最適化したWebサイトを作る方法を、解説した記事です。

モバイルデバイスからサイトを見たときのユーザー体験がお粗末なことは、ブランドの評判を損なうことにつながるとし、モバイル最適化の必要性を訴えています。

モバイルに最適化したサイトの特徴として、以下の項目に分けて紹介していました。

  • 短いヘッドライン
  • 読み込み時間を短く
  • モバイルユーザー向けの選択肢を選ぶ
  • ホワイトスペースを多く取る
  • 電話をかけるボタンを追加する
  • 1カラムにする
  • タッチ操作向けにする
  • 位置情報に対応する
  • 登録フォームはシンプルに
図1 モバイルに最適化したWebサイトを作る方法
図1 モバイルに最適化したWebサイトを作る方法

2. [JS]指定した要素内いっぱいに背景画像を最適に配置するシンプルなスクリプト -Wallpaper | コリスhttp://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-wallpaper.html

指定した要素内いっぱいに背景画像を配置する、WallpaperというjQueryプラグインを紹介しています。シングルページのサイトで、各項目の背景に画像を入れる場合に便利そうです。

パラメータを指定することにより、スクロール時に固定表示する設定も可能です。

図2 指定した要素内いっぱいに背景画像を配置するjQueryプラグインの紹介
図2 指定した要素内いっぱいに背景画像を配置するjQueryプラグインの紹介

3. font-familyに游書体(游明朝/游ゴシック)を指定する|Web制作 W3Ghttps://w3g.jp/blog/tools/use_yufamily

OS X MavericksとWindows 8.1には、游書体の游明朝体と游ゴシック体が標準インストールされるようになりました。それによって、Webデザインで游書体を指定することで、MacとWindowsで同様の見た目を実現できそうです。

この記事では、CSSで游明朝/游ゴシックを指定する方法を紹介しています。

図3 CSSで游明朝/游ゴシックを指定する方法
図3 CSSで游明朝/游ゴシックを指定する方法

4. Medium-Style Page Transition | Codropshttp://tympanus.net/codrops/2013/10/30/medium-style-page-transition/

Mediumというシンプルなブログサービスがあるのですが、そこで使われているページ切り替えの効果と同様のものを実現するためのテクニックです。

この記事のデモかMediumを見ていただくと分かるのですが、画面の一番下に次の記事へのリンクが背景画像とともに表示され、クリックするとその画像が次のページのヘッダ画像に変わります。この切り替え効果が、シンプルながら印象的です。

図4 Medium風ページ切り替え効果の実装方法
図4 Medium風ページ切り替え効果の実装方法

5. Use of Transparency in Website Design, Examples - Designmodohttp://designmodo.com/transparency-website-design/

透明度を使ったWebデザインのギャラリーです。

CSSで透明度を指定できるようになり、視認性に気を配る必要性があるとはいえ、半透明の要素を使ったWebデザインは増えているようです。

図5 透明度を使ったWebデザインのギャラリー
図5 透明度を使ったWebデザインのギャラリー

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

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

40 Remarkable Homepages from New Startups | SpyreStudioshttp://spyrestudios.com/40-homepages-from-new-startups/

今回は、Webサービスやアプリの新しいものばかりを集めた記事を紹介します。最近立ち上がったサービスが40個まとめられていて興味深いです。

Braceは、Dropboxと連動して簡単にサイトを立ち上げられるサービスです。Dropbox上に作られた専用のフォルダにファイルをアップするだけで、サイトを公開できるというお手軽さで、テスト公開にも使えるかもしれません。現在はまだ招待制となっています。

Dropbox上のファイルを共有し、デザインの検討を行うためのコラボレーションツール・Shipmentも便利そうです。

ほかにもプロジェクトマネージメントやコラボレーションツールがいくつか紹介されていました。全般的にはやはり、モバイルアプリと連動したサービスが多いですね。

図6 最近立ち上がったサービス40選
図6 最近立ち上がったサービス40選

おすすめ記事

記事・ニュース一覧