週刊Webテク通信

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

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

ネットで見かけた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ジェネレーター

今週の気になるWebネタ

キヤノン,超広角レンズ搭載の“自分撮り用”ビデオカメラ「iVIS mini」 日経トレンディネットhttp://trendy.nikkeibp.co.jp/article/news/20130902/1051862/

キヤノンから「自分撮り」に適したビデオカメラが登場しました。液晶を自分に向けた状態で自立させて撮影できるようになっています。超広角レンズを搭載しているため,手持ちなど距離があまり無い状態で自分撮りをしても,しっかり背景まで収まるようになっています。

まさにYouTuber(ユーチューバー,YouTubeに動画をアップしてる人をそう呼ぶらしい)のためのビデオカメラですね。ダンスや演奏の様子を撮影するのに向いているとのことですし,YouTubeでの1ジャンルとなっている開封動画(買った商品を開封してセットアップなどをするところを紹介した動画)の撮影にも使えるでしょう。

三脚を付けたスマートフォンのインカメラでも十分というケースもあるでしょうが,画質がいいのと超広角レンズというところで,かなり需要はありそうです。まずは実機を見てみたいという人も多いと思いますが,⁠キヤノンオンラインショップ」での限定販売ということで,店頭では見られないんでしょうね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入