週刊Webテク通信

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

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

ネットで見かけた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 日本語の文章ミスのチェックツール

今週の気になるWebネタ

ユニクロが「Square」導入,スタッフの手元で決済可能に - ケータイ Watchhttp://k-tai.impress.co.jp/docs/news/20131004_618191.html

スマートフォンでクレジットカード決済ができるSquareを,ユニクロが導入するとのこと。店員がiPadを使って接客し,ついでにiPadをレジ代わりにも使えるということのようです。

まずはユニクロ銀座店の中にオープンする特別フロアで使用されるということですが,全店舗に拡大となれば相当な数のiPadが導入されることになりますね。

ところでわたしもSquareリーダーを入手したのですが,まだ使ったことはありません。自分のクレジットカードで使ってみようかとも思ったのですが,3.25%の手数料を取られるのでちょっと迷っていました。

指定の銀行であれば翌営業日,その他の銀行でも7営業日以内という決済金額の振り込みの早さがSquareのウリです。ということは,キャッシング感覚で自分のクレジットカードからすぐに現金化できるということですよね。もちろんそんな使い方はやっちゃいけないはずですので,やっぱり自分のクレジットカードで試すのはダメだなという結論に至ったわたしです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入