ネットで見かけたWebテク
1. Starters Guide to iOS Designhttp://taybenlor.com/2013/05/21/designing-for-ios.html
iOS向けデザインを始めるためのガイドです。
以下の項目に分けて解説されています。
- Retinaディスプレイでのピクセル数とポイント数
- 画面遷移のストーリーボード
- UI構造に焦点を当てたレイアウト
- ユニバーサルで柔軟な設計
- インタラクション
- タイポグラフィ
- ツールの使用
- アイコンデザイン
- テスト
- 素材の書き出し
参照リンクも数多く掲載してあり、
![図1 iOS向けデザインのスターターガイド 図1 iOS向けデザインのスターターガイド](/assets/images/design/clip/01/weekly-web-tech/201305/30/thumb/TH800_001.jpg)
2. Beyond The Button: Embracing The Gesture-Driven Interface | Smashing UX Designhttp://uxdesign.smashingmagazine.com/2013/05/24/gesture-driven-interface/
ジェスチャー方式のインターフェイスの考察記事です。モバイルデバイスによるタッチとジェスチャーによる操作が、
従来のボタンを超えた存在としての、
![図2 ジェスチャー方式のインターフェイスの考察 図2 ジェスチャー方式のインターフェイスの考察](/assets/images/design/clip/01/weekly-web-tech/201305/30/thumb/TH800_002.jpg)
3. A Collection of Free Flat UI Kits For A Resourceful Designerhttp://www.designresourcebox.com/a-collection-of-free-flat-ui-kits-for-a-resourceful-designer/
フラットデザインのUIキットが多数紹介されています。
フラットなインターフェイスを自らデザインする際の参考にもなりますね。
![図3 デザイナーのためのフラットデザインUIキットいろいろ 図3 デザイナーのためのフラットデザインUIキットいろいろ](/assets/images/design/clip/01/weekly-web-tech/201305/30/thumb/TH800_003.jpg)
4. Case Study: inTacto's 2012 Responsive Greeting Cardhttp://www.awwwards.com/case-study-intacto-s-2012-responsive-greeting-card.html
ウィンドウ幅を変えることでアニメーションするサイトを制作するノウハウを紹介した記事です。
やっていることは意外と単純で、
![図4 レスポンシブなグリーティングカードサイトのケーススタディ 図4 レスポンシブなグリーティングカードサイトのケーススタディ](/assets/images/design/clip/01/weekly-web-tech/201305/30/thumb/TH800_004.jpg)
5. 18 Websites that Take Scrolling to the Next Level | Inspirationhttp://webdesignledger.com/inspiration/18-websites-that-take-scrolling-to-the-next-level
ページスクロールでコンテンツを展開していくサイトのギャラリーです。
視差スクロールの作例としてまとめられることの多いこの手のサイトですが、
![図5 ページスクロールでコンテンツを展開していくサイト 図5 ページスクロールでコンテンツを展開していくサイト](/assets/images/design/clip/01/weekly-web-tech/201305/30/thumb/TH800_005.jpg)
そのほか、
- Slicyはあっと驚くほど便利だった。 | colopixie
画像スライスに特化したアプリケーションの紹介。 - Generate Web Assets - Adobe Fireworks Extensions, Commands and Panels - johndunning.
com
自動スライスを実現するFireworks用のエクステンションの紹介。
先週の気になるWebサービス
Hoverboard » Beautiful portfolios for designers & codershttp://hoverboard.io/
レスポンシブで縦長な、
類似のサービスに比べて機能が豊富で、
ブログはHTMLでは記述できませんが、
わたしが試した範囲では、
![図6 プロフィールサイトが作れるサービス 図6 プロフィールサイトが作れるサービス](/assets/images/design/clip/01/weekly-web-tech/201305/30/thumb/TH800_006.jpg)
![図7 プロフィールページの作例 図7 プロフィールページの作例](/assets/images/design/clip/01/weekly-web-tech/201305/30/thumb/TH800_007.jpg)