週刊Webテク通信

2014年3月第3週号 1位は，IllustratorでWebデザインする際の時短テクニック，気になるネタは，意図不明の偽アプリ続出，マツキヨもピザーラも

Webテク, Webデザイン, Web広告, Illustrator, Google, なりすまし, HTML5

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2014年3月10日～3月16日の間に見つけた記事のベスト5です。

1. Speed Design with Illustrator. 14 tips to create interfaces in minuteshttp://www.designsprint.net/

Adobe Illustratorでインターフェイスをデザインするテクニックを紹介しています。Illustratorを使ってスピーディーにWebデザインを行うためのヒントが豊富です。

  1. テキストに合わせて大きさが可変するボタン
  2. 段落スタイルの利用
  3. グローバルスウォッチでカラーを一括変換
  4. シンボルを利用したユニット式のデザイン
  5. アイコンフォントのアイコンを字形パネルで選択
  6. CSSフレームワークのカラム分けをグリッドで用意しておく
  7. グリッドにスナップ（吸着）するように設定
  8. アートボードを使い複数のページを1つのドキュメントで管理する
  9. 9スライスを使ってリサイズ時にオブジェクトが崩れないようにする
  10. 画像のマスクはIllustrator上で
  11. テンプレートを用意しておく
  12. ボタンやメニューなどのグラフィックスタイルを用意しておく
  13. テキストの回りこみ
  14. 角の形状を個別に指定可能（Illustrator CCから）

といった各項目について，アニメーションGIFを使って説明しており，全体を紹介するムービーも用意されています。このへんの見せ方がとてもよくできていますね。

ポイントを日本語に要約した記事もありました。

図1　IllustratorでWebデザインする際の時短テクニック

図1　IllustratorでWebデザインする際の時短テクニック

2. DB Freebies Design Resources from Behance and Dribbblehttp://dbfreebies.co/

DribbbleとBehanceからフリー素材を探せるサイトです。

クリエイターのポートフォリオ＆ソーシャルメディアであるDribbbleとBehanceに掲載された作品から，無料配布されている素材がまとめられています。アイコン，UIキット，モックアップなど，カテゴリで絞り込むこともできます。

図2　DribbbleとBehanceからフリー素材を探せるサービス

図2　DribbbleとBehanceからフリー素材を探せるサービス

3. HTML5 Cross Browser Polyfills ・ Modernizr/Modernizr Wikihttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

HTML5の新要素やAPIについて，対応していない古いブラウザでの代替手段をまとめたリストです。

Polyfillsとは，ブラウザに実装されていない機能を提供するためのコードのことだそうです。ここでは，古いブラウザでは対応していない機能を実現するためのJavaScriptライブラリやフレームワークなどを指しています。

図3　HTML5の新要素の古いブラウザでの代替手段まとめ

図3　HTML5の新要素の古いブラウザでの代替手段まとめ

4. 25 Examples of Modern Minimal Web Designhttp://speckyboy.com/2014/03/14/modern-minimal-web-design/

ミニマルなWebデザインのギャラリーです。

見た目はシンプルながらも，それなりの仕掛けがあるサイトが多いようです。

図4　ミニマルなWebデザインのギャラリー

図4　ミニマルなWebデザインのギャラリー

5. Sign In / Login UI Designs | Inspiration | Graphic Design Junctionhttp://graphicdesignjunction.com/2014/03/sign-in-login-app-ui-designs/

モバイルアプリのサインイン／ログインのUIデザインのギャラリーです。

Dribbbleに投稿されているコンセプトデザインをまとめたもので，実際のアプリで使われているものではないようです。

図5　サインイン／ログインのUIデザインのギャラリー

図5　サインイン／ログインのUIデザインのギャラリー

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

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

12 Best Bootstrap Design Toolshttp://inspiretrends.com/12-best-bootstrap-design-tools/

今回は，Bootstrap関連のデザインツールをまとめた記事を紹介します。Bootstrapベースのページをレイアウトできるるサービスや，ボタンなどのパーツを作るサービスなどが掲載されています。

Bootstrap Designerは有料のツールで，豊富なテンプレートをベースにサイトを作ることができます。自分の作ったテンプレートを販売することもできるようです。

また，BootstrapベースのサイトをデザインできるEaselは，GitHubが買収したことでも話題になりました。

わたしはフロントエンドフレームワークではBootstrap派ではなくFoundation派なのですが，こういったツールや情報の充実度ではBootstrapが群を抜いていることは認めざるをえないですね。

図6　Bootstrap関連のデザインツールのまとめ

図6　Bootstrap関連のデザインツールのまとめ

今週の気になるWebネタ

意図不明の偽アプリ続出，マツキヨもピザーラも : ニュース : ネット＆デジタル : YOMIURI ONLINE（読売新聞）http://www.yomiuri.co.jp/net/news0/national/20140316-OYT1T00008.htm

「ピザーラ」や「マツモトキヨシ」などの非公認アプリがApp Storeで配信されたそうです。危害を与えるアプリではないそうですが，将来のアップデートで不正なアプリに更新される手口ではないかとのこと。

新たなサービスが流行るたびに偽物・なりすましが登場しますが，なりすましTwitterやなりすましFacebookに続き，なりすましアプリもどんどん登場してしまうのかもしれません。ファンが芸能人の海賊版アプリをリリースするなんてこともあるかもしれませんね。

なお，この記事書いてから気づいたのですが，これらの海賊版アプリが登場したのは今年の1月くらいのことで，当時すでにニュース記事になっていました。ここで紹介されたアプリは，さすがに今は削除されているようです。

Webテク, Webデザイン, Web広告, Illustrator, Google, なりすまし, HTML5

著者プロフィール

芦之由（あしのよし）

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

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

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