週刊Webテク通信

2013年1月第3週号1位は、Webサイト制作においてスライドショーを使う際のヒント、気になるネタは、「Wi-Fiが繋がらないスポット」あえてPRするキットカットの意表をついた広告

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

1. Tips for Using Slide Shows and User Experience on the Web. - Design for User Experiencehttp://designs4ux.com/tips-on-slides-shows-on-the-web-and-user-experience/

Webサイト制作においてスライドショーを使う際のヒントをまとめています。

以下の項目に分けて解説してありました。

  • Webサイトにおけるビデオとスライドショーの違い
  • タイミングが重要
  • ナビゲーションバーとスライドショーとの一体化
  • ユーザー登録やログインへの誘導としてスライドショーを使う
  • スライドを自動で動かすべきか否か
  • 入れ子あるいは階層に分かれたスライドショー
  • スライドショーと双方向性
  • スライドショーにどの程度のスペースを割り当てるか
図1 スライドショーを使う際の各種ヒント
図1 スライドショーを使う際の各種ヒント

2. 20+ inspirational fixed website navigations | Admire The Web - The very best web design inspirationhttp://admiretheweb.com/articles/20-inspirational-fixed-navigations/

スクロールしても画面上に固定されて残るナビゲーションメニューの、いろいろな例を紹介しています。

視差スクロールを使って1ページ完結で見せていくサイトの普及とともに、この手の固定メニューが定番になってきたように感じます。

図2 固定ナビゲーションのギャラリー
図2 固定ナビゲーションのギャラリー

3. 41 Examples of Sketches and Drawings in Website Layouts | SpyreStudioshttp://spyrestudios.com/41-examples-of-sketches-and-drawings-in-website-layouts/

Webレイアウトの要素にイラストを使用したサイトのギャラリーです。

イラストをただの背景イメージとして使うのではなく、ナビゲーションバーやボタン、検索窓などのUI要素に用いているサイトを紹介しています。

図3 UI要素としてイラストを使用したサイトいろいろ
図3 UI要素としてイラストを使用したサイトいろいろ

4. 25 Examples of Brilliant Responsive Web Designhttp://www.webdesignfact.com/2013/01/brilliant-responsive-web-design.html

レスポンシブWebデザインのショーケースです。PC用とモバイル用のレイアウトが並んで紹介されているのでわかりやすいですね。

モバイル用の幅が狭い画面になったときに、ロゴがセンター揃えになるパターンが流行のようです。

図4 レスポンシブWebデザインのショーケース
図4 レスポンシブWebデザインのショーケース

5. The Ultimate Collection Of Adobe Illustrator Actionhttp://designrshub.com/2013/01/adobe-illustrator-action.html

Adobe Illustratorのアクションを大量に紹介しています。テンプレートやブラシなどのデザイナー向け素材を販売しているGraphicRiverというサイトからセレクトしたものです。1つ3~5ドルくらいで販売しているようです。

Illustrator関連として、立体的で質感のあるIllustratorチュートリアルまとめという記事も参考になりそうです。

図5 Adobe Illustratorのアクションいろいろ
図5 Adobe Illustratorのアクションいろいろ

そのほか、最近の記事の中から、デザインに利用できる素材を紹介している記事3つです。

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

appetite.io - share & discover apps on your iPhonehttp://appetite.io/

iPhoneのスクリーンショットから自動でアプリ一覧を作ってくれるWebサービスです。

ブラウザ上でスクリーンショット画像をアップロードすると、あなたのホーム画面をはめ込んだiPhoneの写真と、アプリ一覧がレイアウトされたページが生成されます。

画像内にあるアプリのアイコンを認識して、アプリ情報を取得しているわけですね。アプリ一覧が生成されるまでほとんど時間がかかりませんし、精度も高いようです。

ただし、アメリカのApp Storeから情報を引っ張っているので、日本でしかリリースされていないアプリは認識されないはずです。もちろん表示も英語です。このサービスを日本語版にして、リンクをアフィリエイトリンクにできるものが登場すれば、大流行するんじゃないかと思いました。

図6 自分のiPhoneのアプリ一覧を作るサービス
図6 自分のiPhoneのアプリ一覧を作るサービス
図7 実際にappetite.ioで作ったアプリ一覧の画面
図7 実際にappetite.ioで作ったアプリ一覧の画面

おすすめ記事

記事・ニュース一覧