週刊Webテク通信

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

ネットで見かけた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関連のデザインツールのまとめ

おすすめ記事

記事・ニュース一覧