週刊Webテク通信

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

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

ネットで見かけた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 オンライン上でプレゼンスライドを作ることができるサービス

今週の気になるWebネタ

Apple,iOS 6の“時計盗用”問題でスイス連邦鉄道と和解 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1210/13/news008.html

iOS 6でリニューアルされたiPad標準の「時計」アプリのデザインについて,アップルはスイス連邦鉄道にライセンス使用料を支払う契約を結んだそうです。

無断で使用されたことについて,スイス連邦鉄道が商標権を主張していたわけですが,すんなりとスピード解決したようですね。

勝手に使って後からお金を払えばいいのかという疑問もありますが,それより,このデザインのライセンスを受けて時計を販売しているスイスのMondaine(モンディーン)の時計が「あのアップルが認めたデザイン」として注目を集めるんじゃないでしょうか。

モンディーンのサイトを見ると,腕時計や懐中時計,壁掛け時計もあって,なかなか魅力的です。アップルファンなら物欲をそそられる商品ではないでしょうか。そのうちアップルマークの入ったコラボモデルなんか発売されたりして。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入