週刊Webテク通信

2013年5月第5週号1位は、iOS向けデザインを始めるためのガイド、気になるネタは、米Yahooが Flickr を全面リニューアル、無料で1TBまでアップロード可能に

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

1. Starters Guide to iOS Designhttp://taybenlor.com/2013/05/21/designing-for-ios.html

iOS向けデザインを始めるためのガイドです。

以下の項目に分けて解説されています。

  • Retinaディスプレイでのピクセル数とポイント数
  • 画面遷移のストーリーボード
  • UI構造に焦点を当てたレイアウト
  • ユニバーサルで柔軟な設計
  • インタラクション
  • タイポグラフィ
  • ツールの使用
  • アイコンデザイン
  • テスト
  • 素材の書き出し

参照リンクも数多く掲載してあり、おすすめの便利なツールもいろいろと紹介されています。

図1 iOS向けデザインのスターターガイド
図1 iOS向けデザインのスターターガイド

2. Beyond The Button: Embracing The Gesture-Driven Interface | Smashing UX Designhttp://uxdesign.smashingmagazine.com/2013/05/24/gesture-driven-interface/

ジェスチャー方式のインターフェイスの考察記事です。モバイルデバイスによるタッチとジェスチャーによる操作が、多くの可能性を持っていることが分かってきていることを受けて、これからのインターフェイスを考えようという内容です。

従来のボタンを超えた存在としての、ジェスチャー方式のインターフェイスについて、実例を交えて解説しています。

図2 ジェスチャー方式のインターフェイスの考察
図2 ジェスチャー方式のインターフェイスの考察

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キットいろいろ

4. Case Study: inTacto's 2012 Responsive Greeting Cardhttp://www.awwwards.com/case-study-intacto-s-2012-responsive-greeting-card.html

ウィンドウ幅を変えることでアニメーションするサイトを制作するノウハウを紹介した記事です。

やっていることは意外と単純で、幅によって違った画像を表示しているだけでした。アイデアとイラストのクオリティがポイントですね。

図4 レスポンシブなグリーティングカードサイトのケーススタディ
図4 レスポンシブなグリーティングカードサイトのケーススタディ

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 ページスクロールでコンテンツを展開していくサイト

そのほか、最近の記事の中から、Web用の画像スライスに関する記事を紹介します。

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

Hoverboard » Beautiful portfolios for designers & codershttp://hoverboard.io/

レスポンシブで縦長な、流行りのスタイルのプロフィールページを持てるサービスです。

類似のサービスに比べて機能が豊富で、プロジェクト紹介のページやブログをこのサービス上に持つことが可能です。複数ページを作成できるので、ちょっとしたホームページっぽく使うこともできるかもしれません。

ブログはHTMLでは記述できませんが、マークダウン記法は使えます。なお、ブログのタイトルに日本語を使うとエラーが出て保存できないのですが、一旦英語のタイトルで保存したあと日本語に変えたら保存できました。タイトル部分がURLに入るのが原因のようです。

わたしが試した範囲では、ほかの箇所も日本語はOKでした。別のユーザーをフォローしたり、⁠いいね!」っぽい「Endorse(支持する⁠⁠」ボタンがあったりと、ソーシャルメディアっぽい要素もあります。ただのプロフィールページにとどまらない広がりが持てそうで、要注目なサービスだと感じています。

図6 プロフィールサイトが作れるサービス
図6 プロフィールサイトが作れるサービス
図7 プロフィールページの作例
図7 プロフィールページの作例

おすすめ記事

記事・ニュース一覧