週刊Webテク通信

2013年9月第2週号1位は、ページの先頭に戻るリンクについての考察、気になるネタは、キヤノン、超広角レンズ搭載の“自分撮り用”ビデオカメラ「iVIS mini」

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

1. ページの先頭に戻るリンク ? Website Usability Infohttp://website-usability.info/2013/09/entry_130904.html

「ページの先頭に戻るリンク」について考察した記事です。

ページの先頭に戻るリンクは便利な反面、本来のそのページの誘導の主目的ではないので、そんなに目立つ必要はないし、なくてもいいんじゃないかということです。

「この手の機能はコンテンツ側 (Web ページ) ではなくユーザーエージェント側 (ブラウザやデバイス) で持つべき」というのは全くもってその通りなのですが、機能はあっても知らない人が多いという実態もあるようです。

「リンクを別ウィンドウで開く」も、ブラウザの機能を使ってユーザー側で自由に制御できるにも関わらず、知らない人が多いからという理由もあっていまだに求められる動作だったりしますね。

なお、この文脈で取り上げるのもなんですが、クリエイティブな「ページの先頭に戻るリンク」を集めた記事もありました。

もちろん、スクロール操作で誘導するシングルページのサイトでは、先頭に戻るリンクが目立っていてもいいでしょうし、ケースバイケースということですね。

図1 ページの先頭に戻るリンクについて考察した記事
図1 ページの先頭に戻るリンクについて考察した記事

2. How to speed up responsive websites | Webdesigner Depothttp://www.webdesignerdepot.com/2013/08/how-to-speed-up-responsive-websites/

レスポンシブなWebサイトの、読み込み速度を早くする方法に関する記事です。

レスポンシブWebデザインの場合、どんなデバイスでも同じファイルを読み込むことになるため、スマートフォンなどでの表示が遅くなる懸念があります。

この記事では、以下のようなことについて解説していました。

  • 条件分岐でロードさせる
  • デバイス毎に最適化された画像を表示する
  • デバイス毎に最適化されたテキストを表示する
図2 レスポンシブなWebサイトのスピードアップについて
図2 レスポンシブなWebサイトのスピードアップについて

3. 75+ Free CSS3, HTML5 & jQuery Search Forms | Designrazzihttp://www.designrazzi.com/2013/free-css-html5-jquery-search-forms/

CSS3、HTML5とjQueryでデザインした、サーチボックスのUIが多数紹介されています。

入力途中にボックス内に×印が表示され、そこを押すとクリアされるなど、実装するのが面倒そうな便利な機能が付いているものも色々あります。

図3 サーチボックスのUIいろいろ
図3 サーチボックスのUIいろいろ

4. 30 Super Cool Brown Themed Website Designs for Inspiration : Creative Beaconhttp://www.creativebeacon.com/30-super-cool-brown-themed-website-designs-for-inspiration/

茶色をテーマカラーとしたWebデザインのギャラリーです。

薄い茶色、濃い茶色、赤みががった茶色と、いろいろな茶色が使われていました。

図4 茶色がテーマカラーのWebデザインのギャラリー
図4 茶色がテーマカラーのWebデザインのギャラリー

5. 19 Websites to Download Free Stock Video Intros & Footagehttp://www.hongkiat.com/blog/download-free-stock-video-intros/

フリーのビデオ素材をダウンロードできるサイトをまとめています。

最近はWebサイトに動画を使うケースも増えていますし、Web制作者でも動画を作るケースが増えてくるのかもしれません。

図5 フリーのビデオ素材をダウンロードできるサイトいろいろ
図5 フリーのビデオ素材をダウンロードできるサイトいろいろ

そのほか、最近の記事の中から、スマートフォンと連動して使うカメラのニュースを紹介します。

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

Create CSS3 - Easy CSS3 Generatorhttp://www.createcss3.com/

Create CSS3は、シンプルなCSS3ジェネレーターです。プレビューで確認しながら、CSS3の各プロパティの指定をすることができます。

角丸やシャドウなどはもちろん、Transformにも対応しています。Transformの値を設定すると、アニメーションして適用されるのがいいですね。

指定すると、すぐにCSSのコードが生成されます。複数のプロパティを設定した場合には、どんどんコードに追加されるようになっています。

プレビューされる内容やサイズを変えられないなど、できることは限られていますが、シンプルで使い方が分かりやすいジェネレーターです。

図6 シンプルなCSS3ジェネレーター
図6 シンプルなCSS3ジェネレーター

おすすめ記事

記事・ニュース一覧