2014年6月第1週号 1位は、背景画像が全画面表示されるイントロエフェクトいろいろ、気になるネタは、楽天、厳選スイーツなどを扱うリアル店舗「楽天カフェ」を開設、無料Wi-Fiや全席コンセント完備

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

全画面の背景画像＋タイトル（テキスト）がまず表示され、スクロールするとちょっとした効果とともに背景画像が消えていく（あるいは小さくなる）といった、最近よく見かける効果のデモです。ここでは、「⁠イントロエフェクト」と呼んでいますね。効果のパターンが数種類用意されています。

Mediumでもおなじみの、全画面の背景画像＋タイトルですが、これはスマートフォンでの表示の際に収まりがいいことも流行っている理由なのでしょう。

なお、コメント欄で、「⁠すばらしいけど、プリントアウトできないよね」「⁠プリント用のCSSを作れば大丈夫よ」といったやり取りがなされていました。

このデモを作るにあたって参考にしたという、Jam3のイントロエフェクトは、全画面の動画が背景になっていて面白いです。短いループの動画なのですが、クオリティも高く印象に残ります。

不要なときは隠れて、必要なときに出現するヘッダーを実現するスクリプトです。ある程度スクロールするとヘッダが隠れ、上へスクロールするとヘッダが出現するようになっています。

固定ヘッダは便利な一方、コンテンツの表示される領域を狭めてしまうという欠点もあります。その問題を解決するうえで、このアプローチはなかなかよくできていると思いました。

ヘッダが隠れるタイミングや、隠れたり出現するときのアニメーション効果をカスタマイズできるようになっています。

HTML/CSS/JSのライブラリをまとめたサイトです。Amber CreativeというWebデベロッパーとUI/UXデザイナーとのユニットが作っているようで、二人の作ったライブラリをまとめて提供する場所のようです。

どのライブラリもレスポンシブ対応で、フラットデザインで作られています。このサイト自体もレスポンシブ＆フラットデザインで、シンプルできれいにデザインされています。

CSS3とJavaScriptを使って立体的効果を加えるための、チュートリアルやライブラリをまとめた記事です。

立体的なエフェクトを使ったスライドショーや、レストランのメニューや本など現実の紙の動きをマネした3D効果などが、Codropsなどからピックアップされています。

Webデザインに役立つjQueryプラグインやライブラリ／ツールなどの情報で、最近公開されたものを中心にまとめた記事です。

レスポンシブなテーブル、CSSだけで作ったローディングアニメーション、PhotoshopでWebデザインするときに役立つツールなどが紹介されています。

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

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

「Minimalist Online Markdown Editor」は、マークダウン形式のテキストを編集できるWebサービスです。

画面が左右に2分割されていて、マークダウンを編集しながら、リアルタイムにプレビューできます。また、プレビューではなくHTMLに変換したコードを表示できるのも便利なところです。

日本語は特に問題なく表示できました。URLを指定して画像を入れた場合、プレビューで画像を表示できます。ちなみに、文字の大きさの設定はありませんが、単純にブラウザの設定で文字サイズを変えれば反映されます。

ログインなどは不要ですぐに使うことができ、非常にシンプルなので、人のマシンでマークダウンの概要を説明するときにも活躍できそうです。

ソースコードはGitHubで公開されています。

渋谷のアップルストアの近くに「楽天カフェ」がオープンしました。「⁠楽天市場」で人気のお取り寄せスイーツが食べられるという女子ウケしそうな面と、高速Wi-Fiやコンセント完備というノマドワーカー（という言い方も古いですかね）にウケそうな面とが同居しているスペースのようです。

ノマドワーカーじゃなくても、スマホの充電をしたい人たちのニーズもありそうです。主要なモバイルデバイスの充電ケーブルは貸してくれるそうで気が利いていますね。

また、楽天koboが大量に置いてあり、楽天カード、楽天マネーEdyはもちろん楽天スマートペイ（SquareやPaypal Hereのようなカード決済サービス）も使えたりと、楽天のプロダクトがてんこ盛りです。

いろいろな楽天のサービスの展示場的な意味合いがある一方、東北楽天ゴールデンイーグルス色は全くないようです。イーグルスが優勝した場合には、セールやイベントをやるのかもしれませんね。