週刊Webテク通信

2012年2月第3週号 1位は,視差スクロールのためのツールとチュートリアル,気になるネタは,アップルが新OS「Mountain Lion」発表

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

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

1. Parallax Scrolling: Tools, Articles and Tutorials | Splashnologyhttp://www.splashnology.com/article/parallax-scrolling-tools-articles-and-tutorials/4678/

視差スクロールのためのツールとチュートリアルをまとめた記事です。

以下のようなjQueryプラグインやフレームワークが紹介されています。

  • 背景画像がずれてスクロールすることで奥行き感のあるスライダー
  • スクロール時にフェードインや回転/ズームなどの効果を加える
  • 2枚のレイヤーが重なっていて,スクロールすると下のレイヤーが現れてくる効果
  • パスに沿って自由な方向にスクロール

縦長のページをスクロールさせながら見せていく,単ページ完結サイトのナビゲーションに使えそうなスクリプトも揃っています。jQuery Parallax Pluginのサンプルのような見せ方は,最近よく見かけますね。

図1 視差スクロールのためのツールとチュートリアル

図1 視差スクロールのためのツールとチュートリアル

2. Facebook Timeline Design using JQuery and CSS.http://www.9lessons.info/2012/01/facebook-timeline-design-using-jquery.html

Facebookのタイムライン風レイアウトをjQueryとCSSで実現しています。

インターフェイスやレイアウトをパクるのはよくないかもしれませんが,スタンダードなパターンになってくると真似られるのは仕方ないでしょうし,一般的なものと認められた方がオリジナルを作った側にもメリットがあるでしょう。

このタイムライン風のレイアウトは,Pinterest風レイアウトとともに今後のWebデザインのトレンドとなるような予感がします。

図2 Facebookのタイムライン風レイアウトを作るチュートリアル

図2 Facebookのタイムライン風レイアウトを作るチュートリアル

3. 5 Free Pinterest WordPress Pluginshttp://wplift.com/5-free-pinterest-wordpress-plugins

Pinterestとの連携に使えるWordPressプラグインを紹介しています。PinterestにPinした画像をブログに埋め込む用途のものが中心ですね。

PinterestはユーザーごとにRSSを生成しているので,WordPressに限らず自社サイトやブログに埋め込むことが可能です。

図3 Pinterestとの連携に使えるWordPressプラグインいろいろ

図3 Pinterestとの連携に使えるWordPressプラグインいろいろ

4. Land-of-webAll about web design » Circles in web design40 amazing exampleshttp://www.land-of-web.com/inspiration/web-design/circles-in-web-design-40-amazing-examples.html

2011年のトレンドの一つでもある,円形を使ったWebデザインのギャラリーです。

ナビゲーションを円形に配置したものや,円に沿って回転するようなものまであり,インスピレーションを得られそうなものばかりですね。

図4 円形を使ったWebデザインのギャラリー

図4 円形を使ったWebデザインのギャラリー

5. CSS3 ordered list styles - RedTeamDesignhttp://www.red-team-design.com/css3-ordered-list-styles

番号付きリストのコーディング例を2種類紹介しています。画像を使わずに数字をうまくデザインしています。

そのまま使ってもいいでしょうし,ちょっとアレンジしてもよさそうです。

図5 CSSでうまくデザインした番号付きリスト

図5 CSSでうまくデザインした番号付きリスト

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

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

Minus - Free Image and File Sharinghttp://minus.com/

Minusは,簡単にファイルをアップロードして共有しようというサービスです。

ファイルをドラッグ&ドロップするだけで,ユーザー登録なしですぐにファイル共有することができます。

ファイルをアップロードすると,押すだけでFacebookやTwitterでシェアできるボタンや,リンクのURL,リンクのHTMLコード,エンベットするためのiframeのコードなどが表示されます。

ファイルを共有させるためのサービスとして親切な設計になっており,デザインも洗練されています。

URLを指定してページ内の画像をアップロードする機能や,URLを指定してスクリーンキャプチャーを取る機能まであります。

ユーザー登録なしだとファイルは30日で消えるようです。ユーザー登録して使うこともでき,無料で10GBの容量が使えます。なお,人に紹介することで容量を増やすことができ,最大50GBまで無料で使えるそうです。

アップロードするファイルはプライベートの設定もできるのですが,公開して写真ギャラリーなどにつかうことも可能です。

Exploreというページに行くと,⁠あれ,Pinterest?」と思うような画面になりますが,これは公開されている写真の一覧なんですね。しかもPinterestのようにフォローやLikeもあるそうです。

オンラインストレージをベースとしたソーシャルネットワークという感じで,面白いサービスだと思います。

図6 ファイル共有サービスMinus

図6 ファイル共有サービスMinus

今週の気になるWebネタ

アップルが新OS「Mountain Lion」,iOSとの親和性を高めた10のポイント - デジタル - 日経トレンディネットhttp://trendy.nikkeibp.co.jp/article/pickup/20120216/1039713/

アップルから新OS「OS X Mountain Lion」を発表,開発者向けプレビュー版の提供が開始されました。やはりiOSとの連携や同様の操作性を提供する新機能が多いようです。

Lionの次はMountain Lionということですが,マウンテンライオンって日本ではなじみがないですよね。Macの辞書で調べると,cougarのことだと出てきました。そこでcougarを調べるとクーガー,アメリカライオン(mountain lion,panther,puma)とのこと。え,Mac OSの名前にも使われたパンサーとも,ピューマ(プーマ)とも同じ? と,わからなくなってきました。どれもまあ豹と呼んでいいようですが,深く考えない方がよさそうです。

個人的に気になったOS X Mountain Lionの新機能は,Macの画面をAppleTVを使ってワイヤレスでテレビなどに映せるAirPlay Mirroring。AppleTVがあればという前提ですが,セミナーや会議のときに便利そうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入