週刊Webテク通信

2012年10月第3週号1位は、セマンティックでレスポンシブなナビゲーションアイコン、気になるネタは、Apple、iOS 6の“時計盗用”問題でスイス連邦鉄道と和解

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

1. The Semantic, Responsive Navicon | Smashing Mobilehttp://mobile.smashingmagazine.com/2012/10/08/the-semantic-responsive-design-navicon/

セマンティックでレスポンシブなナビゲーションアイコンについて解説した記事です。

水平の三本線のアイコンを押すとメニューが展開されるというインターフェイスを、モバイルアプリを中心に最近よく目にします。FacebookのiPhoneアプリなんかでみかけるあれです。

あの三本線のアイコンを、セマンティック(コード上正しく)でレスポンシブ(解像度に依存せずきれいに表示されるよう)に実現するために、以下の4種類の方法が紹介されています。

  1. Webフォントを使う
  2. ユニコード文字として存在する三本線のキャラクターを使う
  3. CSSのボーダーを使って表示する
  4. SVGでベクターグラフィックとして扱う

2は、Android端末では正しく表示されないようです。

どれも、ビットマップ画像は使わず、HTML上にも余計な記述を加えない方法で実現しています。

図1 セマンティックでレスポンシブなナビゲーションアイコン
図1 セマンティックでレスポンシブなナビゲーションアイコン

2. 47 Fun and Useful CSS3 Tutorials and Techniqueshttp://www.1stwebdesigner.com/css/45-useful-css3-tutorials-and-techniques/

CSS3を活用したチュートリアルやテクニックをまとめた記事です。

ビジュアル的にかっこいいものが作れそうな作例が、多数紹介されています。

図2 CSS3のチュートリアルやテクニックいろいろ
図2 CSS3のチュートリアルやテクニックいろいろ

3. Orange in Web Design | Splashnologyhttp://www.splashnology.com/article/orange-in-web-design/6701/

オレンジ色をメインカラーとしたWebデザインのギャラリーです。

活発な印象を与えるオレンジ色は、Webデザインでよく使われる色の一つだと思います。彩度を落とした落ち着いた感じのオレンジ色もいいですね。

図3 オレンジ色を使ったWebデザイン
図3 オレンジ色を使ったWebデザイン

4. INTERFACE SKETCHhttp://interfacesketch.tumblr.com/

手書きのワイヤーフレームやサイトのスケッチをするときに役立つ、ブラウザの枠とグリッドが表示されたPDFファイルを提供しています。

Webブラウザ、iPad、iPhone4、iPhone 5、Nexus 7、Android phoneなどに分けてテンプレートが用意されているので、お望みのファイルをプリントアウトして使用します。

プリントアウトせずに、画像としてグラフィックソフトで使っても便利かもしれません。

図4 手書きワイヤーフレーム用のテンプレート集
図4 手書きワイヤーフレーム用のテンプレート集

5. 15 TED Talks Every Web Designer Should Watch - DesignModo http://designmodo.com/ted-web-design/

Webデザイナーに役立ちそうな、TEDのプレゼン動画をまとめた記事です。

デザインに関すること、UIに関することなど、興味深い内容ばかりですね。字幕を「Japanese」にすれば、日本語字幕が表示されます。

図5 Webデザイナーに役立ちそうなTEDのプレゼンいろいろ
図5 Webデザイナーに役立ちそうなTEDのプレゼンいろいろ

そのほか、最近の記事の中から、気になる記事を紹介します。

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

rvl.io: Presentations Made Beautifulhttp://www.rvl.io/

rvl.ioは、オンライン上でプレゼンスライドを作ることができるサービスです。

HTML+CSS+JavaScriptでプレゼンスライドを作れる、reveal.jsというフレームワークをベースとしています。

文字のスタイルを決めて、画像を貼り付けるくらいで、それほどできることは多くないのですが、その分迷わずに制作できそうです。

日本語も表示できたのですが、一度保存してから再度開いたら文字化けしてしまいました

図6 オンライン上でプレゼンスライドを作ることができるサービス
図6 オンライン上でプレゼンスライドを作ることができるサービス

おすすめ記事

記事・ニュース一覧