週刊Webテク通信

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

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

ネットで見かけた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 プロフィールページの作例

今週の気になるWebネタ

米Yahooが Flickr を全面リニューアル,無料で1TBまでアップロード可能に - Engadget Japanesehttp://japanese.engadget.com/2013/05/20/yahoo-flickr-1tb/

Tumblrを買収したことで話題の米Yahooですが,Flickrの大幅なリニューアルも発表しました。無料ユーザーでも1TBまで無料で使えるとのことで,その太っ腹な大容量がウリの一つとなっています。

しかし,従来のProユーザーからは,これまでは容量無制限だったのに,そのプランはなくなってしまうのかという不安の声が上がりました。実はこれまでの無料ユーザーも,ひと月あたりのアップロード容量に制限はあったものの,総容量については無制限だったんですよね。

結局のところ,Proユーザーは更新し続ける限り容量無制限が継続できることがはっきりして,胸をなで下ろしたユーザーも多かったようです。今後新たに無制限プランに登録することはできないということで,そういった特殊なプランが将来ずっと提供され続けるのかちょっと不安ではありますが,まずは一安心といったところです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入