週刊Webテク通信

2013年10月第1週号1位は、Microsoft、Google、Appleのフラットデザインのアプローチについて、気になるネタは、ユニクロが「Square」導入、スタッフの手元で決済可能に

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

1. A Look at Microsoft, Google and Apple’s Approach to Flat Designhttp://www.hongkiat.com/blog/google-apple-microsoft-flat-design/

Microsoft、Google、Appleのフラットデザインへのアプローチについて比較した記事です。

MicrosoftのWindows 8のモダンUIのコンセプトは、ホンモノのデジタルインターフェイス(⁠⁠authentically digital⁠⁠ interface)です。影、光沢、テクスチャを排除し、地下鉄の案内板に影響を受けたアイコンとタイポグラフィを使っています。グリッドで配置され、フルスクリーンでの操作、特にタッチスクリーンでの操作を考慮しています。

Googleは、Google Nowで見られるような、ミニマルなカードタイプのインターフェイスを採用する傾向にあるようです。フラットデザインをベースにしつつ、より快適で使いやすいものとするため、ちょっとだけグラデーションやシャドウを使っています。

Appleも、iOS 7でフラットな雰囲気のデザインを採用しましたが、ぼやけた半透明のレイヤーを使ったり、視差効果で奥行きと動きを与えたりと、新鮮さを取り入れています。

この三社によるUIデザインの傾向は、Webデザインにも大きな影響を与えるはずです。レスポンシブやマルチデバイス向けデザインという意味でも、Microsoft、Google、Appleによるデザインのアプローチには注目したいですね。

図1 Microsoft、Google、Appleのフラットデザインのアプローチについて
図1 Microsoft、Google、Appleのフラットデザインのアプローチについて

2. 20 Resources for Beginner Designers & Developers | Resources http://webdesignledger.com/resources/20-resources-for-beginner-designers-developers

Webデザイナー&デベロッパーのための素材、ツールなどを大量に紹介しています。記事タイトルは「初心者のための」となっていますが、初心者じゃなくても利用したいものがたくさんありそうです。

アイコンやリボン、飾り罫、テクスチャー、フォントなど、デザイン素材が豊富に掲載されていました。

図2 Web制作のための素材、ツールなど
図2 Web制作のための素材、ツールなど

3. Animated Border Menus | Codropshttp://tympanus.net/codrops/2013/09/30/animated-border-menus/

クリックで画面の端に登場するメニューを作るチュートリアル記事です。

モバイルアプリのUIでよく見かける、横からスライドして現れるメニューのアレンジ版といった感じのものです。

上下左右にボーダーが現れるのは共通で、横に垂直メニューが配置されるものや、下部に水平メニューが現れるものなど6つのパターンが用意されています。

図3 クリックで画面の端に登場するメニューを作るチュートリアル
図3 クリックで画面の端に登場するメニューを作るチュートリアル

4. 20 Free iOS 7 User Interface Kits and Templateshttp://designrshub.com/2013/09/free-ios-7-user-interface-kits.html

ダウンロードして使えるiOS 7のUIデザイン素材を大量に紹介しています。

フォーマットは、Photoshop形式、Illustrator形式のほか、Fireworksの代替ソフトとして注目されたSketch用ファイルもありました。

図4 iOS 7のUIデザイン素材を多数紹介
図4 iOS 7のUIデザイン素材を多数紹介

5. 15 Super Creative & Unique Web Designshttp://www.webdesignfact.com/2013/10/super-creative-unique-web-designs.html

クリエイティブでユニークなWebデザインのギャラリーです。

デザインに凝っていても、構造はシンプルで操作に迷わないものが多いですね。

図5 クリエイティブでユニークなWebデザインのギャラリー
図5 クリエイティブでユニークなWebデザインのギャラリー

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

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

Enno - 日本語のタイポ/変換ミス/誤字脱字エラーをチェックhttp://enno.jp/

Ennoは、日本語の文章のミスをチェックしてくれるWebサービスです。

ミスの可能性のある箇所をハイライト表示し、ハイライトにマウスオーバーすると解説が表示されます。解説が丁寧でちょっと面白いです。無駄なスペースなども指摘してくれます。

変換ミスや誤字脱字のパターンを募集しているので、応募が増えるとどんどんチェック能力がアップルするというわけですね。これはぜひチェックして欲しいという誤字の例などあれば、登録の応募をするとよいでしょう。もちろん、必ず採用されるとは限らないようです。

図6 日本語の文章ミスのチェックツール
図6 日本語の文章ミスのチェックツール

おすすめ記事

記事・ニュース一覧