週刊Webテク通信

2014年1月第4週号 1位は,今年Webサイトをデザインし直す必要性について,気になるネタは,Macintosh 30周年,Appleが特設ページを開設 - 真鍋大度氏などが登場

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

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

1. Why You Should Redesign Your Business Website In 2014http://www.spinxdigital.com/blog/why-you-should-redesign-your-business-website-in-2014/

なぜ今Webサイトをデザインし直す必要があるのかを解説した記事です。

  • レスポンシブWebデザイン
  • モバイルアプリ
  • HTML5
  • Retinaディスプレイと4K解像度
  • OSブラウザ(Chrome OS)

などが最近の新しいトレンドとして,タッチデバイスの普及などWebを取り巻く環境も変化していることから,Webサイトのリデザインが求められていることを説明しています。

また,デザインし直すことが必要かどうかの判断基準として,以下の問いかけが掲載されていました。

  1. 信頼でき,権威を構築するように作られているか
  2. 最近のトレンドに合ったデザインとなっているか
  3. ユーザーフレンドリーか
  4. ビジネスの目的を伝えるものになっているか
  5. 時代遅れだと感じるか

図1 今年Webサイトをデザインし直す必要性について

図1 今年Webサイトをデザインし直す必要性について

2. 20 Best Responsive Navigation and Menu Patterns - 9KDesignshttp://www.9kdesigns.com/resources/20-responsive-navigation-and-menu-patterns

レスポンシブなナビゲーションメニューを作るための,jQueryプラグインなどを多数紹介しています。

すっかりおなじみになった,スライドして現れる開閉メニューなど,パソコンでもモバイル端末でも使いやすいことを考慮したメニューが探せます。

また,CSS3&jQueryを使ったメニューを多数紹介したList of Free CSS3 and jQuery Menus Pluginsという記事もありました。

図2 レスポンシブなナビゲーションメニューいろいろ

図2 レスポンシブなナビゲーションメニューいろいろ

3. 10 jQuery Plugin to Create Pinterest-like Layout | Smashmagzhttp://smashmagz.com/jquery-pinterest-layout/

Pinterest風のレイアウトを実現するjQueryプラグインを10個紹介しています。画像だけを並べたいのか,テキストやムービーなども含めた要素を並べたいのかによって,選ぶプラグインが違ってきますね。

Masonry,Wookmarkが有名だと思いますが,ほかにもいろいろありました。

図3 Pinterest風レイアウトを実現するjQueryプラグイン10選

図3 Pinterest風レイアウトを実現するjQueryプラグイン10選

4. jQuery and CSS3 Hover Effects Plugins and Tutorials - eWebDesignhttp://ewebdesign.com/jquery-css3-hover-effects/

ロールオーバー効果を与える,jQueryプラグインやチュートリアルを紹介した記事です。

ロールオーバーで追加情報が表示されるものや,画像にエフェクトがかかるものなど,多数の面白い効果が紹介されています。

図4 ロールオーバー効果を与えるjQueryプラグイン&チュートリアル

図4 ロールオーバー効果を与えるjQueryプラグイン&チュートリアル

5. Creative Parallax Scrolling Exampleshttp://dizyne.net/creative-parallax-scrolling-examples/

視差スクロールを使ったクリエイティブなサイトのギャラリーです。

一時的な流行ではなく,すっかり定着した感のあるシングルページ&視差スクロールのサイトが,多数紹介されています。

図5 視差スクロールを使ったサイトのギャラリー

図5 視差スクロールを使ったサイトのギャラリー

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

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

NHK番組表APIhttp://api-portal.nhk.or.jp/ja

今回は,Webサービスではありませんが「NHK番組表API」を紹介します。

NHKが,全国のNHKの放送番組のタイトルや放送時間などの番組情報を,APIで提供開始しました。JSONファイルで取得することができます。APIは4種類あるんですが,それぞれパラメータを指定して簡単に試せるようになっています。

これを利用して,いろいろなWebサービスやモバイルアプリができそうです。民放もあとに続いてくれるとうれしいですね。

さっそく番組情報をツイートする非公式のTwitterボットアカウントができていました。

図6 NHKが公式で提供する番組情報API

図6 NHKが公式で提供する番組情報API

今週の気になるWebネタ

Macintosh 30周年,Appleが特設ページを開設 - 真鍋大度氏などが登場 | マイナビニュースhttp://news.mynavi.jp/news/2014/01/25/051/

1984年1月24日が初代Macintoshが発表された日とのことで,Appleが30周年の特設サイトを開設しています。最近は「Mac」が正式名称になってしまったので,⁠Macintosh」という言葉自体がなつかしい感じです。

特設サイトには,Macユーザーとしていろいろな人が登場しているのですが,パフュームのプロジェクションマッピングでおなじみの真鍋大度も登場していました。

また,この特設サイトにMacのアイコンフォントが隠されており,ダウンロード可能であることも話題になっています。

「Your first Mac」のコーナーは,自分のはじめてのMacの機種と使用用途を投稿できるアンケートになっています。年号のスライダーを動かすと,使用用途の変遷が見られる「What they did with it」のところが面白いです。1984年は教育とDTPが大きい円になっているんですが,1994年以降はインターネット&メールが一番大きな円になっています。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入